
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 prop
5public ?\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 @endforeach
13</div>
14{{ $this->table }}

Related Tricks:
Translating components can often be a repetitive task, Fortunately, there's a neat trick to automate this process, making your components instantly translatable.
how to make actions sticky in tables when you have a lot of columns
how to use an action as a headerAction or as a table row action without code duplication
Add a Quick links to activate table filter on FilamentPHP table