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.

Behaviors

This component supports the following behaviors:

Properties

buttonRowPosition

default: "center"

Determines where to place the pagination button row in the layout.

Available values: start, center (default), end

enabled

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. If the value is not among the allowed values, it will fall back to the default.

Available values: 1 (default), 3, 5

orientation

Layout orientation of the pagination component

Available values:

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

Signature: pageDidChange(pageIndex: number): void

• pageIndex: The new page index (0-based).

pageSizeDidChange

Fired when the page size changes

Signature: pageSizeDidChange(pageSize: number): void

• pageSize: The new page size.

Exposed Methods

currentPage

Gets the current page number (1-based)

currentPageSize

Gets the current page size

moveFirst

Moves to the first page

Signature: moveFirst(): void

moveLast

Moves to the last page

Signature: moveLast(): void

moveNext

Moves to the next page

Signature: moveNext(): void

movePrev

Moves to the previous page

Signature: movePrev(): void

Parts

The component has some parts that can be styled through layout properties and theme variables separately:

• buttonRow: The container for pagination buttons.
• pageInfo: The container for page information display.
• pageSizeSelector: The container for the page size selector dropdown.

Styling

Theme Variables