Row Data

Introduction

ZenGrid renders rows from the data you give it. You hand it the records with setData(), and it derives the row count from the array length — so a grid is just a mount element, some columns, and a call to setData. Because the grid is virtualized, only the rows in view are ever materialized: the array can hold tens of thousands of rows without a matching pile of DOM.

import { Zengrid } from '@zengrid/core';

const grid = new Zengrid(el, {
  rowCount: rows.length,
  rowHeight: 44,
  columns,
});

grid.setData(rows); // auto-renders in v1.4 — no grid.render() needed

Rows are arrays

setData takes an array of arrays — each column reads its cell by position, left to right. The field is just a label; reorder a column and its data follows the slot. Switch to the Reorder columns tab below to see it.

Try it live

The panel runs the real @zengrid/core in your browser. Switch variants with the tabs, edit the code, or drive the grid with the buttons above it — every change re-renders live.

BasicUpdate rowsReorder columns

CodeDemoSplit

ResetRun ⌘⏎

setData derives the row count from the array. Change rowHeight or a header and watch it re-render.

Updating rows

Call setData() again with a new array to replace the rows — the grid re-renders and keeps rowCount in step with the new length, so you never set the count twice. The Update rows tab above wires this to buttons: slicing, reversing, and restoring the same underlying array.

Next

• Accessing Rows — read values back out of the grid.
• Row Sorting — order the rows.
• Row Pagination — page through large sets.