Vue Data GridGroup Cell Renderer
vue logo
Enterprise

When using row grouping, the grid displays group cell renderers in the group column to allow expanding and collapsing the group rows. This section describes how the group cell renderer can be configured.

Group Cell Renderer Configuration

The key for the group cell renderer is agGroupCellRenderer.

The grid's group cell renderer takes many parameters to configure it. Here is an example of a column and its configuration:

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

this.columnDefs = [
    // column definition configured to show group values with the cell renderer set to 'group'
    {
        showRowGroup: true,
        cellRenderer:'agGroupCellRenderer',
        // provide extra params to the cellRenderer
        cellRendererParams: {
            // turn off the row count
            suppressCount: true,
            // turn off double click for expand
            suppressDoubleClickExpand: true,
            // enable checkbox selection
            checkbox: true,
            // provide an inner renderer
            innerRenderer: myInnerRenderer,
            // provide an inner renderer
            innerRendererParams: {foo: 'bar'},
            // provide a footer value getter
            footerValueGetter: myFooterValueGetter
        }
    }
];

The full set of parameters for the group cell renderer are defined on IGroupCellRendererParams and include:

Properties available on the IGroupCellRendererParams<TData = any, TValue = any> interface.

Below shows an example of configuring a group cell renderer. The example setup is not realistic as it has many columns configured for showing the groups. The reason for this is to demonstrate different group column configurations side by side. In your application, you will typically have one column for showing the groups.

The example is built up as follows:

  • The data is grouped by two columns: Type (one of 'Fiction' or 'Non-Fiction') and Country (a country name, eg Ireland or United Kingdom).

  • The column 'Country Group - No Renderer' configures the grid to put the 'Country' group data only into this column by setting showRowGroup='country'. All rows that are not this group are blank. There is no cell renderer configured, so the grid just places the text for the group into the cell, there is not expand / collapse functionality.

  • The column 'All Groups - no Renderer' builds on before, but adds all groups by setting showRowGroup=true. This gets the column to display all groups, but again no cell renderer so not expand / collapse functionality.

  • The column Group Renderer A builds on before, but adds the group cell renderer with cellRenderer='agGroupCellRenderer'. The values are exactly as per the previous column, except now we have expand and collapse functionality.

  • The column Group Renderer B builds on before, but adds field=city so that the city is displayed in the leaf nodes in the group column.

  • The column Group Renderer C builds on before, but adds the following cellRendererParams:

    • suppressCount=true: Suppresses the row count.
    • suppressDoubleClickExpand=true: Suppress double click for expanding.
    • checkbox=true: Adds a selection checkbox.
    • innerRenderer=SimpleCellRenderer: Puts custom rendering for displaying the value. The group cellRenderer will take care of all the expand / collapse, selection etc, but then allow you to customise the display of the value. In this example we add a border when the value is a group, and we set the colour based on whether the cell is a leaf node or not.

If you require functionality that is not provided by the agGroupCellRenderer, you can use a Custom Cell Renderer to provide your own extended functionality.

Conditionally Hide Group Cell Renderer

It is possible to conditionally hide the Group Cell Renderer. This might be useful in cases where the Expand / Collapse chevron should not be displayed in certain group cells.

This can be achieved via the cellRendererSelector callback function as shown in below:

<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 Renderer
      }
      return { component: 'agGroupCellRenderer' };      
    },
};

In the snippet above group cells that contain 'Australia' or 'Norway' group keys will use the Default Cell Renderer instead of the Group Cell Renderer. Note that a Custom Component Cell Renderer could also be returned.

This is demonstrated in the example below. Note the following:

  • The autoGroupColumnDef contains a cellRendererSelector to conditionally select the Cell Renderer.
  • The Australia and Norway group cells are using the Default Cell Renderer.