Auto-Generate Columns

Enterprise

Introduction

Auto-generate columns infers a column definition for each field in your row data, so you can render a grid without hand-writing a columns array — useful for ad-hoc data, admin tools, and unknown schemas.

It’s an enterprise feature. Give autoGenerateColumns your data as objects; it returns a columns array (one per field, with a humanized header and numeric columns right-aligned). Feed the grid array rows in the same field order:

import { autoGenerateColumns } from '@zengrid/enterprise';

const columns = autoGenerateColumns(data);          // infer from the data shape
const rows = data.map((o) => columns.map((c) => o[c.field]));

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

Shaping the output

Everything about the generated columns is adjustable through the options:

Option	Effect
exclude	Drop these fields.
include	Keep only these fields, in this order.
header	Turn a field name into a header label (default: humanize).
defaultWidth	Width for every generated column.
overrides	Per-field patches — a renderer, a width, anything on ColumnDef.

Try it live

Each tab generates the columns from the same data with different options — edit the call and the grid rebuilds from the new column set.

Infer from dataExclude & overridePick & rename

CodeDemoSplit

ResetRun ⌘⏎

No columns array — autoGenerateColumns reads the object keys. Numbers (Revenue, MRR) come out right-aligned; headers are humanized from the field names.

Next

• Column Definitions — the shape each generated column takes.
• Custom Cell Components — renderers to drop into overrides.
• Calculated Columns — add derived columns on top.