Paging

How paging works

With scrollMode: 'paging', the grid renders a full pagination bar below the data: first / previous / next / last buttons, a "Page X of Y" indicator, and an optional page-size dropdown. Each navigation replaces the current page entirely — rows don't accumulate like they do in infinite scroll.

On every page change, sort, or filter, the grid calls fetchRows() with params.page (1-based page number) and params.offset (= (page - 1) × pageSize). Use whichever your API supports — offset/limit for SQL-style endpoints, page number for cursor-based ones.

Configuration

The options that directly control paging behavior:

• scrollMode: 'paging' — activates this mode and renders the pagination bar.
• pageSize (default 50) — rows per page. Becomes the limit in every fetchRows() call. If pageSizeOptions is set, the user can override this value at runtime.
• pageSizeOptions — array of page-size choices shown in the dropdown (e.g. [10, 25, 50, 100]). Omit or leave empty to hide the dropdown entirely. When the user picks a new size, the grid resets to page 1 and refetches.
• trackBy — field name or function that returns a stable unique identity per row (e.g. 'id'). Recommended for paging so Angular can efficiently reconcile rows between page transitions instead of re-rendering everything from scratch.
• height — fixed pixel height of the grid container. The pagination bar sits outside this height, so the total component height is slightly taller than this value.
• rowHeight (default 48) — uniform row height in px. Unlike virtual paging, classic paging does support autoRowHeight: true if rows have variable content.

Page-size dropdown

Setting pageSizeOptions enables a "Rows per page" dropdown in the pagination bar. The label is configurable via config.messages.rowsPerPage. When the user selects a new size, pageSize updates, the grid resets to page 1, and fetchRows() is called immediately with the new limit.

Customising pagination labels

Every text string in the pagination bar can be overridden via config.messages:

• rowsPerPage — label next to the page-size dropdown. Default: 'Rows per page'.
• pageOf — "Page X of Y" separator. Use {0} and {1} as placeholders for current and total. Default: 'of'.
• firstPage, lastPage, prevPage, nextPage — aria-labels for the navigation buttons.
• records — unit label in the stats bar (e.g. 'employees'). Default: 'records'.

Choosing the right scroll mode

Use paging when users need to navigate to a specific page, when the workflow involves reviewing a discrete set of rows before moving on, or when your audience expects familiar table-navigation controls. Use infinite scroll for feeds and browsing flows where users scroll until they find what they want.