Using complex object for grouping in Ag Grid

Question

I am trying to use a complex object to group my ag grid rows. Object of my rowdata looks like this -

const rowData= {
  id : '123',
  name: 'dummy',
  category: 'A',
  group : {
    name : 'dummyGroup',
    id : '456',
    category: 'A'
  }
}

Now, I am using group object to group the rows. And according to this documentation https://www.ag-grid.com/javascript-data-grid/grouping-complex-objects/ I am using keyCreator as keyCreator: params => params.value.name . My group object is uniquely identified by combination of id and catogory.

The problem that I am facing is, as I am using group.name in the keyCreator, if I have two row data object whose group.names are same but id and category are different, ag grid is grouping those rows together. I understand that this is the behavior from ag grid. So can I get any workaround for it? I need to show name on group row. But to identify the groups differently I need to use id+catogory in keyCreator. How can I achieve this ?

Answer 1

You need to utilise the groupRowInnerRenderer property so you can group by a combination of the id and category fields, while displaying the name as the group.

const gridOptions = {
    groupDisplayType: 'groupRows',
    groupRowInnerRenderer: function (params) {
      return params.node.childrenAfterFilter[0].data.name;
    },
    columnDefs: [
      { field: 'id' },
      { field: 'name' },
      { field: 'category' },
      {
        field: 'group',
        valueFormatter: groupValueFormatter,
        rowGroup: true,
        keyCreator: function (params) {
          return params.value.id + params.value.category;
        },
      },
    ],
  };

Demo.