Getting started
Filters allow you to scope the Eloquent query as a way to reduce the number of records in a table. If you’re using the filters in a Livewire component, you can put them in thegetTableFilters() method:
$table->filters() method:
make() method, passing its name. The name of the filter should be unique. You should then pass a callback to query() which applies your filter’s scope:
Setting a label
By default, the label of the filter, which is displayed in the filter form, is generated from the name of the filter. You may customize this using thelabel() method:
translateLabel() method:
Using a toggle button instead of a checkbox
By default, filters use a checkbox to control the filter. Instead, you may switch to using a toggle button, using thetoggle() method:
Default filters
You may set a filter to be enabled by default, using thedefault() method:
Filter forms
By default, filters have two states: enabled and disabled. When the filter is enabled, it is applied to the query. When it is disabled it is not. This is controlled through a checkbox. However, some filters may require extra data input to narrow down the results further. You may use a custom filter form to collect this data.Select filters
Select filters allow you to quickly create a filter that allows the user to select an option to apply the filter to their table. For example, a status filter may present the user with a few status options to pick from and filter the table using:query() method. The column name used to scope the query is the name of the filter. To customize this, you may use the attribute() method:
Multi-select filters
These allow the user to select multiple options to apply the filter to their table. For example, a status filter may present the user with a few status options to pick from and filter the table using:Relationship select filters
Select filters are also able to automatically populate themselves based on aBelongsTo relationship. For example, if your table has a author relationship with a name column, you may use relationship() to filter the records belonging to an author:
relationship() method:
Ternary filters
Ternary filters allow you to quickly create a filter which has three states - usually true, false and blank. To filter a column namedis_admin to be true or false, you may use the ternary filter:
email_verified_at column, unverified users have a null timestamp in this column. To apply that logic, you may use the nullable() method:
attribute() method:
queries() method:
Custom filter forms
You may use components from the Form Builder to create custom filter forms. The data from the custom filter form is available in the$data array of the query() callback:
Setting default values
If you wish to set a default filter value, you may use thedefault() method on the form component:
Active indicators
When a filter is active, an indicator is displayed above the table content to signal that the table query has been scoped. By default, the label of the filter is used as the indicator. You can override this:Custom indicators
Not all indicators are simple, so you may need to useindicateUsing() to customize which indicators should be shown at any time.
For example, if you have a custom date filter, you may create a custom indicator that formats the selected date:
Appearance
By default, filters are displayed in a thin popover on the right side of the table, in 1 column. To change the number of columns that filters may occupy, you may use thegetTableFiltersFormColumns() method:
getTableFiltersFormWidth() method, and specify a width from xs to 7xl:
Displaying filters above or below the table content
To render the filters above the table content instead of in a popover, you may use:Persist filters in session
To persist the table filters in the user’s session, use theshouldPersistTableFiltersInSession() method: