Pagination

Configure pagination and use the grid.pagination API.

Pagination is enabled with pagination.enabled.

Setup

pagination.ts
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

pagination-api.ts
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

backend-pagination.ts
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

filter-pagination.ts
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.