React Data GridRow Grouping - Editing Groups

The grid supports editing grouped data when using the Client-Side Row Model. This page explains how to keep the grouping hierarchy synchronised with edits and how to allow group rows themselves to be editable.

Refreshing Groups After Editing Copy Link

When grouped columns are editable, set refreshAfterGroupEdit=true so the grid updates row data and recalculates the grouping after every committed edit.

In the example above, changing the region causes the grid to re-evaluate the grouping and move the row to the correct group instantly. Double click on a region cell to edit it.

By default, without refreshAfterGroupEdit enabled, 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.

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

Editing Group Row Cells Copy Link

Set groupRowEditable on any column that should accept edits on group nodes. Provide either a boolean or a callback; callbacks only run for nodes where rowNode.group === true, while leaf rows continue to honour editable.

groupRowValueSetter mirrors the regular valueSetter, but it only fires for group rows. It runs whenever a group row cell changes through the UI, rowNode.setDataValue, or another API call, making it the right place to cascade edits to child nodes.

Return true from the callback to inform the grid that the value changed and refresh is needed.

Most grouped rows (and filler nodes in tree data) do not own rowNode.data, so their column valueSetter never runs even if groupRowEditable is enabled. Provide a groupRowValueSetter whenever the edit needs to persist or update aggregates; only group rows that own real data objects run the normal value pipeline.

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

Custom Distribution of Edits Copy Link

In this example, groupRowValueSetter is used to distribute edits on group rows to their descendant rows. The example uses a simple strategy of dividing the value equally among all visible children and sub groups.

Key points:

• Use groupRowValueSetter to redistribute committed values to descendants. The callback receives the group row node and column.
• Call rowNode.setDataValue on children to push the updated figures down. This triggers normal aggregation to refresh parent totals and recurses further when a child is also a group that defines its own groupRowValueSetter.
• rowNode.childrenAfterSort contains the descendants in the node, groups or leaf rows.
• Parent aggregates refresh automatically because child data changes re-run the column aggFunc, so typing £600 into “Europe” instantly rebalances the filtered countries to reach that total.

Next Up Copy Link

Continue to the next section to learn Row Dragging with Row Groups.