Page numbers and the page box

Show page number buttons around the current page and a box to type a page number, next to the first, previous, next and last buttons and the page size list.

Live demoPage numbers

Seven page buttons and a page box over 1,000 rows.

Code for this demo

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

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const grid = createGrid(ctx.host, {
    columns: [{ field: 'id', header: 'ID', type: 'number', width: 80 }, { field: 'name', header: h('Name', '이름'), width: 180 }, { field: 'country', header: h('Country', '국가'), width: 150 }],
    data: makeRows(1000), locale: ctx.lang, filterRow: true,
    pagination: { pageSize: 20, pageSizes: [20, 50, 100], pageNumbers: 7, jump: true },
  });
  grid.on('pageChange', e => ctx.log(`page ${e.page + 1} / ${e.pageCount}`));
  text(ctx, h('Click a page number or type one in the box and press Enter. Filter a column: the page buttons follow.',
    '페이지 번호를 누르거나 칸에 번호를 넣고 Enter를 누르세요. 컬럼을 거르면 페이지 버튼이 따라 바뀝니다.'));
  return grid;
}

createGrid(el, {
  columns,
  data,
  pagination: {
    pageSize: 20,
    pageSizes: [20, 50, 100],
    pageNumbers: 7,      // up to 7 page buttons around the current page (true = 5)
    jump: true,          // a box: type a page number and press Enter
  },
});

Name	Type	Description
`pageNumbers`	`boolean \| number`	Page buttons in place of "Page x of y": a number sets how many (true is 5). The current page is highlighted; the buttons move along as pages change.
`jump`	`boolean`	A number box; Enter goes to that page (numbers past the last page go to the last).
`pageSize / pageSizes`	`number / number[]`	Rows per page and the choices in the size list.

Filters and sorting change the number of pages; the buttons follow.
Buttons have labels for screen readers ("Page 4") and the current one has aria-current.
From code: setPage(n) (0-based), getPage(), getPageCount(); pageChange fires.