Getting Started

ZenGrid renders only the rows you can see — a million-row dataset stays a handful of DOM nodes. This guide gets a grid on screen fast, then lets you edit it live.

Install

npm i @zengrid/core

pnpm add @zengrid/core

yarn add @zengrid/core

Try it live

The panel below runs the real @zengrid/core in your browser — no sandbox, no sign-up. It opens on the rendered grid; switch to Code or Split with the toggle to edit the config. Changes re-render as you type (or hit Run / ⌘/Ctrl + Enter) — try changing a width, renaming a header, toggling sortable, or reordering the columns.

// In scope: Zengrid, mount, rows, currency, chips, zg // rows are arrays — columns read the data left-to-right. const grid = new Zengrid(mount, { rowCount: rows.length, rowHeight: 44, columns: [ { field: 'name', header: 'Name', width: 220, sortable: true }, { field: 'role', header: 'Role', width: 190 }, { field: 'region', header: 'Region', width: 150 }, { field: 'revenue', header: 'Revenue', width: 150, renderer: currency }, { field: 'mrr', header: 'MRR', width: 130, renderer: currency }, { field: 'status', header: 'Status', width: 130, renderer: chips }, ], }); // setData auto-renders in v1.4 — no grid.render() needed. grid.setData(rows);Enable JavaScript to edit this snippet and run the live grid.

The code, explained

Here’s the same setup as a copy-paste starting point.

Import the grid and its stylesheet.

import { Zengrid } from '@zengrid/core';
import '@zengrid/core/dist/styles.css';

Create a grid against a mount element.

const grid = new Zengrid(document.getElementById('app')!, {
  rowCount: 1_000_000,
  columns: [
    { field: 'name', header: 'Name', width: 240, sortable: true },
    { field: 'region', header: 'Region', width: 160 },
    { field: 'revenue', header: 'Revenue', width: 160 },
  ],
});

Feed it data — setData renders automatically.
```
grid.setData(rows);
```
Disabling auto-render? Call grid.render() yourself after setData.

Where to next

Browse the Feature Matrix to see what ships in each version and tier.
Read the Release Notes for what changed between versions.
Explore individual features in the sidebar — each one includes a live, working demo.