source

For rows too many to send at once: the grid asks your server for what it needs, as the user works.

Type	SourceBinding<T>
Default	not set
Live update (update())	Yes
Angular	the [source] input
<dz-grid>	the source property
Declared in	packages/dom/src/settings.ts

What it does

A binding made from your fetch function, in place of rows:

• sourceRows(data, options) from @dzgrid/core/server: one request per change of filter, search, sort or page, each with everything the server needs (the filter in a wire form, the sort, the page, the time zone and your params). With pagination and the pagination() feature, a pager.
• infiniteRows(data, options) from @dzgrid/core/infinite: blocks of rows asked for as the user scrolls through one long list.

With a source, filter, search, sort and pages run on the server unless operations says otherwise (with infiniteRows, always the server, in one list). The grid handles the rest by itself: the loading message, the thin bar while rows on screen reload, an error with « Retry », answers that arrive out of order (only the latest counts), a selection across every page. A new source given with update() asks again from the start. To ask the same rows again (after a save), call reload() — grid.api.reload(), Angular’s ctrl.reload(), <dz-grid>’s el.reload(); refresh() only paints again (Server data).

Example

TypeScript

import { createGrid, type GridMessages } from '@dzgrid/dom';
import { sourceRows, type DataRequest, type DataResponse } from '@dzgrid/core/server';
import { pagination } from '@dzgrid/dom/pagination';
import { EN } from '@dzgrid/dom/locales/en';
import { EN_PAGINATION } from '@dzgrid/dom/locales/en-pagination';

type Asteroid = { id: string; name: string; diameter: number };

async function page(req: DataRequest): Promise<DataResponse<Asteroid>> {
  const answer = await fetch('/api/asteroids', {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({ filter: req.filter, sort: req.sort, page: req.page }),
    signal: req.signal as AbortSignal,
  });
  return answer.json();   // { rows, total }
}

const messages: GridMessages = { ...EN, text: { ...EN.text, ...EN_PAGINATION.text } };

createGrid<Asteroid>(document.getElementById('asteroids')!, {
  source: sourceRows<Asteroid>({ fetch: page }),
  columns: [{ id: 'name', header: 'Asteroid' }, { id: 'diameter', header: 'Diameter (km)', type: 'number' }],
  getRowId: (a) => a.id,
  messages,
  pagination: { pageSize: 100 },
  features: [pagination()],
});

The Angular and Web Component versions, and every part of the request: Server data.

Live demo

A made-up server inside this page: each sort or page is one request, answered after a short wait.

See also

• operations — what runs on the server, what in the browser.
• pagination — the page size.
• Server data.