TallStackUI, Table

# Concept

Although many packages can add table features to your project, TallStackUI offers you a simple table component, but with all the basic features necessary for a table to work through Livewire components.

# Data for Table

You have two ways to provide data to create a table: 1) Simple data through an array or 2) Data that comes from the database, using Laravel Eloquent Pagination. The main difference between the two ways is that when choosing to create a table with an array of data, features such as filtering, sorting and pagination will be more difficult to implement.

1) Simple data through an array

@php
    $headers = [
        ['index' => 'id', 'label' => '#'],
        ['index' => 'name', 'label' => 'Member'],
        // ...
    ];
 
    $rows = [
        ['id' => 1, 'name' => 'Taylor Otwell'],
        ['id' => 2, 'name' => 'Nuno Maduro'],
        // ...
    ];
@endphp
 
<x-table :$headers :$rows />

2) Data that comes from the database

<?php
 
use App\Models\User;
use Livewire\Volt\Component;
 
new class extends Component {
 
    public function with(): array
    {
        return [
            'headers' => [
                ['index' => 'id', 'label' => '#'],
                ['index' => 'name', 'label' => 'Member'],
            ],
            'rows' => User::all(),
        ];
    }
}; ?>
 
<div>
    <x-table :$headers :$rows />
</div>

# Basic Usage

#	Member Name
1	Alice Morgan
2	Bruno Fernandes
3	Clara Dubois
4	Daniel Kowalski
5	Elena Rossi
6	Felix Andersen
7	Grace Nakamura
8	Hugo Martinez
9	Isla Petrov
10	Jonas Weber
11	Kira Svensson

<?php
 
use App\Models\User;
use Livewire\Volt\Component;
 
new class extends Component {
 
    public function with(): array
    {
        return [
            'headers' => [
                ['index' => 'id', 'label' => '#'],
                ['index' => 'name', 'label' => 'Member'],
                // You can use `unescaped` to render raw HTML  // 
                ['index' => 'role', 'label' => '<b>Role</b>', 'unescaped' => true],
            ],
            'rows' => User::all(),
        ];
    }
}; ?>
 
<div>
    <x-table :$headers :$rows />
</div>

# Without Header

1	Alice Morgan
2	Bruno Fernandes
3	Clara Dubois
4	Daniel Kowalski
5	Elena Rossi
6	Felix Andersen
7	Grace Nakamura
8	Hugo Martinez
9	Isla Petrov
10	Jonas Weber
11	Kira Svensson

<?php
 
use App\Models\User;
use Livewire\Volt\Component;
 
new class extends Component {
 
    public function with(): array
    {
        return [
            'headers' => [
                ['index' => 'id', 'label' => '#'],
                ['index' => 'name', 'label' => 'Member'],
            ],
            'rows' => User::all(),
        ];
    }
}; ?>
 
<div>
    <x-table :$headers :$rows headerless />
</div>

# Striped Style

#	Member Name
1	Alice Morgan
2	Bruno Fernandes
3	Clara Dubois
4	Daniel Kowalski
5	Elena Rossi
6	Felix Andersen
7	Grace Nakamura
8	Hugo Martinez
9	Isla Petrov
10	Jonas Weber
11	Kira Svensson

<?php
 
use App\Models\User;
use Livewire\Volt\Component;
 
new class extends Component {
 
    public function with(): array
    {
        return [
            'headers' => [
                ['index' => 'id', 'label' => '#'],
                ['index' => 'name', 'label' => 'Member'],
            ],
            'rows' => User::all(),
        ];
    }
}; ?>
 
<div>
    <x-table :$headers :$rows striped />
</div>

# Filters

Quantity

#	Member Name
1	Alice Morgan
2	Bruno Fernandes

<?php
 
use App\Models\User;
use Livewire\Volt\Component;
use Illuminate\Database\Eloquent\Builder;
 
new class extends Component {
 
    public ?int $quantity = 2; 
 
    public ?string $search = null; 
 
    public function with(): array
    {
        return [
            'headers' => [
                ['index' => 'id', 'label' => '#'],
                ['index' => 'name', 'label' => 'Member'],
            ],
            'rows' => User::query()
                ->when($this->search, function (Builder $query) { 
                    return $query->where('name', 'like', "%{$this->search}%");
                })
                ->paginate($this->quantity)
                ->withQueryString()
        ];
    }
}; ?>
 
<div>
    <x-table :$headers :$rows filter />
 
    <!-- You can control the items of the quantity selector -->
    <x-table :$headers
             :$rows
             filter
             :quantity="[2,5,10]" />
 
    <!-- You can specify different properties for the filter -->
    <x-table :$headers
             :$rows
             :filter="['quantity' => 'foo', 'search' => 'bar']"
             :quantity="[2,5,10]" />
 
    <!-- You can disable one of the filters -->
    <x-table :$headers
             :$rows
             :filter="['quantity' => 'quantity']"
             :quantity="[2,5,10]" />
