JavaScript 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

Set groupRowEditable on any column to make its group row cells editable. The grid then distributes the edited value to descendant rows using the built-in distribution. To customise this, set groupRowValueSetter to an options object, a callback, or false to disable distribution.

In the example below, double-click any group row's Sales cell to edit it. The new total spreads equally across the group's children, recursing through nested groups.

groupRowEditable accepts a boolean or a callback. The callback runs only for group rows (rowNode.group === true); leaf rows continue to honour editable. When a column sets both properties, the grid uses whichever matches the current row type, allowing separate rules for group rows and leaf rows.

Built-in Value Distribution Copy Link

The built-in distribution adjusts each child so the column's aggFunc produces the new total. Pass an options object to groupRowValueSetter to customise the strategy or precision.

const gridOptions = {
    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 },
        },
    ],

    // other grid options ...
}

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. These functions have no unique inverse, so the grid cannot choose a safe default. To enable editing for them:

• 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 (see Per-Aggregation Strategies).
• Assign a callback to groupRowValueSetter for full control.

const gridOptions = {
    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' } },
        },
    ],

    // other grid options ...
}

Setting distribution to true uses built-in defaults for sum, avg, no-aggFunc columns, and custom aggregation functions. The count, min, max, first, and last functions stay disabled even with true; use 'overwrite', a per-aggFunc record entry, or a 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, every strategy adjusts child values so the children's 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 a column, the grid deep merges the two. The column's properties take precedence; anything not specified on the column is inherited from the default. This includes nested distribution records.

const gridOptions = {
    defaultColDef: {
        editable: true,
        groupRowEditable: true,
        // Default: round child values to integers, disable count
        groupRowValueSetter: { precision: 0, distribution: { count: false } },
    },
    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.
        },
    ],

    // other grid options ...
}

Multiple Aggregation Functions Copy Link

The following example mixes built-in strategies, a non-aggregated column, and custom callbacks. Double-click any group row cell to edit it:

• Salary (sum): divides the new total equally among children, rounded to integers (precision: 0). Editing 300 across 3 children produces 100 each.
• Bonus (avg): overwrites every child with the edited value. Editing the average to 15 sets all children's bonus to 15.
• Projects (no aggFunc): overwrites every child with the edited value. The group cell is blank but still editable.
• Rate % (custom callback): computes each leaf child's bonus as salary × rate / 100. Entering 20 sets each child's bonus to 20% of their salary. Uses node.getAggregatedChildren(column, true) to reach all descendant leaf rows directly.
• SumSq (custom sumOfSquares aggFunc): a callback sets each child to √(newValue / count), the inverse of sum-of-squares.

Per-Aggregation Strategies Copy Link

When several columns share a groupRowValueSetter (e.g. via defaultColDef) but use different aggregation functions, set distribution to a record keyed by aggFunc name. Each entry can be a strategy string, an options object, a custom callback, true for built-in defaults, or false/null to suppress distribution for that aggFunc:

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;
};

const gridOptions = {
    aggFuncs: {
        myCustomAgg,
    },
    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;
                },
            },
        },
    },

    // other grid options ...
}

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

const gridOptions = {
    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;
                },
            },
        },
    },

    // other grid options ...
}

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 aggregations (which are otherwise disabled) and columns with no aggFunc (which already default to 'overwrite'). Non-distributable functions (count, min, max, first, last) are not affected by default and must always be listed explicitly.

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

    // other grid options ...
}

Custom getValue and setValue Copy Link

The getValue and setValue callbacks override how the built-in distributor reads from and writes to child rows. By default it uses node.getDataValue(column, 'value') to read and node.setDataValue(column, value, 'data') to write. Provide your own when child values live on a different field or custom data structure, when you need to apply transformations or side effects during distribution, or when the column's valueGetter / valueSetter are not suitable for distribution.

const gridOptions = {
    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'),
            },
        },
    ],

    // other grid options ...
}

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 when any child value was changed.

The example below distributes the edited total equally among children, rounded to integers (largest remainder method). It calls setDataValue on each child; aggregation then refreshes parent totals automatically.

GroupRowValueSetterParams Copy Link

Aggregated Children Copy Link

The groupRowValueSetter callback receives an aggregatedChildren array: the immediate children that contribute to the Aggregation for the edited column. Cascading edits to these children avoids traversing the row hierarchy by hand.

What aggregatedChildren returns depends on the column and grid configuration:

• Regular value columns: the direct children used for aggregation. This respects suppressAggFilteredOnly and groupAggFiltering; when those cause aggregation to include all children rather than just filtered ones, aggregatedChildren follows suit.
• Pivot columns on leaf groups: only the children matching the column's pivot keys, since pivot aggregation groups rows by pivot key values.
• Non-group rows: an empty array.

The same children can be retrieved programmatically with rowNode.getAggregatedChildren(colKey). 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:

• Call rowNode.setDataValue on each child to write the new value down.
• When a child is itself a group with its own groupRowValueSetter, the cascade recurses further.
• Parent aggregates refresh automatically: child data changes re-run the column aggFunc, so editing a group total rebalances the children to match it.
• Aggregation is batched. 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;

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 in pivot mode. Setting groupRowEditable enables distribution 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, use a custom groupRowValueSetter callback. In the example below:

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

Edits on pivot columns therefore affect only the rows contributing to that pivot value, leaving other pivot categories untouched.

Tree Data Copy Link

groupRowEditable and groupRowValueSetter also work with Tree Data. Parent nodes act as group rows, so editing a parent's aggregated value cascades the change down to its children just as with row grouping.

The example below 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, rounded to integers, recursing through the hierarchy.

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.