如何在 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
        }
    ] }

有用的链接：

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));
}