Table

A responsive table component for displaying tabular data with support for headers, footers, and captions.

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 
<twig:ui:Table class="max-w-2xl">
    <twig:ui:Table:Caption>A list of your recent invoices.</twig:ui:Table:Caption>
    <twig:ui:Table:Header>
        <twig:ui:Table:Row>
            <twig:ui:Table:Head>Invoice</twig:ui:Table:Head>
            <twig:ui:Table:Head>Status</twig:ui:Table:Head>
            <twig:ui:Table:Head>Method</twig:ui:Table:Head>
            <twig:ui:Table:Head class="text-end">Amount</twig:ui:Table:Head>
        </twig:ui:Table:Row>
    </twig:ui:Table:Header>
    <twig:ui:Table:Body>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell class="font-medium">INV001</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>
                <twig:ui:Badge color="green" variant="soft">Paid</twig:ui:Badge>
            </twig:ui:Table:Cell>
            <twig:ui:Table:Cell>Credit Card</twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="text-end">$250.00</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell class="font-medium">INV002</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>
                <twig:ui:Badge color="amber" variant="soft">Pending</twig:ui:Badge>
            </twig:ui:Table:Cell>
            <twig:ui:Table:Cell>PayPal</twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="text-end">$150.00</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell class="font-medium">INV003</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>
                <twig:ui:Badge color="red" variant="soft">Unpaid</twig:ui:Badge>
            </twig:ui:Table:Cell>
            <twig:ui:Table:Cell>Bank Transfer</twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="text-end">$350.00</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell class="font-medium">INV004</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>
                <twig:ui:Badge color="green" variant="soft">Paid</twig:ui:Badge>
            </twig:ui:Table:Cell>
            <twig:ui:Table:Cell>Credit Card</twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="text-end">$450.00</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
    </twig:ui:Table:Body>
    <twig:ui:Table:Footer>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell colspan="3">Total</twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="text-end">$1,200.00</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
    </twig:ui:Table:Footer>
</twig:ui:Table>

Usage

Name Role Status
Sarah Chen Admin Active
Marcus Johnson Editor Invited
2 members 
<twig:ui:Table class="max-w-md">
    <twig:ui:Table:Header>
        <twig:ui:Table:Row>
            <twig:ui:Table:Head>Name</twig:ui:Table:Head>
            <twig:ui:Table:Head>Role</twig:ui:Table:Head>
            <twig:ui:Table:Head>Status</twig:ui:Table:Head>
        </twig:ui:Table:Row>
    </twig:ui:Table:Header>
    <twig:ui:Table:Body>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell class="font-medium">Sarah Chen</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>Admin</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>Active</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell class="font-medium">Marcus Johnson</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>Editor</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>Invited</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
    </twig:ui:Table:Body>
    <twig:ui:Table:Footer>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell colspan="3">2 members</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
    </twig:ui:Table:Footer>
</twig:ui:Table>

Examples

Team members

