Ag-grid使用sum聚合函数时自定义列头显示文本的实现方案

当列配置了aggFunc: 'sum'聚合规则时，ag-grid会默认按照聚合函数名(原列名)的格式自动生成表头文本，完全可以通过以下方式自定义甚至移除聚合前缀：

• 列级独立配置：用headerValueGetter接管单列表头生成逻辑
  该配置的优先级高于ag-grid默认的聚合表头拼接逻辑，是单列表头自定义最灵活的方式。
  比如针对gold列配置sum聚合，想要仅显示原列名、不出现sum()前缀，可以写如下列定义：

  {
    field: 'gold',
    aggFunc: 'sum',
    // 直接返回自定义的表头文本，完全覆盖默认聚合拼接规则
    headerValueGetter: () => 'gold',
    // 配置表头样式，实现原列名加粗效果
    headerClass: 'bold-header-cell'
  }
  

  如果需要自定义聚合前缀的文案，比如把sum(gold)改成累计金牌数，只需要在headerValueGetter里返回对应文案即可。
• 全局统一配置：用grid实例的getLocaleText钩子修改全局聚合表头生成规则
  如果项目中所有聚合列都需要统一调整表头格式，不需要逐列写配置，可以在grid初始化参数里添加全局拦截逻辑：

  const gridOptions = {
    // 其他grid配置...
    getLocaleText: (params) => {
      // 拦截聚合列的默认表头生成逻辑
      if (params.key === 'aggregateFuncLabel') {
        // 从插值参数里取到聚合函数名、原列名，自由拼接返回
        const { columnName } = params.interpolateParams
        // 直接返回原列名，移除所有聚合前缀
        return columnName
        // 如需自定义格式，可替换为任意拼接逻辑，比如 return `累计-${columnName}`
      }
      // 其他场景走ag-grid默认的本地化文本逻辑
      return params.defaultValue
    }
  }
  

• 表头加粗的实现注意事项
  不要把HTML标签硬写到表头文本字符串里（比如返回<b>gold</b>），ag-grid默认会对表头文本做转义，会直接渲染成纯文本。正确的方式是通过CSS类控制样式：

  .bold-header-cell .ag-header-cell-text {
    font-weight: 700;
  }
  

注意：直接修改列定义里的静态headerName属性不会生效，因为列开启聚合后，ag-grid默认的表头生成逻辑优先级高于静态配置的headerName，必须通过上述钩子才能覆盖默认行为。

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