如何为ag-Grid树形数据网格中的聚合行设置样式？

要区分ag-Grid树形数据里的原始数据行和聚合分组行，并给聚合行设置加粗样式，可以通过行节点（RowNode）的内置属性来判断，结合getRowClass或cellClassRules实现样式控制：

方法一：全局给聚合行设置样式 #

通过getRowClass回调函数识别聚合行，统一添加自定义类名：

<AgGridReact
  // 你的其他配置（列定义、数据源等）
  getRowClass={(params) => {
    // 同时满足分组行且包含聚合结果的条件
    if (params.node.group && params.node.aggregation) {
      return 'aggregation-highlight';
    }
    return '';
  }}
/>

然后在CSS中定义高亮样式：

.aggregation-highlight .ag-cell {
  font-weight: 700; /* 设置粗体 */
  /* 可添加其他样式，比如背景色：background-color: #f5f5f5; */
}

方法二：针对特定列设置聚合单元格样式 #

如果只需要给数值列的聚合单元格加粗，可以用列配置的cellClassRules：

const columnDefs = [
  { headerName: '分类', field: 'category', rowGroup: true },
  {
    headerName: '数值',
    field: 'value',
    aggFunc: 'sum', // 你的聚合函数
    cellClassRules: {
      'bold-agg-cell': (params) => params.node.group && params.node.aggregation
    }
  }
];

对应的CSS：

.bold-agg-cell {
  font-weight: bold;
}

关键判断逻辑说明 #

ag-Grid的行节点（RowNode）提供了两个核心属性用于区分行类型：

• node.group：布尔值，为true时表示该行是树形结构的分组父节点
• node.aggregation：布尔值，为true时表示该行包含聚合计算的结果

如果你的场景中分组行一定带有聚合结果，直接判断node.aggregation也可以；如果存在无聚合的分组行，就需要结合node.group和node.aggregation一起判断。

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