The following methods are available on the filter object. These are "filter-specific" methods.

---

#setFilterPillTitle

By default, the filter pill title is the filter name, but you can make it whatever you want:

1SelectFilter::make('Active')
2    ->setFilterPillTitle('User Status')

#setFilterPillValues

If you have numeric, or generated keys as your filter option values, they probably don't look too nice in the filter pill. You can set the values to be displayed in the filter pill:

 1SelectFilter::make('Active')
 2    ->setFilterPillTitle('User Status')
 3    ->setFilterPillValues([
 4        '1' => 'Active',
 5        '0' => 'Inactive',
 6    ])
 7    ->options([
 8        '' => 'All',
 9        '1' => 'Yes',
10        '0' => 'No',
11    ])

Now instead of Active: Yes it will say User Status: Active

#hiddenFromMenus

Hide the filter from both the filter popover and the filter slide down.

1SelectFilter::make('Active')
2    ->hiddenFromMenus()

#hiddenFromPills

Hide the filter from the filter pills when applied.

1SelectFilter::make('Active')
2    ->hiddenFromPills()

#hiddenFromFilterCount

Hide the filter from the filter count when applied.

1SelectFilter::make('Active')
2    ->hiddenFromFilterCount()

#hiddenFromAll

Hide the filter from the menus, pills, and count.

1SelectFilter::make('Active')
2    ->hiddenFromAll()

#notResetByClearButton

By default the clear button will reset all filters to their defaults. You can prevent this on a specific filter by using this method.

1SelectFilter::make('Active')
2    ->notResetByClearButton()

#setFilterSlidedownRow

This method applies only when using the Slide Down approach to filter display. By default the filters will be displayed in the order that they are listed in the filters() method. This method allows you to specify the row that the filter will be listed. When multiple filters are placed on the same row, and a mobile device is used, then the first filter listed will "win" that row. You may use either a string or an integer to pass to this method, and it can be used in conjunction with setFilterSlidedownColspan

1SelectFilter::make('Active')
2    ->setFilterSlidedownRow(1)

#setFilterSlidedownColspan

This method applies only when using the Slide Down approach to filter display. By default each filter will take up one column, with the number of columns determined by the size of the screen, this ranges from 1 on a mobile device, to a maximum of 5 on a large display. This method allows you to specify the number of columns that the filter should span. It will span the number of columns specified, up to the number of columns available (depending on screen size). You may use either a string or an integer to pass to this method, and it can be used in conjunction with setFilterSlidedownRow

1DateFilter::make('Date')
2    ->config([
3        'min' => '2020-01-01',
4        'max' => '2021-12-31',
5    ])
6    ->setFilterSlidedownColspan('2')

#setFilterPillBlade

Set a blade file for use in displaying the filter values in the pills area. You can use this in conjunction with setFilterPillValues() to prettify your applied filter values display. You will receive two properties ($filter) containing the filter instance, and ($value) containing the filter value.

1SelectFilter::make('Active')
2    ->setFilterPillBlade('path.to.blade')

Example blade:

 1@aware(['component'])
 2@props(['filter'])
 3 
 4<span wire:key="{{ $component->getTableName() }}-filter-pill-{{ $filter->getKey() }}"
 5    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-indigo-100 text-indigo-800 capitalize dark:bg-indigo-200 dark:text-indigo-900"
 6>
 7    {{ $filter->getFilterPillTitle() }} - ({{ $filter->getFilterPillValue($value) }})
 8 
 9    <button
10        wire:click="resetFilter('{{ $filter->getKey() }}')"
11        type="button"
12        class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white"
13    >
14        <span class="sr-only">@lang($this->getLocalisationPath.'Remove filter option')</span>
15        <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8"><path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" /></svg>
16    </button>
17</span>

#setCustomFilterLabel

Set a custom blade file for the filter's label. This will be used in both the Pop-Over and SlideDown filter displays, you should therefore ensure that you cater for the different filter layouts.

1SelectFilter::make('Active')
2    ->setCustomFilterLabel('path.to.blade')

You will receive several properties to your blade, explained here:

