Navigation

Pagination

Numbered pager with prev and next arrows, ellipsis truncation past 7 pages, and a leading X to Y of Z range summary. Controlled: pass the current page, and say how it moves with either onchange or href.

Basic

41 to 60 of 284

Smaller dataset

1 to 20 of 45

Notes

The count always renders. The page buttons appear only once there is more than one page, and a total of zero reads No results.
Past 7 pages the middle is collapsed. The gap is drawn as three dots rather than the ellipsis character, and it is hidden from assistive technology. First and last are always visible.
On a phone held by a finger the pager shows the first page, the current page and the last, with a gap mark for each run between them, so it stays on one row. From the sm width up, and under a mouse, it shows the pages above. Under a touch screen the pages sit 16px apart, so each takes a 44px target of its own.
The X to Y of Z summary uses the current page and perPage, and clamps to the total on the last page.
Without a total the pager runs uncounted: the summary reads Page N and the numbered pages are not drawn, because the last page is not a number an uncounted list knows. Say hasNext so it knows whether the next step exists. An endpoint can answer that without counting the collection: ask for one row more than the page holds and see if it arrives.
href renders links rather than buttons, which the browser follows with no script at all. A pager with only a callback is inert until the bundle arrives, and that is every server-rendered document for as long as it takes to load. The two are exclusive: an anchor whose click also ran the callback would page twice.

Paging by link, with no total

The shape a list takes when its endpoint reports no count and the page has to work before it hydrates.

Page 2

API

Prop	Type	Default	Description
`page` required	`number`	no default	Currently selected page (1-based).
`total`	`number`	no default	Collection size, when the endpoint states one. Leave it out for a list whose endpoint reports no count and say hasNext instead. Absent is not zero.
`perPage`	`number`	`20`	Items per page.
`hasNext`	`boolean`	`false`	Whether a page after this one exists. Read only when total is absent, because a counted list already knows where it ends.
`count`	`number`	no default	How many rows the page on screen holds. A list with no total passes it, so the summary can state a range.
`noun`	`string`	`''`	What the list holds, in the plural, for the summary to name: files, jobs.
`onchange`	`(page: number) => void`	no default	Fires when the reader navigates. Supply this or href, never both. Required if href is absent.
`href`	`(page: number) => string`	no default	Builds the target for each control, rendering links instead of buttons. Supply this or onchange, never both. Required if onchange is absent.
`class`	`string`	no default	Extra classes on the wrapper.