ag-grid modify Row Group's Header name

Question

I'm using ag-grid to display a table which has a Row Grouping. The column that I group by is invisible since its value holds no meaning.

So for example, I will have the following (fully collapsed) table:

---------------------------------
|   H1       H2        H3        |
----------------------------------
| > groupId1 (1)                 |
----------------------------------
| > groupId2 (5)                 |
----------------------------------

As you see the grouping is done by user-unfriendly ID which is not reflected at all in the Column Definitions. I would like to change groupId1 / groupId2 to a user-friendly text that is assigned dynamically according to the content of the group rows.

I am using React.

I am using ag-Grids examples as a starting point, the following example embodies the problem I'm facing: (eg: https://plnkr.co/edit/VM59gScPD55PhX4y4JBj?p=preview)

1. It has row grouping
2. The grouping is done by a column that is invisible (country)
3. I would like to change the country name dynamically into a different value that's derived from the values of the inner row.

Thanks for your time. :)

Answer 1

You can also rename the rowGroup header of ag-grid by using this simple prop autoGroupColumnDef

<AgGridReact 
  columnDefs={columnDefs} 
  rowData={rowData}
  autoGroupColumnDef={{
    headerName: 'Name'
  }}
/>

Answer 2

A colleague helped me at the end, his solution was:

valueFormatter: ({ value, data }) => 'something ' + value

inside the colDef of my group, and the value to be displayed as the header is sent inside 'data'.

He said that cellRenderer is an overkill for a simple task like this.