Group Display Types

Enterprise

Introduction

The Overview and Grouping Data pages decide what the grid groups by. This page is about how those groups are shown. The same buckets can be presented three ways, chosen with displayType on rowGrouping():

• groupRows (default) — each group is a full-width header row that spans every column, with the label, count and an aggregate summary inline.
• singleColumn — the whole hierarchy lives in one leading group column, indented by depth. Your data columns stay put, so aggregates render in their own column.
• multipleColumns — each grouping level gets its own leading column.

displayType: 'groupRows'

The original look. Group headers are full-width rows drawn by the manager’s provider, so you only pass fullWidthProvider: grouping.provider. Aggregates are formatted by aggLabel and shown as a summary at the end of the header:

rowGrouping({
  groupBy: [2, 5],
  aggregations: { 3: 'sum' },
  aggLabel: (col, v) => 'Revenue $' + Math.round(v).toLocaleString('en-US'),
});

displayType: 'singleColumn'

Groups become normal rows with the hierarchy collapsed into one column. Ask the manager for that column with getGroupColumns() and spread it ahead of your data columns:

const grouping = rowGrouping({
  groupBy: [2, 5],
  displayType: 'singleColumn',
  aggregations: { 3: 'sum' },       // shown in the Revenue column, not the header
  groupColumnLabel: () => 'Region / Status',
});

new Zengrid(mount, {
  columns: [...grouping.getGroupColumns(), ...dataColumns],
  fullWidthProvider: grouping.provider,
});

The manager reshapes the data to match the prepended column, so keep your data columns contiguous from the first source index — the group column occupies the leading slot. Aggregates land in their real column and are formatted by that column’s own renderer (here, currency).

displayType: 'multipleColumns'

One group column per level — the classic spreadsheet outline. getGroupColumns() returns one column per groupBy level; label them with groupColumnLabel(index):

rowGrouping({
  groupBy: [2, 5],
  displayType: 'multipleColumns',
  groupColumnLabel: (i) => (i === 0 ? 'Region' : 'Status'),
});

Try it live

Group rowsSingle columnMultiple columns

CodeDemoSplit

ResetRun ⌘⏎

The default. Full-width header rows; aggregate shown inline via aggLabel. Only fullWidthProvider is wired — no group columns.

Notes

• groupRows needs no group columns. It draws full-width headers through fullWidthProvider; the column modes draw the hierarchy in real cells, so you spread getGroupColumns() into columns and the manager reshapes the data to fit.
• Keep data columns contiguous. With positional array rows the group column(s) take the leading slot(s); your data columns must follow in source order so each cell lands under the right column.
• Aggregates render in their column for singleColumn/multipleColumns — formatted by that column’s renderer — instead of the aggLabel summary used by groupRows.
• multipleColumns fixes its column count to the initial groupBy length. Runtime re-grouping (see Grouping Data) works within that count; nesting deeper reuses the last group column.

Next

• Single Column — a deep dive on the one-column layout.
• Multiple Columns — a column per level, with per-column control.