AdminPaginatedTable

Usage

Pagination is controlled, not owned — keep currentPage in the URL or parent state (shareable admin URLs), pass pageSize matching your API page size, and hand the full rows array over (the wrapper slices — pre-slicing breaks the counter and clamping).

import { useState } from 'react'
import { AdminPaginatedTable } from '@epasslive/design-system'

function PayoutsTable({ rows }: { rows: PayoutRow[] }) {
  const [page, setPage] = useState(1)
  return (
    <AdminPaginatedTable
      columns={columns}
      rows={rows}
      rowKey={(r) => r.id}
      pageSize={10}
      currentPage={page}
      onPageChange={setPage}
      ariaLabel="Producer payouts"
    />
  )
}

Conventions

onPageChange fires only on real moves — out-of-range or same-page requests are swallowed, so no guard is needed in your handler. rowKey indices are absolute (page offset added), so keys stay stable as pages flip. When a single page remains, the Pagination molecule removes itself — no dead chrome on short tables.

Accessibility

Pagination renders as a <nav> landmark with labeled first / previous / next / last controls, numbered page buttons and aria-current on the active page (WCAG 4.1.2). The table caption gains a "page X of Y" suffix, so screen readers announce position within the dataset when the page flips.

Props

Column definition