Building our own cellRenderer with grouping functionality in ag-grid

Question

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

Answer 1

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

Answer 2

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} 🏅</span>;
    },
    checkbox: true
  } as IGroupCellRendererParams
}

Note: As soon as you add innerRenderer group name in the table disappears. First if case handles that.

Edit in Codesandbox ↗️

---

PS: Add in the comments if this works for you in older versions ( < 31.0.0 )