blatui

Components

Table

A responsive table component.

php artisan blatui:add table
A list of your recent invoices.
Invoice Status Method Amount
INV001 Paid Credit Card $250.00
INV002 Pending PayPal $150.00
INV003 Unpaid Bank Transfer $350.00
INV004 Paid Credit Card $450.00
Total $1,200.00 
<x-ui.table>
    <x-ui.table-caption>A list of your recent invoices.</x-ui.table-caption>
    <x-ui.table-header>
        <x-ui.table-row>
            <x-ui.table-head class="w-[100px]">Invoice</x-ui.table-head>
            <x-ui.table-head>Status</x-ui.table-head>
            <x-ui.table-head>Method</x-ui.table-head>
            <x-ui.table-head class="text-right">Amount</x-ui.table-head>
        </x-ui.table-row>
    </x-ui.table-header>
    <x-ui.table-body>
        <x-ui.table-row>
            <x-ui.table-cell class="font-medium">INV001</x-ui.table-cell>
            <x-ui.table-cell>Paid</x-ui.table-cell>
            <x-ui.table-cell>Credit Card</x-ui.table-cell>
            <x-ui.table-cell class="text-right">$250.00</x-ui.table-cell>
        </x-ui.table-row>
        <x-ui.table-row>
            <x-ui.table-cell class="font-medium">INV002</x-ui.table-cell>
            <x-ui.table-cell>Pending</x-ui.table-cell>
            <x-ui.table-cell>PayPal</x-ui.table-cell>
            <x-ui.table-cell class="text-right">$150.00</x-ui.table-cell>
        </x-ui.table-row>
        <x-ui.table-row>
            <x-ui.table-cell class="font-medium">INV003</x-ui.table-cell>
            <x-ui.table-cell>Unpaid</x-ui.table-cell>
            <x-ui.table-cell>Bank Transfer</x-ui.table-cell>
            <x-ui.table-cell class="text-right">$350.00</x-ui.table-cell>
        </x-ui.table-row>
        <x-ui.table-row>
            <x-ui.table-cell class="font-medium">INV004</x-ui.table-cell>
            <x-ui.table-cell>Paid</x-ui.table-cell>
            <x-ui.table-cell>Credit Card</x-ui.table-cell>
            <x-ui.table-cell class="text-right">$450.00</x-ui.table-cell>
        </x-ui.table-row>
    </x-ui.table-body>
    <x-ui.table-footer>
        <x-ui.table-row>
            <x-ui.table-cell colspan="3">Total</x-ui.table-cell>
            <x-ui.table-cell class="text-right">$1,200.00</x-ui.table-cell>
        </x-ui.table-row>
    </x-ui.table-footer>
</x-ui.table>

Actions

Invoice Status Amount Actions
INV001 Paid $250.00
INV002 Pending $150.00
INV003 Unpaid $350.00 
<x-ui.table>
    <x-ui.table-header>
        <x-ui.table-row>
            <x-ui.table-head>Invoice</x-ui.table-head>
            <x-ui.table-head>Status</x-ui.table-head>
            <x-ui.table-head class="text-right">Amount</x-ui.table-head>
            <x-ui.table-head class="w-10"><span class="sr-only">Actions</span></x-ui.table-head>
        </x-ui.table-row>
    </x-ui.table-header>
    <x-ui.table-body>
        @foreach ([['INV001', 'Paid', '$250.00', 'secondary'], ['INV002', 'Pending', '$150.00', 'outline'], ['INV003', 'Unpaid', '$350.00', 'destructive']] as [$id, $status, $amount, $variant])
            <x-ui.table-row>
                <x-ui.table-cell class="font-medium">{{ $id }}</x-ui.table-cell>
                <x-ui.table-cell><x-ui.badge :variant="$variant">{{ $status }}</x-ui.badge></x-ui.table-cell>
                <x-ui.table-cell class="text-right tabular-nums">{{ $amount }}</x-ui.table-cell>
                <x-ui.table-cell class="text-right">
                    <x-ui.dropdown-menu>
                        <x-ui.dropdown-menu-trigger>
                            <x-ui.button variant="ghost" size="icon-sm" aria-label="Actions for {{ $id }}">
                                <x-lucide-more-horizontal aria-hidden="true" />
                            </x-ui.button>
                        </x-ui.dropdown-menu-trigger>
                        <x-ui.dropdown-menu-content align="end">
                            <x-ui.dropdown-menu-item>View invoice</x-ui.dropdown-menu-item>
                            <x-ui.dropdown-menu-item>Edit</x-ui.dropdown-menu-item>
                            <x-ui.dropdown-menu-separator />
                            <x-ui.dropdown-menu-item variant="destructive">Delete</x-ui.dropdown-menu-item>
                        </x-ui.dropdown-menu-content>
                    </x-ui.dropdown-menu>
                </x-ui.table-cell>
            </x-ui.table-row>
        @endforeach
    </x-ui.table-body>
