Group Cell Component

The Group Cell Component provides the expand and collapse functionality when using Row Grouping, Master Detail or Tree Data. The Group Cell Component can be the Provided Component that comes with the grid or a Custom Component that you provide yourself

Where the Group Cell Component is configured depends on the Display Type.

Single Column & Multi Column

Display types Single Column and Multiple Columns configure the Group Column Definition via the Grid Option autoGroupColumnDef. Part of this Column Definition is the Cell Component (cellRenderer).

const autoGroupColumnDef = useMemo(() => { 
	return {
        headerName: 'My Group',
        minWidth: 220,
        cellRenderer: MyGroupCellRenderer,
        cellRendererParams: {
        }
    };
}, []);

<AgGridReact autoGroupColumnDef={autoGroupColumnDef} />

Row Group Column

Display type Group Rows configures the Group Cell Component on the Grid Option groupRowRenderer. Note there is no Group Column, hence there is no Column Definition involved.

const groupRowRenderer = MyGroupCellRenderer;
const groupRowRendererParams = {};
const groupDisplayType = 'groupRows';

<AgGridReact
    groupRowRenderer={groupRowRenderer}
    groupRowRendererParams={groupRowRendererParams}
    groupDisplayType={groupDisplayType}
/>

Custom Column

Display type Custom Column configures the Group Cell Component on the Column Definitions.

const [columnDefs, setColumnDefs] = useState([
    // Group Column (Custom)
    { 
        cellRenderer: 'agGroupCellRenderer', 
        showRowGroup: true 
    }
]);

const groupDisplayType = 'custom';

<AgGridReact
    columnDefs={columnDefs}
    groupDisplayType={groupDisplayType}
/>

Dynamic Selection

Dynamic selection is achieved using cellRendererSelector. This can be used to conditionally show the expand and collapse functionality.

const autoGroupColumnDef = useMemo(() => { 
	return {
        cellRendererSelector: (params) => {
          if (['Australia', 'Norway'].includes(params.node.key)) {
            return; // use Default Cell Component
          }
          return { component: 'agGroupCellRenderer' };      
        },
    };
}, []);

<AgGridReact autoGroupColumnDef={autoGroupColumnDef} />

This example demonstrates Dynamic Selection.

• The autoGroupColumnDef contains a cellRendererSelector to conditionally select the Group Cell Component.
• The Australia and Norway group cells are not using any Group Cell Component and as such are missing expand and collapse functionality.