DataTable

organisms

Generic data table with column config, sorting, row selection, pagination. Foundation for BookingsTable, TierTable, UserTable, PromoTable.

ARIA Role: table

Demo

Name	Status	Amount
Invoice #001	Paid	$1,200.00
Invoice #002	Pending	$850.00

Props

Prop	Type	Required	Default	Description
`rows`	`Row[]`	Yes	`—`
`keyField`	`keyof Row`	Yes	`—`
`caption`	`string`	Yes	`—`	Required for SR-only screen-reader caption

TypeScript Interface

interface DataTableProps<Row> {
  columns: { id: string; header: string; accessor: (row: Row) => React.ReactNode; sortable?: boolean; width?: number | string; align?: 'left' | 'center' | 'right' }[];
  rows: Row[];
  keyField: keyof Row;
  onRowClick?: (row: Row) => void;
  selectable?: boolean;
  selectedIds?: string[];
  onSelectionChange?: (ids: string[]) => void;
  emptyState?: EmptyStateConfig;
  caption: string;
  pagination?: { currentPage: number; totalPages: number; onPageChange: (p: number) => void };
}

Assertions (NASA Rule 5)

[type]columns bounded 1-8 (NASA Rule 2)(NASA Rule 2 + 5)
[aria]<caption className='sr-only'>; <th scope='col'> on every column; sortable columns have aria-sort(WCAG 1.3.1)

Usage

Import

import { Datatable } from '@epasslive/design-system'

Basic

<Datatable />

With Variants

<Datatable variant="primary" size="md" />