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

Icon Columns (beta)

Icon columns provide a way to display icons in your table without having to use format() or partial views.

setIcon

setIcon requires a valid path to an SVG (Directly or via a Library), it receives the $row, and $value (if available) to help you customise which icon to use

 1IconColumn::make('Icon', 'status')
 2    ->setIcon(function ($row, $value) {
 3        if($value == 1) {
 4            return "heroicon-o-check-circle";
 5        }
 6        else
 7        {
 8            return "heroicon-o-x-circle";
 9        }
10    }),

attributes

Attributes receives the $row, and $value (if available) to help you customise which attributes to apply, you may pass both classes, and other SVG specific attributes.

 1IconColumn::make('Icon', 'status')
 2    ->setIcon(function ($row, $value) { if($value == 1) { return "heroicon-o-check-circle"; } else { return "heroicon-o-x-circle"; } })
 3    ->attributes(function ($row, $value) {
 4        if($value == 1) {
 5            return [
 6                'class' => 'w-6 h-6',
 7                'stroke' => '#008000'
 8            ];
 9        }
10        else
11        {
12            return [
13                'class' => 'w-3 h-3',
14                'stroke' => '#FF0000'
15            ];
16        }
17    }),

For example:

Example

 1IconColumn::make('Icon', 'status')
 2    ->setIcon(function ($row, $value) { if($value == 1) { return "heroicon-o-check-circle"; } else { return "heroicon-o-x-circle"; } })
 3    ->attributes(function ($row, $value) {
 4        if($value == 3) {
 5            return [
 6                'class' => 'w-3 h-3',
 7                'stroke' => '#008000'
 8            ];
 9        }
10        else if($value == 2) {
11            return [
12                'class' => 'w-3 h-3',
13                'stroke' => '#0000FF'
14            ];
15        }
16        else
17        {
18            return [
19                'class' => 'w-3 h-3',
20                'stroke' => '#FF0000'
21            ];
22        }
23    }),

Please also see the following for other available methods: