To create filters, you must implement the filters() method on your component.

1public function filters(): array
2{
3    return [];
4}

This method will return an array of filter objects. There are a few filter types to choose from:

#Select Filters

Select filters are a simple dropdown list. The user selects one choice from the list.

 1use Rappasoft\LaravelLivewireTables\Views\Filters\SelectFilter;
 2 
 3public function filters(): array
 4{
 5    return [
 6        SelectFilter::make('Active')
 7            ->options([
 8                '' => 'All',
 9                'yes' => 'Yes',
10                'no' => 'No',
11            ]),
12    ];
13}

#The default value

You should supply the first option as the default value. I.e. nothing selected, so the filter is not applied. This value should be an empty string. When this value is selected, the filter will be removed from the query and the query string.

#Option Groups

To use <optgroup> elements, pass a nested array of options to the select filter.

 1use Rappasoft\LaravelLivewireTables\Views\Filters\SelectFilter;
 2 
 3public function filters(): array
 4{
 5    return [
 6        SelectFilter::make('Active')
 7            ->options([
 8                '' => 'All',
 9                'Open' => [
10                    1 => 'Type A',
11                    2 => 'Type B',
12                    3 => 'Type C',
13                ],
14                'Closed' => [
15                    24 => 'Type X',
16                    25 => 'Type Y',
17                    26 => 'Type Z',
18                ],
19            ])
20            ->setFirstOption('All Tags'),
21    ];
22}

To set a default "All" option at the start of the dropdown, you can do so by utilising the

1->setFirstOption('NAME')

#Multi-select Filters

Multi-select filters are a list of checkboxes. The user can select multiple options from the list. There is also an 'All' option that will select all values.

 1use Rappasoft\LaravelLivewireTables\Views\Filters\MultiSelectFilter;
 2 
 3public function filters(): array
 4{
 5    return [
 6        MultiSelectFilter::make('Tags')
 7            ->options(
 8                Tag::query()
 9                    ->orderBy('name')
10                    ->get()
11                    ->keyBy('id')
12                    ->map(fn($tag) => $tag->name)
13                    ->toArray()
14            ),
15    ];
16}

#Multi-select dropdown Filters

Multi-select dropdown filters are a simple dropdown list. The user can select multiple options from the list. There is also an 'All' option that will select all values

 1use Rappasoft\LaravelLivewireTables\Views\Filters\MultiSelectDropdownFilter;
 2 
 3public function filters(): array
 4{
 5    return [
 6        MultiSelectDropdownFilter::make('Tags')
 7            ->options(
 8                Tag::query()
 9                    ->orderBy('name')
10                    ->get()
11                    ->keyBy('id')
12                    ->map(fn($tag) => $tag->name)
13                    ->toArray()
14            )
15            ->setFirstOption('All Tags'),
16    ];
17}

#Date Filters

Date filters are HTML date elements.

1use Rappasoft\LaravelLivewireTables\Views\Filters\DateFilter;
2 
3public function filters(): array
4{
5    return [
6        DateFilter::make('Verified From'),
7    ];
8}

Date filters have options to set min and max:

 1public function filters(): array
 2{
 3    return [
 4        DateFilter::make('Verified From')
 5            ->config([
 6                'min' => '2020-01-01',
 7                'max' => '2021-12-31',
 8            ])
 9    ];
10}

#DateTime Filters

DateTime filters are HTML datetime-local elements and act the same as date filters.

Make sure to look at all available configurations on the Filter classes.

#Number Filters

Number filters are just HTML number inputs.

 1public function filters(): array
 2{
 3    return [
 4        NumberFilter::make('Amount')
 5            ->config([
 6                'min' => 0,
 7                'max' => 100,
 8            ])
 9            ->filter(function(Builder $builder, string $value) {
10                $builder->where('amount', '<', $value);
11            }),
12    ];
13}

#Text Filters

Text filters are just HTML text fields.

 1public function filters(): array
 2{
 3    return [
 4        TextFilter::make('Name')
 5            ->config([
 6                'placeholder' => 'Search Name',
 7                'maxlength' => '25',
 8            ])
 9            ->filter(function(Builder $builder, string $value) {
10                $builder->where('users.name', 'like', '%'.$value.'%');
11            }),
12    ];
13}

#Filter Keys

By default, the filter key is just the snake version of the filter name. This is used to generate the query string as well as look up the filter object in necessary places. Each filter should have a unique key.

You can override this by supplying a custom key:

1SelectFilter::make('Active', 'user_status')

Yields a query string of:

1?table[filters][user_status]=yes

Instead of:

1?table[filters][active]=yes

#A note about values

Your values should be strings. If you want to use a number, you should convert it to a string.

Since the frontend HTML elements treat all values as strings, it makes it easier to work with strings everywhere and convert them to integers where you need to. This is no different than submitting a form with integer values in a dropdown, they still make it to the server as strings.