Skip to content
DzGrid

pagination

Draws the pager under the rows when the grid shows its rows page by page.

Importimport { pagination } from '@dzgrid/dom/pagination';
Signaturepagination(o?: PaginationOptions): GridFeature
Textsimport { EN_PAGINATION } from '@dzgrid/dom/locales/en-pagination';
languages: en, fr, ar
Own CSSPAGINATION_CSS — to add yourself with injectStyles: false
Declared inpackages/dom/src/pagination/index.ts
OptionsType
footerreadonly string[]

What it does

Section titled “What it does”

pagination() adds a strip under the rows. At the start: what is selected and where you are (« 51 to 100 of 1 234 »). At the end: first, previous, « Page 3 of 25 », next, last, and a « Rows per page » list. In Arabic the strip is mirrored.

The pages themselves come from the pagination setting, or from a server that sends pages. Without paging, the feature draws nothing and reports an invalid-page warning. Paging without the feature still works through the API, with a missing-feature warning.

A button that cannot act stays in place, dimmed, and keeps the focus. When every row of a page is ticked and more rows match, the footer offers « Select all 1 234 rows ».

Options

Section titled “Options”
  • footer: the footer’s parts, in order. By default ['footer.selected', 'footer.count', 'footer.pager']. A host part of the same name replaces the grid’s; a name that is not a footer part is skipped, with an unknown-part error. Read once, when the grid is made.

Example

Section titled “Example”
import { createGrid } from '@dzgrid/dom';
import { pagination } from '@dzgrid/dom/pagination';
import { EN } from '@dzgrid/dom/locales/en';
import { EN_PAGINATION } from '@dzgrid/dom/locales/en-pagination';


type Seed = { id: string; name: string; packets: number };


createGrid<Seed>(document.getElementById('seeds')!, {
  rows: [{ id: 's1', name: 'Basil', packets: 40 }],
  columns: [
    { id: 'name', header: 'Seed' },
    { id: 'packets', header: 'Packets', type: 'number' },
  ],
  getRowId: (r) => r.id,
  pagination: { pageSize: 50 },
  messages: { ...EN, text: { ...EN.text, ...EN_PAGINATION.text } },
  features: [pagination()],
});

Live demo

Section titled “Live demo”

Twelve rows per page: use the pager under the grid.

See also

Section titled “See also”