Skip to content

Pagination

The Pagination widget adds page buttons to a Data Table, with an optional drop-down for choosing how many rows to show per page. Use it when a table has too many rows to show at once, such as a full order history.

The widget holds no data of its own. It reads and writes the same page parameters the table uses, which is how the two stay in step.

Using it

  1. Create three page parameters, for example page, pageSize and pageCount.
  2. On the Data Table, turn on Pagination and point it at those three parameters.
  3. Drop a Pagination widget under the table and set Page param, Page size param and Page count param to the same three paths, for example $params.page.

The table now shows one page at a time and the buttons move between pages.

Options

Option Values Default Description
Page param A parameter or state path, e.g. $params.page None Where the current page number is kept
Page size param A parameter or state path, e.g. $params.pageSize None Where the rows-per-page value is kept
Page count param A parameter or state path, e.g. $params.pageCount None Where the total number of pages is kept
Length A number, 1 or more 5 How many page buttons are shown at once
Default page size A number, 1 or more 10 The rows per page used when the visitor has not chosen one
Allow selection On · Off On Shows a drop-down with 10, 20, 25, 50 and 100 rows per page. The default page size is added to the list if it is not one of these
Position Left · Center · Right Right Where the control sits in its box
Variant Theme variants Default Picks the control's look from the theme. See Variants
Per-part theme styles Theme values From theme Styling for the pager, the page size field, its icon and its drop-down
Custom Style CSS Empty Extra styling for this control only
Box Style Sizing and spacing None The box around the control

Tips

A few details about how the three parameters interact.

  • The table and the pager must point at the same three paths. If they differ, the buttons change nothing.
  • If any of the three parameters is left empty, the widget shows a placeholder instead of the control.
  • With Allow selection off, Default page size is always used. With it on, a page size that is already set, for example from the page address, is kept and the default only fills in when nothing is set.