Vue Data GridGroup Cell Component

The Group Cell Component provides the expand and collapse functionality when using Row Grouping, Master Detail or Tree Data. The Group Cell Component can be the Provided Component that comes with the grid or a Custom Component that you provide yourself

Where the Group Cell Component is configured depends on the Display Type.

Single Column & Multi Column

Display types Single Column and Multiple Columns configure the Group Column Definition via the Grid Option autoGroupColumnDef. Part of this Column Definition is the Cell Component (cellRenderer).

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

this.autoGroupColumnDef = {
    headerName: 'My Group',
    minWidth: 220,
    cellRenderer: MyGroupCellRenderer,
    cellRendererParams: {
    }
};

Row Group Column

Display type Group Rows configures the Group Cell Component on the Grid Option groupRowRenderer. Note there is no Group Column, hence there is no Column Definition involved.

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

this.groupRowRenderer = MyGroupCellRenderer;
this.groupRowRendererParams = {};
this.groupDisplayType = 'groupRows';

Custom Column

Display type Custom Column configures the Group Cell Component on the Column Definitions.

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

this.columnDefs = [
    // Group Column (Custom)
    { 
        cellRenderer: 'agGroupCellRenderer', 
        showRowGroup: true 
    }
];

this.groupDisplayType = 'custom';

Dynamic Selection

Dynamic selection is achieved using cellRendererSelector. This can be used to conditionally show the expand and collapse functionality.

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

this.autoGroupColumnDef = {
    cellRendererSelector: (params) => {
      if (['Australia', 'Norway'].includes(params.node.key)) {
        return; // use Default Cell Component
      }
      return { component: 'agGroupCellRenderer' };      
    },
};

This example demonstrates Dynamic Selection.

• The autoGroupColumnDef contains a cellRendererSelector to conditionally select the Group Cell Component.
• The Australia and Norway group cells are not using any Group Cell Component and as such are missing expand and collapse functionality.