- Creating Columns
- Relationships
- Available Methods
- Other Column Types
- Column Selection
- Secondary Header
- Footer
- Reusable Columns
- Anonymous Columns
- Styling
- Standard Column
- Array Columns (beta)
- Avg Columns (beta)
- Boolean Columns
- Button Group Columns
- Color Columns
- Component Columns
- Count Columns (beta)
- Date Columns
- Icon Columns (beta)
- Image Columns
- Increment Column (beta)
- Link Columns
- Livewire Component (beta)
- Sum Columns (beta)
- View Component Columns
- Wire Link Column (beta)
- Introduction
- Creating Filters
- Applying Filters
- Available Methods
- Available Component Methods
- Available Filter Methods
- Filter Pills
- Introduction
- Boolean Filters (beta)
- Date Filters
- DateRange Filters
- DateTime Filters
- Multi-Select Dropdown Filters
- Multi-Select Filters
- NumberRange Filters
- Number Filters
- Select Filters
- Text Filters
- Livewire Custom Filter (Beta)
- Livewire Custom Array Filter (Beta)
- Refreshing
- Loading Placeholder
- Multiple Tables Same Page
- Actions (beta)
- Adding Custom Markup
- Debugging
- Saving Table State
- Lifecycle Hooks
- Hiding The Table (beta)
- One Of Many Example
- Tools
Getting Started
Usage
DataTable
Columns
Column Types
Rows
Sorting
Pagination
Search
Bulk Actions
Filters
Filter Types
Reordering
Secondary Header
Footer
Examples
Misc.
Sponsored
Advanced Usage
Examples
🎉 Enjoying this package? Consider sponsoring me on GitHub or buying me a beer.
This is the documentation for v3. You can switch versions in the menu on the left/at the top. Check your current version with the following command:
composer show rappasoft/laravel-livewire-tables
Filter Pills
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(): void2{3 $this->setFilterPillsStatus(true);4 $this->setFilterPillsStatus(false);5}
setFilterPillsEnabled
Show the filter pills for the component.
1public function configure(): void2{3 // Shorthand for $this->setFilterPillsStatus(true)4 $this->setFilterPillsEnabled();5}
setFilterPillsDisabled
Hide the filter pills for the component.
1public function configure(): void2{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(): void2{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 item5 'default-colors' => false, // Do not output the default colors6 'default-styling' => true // Output the default styling7 ]);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(): void2{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 button5 'default-colors' => false, // Do not output the default colors6 'default-styling' => true // Output the default styling7 ]);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(): void2{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 button5 'default-colors' => false, // Do not output the default colors6 'default-styling' => true // Output the default styling7 ]);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 Attributes11 ]12 #separatedValues: null13 #renderPillsAsHtml: false14 #watchForEvents: false15}
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 classes15 'default-styling' => true // Use the default styling classes16 ])
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 classes11 'default-styling' => true // Use the default styling classes12 ])