Row Grouping (Enterprise)

Row grouping in apex-grid-enterprise buckets rows by one or more column values into expandable, full-width group header rows. Each group row shows its value, leaf count, and any configured aggregations. This is derived grouping, distinct from declared tree data.

Grouping by a column

Set groupBy to an ordered array of column keys:

import 'apex-grid-enterprise/define';

const grid = document.createElement('apex-grid-enterprise');
grid.columns = columns;
grid.data = data;
grid.groupBy = ['country'];        // single-level grouping
document.body.appendChild(grid);

Multiple keys create nested groups, in order:

grid.groupBy = ['country', 'city'];   // country → city

An empty array disables grouping.

Group aggregations

When aggregations is set, each group header row shows the aggregate of its leaf rows. Grouping is reactive to aggregations, so group aggregates update when either changes.

grid.groupBy = ['country'];
grid.aggregations = {
  population: ['sum'],
  gdp: ['sum', 'avg'],
};

See Aggregations for the full aggregation function list.

Default expansion

groupingOptions.defaultExpanded controls how groups start:

grid.groupingOptions = { defaultExpanded: true };  // all groups open
grid.groupingOptions = { defaultExpanded: false }; // all groups collapsed
grid.groupingOptions = { defaultExpanded: 1 };     // expand to depth 1

Value	Effect
true	All groups expanded
false	All groups collapsed
number	Expand to that nesting depth

Expand / collapse API

Control expansion programmatically. Group keys are the values shown in the group header:

Method	Description
expandGroup(key)	Expand a single group
collapseGroup(key)	Collapse a single group
toggleGroup(key)	Toggle a single group
expandAllGroups()	Expand every group
collapseAllGroups()	Collapse every group
getGroups()	Return metadata for the current groups (GroupRowMeta[])

grid.expandAllGroups();
grid.collapseGroup('Germany');

const groups = grid.getGroups();
// each entry describes a group: its groupBy field, value, and leaf count

React example

import { useEffect, useRef } from 'react'
import 'apex-grid-enterprise/define'

export default function GroupedGrid() {
  const ref = useRef<any>(null)

  useEffect(() => {
    const grid = ref.current
    grid.columns = columns
    grid.data = data
    grid.groupBy = ['country', 'city']
    grid.aggregations = { population: ['sum'] }
    grid.groupingOptions = { defaultExpanded: 1 }
  }, [])

  return <apex-grid-enterprise ref={ref} style={{ height: 480 }} />
}

Pivot vs grouping

Grouping and pivoting are mutually exclusive — if pivotOn is set, pivot wins and groupBy is ignored.