</x-ui.table>

Card

Invoice Status Method Amount
INV001 Paid Credit Card $250.00
INV002 Pending PayPal $150.00
INV003 Unpaid Bank Transfer $350.00 
{{-- The card variant wraps the table in a bordered, rounded surface. --}}
<x-ui.table variant="card" class="[&_tbody_tr:last-child]:border-0">
    <x-ui.table-header>
        <x-ui.table-row class="[&>th]:px-4">
            <x-ui.table-head>Invoice</x-ui.table-head>
            <x-ui.table-head>Status</x-ui.table-head>
            <x-ui.table-head>Method</x-ui.table-head>
            <x-ui.table-head class="text-right">Amount</x-ui.table-head>
        </x-ui.table-row>
    </x-ui.table-header>
    <x-ui.table-body>
        <x-ui.table-row class="[&>td]:px-4">
            <x-ui.table-cell class="font-medium">INV001</x-ui.table-cell>
            <x-ui.table-cell>Paid</x-ui.table-cell>
            <x-ui.table-cell>Credit Card</x-ui.table-cell>
            <x-ui.table-cell class="text-right">$250.00</x-ui.table-cell>
        </x-ui.table-row>
        <x-ui.table-row class="[&>td]:px-4">
            <x-ui.table-cell class="font-medium">INV002</x-ui.table-cell>
            <x-ui.table-cell>Pending</x-ui.table-cell>
            <x-ui.table-cell>PayPal</x-ui.table-cell>
            <x-ui.table-cell class="text-right">$150.00</x-ui.table-cell>
        </x-ui.table-row>
        <x-ui.table-row class="[&>td]:px-4">
            <x-ui.table-cell class="font-medium">INV003</x-ui.table-cell>
            <x-ui.table-cell>Unpaid</x-ui.table-cell>
            <x-ui.table-cell>Bank Transfer</x-ui.table-cell>
            <x-ui.table-cell class="text-right">$350.00</x-ui.table-cell>
        </x-ui.table-row>
    </x-ui.table-body>
</x-ui.table>

Comparison

Feature Hobby Pro Enterprise
Projects 3 Unlimited Unlimited
Custom domains
Preview deploys
Team seats 1 5 Unlimited
Rollbacks 3 days Unlimited Unlimited
SSO / SAML
Audit logs
SLA 99.9% 99.99% 
@php
    $tiers = ['Hobby', 'Pro', 'Enterprise'];
    $rows = [
        ['Projects', '3', 'Unlimited', 'Unlimited'],
        ['Custom domains', true, true, true],
        ['Preview deploys', true, true, true],
        ['Team seats', '1', '5', 'Unlimited'],
        ['Rollbacks', '3 days', 'Unlimited', 'Unlimited'],
        ['SSO / SAML', false, false, true],
        ['Audit logs', false, false, true],
        ['SLA', false, '99.9%', '99.99%'],
    ];
@endphp

<x-ui.table class="w-full max-w-2xl">
    <x-ui.table-header>
        <x-ui.table-row>
            <x-ui.table-head>Feature</x-ui.table-head>
            @foreach ($tiers as $i => $tier)
                <x-ui.table-head class="text-center {{ $i === 1 ? 'text-primary font-semibold' : '' }}">{{ $tier }}</x-ui.table-head>
            @endforeach
        </x-ui.table-row>
    </x-ui.table-header>
    <x-ui.table-body>
        @foreach ($rows as $row)
            <x-ui.table-row>
                <x-ui.table-cell class="font-medium">{{ $row[0] }}</x-ui.table-cell>
                @foreach (array_slice($row, 1) as $cell)
                    <x-ui.table-cell class="text-center">
                        @if ($cell === true)
                            <x-lucide-check class="text-primary mx-auto size-4" aria-label="Included" />
                        @elseif ($cell === false)
                            <x-lucide-minus class="text-muted-foreground/40 mx-auto size-4" aria-label="Not included" />
                        @else
                            <span class="tabular-nums">{{ $cell }}</span>
                        @endif
                    </x-ui.table-cell>
                @endforeach
            </x-ui.table-row>
        @endforeach
    </x-ui.table-body>
</x-ui.table>

Selection

