pagination

The rows one page at a time, rather than one long scrolling list.

Type	PageOptions
Default	not set
Live update (update())	No — read once, when the grid is made
Angular	the [pagination] input
<dz-grid>	the settings property: el.settings = { pagination: … }
Declared in	packages/dom/src/settings.ts

What it does

pageSize: the rows on a page, 50 by default. pageSizes: the sizes the pager offers, [25, 50, 100] by default; the current size is added when the list lacks it. Each must be a whole number from 1: anything else is told (invalid-page) and the default taken.

With browser rows, the setting turns pages on: each page is a cut of the filtered, sorted rows. With a source, the server sends one page per request. The pagination() feature from @dzgrid/dom/pagination draws the pager under the rows — first, previous, « Page 2 of 5 », next, last, and the size list — with its texts -pagination; without it, the pages still work from code (page.go, page.size) and a missing-feature warning says the pager is missing. The setting is read once: update() refuses a change.

Example

TypeScript

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 Shell = { id: string; name: string; beach: string };

const rows: Shell[] = Array.from({ length: 230 }, (_, i) => ({ id: `s${i}`, name: `Shell ${i + 1}`, beach: i % 2 ? 'North' : 'South' }));

createGrid<Shell>(document.getElementById('shells')!, {
  rows,
  columns: [{ id: 'name', header: 'Shell' }, { id: 'beach', header: 'Beach' }],
  getRowId: (s) => s.id,
  messages: { ...EN, text: { ...EN.text, ...EN_PAGINATION.text } },
  pagination: { pageSize: 50, pageSizes: [25, 50, 100] },
  features: [pagination()],
});

Angular

import { Component } from '@angular/core';
import { DzGrid, type DzgColumnOrGroup } from '@dzgrid/angular';
import { pagination } from '@dzgrid/dom/pagination';
import { EN } from '@dzgrid/dom/locales/en';
import { EN_PAGINATION } from '@dzgrid/dom/locales/en-pagination';

type Shell = { id: string; name: string; beach: string };

@Component({
  selector: 'app-shells',
  imports: [DzGrid],
  template: `<dz-grid [rows]="rows" [columns]="columns" [getRowId]="rowId" [messages]="messages" [features]="features" [pagination]="{ pageSize: 50 }" />`,
})
export class Shells {
  readonly rows: Shell[] = Array.from({ length: 230 }, (_, i) => ({ id: `s${i}`, name: `Shell ${i + 1}`, beach: i % 2 ? 'North' : 'South' }));
  readonly columns: DzgColumnOrGroup<Shell>[] = [{ id: 'name', header: 'Shell' }, { id: 'beach', header: 'Beach' }];
  readonly rowId = (s: Shell) => s.id;
  readonly messages = { ...EN, text: { ...EN.text, ...EN_PAGINATION.text } };
  readonly features = [pagination()];
}

Web Component

import '@dzgrid/element/define';
import type { DzGridElement } from '@dzgrid/element';
import { pagination } from '@dzgrid/dom/pagination';
import { EN } from '@dzgrid/dom/locales/en';
import { EN_PAGINATION } from '@dzgrid/dom/locales/en-pagination';

type Shell = { id: string; name: string; beach: string };

const grid = document.querySelector<DzGridElement<Shell>>('dz-grid')!;
grid.columns = [{ id: 'name', header: 'Shell' }, { id: 'beach', header: 'Beach' }];
grid.getRowId = (s) => s.id;
grid.messages = { ...EN, text: { ...EN.text, ...EN_PAGINATION.text } };
grid.features = [pagination()];
grid.settings = { pagination: { pageSize: 50 } };
grid.rows = Array.from({ length: 230 }, (_, i) => ({ id: `s${i}`, name: `Shell ${i + 1}`, beach: i % 2 ? 'North' : 'South' }));

Live demo

Five rows a page; the pager under the rows.

See also

• source — pages a server sends.
• operations — where the pages are cut.