Filament: Click on Widget - Auto-Update Table Filter

Let me show you one Filament "trick". In your resource list, you might have some stats widgets. What if you could click on them and set the tables filter according to the widget?

See this table with the widgets above? In this example, we will make the Total admins and Total managers widgets clickable.

The widgets are very simple. Admin and Manager are just boolean fields in the users table is_admin and is_manager respectively. The starter widget would look like this:

app/Filament/Resources/UserResource/Widgets/UserOverview.php:

use App\Models\User;
use Filament\Widgets\StatsOverviewWidget\Card;
use Filament\Widgets\StatsOverviewWidget as BaseWidget;
 
class UserOverview extends BaseWidget
{
    protected function getCards(): array
    {
        return [
            Card::make('Total users', User::count()),
            Card::make('Total admins', User::where('is_admin', true)->count()),
            Card::make('Total managers', User::where('is_manager', true)->count()),
        ];
    }
}

First, let's make cards clickable. For this, we need to add the extraAttributes() method to the card.

class UserOverview extends BaseWidget
{
    protected function getCards(): array
    {
        return [
            Card::make('Total users', User::count()),
            Card::make('Total admins', User::where('is_admin', true)->count())
                ->extraAttributes([ 
                    'wire:click' => '$emit("filterUpdate", "is_admin")',
                    'class' => 'transition hover:text-primary-500 cursor-pointer',
                ]), 
            Card::make('Total managers', User::where('is_manager', true)->count())
                ->extraAttributes([ 
                    'wire:click' => '$emit("filterUpdate", "is_manager")',
                    'class' => 'transition hover:text-primary-500 cursor-pointer',
                ]), 
        ];
    }
}

So, what are we doing here?

• First, we add the wire:click element which when clicked will fire the event filterUpdate and will send which filter to update.
• Second, we add CSS classes, so that the user when will hover the mouse over the widget, will see that it has some action.

Now, we need to add an event listener to the ListRecords page.

app/Filament/Resources/UserResource/Pages/ListUsers.php:

class ListUsers extends ListRecords
{
    protected static string $resource = UserResource::class;
 
    protected $listeners = ['filterUpdate' => 'updateTableFilters']; 
 
    protected function getActions(): array
    {
        return [
            Actions\CreateAction::make(),
        ];
    }
 
    protected function getHeaderWidgets(): array
    {
        return UserResource::getWidgets();
    }
 
    public function updateTableFilters(string $filter): void 
    { 
        $this->tableFilters[$filter]['isActive'] = true; 
    } 
}

Now what we added here:

• First, event listener. When this component picks up the filterUpdate event, it will call the updateTableFilters() method.
• Next, in the updateTableFilters() method we set table filter.

Now if you will click on a widget, you will see that the filter is applied.

If you want more Filament examples, you can find more real-life projects on our FilamentExamples.com.