How to change Header name dynamically in AG-Grid React?

Question

I want to change the header icon dynamically(ie based on the data coming from back end).

I searched through the internet but didn't find much solution and the documentation doesn't had the clear implementation.

So, I thought to share it here.

Sample Code:

export function ColumDefinition(dataFromAPI) {
    return [
        {
            field: 'abc1', 
            resizable: true,
            flex:1,
            headerClass: "xyz1",
            lockPosition: true
        },
        {
            field: 'abc2', 
            width: 140,
            headerClass: "xyz2",
            lockPosition: true
        }
    ] }

Useful Links:

1. AG-Grid dynamic column header text
2. https://blog.ag-grid.com/automatic-header-names/#valuegetter-header-names
3. https://www.ag-grid.com/react-data-grid/value-getters/#header-value-getters

Answer 1

I used headerComponentParams to solve this.

Column Definition :

export function ColumDefinition(dataFromAPI) {
    return [
        {
            field: 'abc1', 
            resizable: true,
            flex:1,
            headerClass: "xyz1",
            lockPosition: true
        },
        {
            field: 'abc2', 
            width: 140,
            headerClass: "xyz2",
            lockPosition: true,
            headerComponentParams: (params) => {
                let icon = dataFromAPI === "X" ? Data1 : Data2;
                return { template: `<div class="abc">HeaderName <img class="abcd" src=${icon}>` }
            },
        }
    ]
}

To pass the API data I used it in below way:

const ModuleGridLoad = (RowData) => {
    setColumDefinitionColDef(ColumDefinition(props.dataFromAPI));
}