Table

Displays structured data in rows and columns. Supports optional client-side sorting with accessible aria-sort indicators.

Basic

const columns = [
  { key: 'ref', header: 'Ref', render: (r) => r.ref },
  { key: 'name', header: 'Name', render: (r) => r.name },
];

<Table columns={columns} rows={rows} getRowKey={(r) => r.id} />

Sortable

Add a sortValue function to a column to make it sortable. Clicking the column header cycles through ascending → descending → default. aria-sort is applied to the header for screen reader users.

const columns = [
  { key: 'ref', header: 'Ref', sortValue: (r) => r.ref, render: (r) => r.ref },
  { key: 'name', header: 'Name', sortValue: (r) => r.name, render: (r) => r.name },
  { key: 'status', header: 'Status', render: (r) => r.status }, // not sortable
];

<Table columns={columns} rows={rows} getRowKey={(r) => r.id} />

Props