Table

Data display · src/components/Table/Table.tsx

Rows and columns of data, in a real table.

A real table with thead, th scope="col" and an optional caption - not a grid of divs. That is what lets a screen reader say which column a cell is in, and it is the single most common way a data table becomes unusable.

Money columns split the symbol from the figure so mixed currencies align on the digits. A column of "₩1,200" and "$9.50" right-aligned as plain strings lines up the wrong characters.

lang is per cell rather than per table because keep-all line breaking is scoped to the element, and a data table of mixed scripts has no single page language to inherit.

Import

import { Table } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
columns	Array<TableColumn<Row>>
rows	Row[]
caption	React.ReactNode	Names the table. A real caption, so it is announced with the table.
dense	boolean
className	string

Exported types

TableColumn