How to hide row group by level

Question

I use Ag grid for showing some data on table. So, we have columnDef

const columnDef = [
        {
            field: 'colorName',
            rowGroup: true,
            hide: true,
            ....another props (renderer etc.)
        },
        {
            field: 'color',
            rowGroup: true,
            hide: true,
             ....another props (renderer etc.)
        },
        {
            field: 'titleName',
            rowGroup: true,
            hide: true,
             ....another props (renderer etc.)
        },
]

As you see, I try to group and hide the main 3 field in columnDefs.

We have some row data:

const rowData = [
         {
        name: 'Name 1',
        titleName: 'Label',
        colorName: 'Color 1',
        color: '#FCE300',
    },
    {
        name: 'Name 1-1',
        titleName: 'Label',
        productName: 'Color 1',
        color: '#FCE300',
    },
    {
        name: 'Name 2',
        titleName: 'Label',
        colorName: 'Color 1',
        color: '#FFFFFF',
    },
    {
        name: 'Name 3',
        titleName: 'Label',
        colorName: 'Color 2',
        color: '#FFFFFF',
    },
]

The result is:

Question is: How I can leave group data by this 3 fields (colorName, color, titleName) but hide one level group rows from view. For example I need to hide color group row, but leave the grouping data by all 3 main fields.

Answer 1

I think rowGroup doens't allow to do this. I suggest you to use TreeData. More complex a bit but give a full customizations for showing data