如何在 AG-Grid React 中動態更改 Header 名稱？

Question

我想動態更改 header 圖標（即基於來自后端的數據）。

我通過互聯網搜索但沒有找到太多解決方案，並且文檔沒有明確的實現。

所以，我想在這里分享一下。

示例代碼：

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

有用的鏈接：

1. AG-Grid動態欄header文字
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

我使用headerComponentParams來解決這個問題。

列定義：

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}>` }
            },
        }
    ]
}

為了傳遞 API 數據，我以下列方式使用它：

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