Pagination
Pagination enables navigation through large datasets by dividing content into pages. It provides controls for page navigation and can display current page information.Standalone
If the
itemCount property is provided, the component shows information about the number of entries shown per page, the total number of entries, as well as the current page index:<App>
<Pagination itemCount="100" pageSize="10" />
</App><App>
<Pagination itemCount="100" pageSize="10" />
</App>If not, the
hasPrevPage and hasNextPage properties can be used to control the enabled/disabled state of the previous and next buttons, while only the previous and next buttons are displayed:<App>
<Pagination hasPrevPage="true" hasNextPage="true" />
</App><App>
<Pagination hasPrevPage="true" hasNextPage="true" />
</App>Integrations
Table
Pagination has first-class support in the Table component. Pagination is controlled via the isPaginated, pageSize, pageSizeOptions and paginationControlsLocation properties.<Table data="/api" isPaginated pageSize="5" pageSizeOptions="{[5, 10, 20]}">
<Column header="ID" bindTo="elem" width="80px">
<!-- ... -->
</Column>
<!-- ... -->
</Table>See the Table reference for a working example.
List
The
List is a perfect example of a component that does not implement its own pagination. Thus, use the Pagination with a Datasource component and connect them to the List:<DataSource id="ds" url="/api" queryParams="{{ from: before, to: after }}" />
<Pagination
itemCount="20"
pageSize="{pageSize}"
pageIndex="{currentPage}"
onPageDidChange="(page, size, total) => {
currentPage = page;
before = page * size;
after = before + size - 1;
}"
/>
<List data="{ds}" />For a comprehensive example, see How to paginate a List.
Properties
buttonRowPosition (default: "center")
Determines where to place the pagination button row in the layout.
Available values:
start, center (default), endenabled (default: true)
This boolean property value indicates whether the component responds to user events (
true) or not (false).hasNextPage
Whether to disable the next page button. Only takes effect if itemCount is not provided.
hasPrevPage
Whether to disable the previous page button. Only takes effect if itemCount is not provided.
itemCount
Total number of items to paginate. If not provided, the component renders simplified pagination controls that are enabled/disabled using the
hasPrevPage and hasNextPage props.maxVisiblePages (default: 1)
Maximum number of page buttons to display
orientation
Layout orientation of the pagination component
Available values:
| Value | Description |
|---|---|
horizontal | The component will fill the available space horizontally |
vertical | The component will fill the available space vertically |
pageIndex (default: 0)
Current page index (0-based)
pageInfoPosition
Determines where to place the page information in the layout.
pageSize (default: 10)
Number of items per page
pageSizeOptions
Array of page sizes the user can select from. If provided, shows a page size selector dropdown
pageSizeSelectorPosition
Determines where to place the page size selector in the layout.
showCurrentPage (default: true)
Whether to show the current page indicator
showPageInfo (default: true)
Whether to show page information
showPageSizeSelector (default: true)
Whether to show the page size selector
Events
pageDidChange
Fired when the current page changes
pageSizeDidChange
Fired when the page size changes
Exposed Methods
currentPage
Gets the current page number (1-based)
currentPageSize
Gets the current page size
moveFirst
Moves to the first page
Signature:
moveFirst(): voidmoveLast
Moves to the last page
Signature:
moveLast(): voidmoveNext
Moves to the next page
Signature:
moveNext(): voidmovePrev
Moves to the previous page
Signature:
movePrev(): voidStyling
Theme Variables
| Variable | Default Value (Light) | Default Value (Dark) |
|---|---|---|
| backgroundColor-Pagination | transparent | transparent |
| backgroundColor-selector-Pagination | transparent | transparent |
| borderColor-Pagination | $color-gray-300 | $color-gray-300 |
| borderRadius-selector-Pagination | $borderRadius | $borderRadius |
| gap-buttonRow-Pagination | $space-2 | $space-2 |
| padding-Pagination | $space-4 | $space-4 |
| textColor-Pagination | $color-gray-600 | $color-gray-600 |
| textColor-selector-Pagination | $color-gray-600 | $color-gray-600 |