| Name | Type | Default | Description |
|---|---|---|---|
total* | number | | Total number of items. |
className | string | | Additional CSS classes. |
onPageChange | (pageNumber: number) => void | | Function to handle page change. |
pageNumber | number | 1
| Current page number. |
pageSize | number | 10
| Size of each page. |
Pagination
The Pagination component indicates the position a user is within a set of results, and allows for navigation of those results.
For more information on how to use the features and props for this component, check out the developer documentation.
Usage
The Pagination component is composed of a count region that indicates the current pageNumber amongst the total number of pages, as well as a navigation region. The total number of pages is calculated through the total number of results to show and the pageSize, which is the number of results shown per page.
The navigation region of the Pagination component is comprised of two arrow Icons. When either of them is clicked, an onPageChange callback function is invoked with the resulting page number.