Angular Data GridRow Grouping - Editing Groups

The grid supports editing grouped data when using the Client-Side Row Model. This page covers making group row cells editable, distributing edited values to descendant rows, and refreshing the grouping hierarchy after edits.

Editing Group Row Cells Copy Link

Double-click any group row's Sales cell to edit it. The new value is distributed equally among the group's children, rounding to integers. When a child is itself a group, the cascade recurses through the full hierarchy.

Set groupRowEditable on any column that should accept edits on group rows. This property accepts either a boolean or a callback; the callback is only invoked for nodes where rowNode.group === true, while leaf rows continue to honour editable.

When a column defines both groupRowEditable and editable, the grid evaluates only the property that matches the current node type, enabling separate rules for group rows and leaf rows.

When groupRowEditable is defined, the grid automatically distributes edited values to descendant rows using the built-in distribution. To customise this behaviour, set groupRowValueSetter to an options object, a custom callback function, or false to disable distribution.

Built-in Value Distribution Copy Link

The built-in distribution cascades the edited value to descendant rows, adjusting each child so the aggregate matches the new total. Pass an options object to groupRowValueSetter to customise the strategy or precision.

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    {
        field: 'sales',
        aggFunc: 'sum',
        editable: true,
        groupRowEditable: true,
        // Built-in distribution: divides the sum equally among children.
        // precision: 0 rounds child values to integers and spreads the remainder.
        groupRowValueSetter: { precision: 0 },
    },
];

Distribution Strategies Copy Link

The distribution option controls how the edited value is spread across children. When omitted, the strategy is chosen automatically based on the column's aggFunc:

Editing is disabled by default for count, min, max, first, last, and custom aggregation functions because there is no single correct way to split an edited value back into children for these functions. To enable editing, you can:

• Set distribution to 'overwrite' to write the new value directly to every child.
• Provide a per-aggFunc record entry with 'overwrite', true, or a custom callback function that implements application-specific logic (see Per-Aggregation Strategies).
• Assign a custom callback function to groupRowValueSetter for full control over the distribution.

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    {
        field: 'price',
        aggFunc: 'min',
        editable: true,
        groupRowEditable: true,
        // 'overwrite' writes the edited value to every child
        groupRowValueSetter: { distribution: 'overwrite' },
    },
    {
        field: 'quantity',
        aggFunc: 'count',
        editable: true,
        groupRowEditable: true,
        // Per-aggFunc record: enable only count with overwrite
        groupRowValueSetter: { distribution: { count: 'overwrite' } },
    },
];

Setting distribution to true uses built-in defaults for sum, avg, no-aggFunc columns, and custom aggregation functions. The count/min/max/first/last functions remain disabled with true — use 'overwrite', a per-aggFunc record entry, or a custom callback to enable them.

Setting distribution to false or null suppresses distribution and makes the cell not editable, even when groupRowEditable is true.

For avg aggregation, the distributor adjusts child values so the average equals the edited value.

Distribution Options Copy Link

// Single strategy
distribution: 'percentage'
// Enable all aggFuncs with built-in defaults
distribution: true
// Per-aggFunc record (entries can be strings, objects, functions, true, or false/null)
distribution: { sum: 'percentage', avg: 'increment', count: true, myAgg: (params) => { ... }, min: false }

// Custom handler
default: (params) => {
    for (const child of params.aggregatedChildren) {
        child.setDataValue(params.column, params.newValue, 'data');
    }
}
// Suppress all unmatched aggFuncs
default: false

// Round child values to integers
colDef.groupRowValueSetter = { precision: 0 };
// Round child values to 2 decimal places (e.g. currency)
colDef.groupRowValueSetter = { precision: 2 };

getValue: (params) => params.data?.weight ?? 0,

setValue: (params) =>
    // Apply a minimum of 0 before writing
    params.node.setDataValue(params.column, Math.max(0, Number(params.value)), 'data'),

Merging with Default Column Definitions Copy Link

When groupRowValueSetter is set as an options object on both defaultColDef and an individual column definition, the grid deep merges the two objects — the same way all column definition properties are merged. The column's own properties take precedence, and any properties not specified on the column are inherited from the default. This includes nested distribution records.

<ag-grid-angular
    [defaultColDef]="defaultColDef"
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.defaultColDef = {
    editable: true,
    groupRowEditable: true,
    // Default: round child values to integers, disable count
    groupRowValueSetter: { precision: 0, distribution: { count: false } },
};
this.columnDefs = [
    {
        field: 'sales',
        aggFunc: 'sum',
        // Column-level override: use percentage distribution.
        // precision: 0 is inherited from defaultColDef.
        groupRowValueSetter: { distribution: 'percentage' },
    },
    {
        field: 'quantity',
        aggFunc: 'count',
        // Override defaultColDef's false with true to enable editing for count.
        groupRowValueSetter: { distribution: { count: true } },
    },
    {
        field: 'profit',
        aggFunc: 'sum',
        // No column-level override — inherits { precision: 0 } from defaultColDef.
    },
];