Member Role Status Last active
SC
Sarah Chen [email protected]
Admin Active 2 minutes ago
MJ
Marcus Johnson [email protected]
Editor Active 1 hour ago
EM
Elena Moreau [email protected]
Viewer Invited Never
3 members 
<twig:ui:Table class="max-w-2xl">
    <twig:ui:Table:Header>
        <twig:ui:Table:Row>
            <twig:ui:Table:Head>Member</twig:ui:Table:Head>
            <twig:ui:Table:Head>Role</twig:ui:Table:Head>
            <twig:ui:Table:Head>Status</twig:ui:Table:Head>
            <twig:ui:Table:Head class="text-end">Last active</twig:ui:Table:Head>
        </twig:ui:Table:Row>
    </twig:ui:Table:Header>
    <twig:ui:Table:Body>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell>
                <div class="flex items-center gap-3">
                    <twig:ui:Avatar size="sm">
                        <twig:ui:Avatar:Image src="https://avatars.laravel.cloud/168544b7-8325-4ac9-a019-5316d1824b0e?vibe=forest" alt="Sarah Chen" />
                        <twig:ui:Avatar:Fallback>SC</twig:ui:Avatar:Fallback>
                    </twig:ui:Avatar>
                    <div class="flex flex-col">
                        <span class="font-medium">Sarah Chen</span>
                        <span class="text-xs text-neutral-500 dark:text-neutral-400">[email protected]</span>
                    </div>
                </div>
            </twig:ui:Table:Cell>
            <twig:ui:Table:Cell>
                <twig:ui:Badge variant="outline">Admin</twig:ui:Badge>
            </twig:ui:Table:Cell>
            <twig:ui:Table:Cell>
                <twig:ui:Badge color="green" variant="soft">Active</twig:ui:Badge>
            </twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="text-end">2 minutes ago</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell>
                <div class="flex items-center gap-3">
                    <twig:ui:Avatar size="sm">
                        <twig:ui:Avatar:Image src="https://avatars.laravel.cloud/1a5e26e9-6894-40fd-b37f-75286143c505?vibe=ocean" alt="Marcus Johnson" />
                        <twig:ui:Avatar:Fallback>MJ</twig:ui:Avatar:Fallback>
                    </twig:ui:Avatar>
                    <div class="flex flex-col">
                        <span class="font-medium">Marcus Johnson</span>
                        <span class="text-xs text-neutral-500 dark:text-neutral-400">[email protected]</span>
                    </div>
                </div>
            </twig:ui:Table:Cell>
            <twig:ui:Table:Cell>
                <twig:ui:Badge variant="outline">Editor</twig:ui:Badge>
            </twig:ui:Table:Cell>
            <twig:ui:Table:Cell>
                <twig:ui:Badge color="green" variant="soft">Active</twig:ui:Badge>
            </twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="text-end">1 hour ago</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell>
                <div class="flex items-center gap-3">
                    <twig:ui:Avatar size="sm">
                        <twig:ui:Avatar:Fallback>EM</twig:ui:Avatar:Fallback>
                    </twig:ui:Avatar>
                    <div class="flex flex-col">
                        <span class="font-medium">Elena Moreau</span>
                        <span class="text-xs text-neutral-500 dark:text-neutral-400">[email protected]</span>
                    </div>
                </div>
            </twig:ui:Table:Cell>
            <twig:ui:Table:Cell>
                <twig:ui:Badge variant="outline">Viewer</twig:ui:Badge>
            </twig:ui:Table:Cell>
            <twig:ui:Table:Cell>
                <twig:ui:Badge color="amber" variant="soft">Invited</twig:ui:Badge>
            </twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="text-end">Never</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
    </twig:ui:Table:Body>
    <twig:ui:Table:Footer>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell colspan="4">3 members</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
    </twig:ui:Table:Footer>
</twig:ui:Table>

Card

Set variant to card to render the body as one bordered, rounded surface.

Project Team Budget
Website Redesign Frontend Team $12,500
Mobile App Mobile Team $8,750
API Integration Backend Team $5,200
Total Budget $26,450 
<twig:ui:Table variant="card" class="max-w-md">
    <twig:ui:Table:Header>
        <twig:ui:Table:Row>
            <twig:ui:Table:Head>Project</twig:ui:Table:Head>
            <twig:ui:Table:Head>Team</twig:ui:Table:Head>
            <twig:ui:Table:Head class="text-end">Budget</twig:ui:Table:Head>
        </twig:ui:Table:Row>
    </twig:ui:Table:Header>
    <twig:ui:Table:Body>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell class="font-medium">Website Redesign</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>Frontend Team</twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="text-end">$12,500</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell class="font-medium">Mobile App</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>Mobile Team</twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="text-end">$8,750</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell class="font-medium">API Integration</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>Backend Team</twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="text-end">$5,200</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
    </twig:ui:Table:Body>
    <twig:ui:Table:Footer>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell colspan="2">Total Budget</twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="text-end">$26,450</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
    </twig:ui:Table:Footer>
</twig:ui:Table>
Quarterly revenue by region.
Region Revenue
Europe $42,500
Americas $58,200
Asia Pacific $31,900
Total $132,600 
<twig:ui:Table class="max-w-md">
    <twig:ui:Table:Caption>Quarterly revenue by region.</twig:ui:Table:Caption>
    <twig:ui:Table:Header>
        <twig:ui:Table:Row>
            <twig:ui:Table:Head>Region</twig:ui:Table:Head>
            <twig:ui:Table:Head class="text-end">Revenue</twig:ui:Table:Head>
        </twig:ui:Table:Row>
    </twig:ui:Table:Header>
    <twig:ui:Table:Body>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell class="font-medium">Europe</twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="text-end">$42,500</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell class="font-medium">Americas</twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="text-end">$58,200</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell class="font-medium">Asia Pacific</twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="text-end">$31,900</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
    </twig:ui:Table:Body>
    <twig:ui:Table:Footer>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell>Total</twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="text-end">$132,600</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
    </twig:ui:Table:Footer>
