Loading Data

Load frontend row matrices or backend windows into ZenGrid.

ZenGrid supports two primary data paths: frontend rows through setData() and backend windows through dataMode: 'backend'.

Frontend Data

frontend-data.ts
import { Grid, type ColumnDef } from '@zengrid/core';


const columns: ColumnDef[] = [
  { field: 'id', header: 'ID', width: 80 },
  { field: 'name', header: 'Name', width: 220 },
  { field: 'status', header: 'Status', width: 140 },
];


const rows = [
  [1, 'Ada Lovelace', 'Active'],
  [2, 'Grace Hopper', 'Active'],
  [3, 'Katherine Johnson', 'Paused'],
];


const grid = new Grid(document.getElementById('grid')!, {
  columns,
  rowCount: rows.length,
  colCount: columns.length,
  rowHeight: 36,
  colWidth: columns.map((column) => column.width ?? 140),
});


grid.setData(rows);
grid.render();
ℹ Info

setData() expects a matrix of rows. If your app stores records, map them to arrays before passing them to the grid.

Updating Data

update-data.ts
rows[1][2] = 'Inactive';
grid.setData(rows);
grid.updateCells([{ row: 1, col: 2 }]);

Use refresh() when a broader redraw is simpler than tracking changed cells.

refresh-data.ts
grid.setData(nextRows);
grid.refresh();

Backend Data

backend-data.ts
const grid = new Grid(document.getElementById('grid')!, {
  columns,
  rowCount: 100000,
  colCount: columns.length,
  rowHeight: 36,
  colWidth: columns.map((column) => column.width ?? 140),
  dataMode: 'backend',
  onDataRequest: async ({ startRow, endRow, query, signal }) => {
    const response = await fetch('/api/users/window', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      signal,
      body: JSON.stringify({ startRow, endRow, query }),
    });


    return response.json();
  },
});


grid.render();

Backend responses should return the row matrix for the requested range and the total row count expected by your app.

Data Status

data-status.ts
const mode = grid.getDataMode();
const status = grid.getDataStatus();


await grid.refreshData();
await grid.retryDataRequest();


console.log(mode, status);

Practical Checks

  • Keep rowCount aligned with the number of addressable rows.
  • Keep colCount aligned with columns.length.
  • Use frontend mode only when the row matrix fits comfortably in memory.
  • Use backend mode when sorting, filtering, or pagination should be owned by the server.