AdminBulkActionTable

Usage

AdminBulkActionTable is generic over its row type and is fully controlled — the wrapper holds zero internal selection state. Define columns with a cell renderer, pass rows, a stable rowKey (it doubles as the selection key), an actions array, and own the selectedKeys Set<string> with an onSelectionChange handler. The toolbar stays disabled until a row is picked and onSelect receives the selected row objects.

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

const columns: AdminBulkActionTableColumn<OrderRow>[] = [
  { id: 'buyer', header: 'Buyer', cell: (r) => r.buyer },
  { id: 'event', header: 'Event', cell: (r) => r.event },
  { id: 'total', header: 'Total', cell: (r) => fmtCad(r.total), align: 'right' },
]

const actions: AdminBulkAction<OrderRow>[] = [
  { id: 'publish', label: 'Publish', onSelect: (rows) => publishOrders(rows) },
  { id: 'delete', label: 'Delete', onSelect: (rows) => deleteOrders(rows), destructive: true },
]

function OrdersTable({ orders }: { orders: OrderRow[] }) {
  const [selectedKeys, setSelectedKeys] = React.useState<Set<string>>(new Set())
  return (
    <AdminBulkActionTable
      columns={columns}
      rows={orders}
      rowKey={(r) => r.id}
      actions={actions}
      selectedKeys={selectedKeys}
      onSelectionChange={setSelectedKeys}
      ariaLabel="Orders awaiting review"
    />
  )
}

Conventions

Keep rowKey stable across data refreshes or selections silently detach. Put irreversible actions last and mark them destructive — it only switches the button to the danger variant; confirm-before-delete semantics stay in your handler (compose ConfirmModal). Pass caption for a visible caption; on its own ariaLabel names the table accessibly without visible text.

Accessibility

The select-all and per-row checkboxes come from DataTable's selection plumbing with unique accessible labels, and the toolbar announces the selection count in a role="toolbar" with an aria-live="polite" region (WCAG 4.1.2). While no row is selected the toolbar sets aria-disabled and dims — actions announce as disabled rather than disappearing.

Props

Column definition

Action definition