OOmniGrid

API / Plugins / Base / Grouping

GroupingPlugin

The GroupingPlugin from @omnigrid/grouping-plugin collapses rows that share a value on grouped fields into expandable group rows, computes group aggregations, and provides grouping methods on GridApi.

Live demo|NPM

Constructor

new GroupingPlugin<T>(options?: GroupingPluginOptions<T>)

Options

Properties accepted by GroupingPluginOptions<T>.

PropertyDescription

groupBy

string[]default: []

Grouping fields in nesting order (e.g. `["region", "department"]`).

expandedGroups

Record<string, boolean>default: all groups expanded

Initial expanded state keyed by stable group id.

groupColumnMode

'single' | 'perLevel'default: 'single'

Group column render mode. `'single'` renders one Group column that shows the group hierarchy with expand/collapse chevrons. `'perLevel'` renders one column per group level, each showing that level's groups with chevrons.

groupColumnHeader

stringdefault: 'Group'

Header text for the Group column in `'single'` mode.

showGroupValues

booleandefault: true

Whether group cells render the group key value and children count. When `false`, group cells show only the expand/collapse chevron and indentation — useful when the column already displays the value via another mechanism or when space is at a premium. Applies to both `'single'` and `'perLevel'` modes.

showChildCount

booleandefault: true

Whether group rows display the number of child rows.

collapseSingleChildGroups

booleandefault: false

When `true`, groups that resolve to exactly one leaf row are rendered as a plain row instead of a collapsible group row.

Instance methods

registerAggregationFuncs(funcs): () => void

Registers column id -> aggregation function mappings.

getGroupedRows(): TreeRowNode<T>[]

Returns flattened `TreeRowNode[]` consumed by the virtualizer when grouping is active; empty array when grouping is disabled.

Types and Interfaces

GroupingColumnConfig

Column UI configuration managed by the grouping plugin.

interface GroupingColumnConfig {
    mode: 'single' | 'perLevel';
    header: string;
    showGroupValues: boolean;
    showChildCount: boolean;
    groupRowRenderer?: (params: any) => unknown;
}
GroupingRow

Row shape used in grouping examples and tests.

interface GroupingRow {
    id: number;
    region: string;
    department: string;
    sales: number;
}