Pagination

Standalone page navigation for row lists — nav + list semantics, current-page marking, and an ellipsis range hook.

Pagination navigates paged data outside DataTable (which has its own built-in): a labelled nav with an ordered list of page buttons, previous/ next, and ellipsis collapse for long ranges via the usePaginationRange hook.

Installation

import {
  Pagination, PaginationContent, PaginationItem, PaginationLink,
  PaginationPrevious, PaginationNext, PaginationEllipsis, usePaginationRange,
} from "@iammikz/srui";

Usage

A typical list: slice the rows by page, derive totalPages, render the nav. 44 invoices at 4 per page → 11 pages, with the ellipsis window around the current page:

INV-1216$64.00 · Pending
INV-1217$101.00 · Shipped
INV-1218$138.00 · Paid
INV-1219$175.00 · Pending

Real links (asChild)

asChild renders the link's single child — an <a href> here, a router <Link> in an SPA — instead of a <button>, keeping isActive styling for real page navigations:

Exports

Export	Notes
`Pagination`	`nav` wrapper, `aria-label="Pagination"`
`PaginationContent` / `PaginationItem`	The `ol`/`li` structure
`PaginationLink`	Page button; `isActive` sets `aria-current="page"`; `asChild` renders an `<a href>` child instead of a `<button>`
`PaginationPrevious` / `PaginationNext`	Edge buttons with chevrons; `disabled` at the bounds
`PaginationEllipsis`	The `…` marker (hidden from assistive tech)
`usePaginationRange(page, totalPages, siblings?)`	`1 … 4 5 6 … 12` window; first/last always shown, `siblings` (default 1) around the current page

Wiring checklist

totalPages = Math.ceil(rows.length / perPage) — never hardcode it.
rows.slice((page - 1) * perPage, page * perPage) for the visible page.
Clamp page when the data shrinks (setPage(p => Math.min(p, totalPages))).
For server-side paging, fetch on page changes and drive the same nav.

Accessibility

The nav is labelled; the current page carries aria-current="page" plus the selected treatment; Previous/Next announce themselves and disable at the bounds; ellipses are decorative.

Short ranges (≤ 6 pages with the default siblings) render every page with no ellipses. For tables with toolbar/filter/CSV needs, prefer DataTable's built-in pagination instead of wiring this by hand — it covers server-side paging too (manualPagination + rowCount; see Data Table).