Table

data

Sortable, responsive data table with sticky-header and zebra-stripe options. Wraps in a keyboard-accessible scroll region for wide content.

Preview

Scale1.00

Sortable with zebra striping

Vehicle inventory
VIN
1HGCG5655WA	Honda	Accord	2023	Active
2T1BURHE0JC	Toyota	Corolla	2024	Pending
3FA6P0HD7LR	Ford	Fusion	2020	Sold
5YJ3E1EA7LF	Tesla	Model 3	2022	Active
WBAJB0C51JB	BMW	530i	2021	Active

Sticky header

	Model
Honda	Accord	2023
Toyota	Corolla	2024
Ford	Fusion	2020
Tesla	Model 3	2022
BMW	530i	2021

Usage

import { Table } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';

const columns = [
  { key: 'name', header: 'Name', sortable: true },
  { key: 'role', header: 'Role' },
  { key: 'count', header: 'Count', align: 'right', sortable: true },
];

<Table
  columns={columns}
  rows={data}
  caption="Team members"
  zebra
  sticky
/>

Props

Prop	Type	Default	Description
`columns`	`TableColumn<T>[]`	--	Column definitions (key, header, sortable, align)
`rows`	`T[]`	--	Row data; each object must contain the keys declared in columns
`caption`	`string`	--	Visible caption rendered above the table
`aria-label`	`string`	--	Accessible label (used when no visible caption)
`sticky`	`boolean`	`false`	Stick the header row while the body scrolls
`zebra`	`boolean`	`false`	Alternate-row background shading
`scrollLabel`	`string`	`'Data table'`	Accessible label for the scroll wrapper region
`class`	`string`	--	Additional CSS classes on the wrapper

Accessibility

Caption / label: Provide either a visible caption or an aria-label to identify the table.
Scope: Every <th> carries scope="col".
Sorting: Sortable columns render a <button> with aria-sort (ascending / descending / none).
Keyboard: The scroll wrapper is a focusable role="region" with tabindex="0" for keyboard scrolling.
Focus: Visible :focus-visible ring on sort buttons and the scroll region.

Do / Don't

Do

Always provide a caption or aria-label. Use sortable only on columns where sorting aids comprehension.

Don't

Don't make every column sortable by default. Avoid tables for layout; use CSS grid or flex instead.