Paging
The paging logic underneath paginated and the numbered pager.
Last updated November 3, 2026
paginateRows slices the grid's rows into pages, and paginationWindow works out which page numbers a numbered pager shows. The view pipeline pages for you under paginated; reach for these directly in a custom adapter or a pager of your own.
A PaginationState is { pageIndex, pageSize }, with pageIndex 0-based.
Functions#
| Function | Type | Description |
|---|---|---|
paginateRows( | PaginatedRows< | The page pagination names, from rows already filtered, sorted, grouped and aggregated. A pageIndex out of range is clamped, and a pageSize below 1 is taken as 1. |
paginationWindow( | readonly PaginationWindowEntry[] | The 1-based page numbers a numbered pager shows for currentPage of pageCount, with each gap wider than one page as a single "ellipsis". options is { boundaryCount?,, both 1 by default. |
A page counts units, not rows: a top-level group with everything under it is one unit, as is a bare data row outside any group, so a group never splits across pages and a page of 25 holds 25 top-level groups when the grid is grouped. A group's summary row stays with its group.
PaginatedRows<Row> is what paginateRows returns:
| Field | Type | Description |
|---|---|---|
rows | readonly DisplayRow< | The page's rows, with rowIndex renumbered from 0 at the top of the page. datasetIndex keeps each row's place in the whole set. |
pageCount | number | How many pages the rows make at this size — 0 for no rows. |
pageIndex | number | The page returned: pagination.pageIndex, clamped. Read this back rather than trusting the one passed in. |
import { paginateRows, paginationWindow } from "@gridkitjs/core";
const page = paginateRows(displayRows, { pageIndex: 6, pageSize: 25 });
page.pageIndex; // 6, or the last page if there are fewer than 7
paginationWindow(page.pageIndex + 1, page.pageCount);
// [1, "ellipsis", 6, 7, 8, "ellipsis", 20] for page 7 of 20paginationWindow always keeps the first and last boundaryCount pages and siblingCount pages either side of the current one. A gap of exactly one page shows that page rather than an ellipsis, which would save no space.
In the React grid#
paginated and pager turn paging on — see pagination.