Pagination in CMS lists

For CMS lists and List pages, pagination can be enabled to further enhance their functionality.

Enabling pagination
Pagination options
Styling pagination buttons

Enabling pagination

To enable pagination on a CMS list:

Select the CMS List
Go to Right panel - Collection settings
Check the Paginated checkbox

Once pagination is enabled, a container with two buttons will show below your CMS list: previous and next.

Pagination options

Once pagination is enabled there are a few options that you can use to customize the paginated list. These options are:

Pagination query - can be is used to determine the page number shown for the selected list. If it is not unique, all lists that have the same query will show the same page.
Preview page - is used only to preview items on different pages
Items/page - determines the number of list items to be displayed on one page

Pagination query can also be bound to props so each component instance with a CMS list can show its own page.

Styling pagination buttons

The default styling for the pagination container and buttons can be changed just like any other element in TeleportHQ. To change the styling:

Select the button container or buttons on the canvas or in the Layers tab under List -> Success -> Pagination
From the Right panel style either of them like any other elements

Updated on: 27/03/2024