Laravel Livewire Tables Documentation

🎉 Enjoying this package? Consider sponsoring me on GitHub or buying me a beer.

This is the documentation for v1 but the latest version is 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

Rows & Cells

Table Classes

This feature is available in v1.19 and above

You may replace the classes on the table component with the following method:

1public function setTableClass(): ?string
2{
3 return null;
4}

Clickable Cells

This feature is available in v1.16 and above

If you would like to make the contents of the cell clickable, you may use the linkTo method on the column:

1Column::make('Name')
2 ->sortable()
3 ->searchable()
4 ->linkTo(fn($value, $column, $row) => route('user.show', $row)),

The second parameter is the link target:

1Column::make('Name')
2 ->sortable()
3 ->searchable()
4 ->linkTo(fn($value, $column, $row) => route('user.show', $row), '_blank'),

Classes, ID's, and Attributes

This feature is available in v1.8 and above

Sometimes you may wish to alter a row or cell depending on the contents within it. You have access to these class methods to hook into rendering of these rows and cells:

You do not need to define these methods if you are not going to use them.

$row is an instance of the current iteration of your Eloquent collection.

1public function setTableRowClass($row): ?string
2{
3 return null;
4}
1public function setTableRowId($row): ?string
2{
3 return null;
4}
1public function setTableRowAttributes($row): array
2{
3 return [];
4}
1public function setTableDataClass(Column $column, $row): ?string
2{
3 return null;
4}
1public function setTableDataId(Column $column, $row): ?string
2{
3 return null;
4}
1public function setTableDataAttributes(Column $column, $row): array
2{
3 return [];
4}

Table cell formatting will not work if you are using a custom row view, you must implement it yourself.

The following footer methods are only available in v1.16 and above

Note: Footer row methods receive a collection of the rows on the given page. A good example would be setting the background color of a cell depending on the sum of a column.

1public function setFooterRowClass($rows): ?string
2{
3 return null;
4}
1public function setFooterRowId($rows): ?string
2{
3 return null;
4}
1public function setFooterRowAttributes($rows): array
2{
3 return [];
4}
1public function setFooterDataClass(Column $column, $rows): ?string
2{
3 return null;
4}
1public function setFooterDataId(Column $column, $rows): ?string
2{
3 return null;
4}
1public function setFooterDataAttributes(Column $column, $rows): array
2{
3 return [];
4}

The following secondary header methods are only available in v1.18 and above

Note: Secondary Header row methods receive a collection of the rows on the given page. A good example would be setting the background color of a cell depending on the sum of a column.

1public function setSecondaryHeaderRowClass($rows): ?string
2{
3 return null;
4}
1public function setSecondaryHeaderRowId($rows): ?string
2{
3 return null;
4}
1public function setSecondaryHeaderRowAttributes($rows): array
2{
3 return [];
4}
1public function setSecondaryHeaderDataClass(Column $column, $rows): ?string
2{
3 return null;
4}
1public function setSecondaryHeaderDataId(Column $column, $rows): ?string
2{
3 return null;
4}
1public function setSecondaryHeaderDataAttributes(Column $column, $rows): array
2{
3 return [];
4}

Examples

1public function setTableRowClass($row): ?string
2{
3 return $row->isSuccess() ? 'bg-green-500' : null;
4}
1public function setTableRowId($row): ?string
2{
3 return 'row-' . $row->id;
4}
1public function setTableRowAttributes($row): array
2{
3 return $row->hasFailed() ? ['this' => 'that'] : [];
4}
1public function setTableDataClass(Column $column, $row): ?string
2{
3 if ($column->column() === 'email' && ! $row->isVerified()) {
4 return 'text-danger';
5 }
6 
7 return null;
8}
1public function setTableDataId(Column $column, $row): ?string
2{
3 if ($column->column() === 'email') {
4 return 'user-email-' . $row->id;
5 }
6 
7 return null;
8}
1public function setTableDataAttributes(Column $column, $row): array
2{
3 if ($column->column() === 'email' && ! $row->isVerified()) {
4 return ['this' => 'that'];
5 }
6 
7 return [];
8}

The secondary header/footer methods follow the same principals but, here's an example on modifying the cell based on the sum of some data in the table.

1public function setFooterDataClass(Column $column, $rows): ?string
2{
3 if ($column->column() === 'sales' && $rows->sum('sales') > 1000) {
4 return 'bg-green-500 text-green-800';
5 }
6 
7 return null;
8}