Pagination
Help users navigation between multiple pages or screens as part of a set.
Props
itemCount
number
Total number of data items within all pages.
pageNumber
number
The current page being viewed (non-zero based).
perPageCount
number
Number of data items shown per page.
Defaults to
10.
testId
string
Sets a data-testid attribute for automated testing.
variant
"all" | "links-only"
Controls which nav controls are visible.
Defaults to
all.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
Events
onChange
(detail: GoabPaginationOnChangeDetail) => void
Callback fired when the user navigates to a different page.
Show number of results per page
Interaction
Do
Disable the Previous button on the first page, and the Next button on the last page.
Layout
Do
Ensure the pagination component is the full width of the table or content it's connected to.
Types
Tip
Use variant='links-only' for a simpler mobile-friendly pagination with just previous and next buttons.
