Eric's UI Kit Docs & Demo

Tables

Tables in EUIKit have default styling and are ready for Livewire filtering and sorting.

Tables are given default margins, unlike most EUIKit components.

<x-euikit::table> A wrapper around the entire table
<x-euikit::table.column-header> A column header cell
<x-euikit::table.row> A wrapper around a table row
<x-euikit::table.cell> A normal table cell

Sortable tables with EUIKit and Livewire

The column-header component in EUIKit tables is ready for Livewire sorting. Your Livewire component needs to include a sort() method and sortBy and sortDirection attributes. The method will be passed the name of the column to sort by, which comes from the lwsort attribute on the column header. While this is traditionally a column in a database table, what your component does in the sort() method is up to you. Each column-header that has an lwsort attribute will get a double-chevron icon, indicating that the table is sortable by that column. When the column-header is clicked, EUIKit will pass sort($lwsort) back to the Livewire component. The column-header component will compare the current value of sortBy with lwsort and will change the direction of the sort chevron indicator appropriately.

Livewire Table Example

Alabama Montgomery 32.38 -86.3
Alaska Juneau 58.3 -134.42
Arizona Phoenix 33.45 -112.1
Arkansas Little Rock 34.75 -92.29
California Sacramento 38.58 -121.49
Colorado Denver 39.74 -104.98
Connecticut Hartford 41.76 -72.68
Delaware Dover 39.16 -75.52
Florida Tallahassee 30.44 -84.28
Georgia Atlanta 33.75 -84.39

Code:


// app/Http/Livewire/StateTable.php
<?php namespace App\Http\Livewire;

use App\Models\Capital;
use Livewire\Component;
use Livewire\WithPagination;

class StateTable extends Component {
    use WithPagination;

    public $sortBy = 'state';
    public $sortDirection = 'asc';

    public function sort($field) {
        $this->resetPage();
        if ($this->sortBy === $field) { // already sorting - change sort direction
            $this->sortDirection = $this->sortDirection == 'asc' ? 'desc' : 'asc';
        }
        $this->sortBy = $field;
    }

    public function render() {
        $capitals = Capital::orderBy($this->sortBy, $this->sortDirection)
            ->paginate(10);

        return view('livewire.state-table', ['capitals' => $capitals]);
    }
}


// resources/views/livewire/state-table.blade.php
<x-euikit::table>
        <x-slot:header>
            <tr>
                <x-euikit::table.column-header lwsort="state">
                    State
                </x-euikit::table.column-header>
                <x-euikit::table.column-header lwsort="capital">
                    Capital
                </x-euikit::table.column-header>
                <x-euikit::table.column-header lwsort="latitude">
                    Latitude
                </x-euikit::table.column-header>
                <x-euikit::table.column-header lwsort="longitude">
                    Longitude
                </x-euikit::table.column-header>
            </tr>
        </x-slot:header>

@foreach($capitals as $capital)
        <x-euikit::table.row>
            <x-euikit::table.cell>
                {{ $capital->state }}
            </x-euikit::table.cell>
            <x-euikit::table.cell>
                {{ $capital->capital }}
            </x-euikit::table.cell>
            <x-euikit::table.cell>
                {{ $capital->latitude }}
            </x-euikit::table.cell>
            <x-euikit::table.cell>
                {{ $capital->longitude }}
            </x-euikit::table.cell>
        </x-euikit::table.row>
@endforeach
    </x-euikit::table>

table

The <x-euikit::table> component wraps around the entire table. It can take one optional slot:

header Optional Wraps the header row.

The table wrapper can take one optional attribute:
nohover Optional FALSE If present (or TRUE), rows in the table will not show emphasis on hover.

Example code:

            
                <x-euikit::table>
                    <x-slot:header>
                        <tr>
                            <x-euikit::table.column-header>
                                Header
                            </x-euikit::table.column-header>
                        </tr>
                    </x-slot:header>
                    <!-- (table body goes here…) -->
                </x-euikit::table>

table.column-header

Use <x-euikit::table.column-header> for a cell in the table header. The component can handle the display of Livewire sortable columns and sort direction.

lwsort Optional The field on this table that Livewire should use when sorting by this column. Adding this attribute will add icons to the header, showing sortability and sort direction. The presence of this attribute will also add a wire.click="sort($lwsort)" click handler to this cell.

table.row

Each data row in the table should be wrapped in <x-euikit::table.row>. Column header rows should be wrapped with the <tr> tag.

table.cell

Data cells should be wrapped by <x-euikit::table.cell>.