Pagination

Show rows one page at a time with a pager and a rows-per-page picker; setPage, setPageSize and pageChange work from code, in the browser or on a server.

Live demoPagination

One page at a time with a pager and a rows-per-page picker.

Code for this demo

import { createGrid } from '@freegridjs/core';
import { demoColumns, makeRows } from '../data';
import { button, select, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const h = (en: string, ko: string) => tr(lang, { en, ko });
  const grid = createGrid(ctx.host, {
    columns: demoColumns(lang),
    data: makeRows(1000),
    locale: lang,
    rowNumbers: true, // numbers continue from page to page
    pagination: { pageSize: 50, pageSizes: [20, 50, 100], pageNumbers: 5, jump: true },
  });
  grid.on('pageChange', e => ctx.log(`pageChange → ${e.page + 1} / ${e.pageCount} (${e.pageSize})`));

  text(ctx, h('Use the pager under the rows or the buttons. Sorting or filtering goes back to the first page.',
    '아래 쪽 이동 막대나 버튼으로 넘겨 보세요. 정렬하거나 필터를 바꾸면 첫 쪽으로 돌아갑니다.'));
  separator(ctx);
  button(ctx, h('First page', '첫 쪽'), () => grid.setPage(0));
  button(ctx, h('Page 5', '5쪽'), () => grid.setPage(4));
  button(ctx, h('Last page', '마지막 쪽'), () => grid.setPage(grid.getPageCount() - 1));
  select(ctx, h('Rows per page', '쪽당 행 수'), [['20', '20'], ['50', '50'], ['100', '100']], '50', v => grid.setPageSize(Number(v)));
  return grid;
}

With pagination the grid shows one page at a time and puts a pager under the rows. People jump to the first, previous, next or last page and, when you give pageSizes, pick the number of rows per page. Sorting or filtering goes back to the first page, and row numbers continue from page to page.

Every pager action goes through the same methods you can call: setPage (0-based) and setPageSize. pageChange reports the new page, page size and page count, and beforePageChange can cancel a move, for example while there are unsaved edits.

const grid = createGrid(el, {
  columns,
  data,
  pagination: { pageSize: 50, pageSizes: [20, 50, 100] },   // true = 100 rows a page
});

grid.setPage(2);            // 0-based: the third page
grid.getPage();             // 2
grid.getPageCount();
grid.setPageSize(100);
grid.on('pageChange', e => console.log(e.page, e.pageSize, e.pageCount));
grid.on('beforePageChange', e => { if (hasUnsavedEdits()) e.cancel(); });

Pagination also works with rows from a server: add pagination next to a datasource and every page becomes one request. See Server data and infinite scroll.

Page numbers and a page box

pageNumbers and jump add numbered page buttons and a page box to the pager. See:

Page numbers and the page box

Options, methods and events

Name	Type	Description
`pagination`	`boolean \| { pageSize?, pageSizes?, pageNumbers?, jump? }`	One page at a time with a pager under the rows; true = 100 rows a page. pageSizes adds a rows-per-page picker.
`setPage(n) / getPage() / getPageCount()`	`void / number`	Move between pages (0-based; clamped to the pages there are).
`setPageSize(n) / getPageSize()`	`void / number`	Change or read the rows per page.
`pageChange / beforePageChange`	`events`	The page or page size changed ({ page, pageSize, pageCount }); before it does, cancel() stops it.

Questions about this page

How do I show rows page by page?

Set pagination: { pageSize: 50, pageSizes: [20, 50, 100] }. A pager appears under the rows, and setPage, setPageSize and pageChange work from code.