Customer Status Amount
Sofia Carter Paid $250.00
Jackson Doe Pending $150.00
Amelia Bell Paid $450.00 
<x-ui.table>
    <x-ui.table-header>
        <x-ui.table-row>
            <x-ui.table-head class="w-10"><x-ui.checkbox aria-label="Select all rows" /></x-ui.table-head>
            <x-ui.table-head>Customer</x-ui.table-head>
            <x-ui.table-head>Status</x-ui.table-head>
            <x-ui.table-head class="text-right">Amount</x-ui.table-head>
        </x-ui.table-row>
    </x-ui.table-header>
    <x-ui.table-body>
        <x-ui.table-row data-state="selected">
            <x-ui.table-cell><x-ui.checkbox checked aria-label="Select Sofia Carter" /></x-ui.table-cell>
            <x-ui.table-cell class="font-medium">Sofia Carter</x-ui.table-cell>
            <x-ui.table-cell><x-ui.badge variant="secondary">Paid</x-ui.badge></x-ui.table-cell>
            <x-ui.table-cell class="text-right">$250.00</x-ui.table-cell>
        </x-ui.table-row>
        <x-ui.table-row>
            <x-ui.table-cell><x-ui.checkbox aria-label="Select Jackson Doe" /></x-ui.table-cell>
            <x-ui.table-cell class="font-medium">Jackson Doe</x-ui.table-cell>
            <x-ui.table-cell><x-ui.badge variant="outline">Pending</x-ui.badge></x-ui.table-cell>
            <x-ui.table-cell class="text-right">$150.00</x-ui.table-cell>
        </x-ui.table-row>
        <x-ui.table-row data-state="selected">
            <x-ui.table-cell><x-ui.checkbox checked aria-label="Select Amelia Bell" /></x-ui.table-cell>
            <x-ui.table-cell class="font-medium">Amelia Bell</x-ui.table-cell>
            <x-ui.table-cell><x-ui.badge variant="secondary">Paid</x-ui.badge></x-ui.table-cell>
            <x-ui.table-cell class="text-right">$450.00</x-ui.table-cell>
        </x-ui.table-row>
    </x-ui.table-body>
</x-ui.table>

Striped

Name Email Role Status
Olivia Martin [email protected] Owner Active
Jackson Lee [email protected] Member Active
Isabella Nguyen [email protected] Member Invited
William Kim [email protected] Viewer Suspended
Sofia Davis [email protected] Member Active 
{{-- Zebra striping via a row-targeting arbitrary variant on the table. --}}
<x-ui.table class="[&_tbody_tr:nth-child(odd)]:bg-muted/50">
    <x-ui.table-header>
        <x-ui.table-row>
            <x-ui.table-head>Name</x-ui.table-head>
            <x-ui.table-head>Email</x-ui.table-head>
            <x-ui.table-head>Role</x-ui.table-head>
            <x-ui.table-head class="text-right">Status</x-ui.table-head>
        </x-ui.table-row>
    </x-ui.table-header>
    <x-ui.table-body>
        <x-ui.table-row>
            <x-ui.table-cell class="font-medium">Olivia Martin</x-ui.table-cell>
            <x-ui.table-cell class="text-muted-foreground">[email protected]</x-ui.table-cell>
            <x-ui.table-cell>Owner</x-ui.table-cell>
            <x-ui.table-cell class="text-right">Active</x-ui.table-cell>
        </x-ui.table-row>
        <x-ui.table-row>
            <x-ui.table-cell class="font-medium">Jackson Lee</x-ui.table-cell>
            <x-ui.table-cell class="text-muted-foreground">[email protected]</x-ui.table-cell>
            <x-ui.table-cell>Member</x-ui.table-cell>
            <x-ui.table-cell class="text-right">Active</x-ui.table-cell>
        </x-ui.table-row>
        <x-ui.table-row>
            <x-ui.table-cell class="font-medium">Isabella Nguyen</x-ui.table-cell>
            <x-ui.table-cell class="text-muted-foreground">[email protected]</x-ui.table-cell>
            <x-ui.table-cell>Member</x-ui.table-cell>
            <x-ui.table-cell class="text-right">Invited</x-ui.table-cell>
        </x-ui.table-row>
        <x-ui.table-row>
            <x-ui.table-cell class="font-medium">William Kim</x-ui.table-cell>
            <x-ui.table-cell class="text-muted-foreground">[email protected]</x-ui.table-cell>
            <x-ui.table-cell>Viewer</x-ui.table-cell>
            <x-ui.table-cell class="text-right">Suspended</x-ui.table-cell>
        </x-ui.table-row>
        <x-ui.table-row>
            <x-ui.table-cell class="font-medium">Sofia Davis</x-ui.table-cell>
            <x-ui.table-cell class="text-muted-foreground">[email protected]</x-ui.table-cell>
            <x-ui.table-cell>Member</x-ui.table-cell>
            <x-ui.table-cell class="text-right">Active</x-ui.table-cell>
        </x-ui.table-row>
    </x-ui.table-body>
</x-ui.table>

API Reference

Props, slots and exposed methods for <x-ui.table>.

Props

Prop Type Default Description
variant string 'default' Container style. "card" wraps the table in a bordered, rounded surface on bg-card; "default" is a plain horizontally scrollable wrapper.
default card

Slots

Slot Description
default The table structure, composed from the sub-components: <x-ui.table-caption>, <x-ui.table-header>, <x-ui.table-body> and <x-ui.table-footer>, each holding <x-ui.table-row> with <x-ui.table-head> or <x-ui.table-cell> children.