</div>

The search input bind the property using wire:model.live with debounce of 500ms.

# Loading Effect

An option to display a loading effect when interacts with the table elements.

Quantity

#	Member Name
1	Alice Morgan
2	Bruno Fernandes

<?php
 
use App\Models\User;
use Livewire\Volt\Component;
use Illuminate\Database\Eloquent\Builder;
 
new class extends Component {
 
    public ?int $quantity = 10;
 
    public ?string $search = null;
 
    public function with(): array
    {
        return [
            'headers' => [
                ['index' => 'id', 'label' => '#'],
                ['index' => 'name', 'label' => 'Member'],
            ],
            'rows' => User::query()
                ->when($this->search, function (Builder $query) {
                    return $query->where('name', 'like', "%{$this->search}%");
                })
                ->paginate($this->quantity)
                ->withQueryString()
        ];
    }
}; ?>
 
<div>
    <x-table :$headers :$rows filter loading />
</div>

# Sorting

Sorting when clicking on the header names of the table.

#	Member Name
20	Tara Johansson
19	Samuel Leclerc
18	Rosa Kim
17	Quinn O'Brien
16	Paul Müller
15	Olivia Santos
14	Noah Fischer
13	Maya Singh
12	Leo Chang
11	Kira Svensson
10	Jonas Weber

<?php
 
use App\Models\User;
use Livewire\Volt\Component;
 
new class extends Component {
 
    public array $sort = [ 
        'column' => 'id',
        'direction' => 'desc',
    ];
 
    public function with(): array
    {
        return [
            'headers' => [
                ['index' => 'id', 'label' => '#'],
                // You can disable the sorting for specific columns
                ['index' => 'name', 'label' => 'Member', 'sortable' => false], 
            ],
            'rows' => User::query()
                ->orderBy(...array_values($this->sort)) 
                ->paginate(10)
                ->withQueryString()
        ];
    }
}; ?>
 
<div>
    <x-table :$headers :$rows :$sort />
</div>

# Pagination

#	Member Name
1	Alice Morgan
2	Bruno Fernandes

<?php
 
use App\Models\User;
use Livewire\WithPagination;
use Livewire\Volt\Component;
 
new class extends Component {
    use WithPagination;
 
    public function with(): array
    {
        return [
            'headers' => [
                ['index' => 'id', 'label' => '#'],
                ['index' => 'name', 'label' => 'Member'],
            ],
            'rows' => User::query()
                ->paginate(2)
                ->withQueryString()
        ];
    }
}; ?>
 
<div>
    <x-table :$headers :$rows paginate />
 
    <!-- You can use the paginator with mobile style even when in desktop -->
    <x-table :$headers :$rows paginate simple-pagination />
 
    <!--
    You can enable view persistence for the table by setting the `persistent`
    -->
    <x-table :$headers :$rows paginate persistent />
 
    <!--
    You can disable the TallStackUI paginator element. When you do that
    the table component will use the Livewire paginator element.
    -->
    <x-table :$headers :$rows paginate :paginator="null" />
</div>

# Slots

Header Slot

#	Member Name
1	Alice Morgan
2	Bruno Fernandes

Footer Slot

<!-- This is a resumed example without the full explanation -->
 
<x-table header="Header Slot"
         footer="Footer Slot"
         ... />
 
<!-- Or -->
 
<x-table ...>
    <x-slot:header>
        Raw Header Slot
    </x-slot:header>
    <x-slot:footer>
        Raw Footer Slot
    </x-slot:footer>
</x-table>

# Selection

	#	Member Name
	1	Alice Morgan
	2	Bruno Fernandes
	3	Clara Dubois
	4	Daniel Kowalski
	5	Elena Rossi
	6	Felix Andersen
	7	Grace Nakamura
	8	Hugo Martinez
	9	Isla Petrov
	10	Jonas Weber
	11	Kira Svensson

<!-- This is a resumed example without the full explanation -->
 
<!-- You need to create a public array property in the component to store
the selected rows. In this example we are using the `selected` property,
but you can choose any name, as long as it is an array. -->
 
<x-table ... selectable wire:model="selected" />

# Clickable

#	Member Name
1	Alice Morgan
2	Bruno Fernandes
3	Clara Dubois
4	Daniel Kowalski
5	Elena Rossi
6	Felix Andersen
7	Grace Nakamura
8	Hugo Martinez
9	Isla Petrov
10	Jonas Weber
11	Kira Svensson

<!-- This is a resumed example without the full explanation -->
 
<x-table ... link="https://google.com.br/?user={id}" />
 
<x-table ... link="https://google.com.br/?user={name}" />
 
<!-- Using dot notation to use relationship data: -->
<x-table ... link="https://google.com.br/?postcode={address.postcode}" />
 
<!-- You can use blank to open the link in a new tab -->
<x-table ... link="https://google.com.br/?user={id}" blank />

