ag-grid配置rowGroup后添加valueFormatter导致分组叶节点显示行数据问题

问题根因 #

ag-grid 开启rowGroup后，分组字段对应的列配置会同时作用于分组汇总行和叶节点数据行，未做节点类型判断的valueFormatter会直接将原始字段值渲染到叶节点的分组列位置，打破默认叶节点分组列不展示原始数据的逻辑。

可用解决方案 #

• 方案1：在valueFormatter中增加分组节点判断
  仅对分组行执行格式化逻辑，叶节点直接返回空值，示例代码如下：

  const customValueFormatter = (params) => {
    // 非分组行（叶节点）直接返回空，不展示内容
    if (!params.node.group) return ''
    // 原有自定义格式化逻辑
    return `[${params.value}]`
  }
  
  // 列定义中绑定该格式化方法
  const columnDefs = [
    { field: 'groupField1', rowGroup: true, valueFormatter: customValueFormatter },
    { field: 'groupField2', rowGroup: true, valueFormatter: customValueFormatter },
    // 其他非分组列
  ]
  

• 方案2：通过样式控制叶节点分组列内容隐藏
  若不想修改现有valueFormatter逻辑，可以通过单元格样式规则隐藏叶节点的分组列内容：

  const columnDefs = [
    {
      field: 'groupField1',
      rowGroup: true,
      valueFormatter: yourExistFormatter,
      cellClassRules: {
        'leaf-group-cell-hidden': params => !params.node.group
      }
    }
  ]
  

  对应补充CSS样式：

  .leaf-group-cell-hidden {
    visibility: hidden;
  }
  

• 方案3：统一通过autoGroupColumnDef配置格式化逻辑
  如果使用ag-grid自动生成的分组列，直接在全局自动分组列配置中处理即可，不需要单独给每个分组字段加valueFormatter：

  const gridOptions = {
    autoGroupColumnDef: {
      valueFormatter: (params) => params.node.group ? yourFormatLogic(params.value) : ''
    },
    columnDefs: [
      { field: 'groupField1', rowGroup: true },
      { field: 'groupField2', rowGroup: true },
      // 其他列
    ]
  }
  

注意事项 #

• 多字段分组场景下，所有参与分组的字段列配置都需要做兼容处理，避免部分列仍出现异常展示
• 格式化逻辑仅修改返回值即可，不要直接修改params中存储的原始字段值，避免影响表格内部分组排序等计算逻辑

内容的提问来源于stack exchange，提问作者Chris