- 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
- 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)
- 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
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 etc11}
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(),