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.

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.

NameTypeDefaultDescription
total*numberTotal number of items.
classNamestringAdditional CSS classes.
onPageChange(pageNumber: number) => voidFunction to handle page change.
pageNumbernumber1 Current page number.
pageSizenumber10 Size of each page.