Pagination
A navigation component for splitting content across multiple pages.
Default
Shows the visible item range and the previous and next arrows. It fills its container, so it usually sits in a table footer.
Showing 21 – 30 of 248 items
With page indicator
Shows the current page and the page count between the arrows.
Showing 1 – 10 of 50 items
Arrows only
Hides the item count and keeps only the arrows.
Cursor mode
Use mode="cursor" when the API returns a next-page cursor instead of a total. Pass hasNextPage instead of limit, offset, and totalItems. The count reads "Page N", and showPageIndicatorBetweenArrows has no effect.
Page 1
Loading state
isLoading disables both arrows while data is fetching.
Showing 11 – 20 of 248 items
Empty state
With zero items, the count is hidden and both arrows are disabled.
Properties
The current page number (1-based)
Called with the new page when an arrow is clicked
counted takes a total and shows the item range; cursor only knows whether a next page exists
Default: counted
Number of items per page. Required in counted mode
Number of items to skip, usually (page - 1) * limit. Required in counted mode
Total number of items across all pages. Required in counted mode
Whether a next page exists. Required in cursor mode
Disables both arrows
Default: false
Show only navigation arrows without item count
Default: false
Show the current page and page count between the arrows. Counted mode only
Default: false
Content shown before the item count
Set to 'end' to align the item count to the right
Accessible name for the navigation landmark. Change it when a view has more than one
Default: Pagination
Additional CSS classes to apply to the pagination container