Grouping columns allows you to have multiple levels of columns in your header and the ability, if you want, to
‘open’/’close’ column groups to show/hide additional columns.
To group columns, provide them in a tree hierarchy to the grid. There is no limit to the number of levels you can
provide.
Here is how to create two groups of columns:
columnDefs = [
{
'headerName': 'Athlete Details',
'children': [
{'field': 'athlete'},
{'field': 'age'},
{'field': 'country'},
]
},
{
'headerName': 'Sports Results',
'children': [
{'field': 'sport'},
{'field': 'total', 'columnGroupShow': 'closed'},
{'field': 'gold', 'columnGroupShow': 'open'},
{'field': 'silver', 'columnGroupShow': 'open'},
{'field': 'bronze', 'columnGroupShow': 'open'},
]
}
]
Here is a simple example showing a column groups configuration.
The list of columns in columnDefs
can be a mix of columns and column groups. Each level can have any number of columns
and column groups and in any order. The difference in column vs column group definitions is as follows:
children
attribute is mandatory for column groups and not applicable for columns.children
attribute, it is treated as a column group. If it does not have a children
groupId
is only used for groups). IfgroupId
) they will be ignored.A group can have children shown or hidden based on the open/closed state of the group. This is controlled by
setting columnGroupShow
on one or more of the children. When a child has columnGroupShow
set, it behaves in the
following way:
'open'
: The child is only shown when the group is open.'closed'
: The child is only shown when the group is closed.If a group has any child with columnGroupShow
set as 'open'
/'closed'
, then the open/close icon will appear in
the group header. Otherwise, the icon will not be shown.
Having columns only shown when closed is useful when you want to replace a column with others. For example, in the code
snippet above (and the example below), the Total column is replaced with other columns when the group is opened.
If a group has an ‘incompatible’ set of children, then the group opening/closing will not be activated. An
incompatible set is one which will have no columns visible at some point (i.e. all are set to 'open'
or 'closed'
).
Pinned columns break groups. So if you have a group with 10 columns, 4 of which are inside the pinned area, two groups
will be created, one with 4 (pinned) and one with 6 (not pinned).
If you move columns so that columns in a group are no longer adjacent, then the group will again be broken and displayed
as one or more groups in the grid.
The grid doesn’t color the groups for you. However, you can use the column definition headerClass
for this purpose.
The headerClass
attribute is available on both columns and column groups.
columnDefs = [
# the CSS class name supplied to 'headerClass' will get applied to the header group
{"headerName": 'Athlete Details', "headerClass": 'my-css-class', "children": []}
]
When Column Groups are too wide, the Header Label is always visible while scrolling the grid horizontally. If you want
to supress this, set the column group property suppressStickyLabel=True
. The example below demonstrates the following:
suppressStickyLabel=True
. If you scroll the grid horizontally, the header label will not beAs Sticky Label is enabled by default, the
column group property suppressStickyLabel=True
must be set to apply a custom header alignment.
Once sticky labels are disabled, the labels in the group headers are aligned to the left by default. To make the group
headers center-aligned or right-aligned, it is possible to set the CSS property justify-content
applied to the AG Grid
class .ag-header-group-cell-label
.
The following example shows how to set the header groups alignment.
View the CSS classes used for this example
These CSS classes must be added to any *.css
file in the assets folder.
See Loading CSS files for more information.
.center-aligned-group-header .ag-header-group-cell-label {
justify-content: center;
}
.right-aligned-group-header .ag-header-group-cell-label {
justify-content: right;
}
Sometimes you want columns of the group to always stick together. To achieve this, set the column group
property marryChildren=True
. The example below demonstrates the following:
marryChildren=True
.View the CSS classes used for this example
These CSS classes must be added to any *.css
file in the assets folder.
See Loading CSS files for more information.
.column-groups-header-background-color .ag-header-group-cell-with-group {
background-color: #00e7b1 !important;
}
Similar to adding and removing columns, you can also add and remove column groups. If the column definitions passed in
have column groups, then the columns will be grouped to the new configuration.
The example below shows adding and removing groups to columns.
View the CSS classes used for this example
These CSS classes must be added to any *.css
file in the assets folder.
See Loading CSS files for more information.
.column-groups-participant-group {
background-color: #119dff !important;
}
.column-groups-medals-group {
background-color: #66c2a5 !important;
}
By default, the grid will resize the header cell to span the whole height of the header container. Using the Column
Property suppressSpanHeaderHeight
the Grid will balance the column headers with different number of levels with an
empty column group header cell.
The example below shows when suppressSpanHeaderHeight
is used. Note the following:
suppressSpanHeaderHeight=True
and the header label has an empty column group header cell above it.View the CSS classes used for this example
These CSS classes must be added to any *.css
file in the assets folder.
See Loading CSS files for more information.
.column-groups-headers .ag-header-group-cell-with-group {
background-color: #119dff !important;
}