Basic Grid Example

Minimal grid example with static data and column definitions.

This example creates a small grid from static row data and typed column definitions.

200 rows with selection enabled

Complete Example

index.html
<div id="grid-container" style="width: 100%; height: 500px;"></div>
<script type="module" src="/src/main.ts"></script>
main.ts
import { Grid, type ColumnDef } from '@zengrid/core';
import '@zengrid/core/dist/styles.css';


const columns: ColumnDef[] = [
  { field: 'id', header: 'ID', width: 60 },
  { field: 'name', header: 'Name', width: 200 },
  { field: 'email', header: 'Email', width: 260 },
  { field: 'role', header: 'Role', width: 150 },
  { field: 'status', header: 'Status', width: 120 },
];


const rows = Array.from({ length: 100 }, (_, row) => [
  row + 1,
  `User ${row + 1}`,
  `user${row + 1}@example.com`,
  ['Admin', 'Editor', 'Viewer'][row % 3],
  ['Active', 'Inactive'][row % 2],
]);


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


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

Frontend data is passed through grid.setData(rows), where rows is an any[][] matrix. ColumnDef.field identifies columns for headers, filtering, sorting state, and persistence.

Key Concepts

column.ts
const column: ColumnDef = {
  field: 'email',
  header: 'Email',
  width: 260,
};
rows.ts
const rows = [
  [1, 'Ada Lovelace', 'ada@example.com'],
  [2, 'Grace Hopper', 'grace@example.com'],
];
lifecycle.ts
grid.setData(rows);
grid.render();
grid.destroy();

Next Steps