Slate
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
Last updated .