Multiple Aggregation Functions Copy Link

The built-in distribution handles standard aggregation functions. The following example demonstrates a mix of built-in strategies, non-aggregated columns, and custom callbacks. Double-click any group row cell to edit it:

• Salary (sum): divides the new total equally among children, rounding to integers (precision: 0). For example, editing a group total of 300 across 3 children produces 100 each.
• Bonus (avg): overwrites every child with the edited value (the default for avg). For example, editing the group average to 15 sets all children's bonus to 15.
• Projects (no aggFunc): overwrites every child with the edited value (the default when there is no aggregation). The group cell is blank but still editable.
• Rate % (custom callback): reads each leaf child's salary and computes their bonus as salary × rate / 100. For example, entering 20 sets each child's bonus to 20% of their individual salary. Uses allLeafChildren to reach all descendant data rows directly.
• SumSq (custom sumOfSquares aggFunc): uses a custom callback that computes √(newValue / count) per child — the correct inverse of sum-of-squares.

Per-Aggregation Strategies Copy Link

When different columns use different aggregation functions but share a groupRowValueSetter (e.g. via defaultColDef), the distribution property can be set to a record mapping each aggregation function name to a strategy string, an options object, a custom callback function, true to enable with built-in defaults, or false/null to suppress distribution for that aggFunc:

<ag-grid-angular
    [aggFuncs]="aggFuncs"
    [defaultColDef]="defaultColDef"
    /* other grid options ... */ />


const myCustomAgg = (params) => {
    let total = 0;
    for (const value of params.values) {
        total += Number(value) || 0;
    }
    return total;
}; 

// Optional: inverse enables incremental aggregation on row changes
myCustomAgg.inverse = (params) => {
    let total = Number(params.result) || 0;
    for (const value of params.values) {
        total -= Number(value) || 0;
    }
    return total;
};
this.aggFuncs = {
    myCustomAgg,
};
this.defaultColDef = {
    editable: true,
    groupRowEditable: true,
    groupRowValueSetter: {
        precision: 0,
        distribution: {
            sum: 'percentage',                          // strategy string
            avg: { distribution: 'increment' },         // options object
            myCustomAgg: (params) => {                  // custom callback function
                for (const child of params.aggregatedChildren) {
                    child.setDataValue(params.column, params.newValue, 'data');
                }
                return true;
            },
        },
    },
};

Custom aggregation functions are disabled by default. To enable editing, add an explicit entry in the distribution record — either a strategy string, an options object, or a custom callback function that implements the inverse of the aggregation logic:

<ag-grid-angular
    [defaultColDef]="defaultColDef"
    /* other grid options ... */ />

this.defaultColDef = {
    editable: true,
    groupRowEditable: true,
    groupRowValueSetter: {
        precision: 0,
        distribution: {
            sum: 'percentage',
            avg: 'increment',
            count: 'overwrite',
            // Custom aggFunc: provide a callback that reverses the aggregation
            myCustomAgg: (params) => {
                for (const child of params.aggregatedChildren) {
                    child.setDataValue(params.column, params.newValue, 'data');
                }
                return true;
            },
        },
    },
};

Aggregation functions not listed in the record fall through to the default fallback, then to the built-in defaults (see the strategy table above).

Default Fallback Copy Link

When multiple custom aggregation functions share the same distribution logic, the default property avoids repeating entries for each one. It applies to any aggregation function not explicitly listed in the distribution record — including custom aggregation functions (which are disabled without it) and columns without an aggFunc (which already default to 'overwrite' via built-in defaults). Non-distributable functions (count, min, max, first, last) are not affected by default and must always be listed explicitly.

<ag-grid-angular
    [defaultColDef]="defaultColDef"
    /* other grid options ... */ />

this.defaultColDef = {
    editable: true,
    groupRowEditable: true,
    groupRowValueSetter: {
        precision: 0,
        distribution: {
            sum: 'percentage',
            count: 'overwrite',
        },
        // Fallback for unlisted custom aggFuncs and no-aggFunc columns.
        default: 'overwrite',
    },
};

Custom Distribution with a Callback Copy Link

For full control over how group-level edits cascade, assign a function to groupRowValueSetter. The callback receives a GroupRowValueSetterParams object and should return true if any child value was changed.

The following example demonstrates a custom function that distributes the edited total equally among children, rounding child values to integers (largest remainder method). The function calls setDataValue on each child, which triggers aggregation to refresh parent totals automatically.

GroupRowValueSetterParams Copy Link

Aggregated Children Copy Link

The groupRowValueSetter callback receives an aggregatedChildren array containing the immediate children that contribute to the Aggregation for the edited column. This array makes it easy to cascade edited values down to descendant rows without manually traversing the row hierarchy.

