Skip to content
ZenGrid

Group Rows

Enterprise

Introduction

Section titled “Introduction”

Group Display Types introduced the three ways to surface a group hierarchy. This page is a deep dive on the default — displayType: 'groupRows' — where each group becomes a full-width header row spanning every column, and the leaf rows render underneath as ordinary data rows. Unlike the column display types (Single Column / Multiple Columns), no leading group column is prepended — the hierarchy lives entirely in those banner rows.

Because the header spans the whole width, it’s the natural home for aggregate summaries: a group’s totals sit right there in the banner instead of a separate column. Enable it with just groupBy:

const grouping = rowGrouping({
  groupBy: [2],                     // Region — one full-width banner per region
  aggregations: { 3: 'sum', 4: 'avg' },
});


new Zengrid(mount, {
  columns: dataColumns,             // no group column to prepend
  fullWidthProvider: grouping.provider,
});


grouping.attach(grid);
grouping.setData(rows);

Customising the header row

Section titled “Customising the header row”

Everything the banner shows is tunable on rowGrouping():

  • aggregations — per-column reducers (sum, avg, min, max, count, first, or your own (values) => value), keyed by source column index. Each one is summarised in the header.
  • aggLabel(col, value, ctx) — format each aggregate. Return ''/undefined to hide that column’s summary.
  • groupLabel(ctx) — the banner’s title text (defaults to the group value).
  • indentPerLevel — pixels of indent added per nesting level, so nested group banners step to the right. (Previously a single-column concern, this now applies to full-width headers too.)
  • groupRowRenderer(params) — draw the entire header content yourself. Return an HTML string or an HTMLElement; it replaces the default label + count
    • summary, while the chevron, indent, and click-to-toggle stay wired.
rowGrouping({
  groupBy: [2, 5],                  // Region, then Status — nested banners
  aggregations: { 3: 'sum' },
  indentPerLevel: 28,               // deeper banners step right
  groupLabel: (ctx) => (ctx.level === 0 ? `🌍 ${ctx.key}` : `${ctx.key}`),
  aggLabel: (_col, value) => `Total: ${money(value)}`,
});

Try it live

Section titled “Try it live”

The default full-width banner per Region carries a right-aligned summary. aggLabel formats the total Revenue (sum) and average MRR. Collapse a region to keep just its banner + totals.

Notes

Section titled “Notes”
  • No group column. groupRows keeps the header as a full-width sentinel row, so there’s nothing to prepend from getGroupColumns() (it returns [] in this mode) — pass your data columns straight through.
  • Aggregates live in the banner. With the whole width to work with, each configured aggregate is summarised in the header via aggLabel. The column display types instead render aggregates in their own data column.
  • Indent shows nesting. indentPerLevel steps deeper banners to the right so a nested hierarchy reads without a per-level column. It’s ignored by multipleColumns (where the column itself expresses the level).
  • groupRowRenderer replaces the content, not the row. It swaps out the label + count + summary; ZenGrid still owns the chevron, the indent, and the click-to-toggle, so your markup can focus on presentation.
  • Blanks group too. A null/undefined group key renders as (Blanks) unless you override the title with groupLabel.

Next

Section titled “Next”