Use the Row Group Panel to enable users to modify the configured row group columns.
Enabling the Row Group Panel
The Row Group Panel allows users to modify which columns are grouped by using drag and drop. The panel can be enabled by setting the rowGroupPanelShow
grid option to "always"
or "onlyWhenGrouping"
.
Columns also need to have enableRowGroup
set to true
in their column definition to be dragged into the panel.
The example above enables the panel and configures the country
and year
columns to be controllable by the panel:
const gridOptions = {
columnDefs: [
{ field: 'country', rowGroup: true, enableRowGroup: true },
{ field: 'year', rowGroup: true, enableRowGroup: true },
// ...other column definitions
],
// possible options: 'never', 'always', 'onlyWhenGrouping'
rowGroupPanelShow: 'always',
// other grid options ...
}
Row Group Panel in the Side Bar
The Row Group Panel is also displayed as part of the Columns Tool Panel in the Side Bar.
The example above enabled the Columns Tool Panel using the following configuration:
const gridOptions = {
sideBar: 'columns',
// other grid options ...
}
Refer to the Side Bar documentation for further configuration options.
Prevent User Grouping from Hiding Columns
After a user applies row grouping to a column, the column is hidden. If the user removes the row grouping, the column is made visible again.
This behaviour can be configured by setting the suppressGroupChangesColumnVisibility
grid option property to true
, "suppressHideOnGroup"
or "suppressShowOnUngroup"
.
When dragging a column over the row group panel, the column is considered outside of the grid and so will be hidden. This behaviour can be prevented by setting suppressDragLeaveHidesColumns
to true
.
The following configuration can be used to prevent the column visibility from being impacted when a user changes the row group columns:
const gridOptions = {
suppressGroupChangesColumnVisibility: true,
// prevent columns from being hidden when dragged over the row group panel
suppressDragLeaveHidesColumns: true,
// other grid options ...
}
Prevent Sorting
The panel displays sort indicators, and the column pills can be clicked to change their sort. This behaviour can be prevented by setting the rowGroupPanelSuppressSort
property to true
.
The previous example demonstrates the following configuration for preventing the Row Group Panel from sorting columns:
const gridOptions = {
rowGroupPanelSuppressSort: true,
// other grid options ...
}
Prevent Changes to Group Order
The panel can be used to reorder or remove row grouping from columns. To prevent this, groupLockGroupColumns
can be set to prevent removing or reordering columns. Providing -1
will lock all columns, or provide a number representing the number of columns to lock.
The example above demonstrates locking the columns from their grouping being moved or removed:
const gridOptions = {
groupLockGroupColumns: -1,
// other grid options ...
}
Next Up
Continue to the next section to learn about Expanding Groups.