ag-grid修改行组的标题名称

时间:2019-02-03 14:36:31

标签: react-redux ag-grid ag-grid-react

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

例如,我将具有以下(完全折叠)表:

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

如您所见,分组是通过用户 un 友好ID完成的,该ID根本没有反映在“列定义”中。我想将groupId1 / groupId2更改为用户友好的文本,该文本根据组行的内容动态分配。

我正在使用React

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

  1. 具有行分组
  2. 分组由不可见的列(国家/地区)
  3. 我想将国家/地区名称动态更改为从内部行的值派生的另一个值。

感谢您的宝贵时间。 :)

3 个答案:

答案 0 :(得分: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 实施

答案 1 :(得分:1)

最后一位同事帮助了我,他的解决方法是:

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

在我的组的colDef中,将显示为标题的值发送到“数据”内部。

他说cellRenderer对于像这样的简单任务来说是一个过大的杀伤力。

答案 2 :(得分:0)

您还可以使用此简单的道具来重命名ag-grid的rowGroup标头 autoGroupColumnDef

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