Tabs Over the List Table

2024-07-09

Some resources might have too much information to display. In that case - we can use Tabs to filter them out for our users. Also, did you know you can have count badges on tabs?

We must modify our List page to add Tabs to your table. In our case, this is ListTasks, as we want to add tabs to the Task table:

app/Filament/Resources/TaskResource/Pages/ListTasks.php

use Filament\Resources\Components\Tab;
 
// ...
 
public function getTabs(): array
{
$tabs = [];
 
$tabs[] = Tab::make('All Tasks')
// Add badge to the tab
->badge(Task::count());
// No need to modify the query as we want to show all tasks
 
return $tabs;
}

Or, if we want to add a Tab for "My Tasks", which would filter tasks by the currently authenticated user:

app/Filament/Resources/TaskResource/Pages/ListTasks.php

use Filament\Resources\Components\Tab;
 
// ...
 
public function getTabs(): array
{
$tabs = [];
 
// Conditionally add a tab for non-admin users
if (!auth()->user()->isAdmin()) {
$tabs[] = Tab::make('My Tasks')
// Add badge to the tab
->badge(Task::where('user_id', auth()->id())->count())
// Modify the query only to show tasks for the current user
->modifyQueryUsing(function ($query) {
return $query->where('user_id', auth()->id());
});
}
 
$tabs[] = Tab::make('All Tasks')
// Add badge to the tab
->badge(Task::count());
// No need to modify the query as we want to show all tasks
 
return $tabs;
}

Of course, we can add status-based tabs as well:

app/Filament/Resources/TaskResource/Pages/ListTasks.php

use Filament\Resources\Components\Tab;
 
// ...
 
public function getTabs(): array
{
$tabs = [];
 
// Conditionally add a tab for non-admin users
if (!auth()->user()->isAdmin()) {
$tabs[] = Tab::make('My Tasks')
// Add badge to the tab
->badge(Task::where('user_id', auth()->id())->count())
// Modify the query only to show tasks for the current user
->modifyQueryUsing(function ($query) {
return $query->where('user_id', auth()->id());
});
}
 
$tabs[] = Tab::make('All Tasks')
// Add badge to the tab
->badge(Task::count());
// No need to modify the query as we want to show all tasks
 
$tabs[] = Tab::make('Completed Tasks')
// Add badge to the tab
->badge(Task::where('is_completed', true)->count())
// Modify the query only to show completed tasks
->modifyQueryUsing(function ($query) {
return $query->where('is_completed', true);
});
 
$tabs[] = Tab::make('Incomplete Tasks')
// Add badge to the tab
->badge(Task::where('is_completed', false)->count())
// Modify the query only to show incomplete tasks
->modifyQueryUsing(function ($query) {
return $query->where('is_completed', false);
});
 
return $tabs;
}

Of course, there are more things you can do! Check out the Filament documentation for more information.


This example is taken from our Filament: CRM: Customer Management System

A few of our Premium Examples: