Pagination

Pass total, the number of items, and Pagination works out the page count, like five pages for 50 items at 10 per page.

Set size to small or large for a tighter or roomier row, or leave it out for the medium default between them.

size scales every part of the row, from the page links to the size changer, the quick jumper and the total, enabled or disabled.

Set simple for a compact row with a page input between the arrows, or pass { readOnly: true } to show the page as plain text.

Pass current and onChange to keep the page in your own state, so you can fetch its rows or write it to the URL.

Set disabled to gray out the page links and arrows and take them out of the tab order.

Pass showTotal a function of total and range to print a count before the page links, like "1 to 20 of 85 items".

Set showQuickJumper to add a go-to-page field, or pass { goButton } to put a confirm button next to it.

Pass pageSizeOptions to set the sizes the size changer offers, like 10, 25 and 50 per page.

Set align to start, center or end to place the row inside a container wider than itself.

prevIcon, nextIcon, jumpPrevIcon and jumpNextIcon default to chevrons from your icon pack, and a jumper swaps its ellipsis for a double chevron on hover.

A customer table with a footer that counts the rows on screen and pages through them with a Pagination.