Get started
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Table

A responsive table with header, body, footer, and caption parts.

Usage
A list of recent invoices.
Invoice Status Method Amount
INV001 Paid Credit card $250.00
INV002 Pending PayPal $150.00
INV003 Unpaid Bank transfer $350.00
Total $750.00
example.blade.php 
<x-slate::table>
    <x-slate::table-caption>A list of recent invoices.</x-slate::table-caption>
    <x-slate::table-header>
        <x-slate::table-row>
            <x-slate::table-head class="w-[100px]">Invoice</x-slate::table-head>
            <x-slate::table-head>Status</x-slate::table-head>
            <x-slate::table-head>Method</x-slate::table-head>
            <x-slate::table-head class="text-end">Amount</x-slate::table-head>
        </x-slate::table-row>
    </x-slate::table-header>
    <x-slate::table-body>
        <x-slate::table-row>
            <x-slate::table-cell class="font-medium">INV001</x-slate::table-cell>
            <x-slate::table-cell>Paid</x-slate::table-cell>
            <x-slate::table-cell>Credit card</x-slate::table-cell>
            <x-slate::table-cell class="text-end">$250.00</x-slate::table-cell>
        </x-slate::table-row>
        <x-slate::table-row>
            <x-slate::table-cell class="font-medium">INV002</x-slate::table-cell>
            <x-slate::table-cell>Pending</x-slate::table-cell>
            <x-slate::table-cell>PayPal</x-slate::table-cell>
            <x-slate::table-cell class="text-end">$150.00</x-slate::table-cell>
        </x-slate::table-row>
        <x-slate::table-row>
            <x-slate::table-cell class="font-medium">INV003</x-slate::table-cell>
            <x-slate::table-cell>Unpaid</x-slate::table-cell>
            <x-slate::table-cell>Bank transfer</x-slate::table-cell>
            <x-slate::table-cell class="text-end">$350.00</x-slate::table-cell>
        </x-slate::table-row>
    </x-slate::table-body>
    <x-slate::table-footer>
        <x-slate::table-row>
            <x-slate::table-cell colspan="3">Total</x-slate::table-cell>
            <x-slate::table-cell class="text-end">$750.00</x-slate::table-cell>
        </x-slate::table-row>
    </x-slate::table-footer>
</x-slate::table>

Composition
code 
Table
├── TableCaption
├── TableHeader
│   └── TableRow / TableHead
├── TableBody
│   └── TableRow / TableCell
└── TableFooter
    └── TableRow / TableCell

Recipes

Slate’s table is presentational — sort, filter, and pagination live in your Livewire (or controller) state. Compose the markup below.

Sortable column header
example.blade.php 
<x-slate::table-head>
    <button
        type="button"
        class="inline-flex items-center gap-1 font-medium"
        wire:click="sortBy('email')"
    >
        Email
        @if ($sort === 'email')
            <span class="text-muted-foreground" aria-hidden="true">{{ $direction === 'asc' ? '↑' : '↓' }}</span>
            <span class="sr-only">sorted {{ $direction }}</span>
        @endif
    </button>
</x-slate::table-head>

Filter + empty state
example.blade.php 
<div class="mb-4">
    <x-slate::input wire:model.live.debounce.300ms="search" placeholder="Filter…" />
</div>

@@if ($rows->isEmpty())
    <x-slate::empty title="No results" description="Try a different search." />
@@else
    <x-slate::table>
        {{-- …rows… --}}
    </x-slate::table>
@@endif

Pair Pagination under the table; keep page size and query in Livewire.

Last updated . · Legal