# Empty State

An option to display a custom message when the table is empty.

#	Member Name
No records found.

<!-- Using the attribute -->
<x-table :$headers :$rows empty="No records found." />
 
<!-- Using the slot for custom HTML -->
<x-table :$headers :$rows>
    <x-slot:empty>
        <p>No records found. <a href="/create" class="underline">Create one?</a></p>
    </x-slot:empty>
</x-table>

# Highlight

An option to highlight rows based on a color property.

#	Member Name
1	Alice Morgan
2	Bruno Fernandes
3	Clara Dubois
4	Daniel Kowalski
5	Elena Rossi
6	Felix Andersen
7	Grace Nakamura
8	Hugo Martinez
9	Isla Petrov
10	Jonas Weber
11	Kira Svensson

<?php
 
use App\Models\User;
use Livewire\Volt\Component;
 
new class extends Component {
 
    public function with(): array
    {
        return [
            'headers' => [
                ['index' => 'id', 'label' => '#'],
                ['index' => 'name', 'label' => 'Member'],
            ],
            'rows' => User::all()->map(fn (User $user) => $user->setAttribute( 
                // Default property is `highlight`, but you can specify a
                // custom property name with `highlight-property` attribute
                'highlight', match ($user->id) {
                    1, 5 => 'green',
                    3 => 'red',
                    default => null,
                }
            )),
        ];
    }
}; ?>
 
<div>
    <x-table :$headers :$rows highlight /> 
</div>

# Interacting With Data

The table component provides a custom Blade directive @interact to allow you to interact with the table columns about the data provided in each row. Allowing you to interact with the table and make things like add an action button for each row.

<?php
 
use App\Models\User;
use Livewire\WithPagination;
use Livewire\Volt\Component;
use Illuminate\Database\Eloquent\Builder;
 
new class extends Component {
    use WithPagination;
 
    public ?int $quantity = 10;
 
    public ?string $search = null;
 
    public function delete(string $id): void
    {
        dd($id);
    }
 
    public function with(): array
    {
        return [
            'headers' => [
                ['index' => 'id', 'label' => '#'],
                ['index' => 'name', 'label' => 'Member'],
                ['index' => 'action'], 
            ],
            'rows' => User::query()
                ->when($this->search, function (Builder $query) {
                    return $query->where('name', 'like', "%{$this->search}%");
                })
                ->paginate($this->quantity)
                ->withQueryString(),
            'type' => 'data', 
        ];
    }
}; ?>
 
<div>
    <!-- 1: -->
    <x-table :$headers :$rows filter paginate id="users">
        <!-- The $row represents the instance of \App\Model\User of each row -->
        @interact('column_action', $row) 
            <x-button.circle color="red"
                             icon="trash"
                             wire:click="delete('{{ $row->id }}')" />
        @endinteract
    </x-table>
 
    <!-- 2: You can pass extra variables to the directive -->
    <x-table :$headers :$rows filter paginate id="users">
        @interact('column_action', $row, $type) 
            <x-button.circle color="red"
                             icon="trash"
                             wire:click="delete('{{ $row->id }}', '{{ $type }}')" />
        @endinteract
    </x-table>
</div>

As mentioned in the Livewire documentation, for cases where you want to render components in a loop, using the Blade @interact directive, you must specify a unique key for each component:

<?php
 
use App\Models\User;
use Livewire\WithPagination;
use Livewire\Volt\Component;
use Illuminate\Database\Eloquent\Builder;
 
new class extends Component {
    use WithPagination;
 
    public ?int $quantity = 10;
 
    public ?string $search = null;
 
    public function with(): array
    {
        return [
            'headers' => [
                ['index' => 'id', 'label' => '#'],
                ['index' => 'name', 'label' => 'Member'],
                ['index' => 'action'],
            ],
            'rows' => User::query()
                ->when($this->search, function (Builder $query) {
                    return $query->where('name', 'like', "%{$this->search}%");
                })
                ->paginate($this->quantity)
                ->withQueryString(),
        ];
    }
}; ?>
 
<div>
    <x-table :$headers :$rows filter paginate id="users">
        @interact('column_action', $row)
            <livewire:delete.user :user="$row" :key="uniqid()" /> 
        @endinteract
    </x-table>
</div>

You can use $loop inside the @interact directive to interact with the data of each row. The $loop variable is a special variable provided by Blade that contains information about the current iteration of the loop.

# Expandable

An option to expand rows to display sub-content such as nested tables.

<x-table :$headers :$rows expandable>
    @interact('sub_table', $row)
        <x-table :headers="[
            ['index' => 'property', 'label' => 'Property'],
            ['index' => 'value', 'label' => 'Value'],
        ]" :rows="[
            ['property' => 'Email', 'value' => $row->email],
            ['property' => 'Created', 'value' => $row->created_at->format('Y-m-d')],
        ]" />
    @endinteract
</x-table>