#Component Methods

These are the available filters configuration methods on the component.

---

Filters are enabled by default but will only show up if you have at least one defined.

#setFiltersStatus

Enable/disable filters for the whole component.

1public function configure(): void
2{
3    $this->setFiltersStatus(true);
4    $this->setFiltersStatus(false);
5}

#setFiltersEnabled

Enable filters for the component.

1public function configure(): void
2{
3    // Shorthand for $this->setFiltersStatus(true)
4    $this->setFiltersEnabled();
5}

#setFiltersDisabled

Disable filters for the component.

1public function configure(): void
2{
3    // Shorthand for $this->setFiltersStatus(false)
4    $this->setFiltersDisabled();
5}

---

#setFiltersVisibilityStatus

Enabled by default, show/hide the filters dropdown.

1public function configure(): void
2{
3    $this->setFiltersVisibilityStatus(true);
4    $this->setFiltersVisibilityStatus(false);
5}

#setFiltersVisibilityEnabled

Show the filters dropdown for the component.

1public function configure(): void
2{
3    // Shorthand for $this->setFiltersVisibilityStatus(true)
4    $this->setFiltersVisibilityEnabled();
5}

#setFiltersVisibilityDisabled

Hide the filters dropdown for the component.

1public function configure(): void
2{
3    // Shorthand for $this->setFiltersVisibilityStatus(false)
4    $this->setFiltersVisibilityDisabled();
5}

---

#setFilterPillsStatus

Enabled by default, show/hide the filter pills.

1public function configure(): void
2{
3    $this->setFilterPillsStatus(true);
4    $this->setFilterPillsStatus(false);
5}

#setFilterPillsEnabled

Show the filter pills for the component.

1public function configure(): void
2{
3    // Shorthand for $this->setFilterPillsStatus(true)
4    $this->setFilterPillsEnabled();
5}

#setFilterPillsDisabled

Hide the filter pills for the component.

1public function configure(): void
2{
3    // Shorthand for $this->setFilterPillsStatus(false)
4    $this->setFilterPillsDisabled();
5}

---

#setFilterLayout

Set the filter layout for the component.

1public function configure(): void
2{
3    $this->setFilterLayout('slide-down');
4}

#setFilterLayoutPopover

Set the filter layout to popover.

1public function configure(): void
2{
3    $this->setFilterLayoutPopover();
4}

Set the filter layout to slide down.

#setFilterLayoutSlideDown

1public function configure(): void
2{
3    $this->setFilterLayoutSlideDown();
4}

#setFilterSlideDownDefaultStatusEnabled

Set the filter slide down to visible by default

1public function configure(): void
2{
3    // Shorthand for $this->setFilterSlideDownDefaultStatus(true)
4    $this->setFilterSlideDownDefaultStatusEnabled();
5}

#setFilterSlideDownDefaultStatusDisabled

Set the filter slide down to collapsed by default

1public function configure(): void
2{
3    // Shorthand for $this->setFilterSlideDownDefaultStatus(false)
4    $this->setFilterSlideDownDefaultStatusDisabled();
5}

---

#Filter Methods

The following methods are available on the filter object.

---

#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@php
 4    $theme = $component->getTheme();
 5@endphp
 6<span wire:key="{{ $component->getTableName() }}-filter-pill-{{ $filter->getKey() }}"
 7    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"
 8>
 9    {{ $filter->getFilterPillTitle() }} - ({{ $filter->getFilterPillValue($value) }})
10 
11    <button
12        wire:click="resetFilter('{{ $filter->getKey() }}')"
13        type="button"
14        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"
15    >
16        <span class="sr-only">@lang('Remove filter option')</span>
17        <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
18            <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
19        </svg>
20    </button>
21</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 two properties to your blade, filter (the filter instance), and theme (your chosen theme). You may access the filter layout as shown below

Example blade:

 1@aware(['component'])
 2@props(['filter','theme'])
 3@php
 4    $theme = $component->getTheme();
 5@endphp
 6<label for="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
 7    @class([
 8        'block text-sm font-large leading-5 text-red-700 dark:text-red-700' => $theme === 'tailwind',
 9        'd-block' => $theme === 'bootstrap-4' && $component->isFilterLayoutSlideDown(),
10        'mb-2' => $theme === 'bootstrap-4' && $component->isFilterLayoutPopover(),
11        'd-block display-4' => $theme === 'bootstrap-5' && $component->isFilterLayoutSlideDown(),
12        'mb-2 display-4' => $theme === 'bootstrap-5' && $component->isFilterLayoutPopover(),
13    ])
14>
15    {{ $filter->getName() }}
16</label>

#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   ])