#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}

#storeFiltersInSessionEnabled

Optional behaviour - stores filter values in the session (specific to table - based on the table name)

#Exercise Caution

If re-using the same Livewire Table Component multiple times in your site, with the same table name, this may cause clashes in filter values

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

#storeFiltersInSessionDisabled

Default behaviour - does not store filters in the session

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

---

#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 
 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">
16            <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
17        </svg>
18    </button>
19</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)