Components / data-display

Table Row

One row of Table. Header labels the columns; Body rows show records with Hover and Selected states.

import { TableRow } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { TableRow } from '@basiiik/ui';

<TableRow />

• Hover is CSS on body rows. Selected is selected (aria-selected). Type defaults from TableHeader / TableBody.
• Compose with: avatar, badge.
• Storybook: Data display/Table.

Props

States. Hover is CSS on body rows. Selected is selected (aria-selected). Type defaults from TableHeader / TableBody.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Rows inside Table

Do not use it when

• Standalone lists (use List Item)

Rules for agents

• Use TableRow only inside TableHeader or TableBody; its type is set from them
• Header rows contain TableHeaderCells; body rows contain TableCells, one per column
• Use selected for rows chosen with a checkbox, and keep a visible checkbox in the row
• Override density on a row only in exceptional cases

Avoid

• Making the whole row clickable and also putting buttons in it
• A different number of cells from the header
• Selection shown only by the row tint, with no checkbox

Keyboard

• Interactive rows: Enter activates, arrow keys if using a grid pattern

Accessibility

• aria-selected on selectable rows

Colour tokens it reads

Related

• Table

data-display 8 Figma variants Try it in the live demo