Previously I had columnDefs for rendering ag-grid cells without Angular Components with the built-in grouping functionality.

colDef = [
            {
                headerName: 'HeaderName',
                field: 'a',
                editable: false,
                cellRenderer: 'group',
                ...
            },

Now I tried to use Angular ponents to render ag-grid cells with cellRendererFramework but it made me lose my grouping functionality. The tree group values with expand / collapse functionality do not work anymore.

colDef = [
            {
                headerName: 'HeaderName',
                field: 'a',
                editable: false,
                cellRendererFramework: MyCustomCellRendererComponent,
                ...
            },

Do I need to set grouping manually?

I have also tried using groupRowInnerRenderer, innerRendererFramework.

Previously I had columnDefs for rendering ag-grid cells without Angular Components with the built-in grouping functionality.

colDef = [
            {
                headerName: 'HeaderName',
                field: 'a',
                editable: false,
                cellRenderer: 'group',
                ...
            },

Now I tried to use Angular ponents to render ag-grid cells with cellRendererFramework but it made me lose my grouping functionality. The tree group values with expand / collapse functionality do not work anymore.

colDef = [
            {
                headerName: 'HeaderName',
                field: 'a',
                editable: false,
                cellRendererFramework: MyCustomCellRendererComponent,
                ...
            },

Do I need to set grouping manually?

I have also tried using groupRowInnerRenderer, innerRendererFramework.

• javascript
• angular
• ag-grid

2 Answers 2

I imagine you want to do something like the example at the bottom of this page. Basically all you need to change is this:

{
    headerName: 'HeaderName',
    field: 'a',
    editable: false,
    cellRenderer: 'group',
    cellRendererParams: {
        innerRendererFramework: MyCustomCellRendererComponent
    }
    ...
}

From ag-grid ^31.0.0

{
  headerName: "Athlete",
  field: "athlete",
  cellRenderer: "agGroupCellRenderer",
  minWidth: 300,
  cellRendererParams: {
    innerRenderer: (record) => {
      if (record?.node?.group) {
        // group title renderer
        return <span style={{ fontWeight: 700 }}>{record?.value}</span>;
      }

      // non-group renderer
      return <span>{record?.value}