ServerSideDataSource

Unified data source contract for server-side data loading.

Implement getRows to supply root-level rows from a remote API, database, or any asynchronous provider. The grid calls getRows() whenever it needs a new block of rows (on initial load, scroll, sort change, or filter change).

getRows may return either a Promise (e.g. fetch(url, { signal }).then(...)) or a Subscribable (e.g. an Angular HttpClient observable). With a Subscribable, the grid unsubscribes on supersede, which natively cancels the underlying request — no need to wire params.signal into anything.

Optionally implement getChildRows for on-demand child data (tree children, group rows, detail panels, etc.). If child data is already embedded in parent rows (e.g. tree nodes with inline children arrays), this method is not needed.

Example

// Promise / fetch
const dataSource: ServerSideDataSource = {
  async getRows(params) {
    const res = await fetch(`/api/data?start=${params.startNode}&end=${params.endNode}`, {
      signal: params.signal,
    });
    const data = await res.json();
    return { rows: data.items, totalNodeCount: data.total };
  },
};

// Angular HttpClient (Observable)
const dataSource: ServerSideDataSource = {
  getRows: (params) =>
    this.http
      .get<{ items: unknown[]; total: number }>('/api/data', { params: toHttpParams(params) })
      .pipe(map((d) => ({ rows: d.items, totalNodeCount: d.total }))),
};