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 acellRendererSelector
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.