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. :)

Strangeness

Answer 1

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.

Strangeness

Answer 2

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

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

Muenster

Answer 3

You can pass additional params about group cell renderer and customize it like this -

colDef = {
    // set the cell renderer to 'group'
    cellRenderer:'agGroupCellRenderer',
    // provide extra params to the cellRenderer
    cellRendererParams: {
        innerRenderer: myInnerRenderer, // provide an inner renderer
    }
    ...
};

You should be then able to display any text based on custom logic using the myInnerRenderer implementation.

Here is an example from ag-grid docs. Check the Group Renderer C implementation

Caesarean

Answer 4

cellStyle: (params) => {
        if (params.data?.footer) {
          return { textAlign: 'left', fontWeight: 'bold' }; // Bold for footer row
        }
        return null;
      },

Heliostat