Display the group structure with a single generated column in the grid.
Enabling a Single Group Column Copy LinkThe example above demonstrates that both country and year are grouped. Only a single group column is used to display the group value cells.
The Single Group Column is enabled by default, but it can be set explicitly by setting the groupDisplayType grid option to "singleColumn" as shown below:
const gridOptions = {
groupDisplayType: 'singleColumn',
}The Single Group Column is added to the grid when row grouping is present, and can be configured via the autoGroupColumnDef grid option to define Column Options.
The example above uses the configuration demonstrated below to change the columns header name, apply a minimum width, and display athlete values in the leaf level rows. It also Configures the Group Cell Component using the cellRendererParams option to remove the count from each row group.
const gridOptions = {
autoGroupColumnDef: {
headerName: 'My Group',
field: 'athlete',
minWidth: 220,
cellRendererParams: {
suppressCount: true,
}
},
}The group column uses the agGroupCellRenderer component to display the group information, as well as the chevron control for expanding and collapsing rows. The renderer also embeds the grouped columns renderer and displays this inside of the group cell.
This can be configured with several Group Renderer Properties using the autoGroupColumnDef property cellRendererParams. The example below removes the row count and also Configures Row Selection to enable checkboxes for row selection.
The example above demonstrates the following configuration:
const gridOptions = {
columnDefs: [
{ field: 'total', rowGroup: true, cellRenderer: CustomMedalCellRenderer },
],
autoGroupColumnDef: {
cellRendererParams: {
suppressCount: true,
}
},
rowSelection: {
mode: 'singleRow',
checkboxLocation: 'autoGroupColumn',
},
}boolean
Set to true to not include any padding (indentation) in the child rows.
boolean
Set to true to suppress expand on double click.
boolean
Set to true to suppress expand on âµ Enter
string | TotalValueGetterFunc
The value getter for the total row text. Can be a function or expression.
boolean
If true, count is not displayed beside the name.
any
The renderer to use for inside the cell (after grouping functions are added)
any
Additional params to customise to the innerRenderer.
Function
Callback to enable different innerRenderers to be used based of value of params.
Checkbox Selection Copy LinkThe agGroupCellRenderer can be configured to show checkboxes for row selection. Setting the Row Selection checkboxLocation property to 'autoGroupColumn' hides the Checkbox Column instead using the group cell renderer to display checkboxes.
The example above demonstrates the following configuration:
const gridOptions = {
rowSelection: {
mode: 'multiRow',
selectAll: 'all',
checkboxLocation: 'autoGroupColumn',
},
}When using the group cell renderer, the agGroupCellRenderer component will inherit the grouped columns renderer and display this inside of the group cell, adjacent to any configured checkboxes, cell count, and the expand/collapse chevron control.
This inner renderer can be overridden with a Custom Cell Component by setting the innerRenderer and innerRendererParams properties on the cellRendererParams configuration.
The example above uses the following configuration to provide a custom inner renderer to the group column:
const gridOptions = {
autoGroupColumnDef: {
cellRendererParams: {
innerRenderer: CustomMedalCellRenderer,
},
},
}The Group Cell Renderer can be entirely replaced with a Custom Cell Component by setting the cellRenderer property on the autoGroupColumnDef configuration.
The grid filters leaf rows by default, if all of a groups children are filtered out, the group is also hidden.
Inherit Row Grouped Columns Filters Copy LinkThe single group column content changes depending on the columns which have row grouping enabled. The agGroupColumnFilter can be used to display the filters for the columns with row grouping enabled.
The example above demonstrates the following configuration to enable the group column filter:
const gridOptions = {
autoGroupColumnDef: {
filter: 'agGroupColumnFilter',
floatingFilter: true,
},
}When accessing filter instances via API, access the filters on the columns with row grouping.
Tree Filter Copy LinkThe agSetColumnFilter can be used to filter the group column in a Tree List, representing the hierarchy of the row groups.
The tree filter needs a value for each leaf row. In absence of a field or valueGetter on the group column, provide a filterValueGetter to the group column definition.
The example above demonstrates the following configuration to enable the tree set filter:
const gridOptions = {
autoGroupColumnDef: {
filter: 'agSetColumnFilter',
filterValueGetter: (params) => params.data.athlete,
filterParams: {
treeList: true,
keyCreator: (params) => (params.value ? params.value.join('#') : null),
},
},
}Refer to the Tree List Filter documentation for further configuration options.
Text Filtering Copy LinkProviding a filter value getter to the group column allows for a simple string search of any group level.
The example above demonstrates using a filter value getter which returns an array of ancestor row keys. This enables searching for any group value containing the filter text:
const gridOptions = {
autoGroupColumnDef: {
filter: 'agTextColumnFilter',
filterValueGetter: (params) => params.node.parent.getRoute(),
},
}Continue to the next section to learn about the Multiple Group Columns display type.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4