</twig:ui:Table>

Overflow

Wide tables scroll horizontally instead of breaking the page layout.

ID Name Email Company Country Joined Revenue
001 Ada Lovelace [email protected] Analytical Engines United Kingdom 2024-01-12 $12,400
002 Grace Hopper [email protected] Naval Systems United States 2024-02-03 $8,950
Total $21,350 
<twig:ui:Table class="max-w-md">
    <twig:ui:Table:Header>
        <twig:ui:Table:Row>
            <twig:ui:Table:Head>ID</twig:ui:Table:Head>
            <twig:ui:Table:Head>Name</twig:ui:Table:Head>
            <twig:ui:Table:Head>Email</twig:ui:Table:Head>
            <twig:ui:Table:Head>Company</twig:ui:Table:Head>
            <twig:ui:Table:Head>Country</twig:ui:Table:Head>
            <twig:ui:Table:Head>Joined</twig:ui:Table:Head>
            <twig:ui:Table:Head class="text-end">Revenue</twig:ui:Table:Head>
        </twig:ui:Table:Row>
    </twig:ui:Table:Header>
    <twig:ui:Table:Body>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell class="font-medium">001</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>Ada Lovelace</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>[email protected]</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>Analytical Engines</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>United Kingdom</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>2024-01-12</twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="text-end">$12,400</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell class="font-medium">002</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>Grace Hopper</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>[email protected]</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>Naval Systems</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>United States</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>2024-02-03</twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="text-end">$8,950</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
    </twig:ui:Table:Body>
    <twig:ui:Table:Footer>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell colspan="6">Total</twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="text-end">$21,350</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
    </twig:ui:Table:Footer>
</twig:ui:Table>

RTL

Set dir="rtl" on a wrapper. Header and cell alignment use logical properties, so they follow the reading direction automatically.

الاسم الدور
أدا لوفلايس مهندسة
غريس هوبر أميرالة
الإجمالي شخصان 
<div dir="rtl">
    <twig:ui:Table class="max-w-md">
        <twig:ui:Table:Header>
            <twig:ui:Table:Row>
                <twig:ui:Table:Head>الاسم</twig:ui:Table:Head>
                <twig:ui:Table:Head>الدور</twig:ui:Table:Head>
            </twig:ui:Table:Row>
        </twig:ui:Table:Header>
        <twig:ui:Table:Body>
            <twig:ui:Table:Row>
                <twig:ui:Table:Cell class="font-medium">أدا لوفلايس</twig:ui:Table:Cell>
                <twig:ui:Table:Cell>مهندسة</twig:ui:Table:Cell>
            </twig:ui:Table:Row>
            <twig:ui:Table:Row>
                <twig:ui:Table:Cell class="font-medium">غريس هوبر</twig:ui:Table:Cell>
                <twig:ui:Table:Cell>أميرالة</twig:ui:Table:Cell>
            </twig:ui:Table:Row>
        </twig:ui:Table:Body>
        <twig:ui:Table:Footer>
            <twig:ui:Table:Row>
                <twig:ui:Table:Cell>الإجمالي</twig:ui:Table:Cell>
                <twig:ui:Table:Cell>شخصان</twig:ui:Table:Cell>
            </twig:ui:Table:Row>
        </twig:ui:Table:Footer>
    </twig:ui:Table>
</div>

API Reference

<twig:ui:Table>

Prop Type Description
variant 'default' | 'card' Renders the body as one bordered, rounded surface when card. Defaults to default
Block Description
content The table sections: header, body and footer

<twig:ui:Table:Caption>

Block Description
content A description of the table, rendered below it

<twig:ui:Table:Header>

Block Description
content The header rows

<twig:ui:Table:Body>

Block Description
content The data rows

<twig:ui:Table:Footer>

Rendered as a muted band.

Block Description
content The footer rows

<twig:ui:Table:Row>

Block Description
content The header or data cells

<twig:ui:Table:Head>

A header cell, rendered as <th>.

Block Description
content The column label

<twig:ui:Table:Cell>

A data cell, rendered as <td>.

Block Description
content The cell value