ag-grid 修改 Row Group 的 Header 名称

Question

我正在使用 ag-grid 来显示一个 table，它有一个 Row Grouping。我分组的列是不可见的，因为它的值没有意义。

例如，我将有以下内容（完全折叠）table：

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

如您所见，分组是由 user-unfriendly ID 完成的，这根本没有反映在列定义中。我想将 groupId1 / groupId2 更改为根据组行内容动态分配的用户友好文本。

我正在使用 React。

我正在使用 ag-Grids 示例作为起点，以下示例体现了我面临的问题：（例如：https://plnkr.co/edit/VM59gScPD55PhX4y4JBj?p=preview）

它有行分组
分组由不可见的列（国家/地区）完成
我想将国家/地区名称动态更改为从内行值派生的不同值。

感谢您的宝贵时间。 :)

Answer 1

您可以传递有关组单元格渲染器的附加参数并像这样对其进行自定义 -

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

然后您应该能够使用 myInnerRenderer 实现显示基于自定义逻辑的任何文本。

这是一个来自 ag-grid docs 的示例。检查 Group Renderer C 实现

Answer 2

最后有个同事帮了我，他的解决办法是：

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

在我组的colDef里面，作为header显示的值是在'data'里面发送的。

他说 cellRenderer 对于像这样的简单任务来说太过分了。

Answer 3

您还可以使用这个简单的道具重命名 ag-grid 的行组 header autoGroupColumnDef

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

ag-grid 修改 Row Group 的 Header 名称

ag-grid modify Row Group's Header name

ag-grid

react-redux

ag-grid-react