Pagination
A control for navigating to the next or previous page of a large data set.Prop | Required | Description | Type |
|---|---|---|---|
currentItemsPerPage | ✅ | The value of the selected items per page SelectInput. | number |
currentPage | ✅ | The current page of the range. | number |
itemsCount | ✅ | Total number of items. | number |
onPageUpdate | ✅ | Callback to run when pagination state is updated, e.g. on navigation to a new page or when "Items per page" value is updated. You can use the paginationState parameter to perform additional tasks, e.g. data fetching. | (paginationState: PaginationState, prevPaginationState: PaginationState, paginationStateDiff: Partial<PaginationState>) => void |
itemsLabelPlural | — | What to call Items, e.g. used in "Items per page". Defaults to Items. | string |
itemsLabelSingular | — | What to call Item, e.g. used in "1 of 1 item". Defaults to Item. | string |
initialPage | — | The page to initially display. Defaults to the value of the indexBased prop, which is the first page. | number |
initialItemsPerPage | — | The number of items per page to initially load. Defaults to first in itemsPerPageOptions list. | number |
indexBased | — | The index based system to use. Defaults to 1. E.g. a value of 0 means the first page will be 0 and a value of 1 means the first page will be 1. | 0 | 1 |
itemsPerPageOptions | — | A list of items per page to populate the menu with. Defaults to [10, 20, 30, 40, 50, 100]. | [number, ...number[]] |
size | — | Controls the size of elements within the pagination component. Defaults to medium | "small" | "medium" |
block | — | If set to true the pagination component will fill the width of the parent and visually separate items per page and navigation elements. Defaults to false | boolean |