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 eventfilterUpdate
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 theupdateTableFilters()
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.
No comments or questions yet...