Table

Recent invoices. Amounts include GST.

Invoice	Customer	Status	Total
INV-1042	Northside Plumbing	Paid	$840.00
INV-1043	Avery Chen	Draft	$325.50
INV-1044	Hudson Electrical	Overdue	$1,280.00

Show codeCopy

Usage

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@workshop1/ui/components/table"

Use a table when users compare the same fields across records. Keep headers short, right-align numeric values, and use tabular numerals for money and quantities. The primitive provides horizontal overflow on narrow screens.

Make the primary cell a real link when a row opens a record. Do not turn the whole row into a synthetic button. Empty and error states belong outside the table so headers and blank rows do not compete with the message.

Appearance

All tables share alternating subtle row backgrounds, dividers beneath the header and final body row, 14px sans text, 40px headers, and consistent cell padding. Keep page wrappers free of table-specific borders, rounding, and shadows. Use smaller muted text only for secondary lines.

Accessibility

Add a caption when the surrounding heading does not fully describe the data. Use scope="col" or equivalent header relationships for complex tables, and announce the next action on sortable header buttons.