Table component · Remix Kit

Semantic data table in a named scroll region with optional server-owned sorting links.

Preview

Recent deploys
app	status
launchpad	pass
console	warn

Usage

<Table caption="Recent deploys" head={['app', 'status']}>…rows…</Table>

Table props
prop	type	notes
caption	string	Accessible table name, rendered as a real sr-only `<caption>` and referenced by the scroll region via `aria-labelledby`. Required.
id?	string	Stable caption id when the table shares a document with separately rendered fragments.
head	Array<RemixNode \| SortableHeader>	`<th scope="col">` cell contents; the kit renders the header cells. A `{ label, sort }` entry renders a sortable-column link with `aria-sort`.
children?	RemixNode	`<tr>` rows (apps author the `<td>` cells; the kit styles them).
dense?	boolean	Tighter cell padding for data-dense tables.
stickyHead?	boolean	Header row sticks while the page scrolls (long tables).
mix?	MixInput	Composition passthrough for the scroll wrapper.