Responsivetable

Usage

ResponsiveTable is generic over its row type. Define columns with either an accessor (primitive value) or a render function (arbitrary content), give them priority values so the narrow layouts lead with the primary data, and pass data plus an ariaLabel describing the table. Leave responsiveVariant on auto unless a surface needs a pinned layout — the preview above pins each one so you can compare them.

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

const columns: Column<SalesRow>[] = [
  { id: 'event', header: 'Event', accessor: (r) => r.event, priority: 1 },
  { id: 'tickets', header: 'Tickets', accessor: (r) => r.tickets, priority: 2 },
  { id: 'gross', header: 'Gross', priority: 3, render: (r) => fmtCad(r.gross) },
  { id: 'venue', header: 'Venue', accessor: (r) => r.venue, priority: 4 },
]

<ResponsiveTable
  columns={columns}
  data={rows}
  responsiveVariant="auto"
  ariaLabel={t('salesByEvent')}
/>

Layout behavior

auto resolves the layout from the viewport width — card below 768px, stacked below 1024px, a real table from 1024px up. The card layout renders each row as a <dl> definition list (label from cardLabelAccessor or the header), the stacked layout pairs a label with each value, and the table layout keeps the declaration order with scope="col" headers. Priority reorders only the narrow layouts. Empty data never renders a blank box: the compact EmptyState molecule shows "No data available." unless you pass your own emptyState node.

Accessibility

Each layout keeps a perceivable structure: real <table> with scope="col" headers, definition lists for cards, paired label/value spans when stacked (WCAG 1.3.1). The region is named by ariaLabel so sibling tables are distinguishable (WCAG 4.1.2), and the empty state is announced politely (role="status"). The component is presentational — no focusable cells, no keyboard traps.

Props

Column definition

Column<T> — the single column model shared by all three layouts.