Pagination
The bar under a long table that moves between pages, says which rows are showing, and lets people pick how many rows a page holds.
Master
Click the pages and arrows, and pick rows per page. Rows 500 shows the ellipsis. Turn the range and the Select on and off.
Usage
Use Pagination under a Table or DataGrid whose rows don't fit on one page. It is one component: pass total (the number of rows) and read page and pageSize back to slice your rows. Previous and next arrows sit at the start with the page numbers between them; long runs collapse into an ellipsis around the current page. At the end, Showing 1 to 10 of 59 rows and a kit Select to pick 10, 25, 50 or 100 rows per page. Changing the page size keeps the first visible row on screen. See contracts/pagination.json for the full contract.
Do's
- Under a Table or DataGrid with more rows than fit on one page.
- Lists people move through page by page and may want longer pages for.
Don'ts
- Do not use it to switch views or steps. Use Tabs.
- Do not build page buttons from a ButtonGroup or loose Buttons. Use Pagination.
- Do not invent a PageSizeSelect or RowsInfo. Turn showPageSize and showRange on or off.
- Do not use raw hex.
<Pagination
total={59}
onPageChange={setPage}
pageSizes={[10, 25, 50, 100]}
/>