Laravel Livewire Tables Documentation
Sponsors Demo Support

Edit

🎉 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 at the top. Check your current version with the following command:

composer show rappasoft/laravel-livewire-tables

Available Component Methods

These are the available filters configuration methods on the component. These are "table-wide" methods.

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}

setFilterPopoverAttributes

Allows for the customisation of the appearance of the Filter Popover Menu.

Note the addition of a "default-width" boolean, allowing you to customise the width more smoothly without impacting other applied classes.

You may also replace default colors by setting "default-colors" to false, or default styling by setting "default-styling" to false, and specifying replacement classes in the "class" property.

You can also replace the default transition behaviours (Tailwind) by specifying replacement attributes in the array.

 1public function configure(): void
 2{
 3    $this->setFilterPopoverAttributes(
 4        [
 5        'class' => 'w-96',
 6        'default-width' => false,
 7        'default-colors' => true,
 8        'default-styling' => true,
 9        'x-transition:enter' => 'transition ease-out duration-100',
10        ]
11    );
12}

setFilterSlidedownWrapperAttributes

Allows for the customisation of the appearance of the Filter Slidedown Wrapper.

You may also replace default colors by setting "default-colors" to false, or default styling by setting "default-styling" to false, and specifying replacement classes in the "class" property.

You can also replace the default transition behaviours (Tailwind) by specifying replacement attributes in the array, for example to extend the duration of the transition effect from the default duration-100 to duration-1000:

1public function configure(): void
2{
3    $this->setFilterSlidedownWrapperAttributes([
4        'x-transition:enter' => 'transition ease-out duration-1000',
5        'class' => 'text-black',
6        'default-colors' => true,
7        'default-styling' => true,
8    ]);
9}

setFilterSlidedownRowAttributes

Allows for the customisation of the appearance of the Filter Slidedown Row. Note that this uses a callback, which receives the "rowIndex" of the Slidedown Row

You may replace default colors by setting "default-colors" to false, or default styling by setting "default-styling" to false, and specifying replacement classes in the "class" property.

 1public function configure(): void
 2{
 3    $this->setFilterSlidedownRowAttributes(fn($rowIndex) => $rowIndex % 2 === 0 ?
 4        [
 5            'class' => 'bg-red-500',
 6            'default-colors' => true,
 7            'default-styling' => true,
 8        ] :  [
 9            'class' => 'bg-blue-500',
10            'default-colors' => true,
11            'default-styling' => true,
12        ]
13    );
14}