React Data GridRow Grouping - Row Group Panel

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 [columnDefs, setColumnDefs] = useState([
    { field: 'country', rowGroup: true, enableRowGroup: true },
    { field: 'year', rowGroup: true, enableRowGroup: true },
    // ...other column definitions
]);

// possible options: 'never', 'always', 'onlyWhenGrouping'
const rowGroupPanelShow = 'always';

<AgGridReact
    columnDefs={columnDefs}
    rowGroupPanelShow={rowGroupPanelShow}
/>

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 sideBar = useMemo(() => { 
	return 'columns';
}, []);

<AgGridReact sideBar={sideBar} />

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".

The following configuration can be used to prevent the column visibility from being impacted when a user changes the row group columns:

const suppressGroupChangesColumnVisibility = true;
// prevent columns from being hidden when dragged over the row group panel
const suppressDragLeaveHidesColumns = true;

<AgGridReact
    suppressGroupChangesColumnVisibility={suppressGroupChangesColumnVisibility}
    suppressDragLeaveHidesColumns={suppressDragLeaveHidesColumns}
/>

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 rowGroupPanelSuppressSort = true;

<AgGridReact rowGroupPanelSuppressSort={rowGroupPanelSuppressSort} />

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 first two columns from being reordered or removed:

const groupLockGroupColumns = 2;

<AgGridReact groupLockGroupColumns={groupLockGroupColumns} />

Next Up

Continue to the next section to learn about Expanding Groups.