Filament: Tabs Over the List Table

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