Table

A collection of components for building tables.

Source
A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PaidCredit Card$250.00
INV002PendingPayPal$150.00
INV003UnpaidBank Transfer$350.00
INV004PaidCredit Card$450.00
INV005PaidPayPal$550.00
INV006PendingBank Transfer$200.00
INV007UnpaidCredit Card$300.00
Total$2,500.00

Installation

npx @rahimstack@latest add table

API Reference

const TableAnatomy = defineStyleAnatomy({
    table: cva([
        "UI-Table__table",
        "w-full caption-bottom text-sm",
    ]),
    tableHeader: cva([
        "UI-Table__tableHeader",
        "[&_tr]:border-b",
    ]),
    tableBody: cva([
        "UI-Table__tableBody",
        "[&_tr:last-child]:border-0",
    ]),
    tableFooter: cva([
        "UI-Table__tableFooter",
        "border-t bg-gray-100 dark:bg-gray-900 bg-opacity-40 font-medium [&>tr]:last:border-b-0",
    ]),
    tableRow: cva([
        "UI-Table__tableRow",
        "border-b transition-colors hover:bg-[--subtle] data-[state=selected]:bg-[--subtle]",
    ]),
    tableHead: cva([
        "UI-Table__tableHead",
        "h-12 px-4 text-left align-middle font-medium",
        "[&:has([role=checkbox])]:pr-0",
    ]),
    tableCell: cva([
        "UI-Table__tableCell",
        "p-4 align-middle [&:has([role=checkbox])]:pr-0",
    ]),
    tableCaption: cva([
        "UI-Table__tableCaption",
        "mt-4 text-sm",
    ]),
})