• $filter (the filter instance)
• $filterLayout ('slide-down' or 'popover')
• $tableName (the table name)
• $isTailwind (bool - is theme Tailwind)
• $isBootstrap (bool - is theme Bootstrap 4 or Bootstrap 5)
• $isBootstrap4 (bool - is theme Bootstrap 4)
• $isBootstrap5 (bool - is theme Bootstrap 5)
• $customLabelAttributes (array -> any customLabel attributes set using setFilterLabelAttributes())

Example label blade:

 1@props(['filter', 'filterLayout' => 'popover', 'tableName' => 'table', 'isTailwind' => false, 'isBootstrap' => false, 'isBootstrap4' => false, 'isBootstrap5' => false, 'customLabelAttributes' => []])
 2 
 3 
 4<label for="{{ $tableName }}-filter-{{ $filter->getKey() }}"
 5 
 6    {{
 7        $attributes->merge($customLabelAttributes)
 8            ->class(['block text-sm font-medium leading-5 text-gray-700 dark:text-white' => $isTailwind && $customLabelAttributes['default'] ?? true])
 9            ->class(['d-block' => $isBootstrap && $filterLayout == 'slide-down' && $customLabelAttributes['default'] ?? true])
10            ->class(['mb-2' => $isBootstrap && $filterLayout == 'popover' && $customLabelAttributes['default'] ?? true])
11            ->except('default')
12    }}
13 
14>
15    {{ $filter->getName() }}
16</label>

#setFilterLabelAttributes

#Old Method (Still Supported)

Set custom attributes for a Filter Label. At present it is recommended to only use this for "class" and "style" attributes to avoid conflicts.

By default, this replaces the default classes on the Filter Label wrapper, if you would like to keep them, set the default flag to true.

1TextFilter::make('Name')
2    ->setFilterLabelAttributes(
3        [
4            'class' => 'text-xl',
5            'default' => true,
6        ]
7    ),

#New Method (Recommended)

Set custom attributes for a Filter Label. At present it is recommended to only use this for "class" and "style" attributes to avoid conflicts.

By default, this replaces the default classes on the Filter Label wrapper, if you would like to keep them, set the default flag to true.

1TextFilter::make('Name')
2    ->setLabelAttributes(
3        [
4            'class' => 'text-xl',
5            'default' => true,
6        ]
7    ),

#setCustomView

Use a fully custom view for a filter. This will utilise solely your view when rendering this filter. Note that the following methods will no longer apply to a filter using this:

• setCustomFilterLabel
• setFilterLabelAttributes

1TextFilter::make('Name')
2    ->setCustomView('text-custom-view'),

#Config

If the filter takes any config options, you can set them with the config method:

1DateFilter::make('Date')
2   ->config([
3       'min' => '2020-01-01',
4       'max' => '2021-12-31',
5   ])

#Customising Wireable Behaviour

For the following Filters, you may customise how the input is wire:model into the Table Component:

• DateFilter (Defaults to Live)
• DateTimeFilter (Defaults to Live)
• MultiSelectDropdownFilter (Defaults to live.debounce.250ms)
• MultiSelectFilter (Defaults to live.debounce.250ms)
• NumberFilter (Defaults to Blur)
• SelectFilter (Defaults to Live)
• TextFilter (Defaults to Blur)

You may override this using the following methods, on any of the above Filter types:

#setWireBlur()

Forces the filter to use a wire:model.blur approach

1TextFilter::make('Name')
2->config([
3    'placeholder' => 'Search Name',
4    'maxlength' => '25',
5])
6->setWireBlur()

#setWireDefer()

Forces the filter to use a wire:model approach

1TextFilter::make('Name')
2->config([
3    'placeholder' => 'Search Name',
4    'maxlength' => '25',
5])
6->setWireDefer()

#setWireLive()

Forces the fitler to use a wire:model.live approach

1TextFilter::make('Name')
2->config([
3    'placeholder' => 'Search Name',
4    'maxlength' => '25',
5])
6->setWireLive()

#setWireDebounce(int $debounceDelay)

Allows you to pass a string to use a wire:model.live.debounce.Xms approach

1TextFilter::make('Name')
2->config([
3    'placeholder' => 'Search Name',
4    'maxlength' => '25',
5])
6->setWireDebounce(50)