Table

A set of composable table subcomponents for displaying structured, tabular data with sortable columns, row striping, and hover highlights.

Installation

npx dafink-ui add table

Demos

Name	Role	Status
Alice Kim	Designer	Active
Ben Torres	Engineer	Active
Clara Patel	PM	On leave

Minimal variant

A flat, borderless look: no outer card border, no header fill, no zebra striping. Matches the docs site's PropsTable.

Name	Type	Description
label	string	Visible label above the field.
disabled	boolean	Prevents interaction.

Composition

<Table>

</TableRow>

</TableHead>

</TableRow>

</TableBody>

</Table>

Props

Name	Type	Default	Description
striped	boolean	false	Alternates odd/even row background colors in the body. No effect when variant is "minimal".
variant	'default' \| 'minimal'	'default'	Visual style. "minimal" is a flat, borderless look (matches the docs PropsTable) with no outer border or header fill.
className	string	""	Additional classes merged onto the table element.

Accessibility

Table has no component-specific keyboard behavior: every interactive piece is a native element in plain document order, with no roving tabindex and nothing to trap or escape. A sortable TableHeader wraps its label in a real button, so Tab reaches it like any other button and Enter/Space triggers the browser's own activation to cycle the sort; the header cell itself carries aria-sort (ascending/descending/none) reflecting the current state. Non-sortable headers and body cells are plain header/data cells with no additional roles.