Dynamic table

A dynamic table shows rows of data, with pagination, sorting and reordering included.

Install

One package and one stylesheet. The stylesheet holds the tokens every component uses.

pnpm add @wolf-rayet/react

import '@wolf-rayet/react/css/wolf-rayet.css';
import { Table, Pagination } from '@wolf-rayet/react';

A required prop is marked with an asterisk.

Prop	Type	Default	Description
caption	string	None	Names the table for a screen reader. Say what the rows are.
columns *	readonly Column[]	None	The columns in order. Each takes a key, a label, an optional alignment and whether it can be sorted.
rows *	readonly Record<string, ReactNode>[]	None	The rows for the page currently shown, not the whole set.
emptyMessage	string	'No rows to show'	Shown when the page has no rows. Say why there are none, not just that it is empty.

A required prop is marked with an asterisk.

Prop	Type	Default	Description
pages *	number	None	How many pages there are.
defaultSelected	number	1	The page shown first, counted from one.
onChange	(page: number) => void	None	Called with the new page. Your code fetches that page.
label	string	'Pagination'	Names the pagination control for assistive technology.

What the component does for you, and what it needs from you.

The table keeps its caption and header cells, so each value is still announced with its column.
Pagination is a navigation landmark and marks the current page, so screen reader users can jump to it without going through the whole table.
Announce when the page changes. People who cannot see the rows change will not know anything happened.