Vue Data GridRow Grouping - Displaying Grouped Data

Grouping hierarchy can be displayed in the grid in different ways.

Display Types

The row hierarchy can be shown in three different ways, configured by the groupDisplayType grid option:

• A Single Group Column containing all row group levels.
• Multiple Group Columns with each column representing a row group level.
• Group Rows where parent rows are displayed as full width rows.

To configure the display type, set the groupDisplayType property in the grid options to one of "singleColumn", "multipleColumns" or "groupRows" as demonstrated in the following configuration:

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

this.groupDisplayType = 'multipleColumns';

Next Up

Continue to the next section to learn about the Single Group Column display type.