Table
A table is used to display data.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Table } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| caption | string | — | Names the table for a screen reader. Say what the rows are, as in Queues and their open counts. |
| columns * | readonly Column[] | — | The columns in order. Each takes a key, a label, an optional alignment and whether it can be sorted. Align a column of numbers to the end. |
| rows * | readonly Record<string, ReactNode>[] | — | The rows, keyed by column key. |
| emptyMessage | string | 'No rows to show' | Shown when there are no rows. Say why it is empty rather than that it is. |
Accessibility
What the component does for you, and what it needs from you.
- The caption is the table name, which is what a screen reader announces before the data.
- Headers are real header cells, so each value is announced with the column it belongs to rather than as a loose number.
- Alignment is a visual matter only. It helps comparison on screen and changes nothing about how a value is announced.