Dynamic table

A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.

Install

One package and one stylesheet. The stylesheet carries the tokens every component reads.

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	—	Names the table for a screen reader. Say what the rows are.
columns *	readonly Column[]	—	The columns in order. Each takes a key, a label, an optional alignment and whether it can be sorted.
rows *	readonly Record<string, ReactNode>[]	—	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 rather than that it is empty.

A required prop is marked with an asterisk.

Prop	Type	Default	Description
pages *	number	—	How many pages there are.
defaultSelected	number	1	The page shown first, counted from one.
onChange	(page: number) => void	—	Called with the new page. Fetching that page is yours to do.
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 it is not hunted for at the end of a long table.
Announce that the page changed. A reader who cannot see the rows move otherwise has no idea anything happened.