TablePagination

<TablePagination> is the canonical pagination footer for any list / table. Shows the current range (“11–20 of 143”), page-size picker, prev/next, optional first/last.

import from "@na/ui/components/TablePagination" ▶ Open in Storybook packages/ui/src/components/TablePagination.tsx

When to use

Below any DataTable or Table where the data is paginated.
Anywhere a virtualized infinite list isn’t appropriate.

Don’t use TablePagination for: infinite scroll / load-more (use the Timeline onLoadMore pattern), client-side filtering of small lists, or board / kanban views.

Default

<TablePagination
  page={page}
  pageSize={pageSize}
  totalElements={143}
  totalPages={Math.ceil(143 / pageSize)}
  onPageChange={setPage}
  onPageSizeChange={setPageSize}
/>

API

Prop	Type	Default	Description
`page` *	`number`	—	1-indexed current page.
`pageSize` *	`number`	—	Rows per page.
`totalElements` *	`number`	—	Total row count across pages.
`totalPages` *	`number`	—	Total page count (caller computes).
`onPageChange` *	`(page: number) => void`	—	Fires on Next / Prev / First / Last.
`onPageSizeChange`	`(size: number) => void`	—	Fires on page-size change. Omit to hide the picker.
`pageSizeOptions`	`number[]`	`[10, 25, 50, 100]`	Options in the page-size dropdown.

Design guidelines

✓ Do

Persist page + pageSize in the URL (?page=2&size=25) so reload preserves position.
Use 25 as a sensible default pageSize — small enough to scan, large enough to avoid frequent paging.
Reset to page 1 when the user changes filters. Stale page numbers confuse the user.

✗ Don't

Use TablePagination on lists < 25 items. Render them all instead.
Default to a pageSize > 100. Past that, virtualize or infinite-scroll.

Accessibility

All buttons are real <Button>s with proper aria-labels (“Previous page”, “Next page”).
The page-size picker is a Select with a Label.
The range text is plain text — screen readers announce it as part of the surrounding region.

DataTable — Common host.
Table — When you’re rolling your own.

▶ Open TablePagination stories in Storybook