Table

Usage

These are thin semantic wrappers — no built-in sorting, selection, or pagination. For interactive tables, pair these primitives with TanStack Table (the audience / knowledge data-tables in features already do this).

Variants

API Reference

Table

Wraps the <table> in an overflow-x-auto container so wide tables scroll horizontally on narrow viewports. Forwards every native <table> prop.

TableHeader · TableBody · TableFooter

Pass-through wrappers around <thead> / <tbody> / <tfoot>. TableFooter ships with border-t and a subtle bg-sand-9/10 tint so summary rows read as a tier above the body — use for totals, aggregate counts, or "showing 4 of 24" summaries.

TableRow

A <tr> with built-in row chrome:

Hover is scoped to <tbody> rows only — header and footer rows stay flat on pointer-over. The data-state="selected" hook is what TanStack Table writes when a row is selected, so wrapping data tables get the highlight for free.

TableHead

A <th> with header typography (text-xs font-medium text-fg-mid — normal case, no uppercase, no letter-spacing). Use inside TableHeader > TableRow. For sortable columns, swap TableHead for TableSortableHead.

TableCell

A <td> with default padding (p-3) and whitespace-nowrap. Override className="whitespace-normal" for long-text cells that should wrap.

TableCaption

A <caption> element styled text-sm text-fg-mid with a top margin. Renders below the table by default (caption-bottom).

TableSortableHead

A <th> that replaces TableHead for sortable columns. Renders a ghost-style <button> inside with the column label and an ArrowUp / ArrowDown icon when active, and writes aria-sort on the <th> itself so assistive tech reads the column's sort state.

When direction is set, the label lifts to text-fg-high so the active column reads at a glance. Hover state matches control.ghost (bg-sand-9/10 + text-fg-high).

Guidelines

• Use the primitives directly when the table is static (a few rows, no sorting, no selection). The wrapping Table already provides overflow-x-auto for narrow viewports.

• Compose with TanStack Table for interactive data tables — sorting, selection, pagination, virtualization. The data-state="selected" hook is wired so selection highlight works without extra CSS.

• Right-align numeric columns (className="text-right" on the matching TableHead + TableCell) so digits stack on the decimal place.

• Use TableSortableHead for every sortable column. Same visual across audience, knowledge, team members — keeps the sortable affordance consistent and wires up aria-sort automatically.

• Hand-roll a sortable header by dropping a custom <button> into TableHead. TableSortableHead is the canonical entry point — it carries the active-column lift, the arrow direction, and the aria-sort attribute on the right element (<th>).

• Lay out non-tabular content with Table. Cards, forms, and key-value displays all read worse here than in a flex container.

• Hand-roll selection highlight. The data-state="selected" hook is the canonical entry point — everything in features that has selection (audience, knowledge) wires into it.

• Force every cell to whitespace-nowrap then add horizontal scroll for long text. Override the default with whitespace-normal on cells whose content should wrap (descriptions, names).