Pagination

Pagination allows for navigation through pages of content.

Edit the code below to see your changes live!

API

Pagination

Prop Name
Type
Default
Description
itemsPerPage *number

Indicates how many items are displayed per page.

currentPage *number

Indicates the page currently/initially displayed.

totalItems *number

Indicates how many items in total will be displayed.

itemsPerPageOptions *number[]

Indicates options for per-page ranges.

onPageChange *(page: number) => void

Function that will be called when a navigation arrow is clicked.

onItemsPerPageChange *(range: number) => void

Function that will be called when a new per-page range is selected.

Props ending with * are required

Inherited Props

Expand

Margin Props

Beta