Data
Pagination
The footer of a paginated table: the range summary, a page-size dropdown and first, previous, numbered, next and last buttons.
Examples
137 rows
<Pagination page={page} totalPages={totalPages} pageSize={pageSize} totalItems={137}
onPageChange={setPage} onPageSizeChange={setPageSize} />Guidelines
- Presentational and controlled: the page owns the state (usually the URL's ?page and ?pageSize) and passes onPageChange and onPageSizeChange.
- Shows a window of five page numbers centred on the current page. Omit onPageSizeChange to hide the dropdown.
Props
| Prop | Type | What it does |
|---|---|---|
| page, totalPages, pageSize, totalItems | number | The state. |
| onPageChange, onPageSizeChange, pageSizes | (n) => void, (n) => void, number[] | Callbacks and the sizes offered (10, 25, 50). |
| summary | ReactNode | Replaces the 1–25 of 137 text. |