React Data GridTree Data - Tree Selection

Row Selection can allow users to select rows in a tree structure.

Selecting Descendants

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

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

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

The example above demonstrates the following configuration:

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

<AgGridReact rowSelection={rowSelection} />

Checkboxes in Group Cells

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

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

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

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

<AgGridReact rowSelection={rowSelection} />

Next Up

Continue to the next section to learn how to configure Filtering.