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