Vue 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:

<ag-grid-vue
    :columnDefs="columnDefs"
    :rowGroupPanelShow="rowGroupPanelShow"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { field: 'country', rowGroup: true, enableRowGroup: true },
    { field: 'year', rowGroup: true, enableRowGroup: true },
    // ...other column definitions
];

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

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:

<ag-grid-vue
    :sideBar="sideBar"
    /* other grid options ... */>
</ag-grid-vue>

this.sideBar = 'columns';

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:

<ag-grid-vue
    :suppressGroupChangesColumnVisibility="suppressGroupChangesColumnVisibility"
    :suppressDragLeaveHidesColumns="suppressDragLeaveHidesColumns"
    /* other grid options ... */>
</ag-grid-vue>

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

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:

<ag-grid-vue
    :rowGroupPanelSuppressSort="rowGroupPanelSuppressSort"
    /* other grid options ... */>
</ag-grid-vue>

this.rowGroupPanelSuppressSort = true;

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:

<ag-grid-vue
    :groupLockGroupColumns="groupLockGroupColumns"
    /* other grid options ... */>
</ag-grid-vue>

this.groupLockGroupColumns = 2;

Next Up

Continue to the next section to learn about Expanding Groups.