Pagination
Configure pagination and use the grid.pagination API.
Pagination is enabled with pagination.enabled.
Setup
const grid = new Grid(container, { columns, rowCount: rows.length, colCount: columns.length, rowHeight: 36, colWidth: columns.map((column) => column.width ?? 140), pagination: { enabled: true, pageSize: 50, pageSizes: [25, 50, 100], },});
grid.setData(rows);grid.render();API
grid.pagination.goTo(2);grid.pagination.next();grid.pagination.previous();grid.pagination.first();grid.pagination.last();grid.pagination.setPageSize(100);
const page = grid.pagination.getCurrentPage();const pageSize = grid.pagination.getPageSize();const totalPages = grid.pagination.getTotalPages();Backend Pagination
const grid = new Grid(container, { columns, rowCount: 100000, colCount: columns.length, rowHeight: 36, colWidth: columns.map((column) => column.width ?? 140), dataMode: 'backend', pagination: { enabled: true, pageSize: 50 }, onDataRequest: async (request) => fetchRows(request),});Filtering And Pagination
grid.filter.set(2, 'equals', 'active');grid.pagination.first();
grid.filter.clear();grid.pagination.first(); ℹ Info
No dedicated pagination event is currently exposed in GridEvents. Use the pagination API and backend request path to synchronize external UI.