Components · Data table

Pagination

The footer that pages a long roster. A left-aligned "X–Y of Z" range reports the current slice against the filtered total, a rows-per-page select resizes the page (25 / 50 / 100), and the right-hand controls step Previous → a windowed run of numbered pages → Next — the current page held active and Previous disabled on page one.

DataGrid footer · page 1 of 6 · 25 / page

Volunteer	Team	State	Status	Last active
MRMarisol Reyes	Transport	CA	Active	2h ago
DWDarnell Washington	Foster network	GA	Onboarding	5h ago
HBHannah Bergström	Community outreach	WA	Active	1h ago
DFDiego Fuentes	Medical	AZ	Active	4h ago
WCWei Chen	Transport	IL	Active	6h ago

Page 1 is pinned is-active (accent fill), page 2 is pinned :hover, and Previous is disabled at the first page. The range and page count derive from the filtered row total (142) ÷ page size (25) → 1–25 of 142, 6 pages; the ellipsis collapses the middle of a long run.

range

from = pageIndex·pageSize + 1, to = min((pageIndex+1)·pageSize, total) over the filtered row count — so it tracks the query, not the raw dataset. Reads "0" of "0" when empty.

rows per page

A select of 25 · 50 · 100 that calls setPageSize; changing it recomputes the range + page count and holds the top-of-page anchored.

page buttons

A windowed run (up to 5 around the current index) with an ellipsis gap to the last page; the current index is is-active and non-interactive.

prev / next

Chevron steppers wired to previousPage() / nextPage(); each is disabled (dimmed, non-clickable) at its edge — Previous on page 1, Next on the last.

Source · RescuersTable.tsx pagination footer (TanStack getPaginationRowModel, showFrom/showTo, windowed pageButtons, page-size select) · @phauna/ds/grid DataGrid footer · design-system/data-table.