
Quick Filter Above the Tables
- Published: 26 May 2024 Updated: 26 May 2024
Add a Quick links to activate table filter on FilamentPHP table

Let's Assume you have a page with a tag
parameter:
1// the page URL contain the `tag`2protected static ?string $slug = 'tags/{tag?}';3 4// the tag will be stored on this prop5public ?\App\Models\Tag $tag = null;
and the filter on your table:
1SelectFilter::make('tags')2 ->preload()3 ->multiple()4 ->default(fn () => ($this->tag !== null) ? [$this->tag->id] : null)5 ->relationship('tags', 'name'),
Notice the default
option, which will activate the filter when you click on any of the tag.
Now on your view, you can add the links above the table as:
1<div class="flex flex-wrap gap-2"> 2 @foreach($tags as $tag) 3 <a wire:navigate 4 href="tags/{{ $tag->slug }}" 5 > 6 <x-filament::badge 7 :color="$tag->id === $active?->id ? 'warning' : 'secondary'" 8 > 9 {{ $tag->name }}10 </x-filament::badge>11 </a>12 @endforeach13</div>14{{ $this->table }}

Related Tricks:
how to make actions sticky in tables when you have a lot of columns
Add a Quick links to activate table filter on FilamentPHP table
make all Field or any components translatable