Table
A table shows data.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
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 | None | Names the table for screen readers. Say what the rows are, such as Queues and their open counts. |
| columns * | readonly Column[] | None | 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>[] | None | The rows, keyed by column key. |
| emptyMessage | string | 'No rows to show' | Shown when there are no rows. Say why the table is empty. |
Accessibility
What the component does for you, and what it needs from you.
- The caption is the table name. Screen readers announce it before the data.
- Headers are real header cells, so screen readers announce each value with its column name.
- Alignment is visual only. It helps people compare values on screen and does not change how values are announced.