Skip to content
ZenGrid

Column Groups

Enterprise

Introduction

Section titled “Introduction”

Column groups organize related columns under a shared banner — for example an Identity banner over name and role, or an Address banner over city, state, and zip. Groups can nest several levels deep, and the banners scroll horizontally in lockstep with the columns beneath them.

It’s an enterprise feature. Set the grid’s colGroupProvider to columnGroups(defs), where each def names a header and its children — a child is either a leaf column field or another group:

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


const grid = new Zengrid(el, {
  colGroupProvider: columnGroups([
    { header: 'Identity', children: ['name', 'role'] },
    { header: 'Metrics',  children: ['revenue', 'mrr'] },
  ]),
  columns,
});

Each banner spans the columns its leaf fields occupy, so list the grouped columns next to each other in your columns array. The header grows by one row per group level to make room for the banners; the body drops down to match.

Nesting

Section titled “Nesting”

Wrap a group inside another group’s children to stack banners. The outer group sits on the top row and spans everything below it:

colGroupProvider: columnGroups([
  {
    header: 'Location',
    children: [
      { header: 'Address', children: ['city', 'zip'] },
      'country',
    ],
  },
]),

Collapse & expand

Section titled “Collapse & expand”

Every group with two or more columns draws a small toggle in its banner. Click it to collapse the group down to its first column — the rest hide — and click again to bring them back. It needs no extra wiring: set colGroupProvider and the toggles appear.

Collapse is on by default. Opt a group out with collapsible: false:

colGroupProvider: columnGroups([
  { header: 'Identity',   children: ['name', 'role', 'region'] },
  { header: 'Financials', children: ['revenue', 'mrr'], collapsible: false },
]),

A collapsed group keeps its first column visible as a stand-in, so the banner — and its toggle — never disappears. Nested groups collapse independently; collapsing an outer group folds everything beneath it down to a single column.

Try it live

Section titled “Try it live”

Scroll the grid sideways — the banners track the columns they head. Click a banner’s toggle to collapse or expand that group. Each tab is a different grouping.

Two banners over the columns beneath them. Click a banner toggle to collapse a group to its first column, or edit the columnGroups(...) headers and which fields each spans.

Next

Section titled “Next”