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 Methods

These are the available sorting configuration methods on the component.

Sorting as a whole is enabled by default, but if you ever needed to toggle it you can use the following methods:

setSortingStatus

Enable/disable sorting for the whole component.

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

setSortingEnabled

Enable sorting for the whole component.

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

setSortingDisabled

Disable sorting for the whole component.

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

Single sorting is enabled by default, but if you ever needed to toggle it you can use the follow methods:

setSingleSortingStatus

Enable/disable single sorting for the whole component.

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

setSingleSortingEnabled

Enable single sorting for the whole component.

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

setSingleSortingDisabled

Disable single sorting for the whole component.

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

There is no default sort by default, but if you wanted to add one:

setDefaultSort

Set the default sorting column and direction.

1public function configure(): void
2{
3    $this->setDefaultSort('name', 'desc');
4}

If you had the need to programmatically remove the default sort:

removeDefaultSort

Remove the default sort.

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

Sorting pills are enabled by default, but if you ever needed to toggle it you can use the following methods:

setSortingPillsStatus

Enable/disable sorting pills for the whole component.

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

setSortingPillsEnabled

Enable sorting pills for the whole component.

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

setSortingPillsDisabled

Disable sorting pills for the whole component.

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

setSortingPillsItemAttributes

Allows for customisation of the appearance of the "Sorting Pills Item"

Note that this utilises a refreshed approach for attributes, and 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 Sorting 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 Sorting 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

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

setSortingPillsClearSortButtonAttributes

Allows for customisation of the appearance of the "Sorting Pills Clear Sort Button"

Note that this utilises a refreshed approach for attributes, and 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 Sorting Pills Clear Sort 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 Sorting Pills Clear Sort Button, the default styling is:

Bootstrap 4: text-white ml-2

Bootstrap 5: text-white ms-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->setSortingPillsClearSortButtonAttributes([
4    'class' => 'text-rose-400 hover:bg-rose-200 hover:text-rose-500 focus:bg-rose-500', // Add these classes to the sorting pills clear sort button
5    'default-colors' => false, // Do not output the default colors
6    'default-styling' => true // Output the default styling
7  ]);
8}

setSortingPillsClearAllButtonAttributes

Allows for customisation of the appearance of the "Sorting Pills Clear All Button"

Note that this utilises a refreshed approach for attributes, and 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 Sorting Pills Clear 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 Sorting Pills Clear 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->setSortingPillsClearAllButtonAttributes([
4    'class' => 'bg-rose-100 text-rose-800 dark:bg-gray-200 dark:text-gray-900', // Add these classes to the sorting pills clear all button
5    'default-colors' => false, // Do not output the default colors
6    'default-styling' => true // Output the default styling
7  ]);
8}

setDefaultSortingLabels

If you would like to set the default sorting labels for the sorting pills you may override them:

By default, they are A-Z for ascending and Z-A for descending.

1public function configure(): void
2{
3    $this->setDefaultSortingLabels('Asc', 'Desc');
4}