Table

Plain, unstyled-beyond-tokens table primitives (TableHeader/TableBody/TableRow/TableHead/ TableCell). For anything sortable, selectable, or backed by real data, reach for DataTable (built on TanStack Table) instead — it already handles loading and error states; this is the building block underneath it.

Props

Table wraps its <table> in a horizontally-scrollable <div> automatically — the props above apply to the outer <table> element; everything else forwards straight through to its native HTML element (<thead>, <tr>, <th>, ...).

Accessibility

• Always give header cells real <th> semantics via TableHead — don't style a TableCell to look like a header row instead; screen readers rely on <th> to announce column context per cell.
• TableCaption exists for a reason — use it (not a preceding paragraph) when a table needs a short description, so it's programmatically associated with the table.

Do / Don't

• Do reach for DataTable/SelectableDataTable for anything backed by an API — they add sorting, loading skeletons, and error+retry on top of this same base.
• Don't hand-roll pagination or sorting state on top of these raw primitives — that logic already exists in DataTable; duplicating it is exactly the kind of drift this catalog exists to prevent.