When a Filter is set/applied, it will be displayed at the top of your Table in a "filter pills" section, contained within the Tools area

There are both Component/Table wide, and Filter specific configurations available:

---

#Component Methods

These methods apply across your whole table

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

---

#setFilterPillsItemAttributes

Allows for customisation of the appearance of each "Filter Pills Item"

Note that this allows for appending to, or replacing the styles and colors independently, via the below methods.

#default-colors

Setting to false will disable the default colors for the Filter Pills Item, the default colors are:

Bootstrap: None

Tailwind: bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900

#default-styling

Setting to false will disable the default styling for the Filter Pills Item, the default styling is:

Bootstrap 4: badge badge-pill badge-info d-inline-flex align-items-center

Bootstrap 5: badge rounded-pill bg-info d-inline-flex align-items-center

Tailwind: inline-flex items-center px-2.5 py-0.5 rounded-full leading-4

#default-text

Setting to false will disable the default text styling for the Filter Pills Item, the default text styling is:

Bootstrap 4: none

Bootstrap 5: none

Tailwind: text-xs font-medium capitalize

Note that colors are handled via default-colours

1public function configure(): void
2{
3  $this->setFilterPillsItemAttributes([
4    'class' => 'bg-rose-300 text-rose-800 dark:bg-indigo-200 dark:text-indigo-900', // Add these classes to the filter pills item
5    'default-colors' => false, // Do not output the default colors
6    'default-styling' => true // Output the default styling
7  ]);
8}

---

#setFilterPillsResetFilterButtonAttributes

Allows for customisation of the appearance of the "Filter Pills Reset Filter Button"

Note that this utilises allows for appending to, or replacing the styles and colors independently, via the below methods.

#default-colors

Setting to false will disable the default colors for the Filter Pills Reset Filter Button, the default colors are:

Bootstrap: None

Tailwind: text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:bg-indigo-500 focus:text-white

#default-styling

Setting to false will disable the default styling for the Filter Pills Reset Filter Button, the default styling is:

Bootstrap: text-white ml-2

Tailwind: flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:outline-none

1public function configure(): void
2{
3  $this->setFilterPillsResetFilterButtonAttributes([
4    'class' => 'text-rose-400 hover:bg-rose-200 hover:text-rose-500 focus:bg-rose-500', // Add these classes to the filter pills reset filter button
5    'default-colors' => false, // Do not output the default colors
6    'default-styling' => true // Output the default styling
7  ]);
8}

---

#setFilterPillsResetAllButtonAttributes

Allows for customisation of the appearance of the "Filter Pills Reset All Button"

Note that this allows for appending to, or replacing the styles and colors independently, via the below methods.

#default-colors

Setting to false will disable the default colors for the Filter Pills Reset All Button, the default colors are:

Bootstrap: None

Tailwind: bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-900

#default-styling

Setting to false will disable the default styling for the Filter Pills Reset All Button, the default styling is:

Bootstrap 4: badge badge-pill badge-light

Bootstrap 5: badge rounded-pill bg-light text-dark text-decoration-none

Tailwind: inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium

1public function configure(): void
2{
3  $this->setFilterPillsResetAllButtonAttributes([
4    'class' => 'bg-rose-100 text-rose-800 dark:bg-gray-200 dark:text-gray-900', // Add these classes to the filter pills reset all button
5    'default-colors' => false, // Do not output the default colors
6    'default-styling' => true // Output the default styling
7  ]);
8}

---

#Filter Methods

These methods apply to individual filters

#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

#hiddenFromPills

Hide the filter from the filter pills when applied.

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

---

#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 which contains the filter instance
• $filterPillData which contains an instance of "Rappasoft\LaravelLivewireTables\DataTransferObjects\Filters\FilterPillData" This provides ready access to configured pills elements

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

Example blade:

1@aware(['tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5'])
2@props(['filterKey', 'filterPillData'])
3<x-livewire-tables::tools.filter-pills.wrapper :$filterKey :$filterPillData  >
4 
5    <span {{ $filterPillData->getFilterPillDisplayData() }}></span>
6 
7</x-livewire-tables::tools.filter-pills.wrapper>

#$filterPillData

An example of the returned object is below:

 1Rappasoft\LaravelLivewireTables\DataTransferObjects\Filters\FilterPillData {
 2  #filterPillTitle: "Name"
 3  #filterSelectName: "name"
 4  #filterPillValue: "A Value Here"
 5  #separator: ", "
 6  +isAnExternalLivewireFilter: false
 7  +hasCustomPillBlade: true
 8  #customPillBlade: "tests.tables.pills.test"
 9  #filterPillsItemAttributes: array:4 [▼
10    // Any Custom Defined Attributes
11  ]
12  #separatedValues: null
13  #renderPillsAsHtml: false
14  #watchForEvents: false
15}

#setPillAttributes

This may be used in conjunction with, or instead of the setFilterPillsItemAttributes method, and applies to an individual Filter's pills.

Note that if used, this will replace any matching array keys defined in the setFilterPillsItemAttributes method.

Note that this allows for appending to, or replacing the styles and colors independently

#default-colors

Setting to false will disable the default colors for this Filter's Pills Item, the default colors are:

Bootstrap: None

Tailwind: bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900

#default-styling

Setting to false will disable the default styling for this Filter's Pills Item, the default styling is:

Bootstrap 4: badge badge-pill badge-info d-inline-flex align-items-center

Bootstrap 5: badge rounded-pill bg-info d-inline-flex align-items-center

Tailwind: inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 capitalize

 1SelectFilter::make('Active')
 2    ->options([
 3        '' => 'All',
 4        '1' => 'Yes',
 5        '0' => 'No',
 6    ])
 7    ->setFilterPillTitle('User Status')
 8    ->setFilterPillValues([
 9        '1' => 'Active',
10        '0' => 'Inactive',
11    ])
12    ->setPillAttributes([
13        'class' => 'bg-rose-300 text-rose-800 dark:bg-indigo-200 dark:text-indigo-900',
14        'default-colors' => false, // Replace the default colors classes
15        'default-styling' => true // Use the default styling classes
16    ])

#setPillResetButtonAttributes

This method allows for customisation of the filter's reset button within the Pills. This will merge/over-ride anything set in the Component setFilterPillsResetFilterButtonAttributes() method.

 1SelectFilter::make('Active')
 2    ->options([
 3        '' => 'All',
 4        '1' => 'Yes',
 5        '0' => 'No',
 6    ])
 7    ->setFilterPillTitle('User Status')
 8    ->setPillResetButtonAttributes([
 9        'class' => 'bg-red-500 text-cyan-500',
10        'default-colors' => false, // Replace the default colors classes
11        'default-styling' => true // Use the default styling classes
12    ])