React Data GridRow Grouping - Hierarchy Selection

Row Selection can be configured with groups to select all of a rows descendants.

Selecting Descendants

When using Multiple Row Selection with row grouping, the grid can be configured to impact descendant and ancestor rows when a row is selected.

To enable hierarchical selection, set the selection.groupSelects option to one of the following values:

• 'self': Selecting a group row has no additional side effects.
• 'descendants': Selecting a group row will select all of its descendants.
• 'filteredDescendants': Selecting a group row will select all of its descendants that pass the filter.

The example above demonstrates the following configuration:

const rowSelection = useMemo(() => { 
	return {
        mode: 'multiple',
        groupSelects: 'descendants',
    };
}, []);

<AgGridReact rowSelection={rowSelection} />

Checkboxes in Group Cells

When using Row Selection with grouping, the grid can be configured to render checkboxes in the group cell, to the right of the expand/collapse chevron.

This can be configured on by setting the rowSelection.checkboxLocation option to 'autoGroupColumn'.

The example above demonstrates the following configuration to render checkboxes in the group cell:

const rowSelection = useMemo(() => { 
	return {
        mode: 'multiRow',
        checkboxLocation: 'autoGroupColumn',
    };
}, []);

<AgGridReact rowSelection={rowSelection} />

Next Up

Continue to the next section to learn Sorting Groups.