Pagination

Set pagination to slice client-mode rows into pages and render a built-in pagination bar under the grid. It's a boolean shorthand or a config object:

import { Grid } from '@witbybit/wit-grid-react';

export function PaginatedGrid({ rows, columns }: { rows: { id: string }[]; columns: any[] }) {
	return <Grid rows={rows} columns={columns} getRowId={(row) => row.id} pagination={{ pageSize: 50 }} />;
}

pagination={true} uses the default page size. Like every option it is live: turning it on or off, or a new page size (which starts at the first page), applies to the grid as it is. The page shown is state: start on one with initialState={{ page: 2 }}.

Reading and turning pagesCopy Anchor Link

The page shown is state: api.getState().page (pages count from 0), and api.setState({ page }) turns to a page, clamped to the pages there are, as the bar's buttons do. How the rows divide is status: api.getStatus().pagination is { pageSize, pageCount, totalRows } for client pages and for infinite and server row models alike, or null when the grid does not page. revealRecord(id) turns to a record's page for you.

import type { GridApi } from '@witbybit/wit-grid-react';

declare const api: GridApi<unknown>;

const { page } = api.getState();
const pages = api.getStatus().pagination;
if (pages && page < pages.pageCount - 1) api.setState({ page: page + 1 });

api.watch(
	(grid) => [grid.page, grid.status.pagination?.pageCount] as const,
	([page, pageCount]) => console.log(`page ${page + 1} of ${pageCount}`),
	{ equals: (a, b) => a[0] === b[0] && a[1] === b[1] }
);

StylingCopy Anchor Link

The pagination bar renders with plain, unprefixed class names you can target directly: og-pagination-btn, og-pagination-summary, and og-pagination-page-info.