Adding Tab Table Filters in FilamentPHP Panels: A Step-by-Step Guide

In this tutorial, we'll explore how to incorporate tab filters into FilamentPHP resources. We'll not only add the record count but also include an icon for visual enhancement.

Throughout this guide, we'll use the UserResource as example to demonstrate the implementation of tab filters in FilamentPHP resources.

To add tabs, open your ListUsers.php file, located in UserResource/Pages/ListUsers.php, and add a getTabs method that returns an array:

public function getTabs(): array
{
    return [
        //
    ];
}

In this tutorial, we'll add two tabs: one to display all users and another to specifically show banned users.

We'll use the Tab class to add new tabs.

use Filament\Resources\Components\Tab;

public function getTabs(): array
{
    return [
        'all' => Tab::make('All Users'),
        'banned' => Tab::make('Banned Users'),
    ];
}

To filter out the banned users, we'll use the modifyQueryUsing method.

use Filament\Resources\Components\Tab;
use Illuminate\Contracts\Database\Eloquent\Builder;

public function getTabs(): array
{
    return [
        'all' => Tab::make('All Users'),

        'banned' => Tab::make('Banned Users')

            ->modifyQueryUsing(fn (Builder $query) => $query->whereNotNull('banned_at')),
    ];
}

To add icons and badges, we'll use the icon and badge methods.

use Filament\Resources\Components\Tab;
use Illuminate\Contracts\Database\Eloquent\Builder;
use App\Models\User;

public function getTabs(): array
{
    return [
        'all' => Tab::make('All Users')
            ->icon('heroicon-o-users'),
        'banned' => Tab::make('Banned Users')
            ->icon('heroicon-o-no-symbol')
            ->badge(fn () => User::query()->whereNotNull('banned_at')->count())
            ->modifyQueryUsing(fn (Builder $query) => $query->whereNotNull('banned_at')),
    ];
}

You will now see two tabs: one for all users and another for banned users