JavaScript Data GridRow Grouping - Row Group Panel

Enterprise

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.