This section covers the Row Group Panel which allows users control which columns the rows are grouped by.
Enabling Row Group Panel
To display the row group panel set rowGroupPanelShow
as shown below:
const [columnDefs, setColumnDefs] = useState([
{ field: 'country', enableRowGroup: true },
{ field: 'year', enableRowGroup: true },
{ field: 'sport', enableRowGroup: true },
{ field: 'gold' },
{ field: 'silver' },
{ field: 'bronze' },
]);
// possible options: 'never', 'always', 'onlyWhenGrouping'
const rowGroupPanelShow = 'always';
<AgGridReact
columnDefs={columnDefs}
rowGroupPanelShow={rowGroupPanelShow}
/>
In the snippet above, the Row Group Panel is configured so that is 'always'
displayed. To only display the Row Group Panel when there are active row groups use: 'onlyWhenGrouping'
.
Note that enableRowGroup=true
is only declared on the country
, year
and sport
columns, which means only these columns can be dragged to the Row Group Panel.
This is demonstrated in the following example, note the following:
There are two active row groups as the supplied
country
andyear
column definitions haverowGroup=true
declared.The Row Group Panel is always shown as
rowGroupPanelShow = 'always'
.Only the
country
,year
andsport
columns can be dragged to the Row Group Panel as they haveenableRowGroup
enabled.The columns can be clicked in the Row Group Panel to progress their sort.
Keeping Columns Visible
By default, dragging a column out of the grid will make it hidden and un-grouping a column will make it visible again. This default behaviour can be changed with the following properties:
suppressDragLeaveHidesColumns
: When dragging a column out of the grid, e.g. when dragging a column from the grid to the group drop zone, the column will remain visible.suppressMakeColumnVisibleAfterUnGroup
: When un-grouping, e.g. when clicking the 'x' on a column in the drop zone, the column will not be made visible.suppressRowGroupHidesColumns
: When grouping, when a group is dragged into the group drop zones, the column will not be hidden.
The default behaviour is more natural for most scenarios as it stops data appearing twice, e.g. if country is displayed in the group column, there is no need to display country again in the country column. However, preventing hiding the grouped columns can allow for a finer control over the group sorting.
The example below demonstrates these three properties. Note the following:
- Columns country and year can be grouped by dragging the column to the group drop zone.
- Grouped columns can be un-grouped by clicking the 'x' on the column in the drop zone.
- The column visibility is not changed while the columns are grouped and un-grouped.
- While dragging the column header over the drop zone, before it is dropped, the column appears translucent to indicate that the grouping has not yet been applied.
Suppress Sorting
By default, the column pills display sort indicators, and when clicked progress the columns sort status. This behaviour can be prevented by enabling the rowGroupPanelSuppressSort
property.
The example below demonstrates this property. Note the following:
- The column pills within the row group panels do not have sort indicators.
- Clicking on a column pill does not change the columns sort.
Example: Multiple Group Columns
The following example demonstrates the row group panel used alongside multiple group columns.
Next Up
Continue to the next section to learn about Locking Group Columns.