navigation / stable

Pagination

A shared table and list footer with a range, page numbers and container-aware compact navigation.

LIVE PREVIEW

Loading preview…

When to use

Finite result sets in tables and lists.
Server pagination with a known total.

Consider an alternative

Infinite scrolling without a known total.

Import

import { Pagination } from '@revido-llc/kit';

Keyboard interaction

Tab — focus page controls
Enter / Space — change pages
Arrow keys — choose rows per page in the Select

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


total (required)	number	—	Total items across every page.
compact	boolean	false	Always use ‹ page / count ›; otherwise compact at narrow container widths.
defaultPage	number	1	Initial page when uncontrolled.
itemLabel	string	"rows"	Plural noun used in the range summary.
onClearSelection	(() => void)	—
onPageChange	((page: number) => void)	—
onPageSizeChange	((pageSize: number) => void)	—	Called before onPageChange(1) when the size changes.
onPaginationChange	((pagination: { page: number; pageSize: number; }) => void)	—	Atomic page/size update for URL state. Use instead of separate callbacks.
page	number	—	Current page, starting at one (controlled).
pageSize	number	—	Rows per page. Omit for an internally managed size of ten.
pageSizeOptions	number[]	—	Shows a Kit Select when supplied.
selectedCount	number	0	Replaces the range with the selection count when greater than zero.
children	ReactNode	—
className	string	—

Related exports

CursorPagination

Examples

Numbered pages

<Pagination total={120} page={page} onPageChange={setPage} pageSize={pageSize} onPageSizeChange={setPageSize} pageSizeOptions={[10, 25, 50]} itemLabel="tasks" />

Compact

<Pagination total={50} defaultPage={2} compact itemLabel="tasks" />

Selection

<Pagination total={50} selectedCount={selected.length} onClearSelection={() => setSelected([])} />

One URL update

Use the atomic callback when page and pageSize share URL state; preserve other query parameters.

<Pagination total={total} page={page} pageSize={pageSize} pageSizeOptions={[10, 25, 50]}
  onPaginationChange={(next) => {
    const params = new URLSearchParams(searchParams);
    params.set("page", String(next.page));
    params.set("pageSize", String(next.pageSize));
    replaceUrl(params.toString());
  }} />

Cursor windows

Only the application knows cursor availability; no page count is inferred. Pending disables both controls.

<CursorPagination hasPrevious={history.length > 0} hasNext={result.hasMore} onPrevious={loadPrevious} onNext={loadNext} isPending={pending} summary={`${rows.length} gaps in this window`} previousLabel="Previous gaps" nextLabel="Next gaps" />