Customise the generated group column when using Tree Data.
Group Column Configuration
When using Tree Data, the grid will automatically generate a group column to display the hierarchy. This column can be configured by using the autoGroupColumnDef
grid option, allowing any Column Property to be overridden.
The example above sets different header text, a minimum width, and adds checkboxes to each Group Column cell the following configuration:
const autoGroupColumnDef = useMemo(() => {
return {
headerName: 'My Group',
minWidth: 220,
cellRendererParams: {
checkbox: true,
}
};
}, []);
<AgGridReact autoGroupColumnDef={autoGroupColumnDef} />
Displayed Values
The Group Column cells are populated by the path keys as a default. As these keys must be unique, it can be preferable to display a different value. This can be overridden by providing a field
or valueGetter
in the autoGroupColumnDef
grid option.
The above example uses the following configuration to show two 'Bob Stevens' working within the same team, where the path is comprised of unique employee IDs:
const treeData = true;
const [rowData, setRowData] = useState([
{ employeeId: '1', name: 'Alice Johnson', path: ['1'] },
{ employeeId: '2', name: 'Bob Stevens', path: ['1', '2'] },
{ employeeId: '3', name: 'Bob Stevens', path: ['1', '3'] },
{ employeeId: '4', name: 'Jessica Adams', path: ['1', '4'] },
]);
const getDataPath = data => data.path;
const autoGroupColumnDef = useMemo(() => {
return {
field: 'name', // display the name instead of the path key
};
}, []);
<AgGridReact
treeData={treeData}
rowData={rowData}
getDataPath={getDataPath}
autoGroupColumnDef={autoGroupColumnDef}
/>
Group Cell Component
The grid uses the agGroupCellRenderer
component to render the group column cells.
Child Row Counts
When showing child counts with Tree Data, the child count is a count of all descendants, including groups.
Note how in the example above, the Desktop
row has a child count of 5, of which one of is the ProjectAlpha
Filler Group row.
Default Component Options
The options configurable on the agGroupCellRenderer
via the column definition cellRendererParams
are:
Set to true to not include any padding (indentation) in the child rows. |
Set to true to suppress expand on double click. |
Set to true to suppress expand on ↵ Enter |
The value getter for the total row text. Can be a function or expression. |
If true , count is not displayed beside the name. |
Set to true , or a function that returns true , if a checkbox should be included.
|
The renderer to use for inside the cell (after grouping functions are added) |
Additional params to customise to the innerRenderer . |
Callback to enable different innerRenderers to be used based of value of params. |
Custom Component
Where the default agGroupCellRenderer
does not meet your requirements, you can provide a custom cell renderer component, via the cellRenderer
property in the autoGroupColumnDef
grid option.
The below example provides a custom cell renderer which:
- Uses a custom icon to represent the groups expanded state
- Responds to row expansion events to update if the group is expanded or collapsed from another source
- Cleans up all event listeners when it's destroyed
This demonstrates supplying a custom cell renderer via the cellRenderer
property in the autoGroupColumnDef
:
const autoGroupColumnDef = useMemo(() => {
return {
cellRenderer: CellRenderer,
};
}, []);
<AgGridReact autoGroupColumnDef={autoGroupColumnDef} />
Dynamic Component Selection
Where it may be more appropriate to have two different renderers in the same column, you can instead use the cellRendererSelector
property in the autoGroupColumnDef
grid option.
Callback to select which cell renderer to be used for a given row within the same column. |
The example below extends the Custom Component example to use a different renderer based on the rows level:
This uses the following configuration to display the default cell renderer for root level groups, and the custom renderer for all others:
const cellRendererSelector = (params) => {
if (params.node.level === 0) {
return {
component: 'agGroupCellRenderer',
};
}
return {
component: CustomGroupCellRenderer,
};
};
<AgGridReact cellRendererSelector={cellRendererSelector} />
Next Up
Continue to the next section to learn how to Expand Row Groups.