AdminDataTable

Usage

AdminDataTable is generic over its row type — define columns with a cell renderer per column, pass rows and a stable rowKey, and add rowHref when each row navigates to a detail page. The design system is framework-agnostic: rowHref governs the link semantics while onRowActivate lets your router take over unmodified clicks — the preview above wires both to keep them observable.

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

const columns: AdminDataTableColumn<LinkRow>[] = [
  { id: 'label', header: 'Private link', cell: (r) => r.label },
  { id: 'url', header: 'URL', cell: (r) => <code>{r.url}</code> },
  { id: 'clicks', header: 'Clicks', align: 'right', cell: (r) => r.clicks },
]

<AdminDataTable
  columns={columns}
  rows={rows}
  rowKey={(r) => r.id}
  ariaLabel={t('privateLinks')}
  emptyMessage={t('noLinksYet')}
  rowHref={(r) => `/admin/links/${r.id}`}
  onRowActivate={(r) => router.push(`/admin/links/${r.id}`)}
/>

Row-navigation contract

rowHref renders the first cell as a genuine <a> whose ::after stretches across the row — clicking anywhere navigates, while focus, the accessible name, middle-click and open-in-new-tab come from the anchor itself. onRowActivate fires only for unmodified primary clicks, so ⌘/Ctrl-click and middle-click keep the native anchor behaviour. Return undefined from rowHref for rows that must stay non-navigable.

Accessibility

Table chrome comes from the canonical DataTable organism: th scope="col" on every column (WCAG 1.3.1), the table named by ariaLabel (WCAG 4.1.2), and the empty state rendered in a role="status" / aria-live="polite" cell. Navigable rows are real anchors — keyboard users Tab into the link and modified clicks work natively (WCAG 2.1.1).

Props

Column definition

AdminDataTableColumn<T> — the historical Admin column API: plain cell renderers, no sort config.