How to use groupInnerCellRenderer in AgGrid React

Question

The AgGrid documentation for Grouping Footers, mentions there is a way to customize the rendering of the grouped row using groupInnerCellRenderer, but its not clear if this prop needs to be added to the gridOptions or to cellRendererParams for agGroupCellRenderer, see the excerpt below:

When showing the groups in one column, the aggregation data is displayed in the group header when collapsed and only in the footer when expanded (ie it moves from the header to the footer). To have different rendering, provide a custom groupInnerCellRenderer, where the renderer can check if it's a header or footer.

I was wondering if someone could post an example of agGrid that uses groupInnerCellRenderer.

Answer 1

groupInnerCellRenderer should basically be added to cellRendererParams with a custom cell renderer component something like this -

 {
        headerName: 'City',
        field: 'city',
        minWidth: 240,
        showRowGroup: true,
        cellRenderer: 'agGroupCellRenderer',
        cellRendererParams: {
          suppressCount: true,
          checkbox: true,
          innerRenderer: 'simpleCellRenderer',
          suppressDoubleClickExpand: true,
          suppressEnterExpand: true,
        },
      },

The group cellRenderer will take care of all the expand / collapse, selection etc, but the with simpleCellRenderer you can customize how the cell displays for grouped row.

There is neat example of this in the docs - https://www.ag-grid.com/javascript-grid-provided-renderer-group/#example-group-renderer