LifeDS

Component

Table

Tabular data display with header, body, footer and caption. Composable with badges, buttons and sorting.

Tableoverflow-x-auto wrapper
TableHeaderthead with border-b on rows
TableBodytbody — last row has no border
TableFootertfoot with muted background
TableRowtr — hover · selected · expanded states
TableHeadth — h-10 · whitespace-nowrap
TableCelltd — p-2 · whitespace-nowrap
TableCaptioncaption — below the table
Playground
InvoiceCustomerDateStatusAmount
INV-001Acme Corp2024-01-15Active$1250.00
INV-002Globex Inc2024-01-18Pending$870.50
INV-003Initech LLC2024-01-20Active$3400.00
INV-004Umbrella Ltd2024-01-22Inactive$215.75
INV-005Massive Dynamic2024-01-25Active$5800.00

Sortable columns

DateStatus
INV-001Acme Corp2024-01-15Active$1250.00
INV-002Globex Inc2024-01-18Pending$870.50
INV-003Initech LLC2024-01-20Active$3400.00
INV-004Umbrella Ltd2024-01-22Inactive$215.75
INV-005Massive Dynamic2024-01-25Active$5800.00

Row actions

InvoiceCustomerStatusAmount
INV-001Acme CorpActive$1250.00
INV-002Globex IncPending$870.50
INV-003Initech LLCActive$3400.00
INV-004Umbrella LtdInactive$215.75
INV-005Massive DynamicActive$5800.00

Footer & caption

Quarterly summary — Q1 2024
MonthInvoicesRevenue
January12$11,536.25
February9$8,210.00
March15$14,875.50
Total$34,621.75

Empty state

InvoiceCustomerStatusAmount
No results found.

Tokens used

4 semantic tokens consumed by this component.

--foregroundForeground
text-foreground
--mutedMuted
bg-mutedtext-mutedborder-muted
--muted-foregroundMuted Foreground
text-muted-foreground
--borderBorder
border-borderborder