I'm currently available for full time hire! Inquire Here

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

Hiding The Table (beta)

You may wish to hide the table on load. To do so, you should use the following in the mount method. Note that this is in mount, not boot nor configure!

1public function mount()
2{
3    $this->setShouldBeHidden();
4}

Using Events To Display/Hide

For example, you may have a "Sales" table that you wish to hide by default:

 1class SalesTable extends DataTableComponent
 2{
 3    public string $tableName = 'sales'; // Required to keep the call specific
 4 
 5    public function mount()
 6    {
 7        $this->setShouldBeHidden(); // Defaults the table to be hidden, note that this is in MOUNT and not CONFIGURE
 8    }
 9 
10    // Configure/Columns/Filters etc
11}

The Table allows for different approaches, out-of-the-box it supports the more efficient client-side listeners.

However - should you wish to use Livewire listeners in your table component, for example if you wish to pass more detail into the Table then you can:

 1#[On('showTable.{tableName}')]
 2public function showTable(): void
 3{
 4    $this->setShouldBeDisplayed();
 5}
 6 
 7#[On('hideTable.{tableName}')]
 8public function hideTable(): void
 9{
10    $this->setShouldBeHidden();
11}

Secondary Table

Below are the two approaches. Note that you can customise the Livewire "On" to pass additional details should you wish.

Using Client Side Listeners

1Column::make('Show')
2    ->label(
3        fn($row, Column $column) => "<button x-on:click=\"\$dispatch('show-table',{'tableName': 'sales' })\">Show Sales Table</button>"
4    )->html(),
5Column::make('Hide')
6    ->label(
7        fn($row, Column $column) => "<button x-on:click=\"\$dispatch('hide-table',{'tableName': 'sales' })\">Hide Sales Table</button>"
8    )->html(),

Using Livewire "On" Style Listeners:

1Column::make('Show')
2->label(
3    fn($row, Column $column) => "<button x-on:click=\"\$dispatch('showTable.sales')\">Show Sales Table</button>"
4)->html(),
5Column::make('Hide')
6->label(
7    fn($row, Column $column) => "<button x-on:click=\"\$dispatch('hideTable.sales')\">Hide Sales Table</button>"
8)->html(),