The children returned by aggregatedChildren depend on the column and grid configuration:

• Regular value columns: Returns direct children used for aggregation. This respects the suppressAggFilteredOnly grid option and groupAggFiltering — when these cause aggregation to include all children (not just filtered ones), aggregatedChildren returns all children accordingly.
• Pivot columns on leaf groups: Returns only the children matching the column's pivot keys, since pivot aggregation groups rows by pivot key values.
• Non-group rows: Always returns an empty array — only group rows have aggregated children.

Alternatively, rowNode.getAggregatedChildren(colKey) can be called anywhere in code to retrieve the same children programmatically. To collect all descendant leaf rows instead of only the immediate children, pass true as the second argument: rowNode.getAggregatedChildren(colKey, true).

See Retrieving Aggregated Children for more details.

Cascading Edits Copy Link

Key points for implementing cascading edits:

• Calling rowNode.setDataValue on each child pushes updated figures down.
• When a child is also a group that defines its own groupRowValueSetter, the cascade recurses further.
• Parent aggregates refresh automatically because child data changes re-run the column aggFunc, so editing a group row total instantly rebalances the children to reach that value.
• Aggregation is batched automatically — all setDataValue calls within a single groupRowValueSetter invocation are processed before re-aggregation runs.

Calling distributeGroupValue Copy Link

The built-in distribution function distributeGroupValue is exported from ag-grid-enterprise and can be called directly inside a custom groupRowValueSetter callback. This is useful when custom logic is needed before or after the distribution:

import { distributeGroupValue } from 'ag-grid-enterprise';

colDef.groupRowValueSetter = (params) => {
    // Custom pre-processing
    const adjusted = Math.max(0, Number(params.newValue));
    return distributeGroupValue({ ...params, newValue: adjusted }, { distribution: 'percentage' });
};

You can also assign distributeGroupValue directly without a wrapper for default behaviour:

import { distributeGroupValue } from 'ag-grid-enterprise';

colDef.groupRowValueSetter = distributeGroupValue;

Custom getValue and setValue Copy Link

The getValue and setValue callbacks let you override how the built-in distributor reads from and writes to child rows. By default, the distributor uses node.getDataValue(column, 'value') to read and node.setDataValue(column, value, 'data') to write.

This is useful when:

• Child values are stored in a different field or custom data structure.
• You need to apply transformations or side effects during distribution.
• The column's valueSetter or valueGetter don't match the distribution needs.

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    {
        field: 'amount',
        aggFunc: 'sum',
        editable: true,
        groupRowEditable: true,
        groupRowValueSetter: {
            distribution: 'percentage',
            getValue: (params) => (params.data && params.data.weight) || 0,
            setValue: (params) => params.node.setDataValue(params.column, params.value, 'data'),
        },
    },
];

Editing Pivot Columns Copy Link

When using Pivoting, the groupRowValueSetter also works with pivot result columns. The key difference is that aggregatedChildren returns only the children matching the column's pivot keys, not all children of the group.

The following example uses the built-in distribution with pivot mode. Since groupRowEditable is defined, the distribution is enabled automatically. Double-click any pivot cell to edit it. The edited value is distributed uniformly among the children matching that pivot column's keys.

For full control over pivot editing, use a custom groupRowValueSetter callback. In the following example:

• The grid is pivoted by product (Electronics, Clothing, Food), grouped by region and country.
• Double-clicking on any pivot column cell opens the editor for the aggregated value.
• When editing a pivot cell (e.g., "Electronics" column on "Europe" row), the aggregatedChildren array contains only the European rows selling Electronics — not all European rows.
• The edit is distributed equally among just those matching children, leaving other product categories unchanged.

This behaviour ensures that edits on pivot columns affect only the data that contributes to that specific pivot value, making cascading edits work correctly with pivoted data.

Tree Data Copy Link

The groupRowEditable and groupRowValueSetter features also work with Tree Data. In tree data mode, parent nodes act as group rows — editing a parent's aggregated value cascades the change down to its children, just like with row grouping.

The following example shows a company's budget organised as a tree: departments contain teams, and teams contain employees. Editing a department's or team's budget distributes the new total equally among its members, rounding to integers. The cascade recurses through the full hierarchy automatically.

Refreshing Groups After Editing Copy Link

When grouped columns are editable, setting refreshAfterGroupEdit=true causes the grid to update row data and recalculate the grouping after every committed edit. Without this option, the row data updates but the grouping does not get updated until the next full refresh.

When enabling refreshAfterGroupEdit, also provide getRowId so that the grid can track rows by stable IDs while rebuilding the grouping hierarchy.

The following example demonstrates this behaviour. Double-click on a department or team cell to edit it — the grid re-evaluates the grouping and moves the row to the correct group instantly.

See also Read Only Edit for configuring immutable grouped data or connecting the grid with a store.