React Data GridProvided Group Cell Component

Enterprise

The Provided Group Cell Component is the default Cell Component for showing expand and collapse functionality.

The Provided Group Cell Component covers almost all use cases.

Configuration

The key for the provided Group Cell Component is agGroupCellRenderer.

The Cell Component takes many parameters to configure it. Here is an example of a Column and its configuration:

const [columnDefs, setColumnDefs] = useState([
    // 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 total row value getter
            totalValueGetter: myTotalValueGetter
        }
    }
]);

<AgGridReact columnDefs={columnDefs} />

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

suppressPadding
boolean
Set to true to not include any padding (indentation) in the child rows.
suppressDoubleClickExpand
boolean
Set to true to suppress expand on double click.
suppressEnterExpand
boolean
Set to true to suppress expand on ↵ Enter
totalValueGetter
string | TotalValueGetterFunc
The value getter for the total row text. Can be a function or expression.
suppressCount
boolean
If true, count is not displayed beside the name.
checkbox
boolean | GroupCheckboxSelectionCallback
Set to true, or a function that returns true, if a checkbox should be included.
innerRenderer
any
The renderer to use for inside the cell (after grouping functions are added)
innerRendererParams
any
Additional params to customise to the innerRenderer.
innerRendererSelector
Function
Callback to enable different innerRenderers to be used based of value of params.

Below shows an example of configuring the provided Group Cell Component. 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, e.g. 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 Component (cellRenderer) configured, so the grid just places the text for the group into the Cell, there is no 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 Component so no expand / collapse functionality.

  • The Column Group Renderer A builds on before, but adds the provided Group Cell Comp 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 provided Group Cell Component 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.

Next Up

If you require functionality that is not provided by the provided Group Cell Renderer, then continue to the next section to learn about providing your own Custom Group Cell Component.