- 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
Column Selection
Column select is on by default. All columns are selected by default and saved in the users session.
Excluding from Column Select
If you don't want a column to be able to be turned off from the column select box, you may exclude it:
1Column::make('Address', 'address.address')2 ->excludeFromColumnSelect(),
Deselected by default
If you would like a column to be included in the column select but deselected by default, you can specify:
1Column::make('Address', 'address.address')2 ->deselected(),
DeselectedIf
If you would like a column to be included in the column select but deselected based on an external parameter/callback, you may use this approach.
Returning "true" will deselect the Column by default, returning "false" will select the Column by default
1Column::make('Address', 'address.address')2 ->deselectedIf(fn() => 2 > 1),
or
1Column::make('Address', 'address.address')2 ->deselectedIf(!Auth::user()),
SelectedIf
If you would like a column to be included in the column select and selected based on an external parameter/callback, you may use this approach.
Returning "true" will select the Column by default, returning "false" will deselect the Column by default
1Column::make('Address', 'address.address')2 ->selectedIf(fn() => 2 > 1),
or
1Column::make('Address', 'address.address')2 ->selectedIf(Auth::user()),
Available Methods
setColumnSelectStatus
Enabled by default, enable/disable column select for the component.
1public function configure(): void2{3 $this->setColumnSelectStatus(true);4 $this->setColumnSelectStatus(false);5}
setColumnSelectEnabled
Enable column select on the component.
1public function configure(): void2{3 // Shorthand for $this->setColumnSelectStatus(true)4 $this->setColumnSelectEnabled();5}
setColumnSelectDisabled
Disable column select on the component.
1public function configure(): void2{3 // Shorthand for $this->setColumnSelectStatus(false)4 $this->setColumnSelectDisabled();5}
setColumnSelectHiddenOnTablet
Hide column select menu when on tablet or mobile
1public function configure(): void2{3 $this->setColumnSelectHiddenOnTablet();4}
setColumnSelectHiddenOnMobile
Hide column select menu when on mobile.
1public function configure(): void2{3 $this->setColumnSelectHiddenOnMobile();4}
setRememberColumnSelectionStatus
Enabled by default, whether or not to remember the users column select choices.
1public function configure(): void2{3 $this->setRememberColumnSelectionStatus(true);4 $this->setRememberColumnSelectionStatus(false);5}
setRememberColumnSelectionEnabled
Remember the users column select choices.
1public function configure(): void2{3 // Shorthand for $this->setRememberColumnSelectionStatus(true)4 $this->setRememberColumnSelectionEnabled();5}
setRememberColumnSelectionDisabled
Forget the users column select choices.
1public function configure(): void2{3 // Shorthand for $this->setRememberColumnSelectionStatus(false)4 $this->setRememberColumnSelectionDisabled();5}
setDataTableFingerprint
In order to idenfify each table and prevent conflicts on column selection, each table is given a unique fingerprint. This fingerprint is generated using the static::class name of the component. If you are reusing the same component in different parts of your application, you may need to set your own custom fingerprint.
1public function configure(): void2{3 // Default fingerprint is output of protected method dataTableFingerprint()4 // Below will prepend the current route name5 $this->setDataTableFingerprint(route()->getName() . '-' . $this->dataTableFingerprint());6}
Events
ColumnsSelected
If using column selection, an event is triggered when a user is changing selection. This can for example be used to store the selected columns in database for the user. When the user is accessing same page with the table, read som database and set the session key to initialize selected columns.
Here is an example
1use Rappasoft\LaravelLivewireTables\Events\ColumnsSelected; 2 3class EventServiceProvider extends ServiceProvider 4{ 5 /** 6 * The event listener mappings for the application. 7 * 8 * @var array 9 */10 protected $listen = [11 ColumnsSelected::class => [12 DataTableColumnsSelectedListener::class13 ]14 ]15}
1 2class DataTableColumnsSelectedListener 3{ 4 /** 5 * Create the event listener. 6 * 7 * @return void 8 */ 9 public function __construct()10 {11 //12 }13 14 /**15 * Handle the event.16 *17 * @param object $event18 * @return void19 */20 public function handle($event)21 {22 Setting::setCurrentUserTableColumns($event->key, $event->columns);23 }24 25}