logo light

Quick Filter Above the Tables

Image Description
By: Lara Zeus
  • Published: 26 May 2024 Updated: 26 May 2024

Add a Quick links to activate table filter on FilamentPHP table

Quick Filter Above the Tables

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 }}
Back to Tricks