ag-grid 修改 Row Group 的 Header 名称答案

【问题标题】：ag-grid modify Row Group's Header nameag-grid 修改 Row Group 的 Header 名称
【发布时间】：2019-06-27 11:18:43
【问题描述】：

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

例如，我将有以下（完全折叠）表：

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

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

我正在使用React。

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

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

感谢您的宝贵时间。 :)

【问题讨论】：

标签： react-redux ag-grid ag-grid-react

【解决方案1】：

最后一位同事帮助了我，他的解决方案是：

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

在我的组的colDef中，作为标题显示的值在“数据”中发送。

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

【讨论】：

【解决方案2】：

您还可以使用这个简单的道具重命名 ag-grid 的 rowGroup 标题 autoGroupColumnDef

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

【讨论】：

【解决方案3】：

您可以传递有关组单元格渲染器的其他参数并像这样自定义它 -

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 实现

【讨论】：