Table

Basic

Feature	Table	DataTable
Sorting	—	✓
Filtering	—	✓
Pagination	—	✓
Zero JS	✓	—

import { Table } from '@eekodigital/raster';

const columns = [
  { key: 'feature', header: 'Feature', render: (r) => r.feature },
  { key: 'table', header: 'Table', render: (r) => r.table },
  { key: 'dataTable', header: 'DataTable', render: (r) => r.dataTable },
];

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

Caption

Pass a caption to render a visible <caption> element that identifies the table for screen reader users.

Feature comparison

Feature	Table	DataTable
Sorting	—	✓
Filtering	—	✓
Pagination	—	✓
Zero JS	✓	—

<Table columns={columns} rows={rows} getRowKey={(r) => r.id} caption="Feature comparison" />

When to use

Use Table for static content — changelogs, pricing grids, comparison tables, blog posts. It renders server-side with zero JavaScript.

Use DataTable instead

when you need sorting, filtering, or pagination.

Use SummaryList instead

when displaying key-value pairs rather than rows of comparable data.

Props

Prop	Type	Default	Description
columns	Column<T>[]	—	Column definitions. Each has key, header, and render.
rows	T[]	—	Data rows.
getRowKey	(row: T) => string	—	Returns a unique key for each row.
caption	string	—	Optional visible <caption> for screen readers.