JavaScript Data Grid

Group Cell Component

javascript logo
Enterprise

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).

const gridOptions = {
    autoGroupColumnDef: {
        headerName: 'My Group',
        minWidth: 220,
        cellRenderer: MyGroupCellRenderer,
        cellRendererParams: {
        }
    },

    // other grid options ...
}

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.

const gridOptions = {
    groupRowRenderer: MyGroupCellRenderer,
    groupRowRendererParams: {},
    groupDisplayType: 'groupRows',

    // other grid options ...
}

Custom Column

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

const gridOptions = {
    columnDefs: [
        // Group Column (Custom)
        { 
            cellRenderer: 'agGroupCellRenderer', 
            showRowGroup: true 
        }
    ],

    groupDisplayType: 'custom',

    // other grid options ...
}

Dynamic Selection

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

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

    // other grid options ...
}

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.