AG Grid React行分组子行计数的样式自定义与按需计算求助

一、自定义计数样式 #

AG Grid 默认分组计数的样式无法直接修改，但可以通过 groupRowRendererParams 中的 innerRenderer 自定义分组行的渲染内容，给计数部分添加自定义样式：

1. 配置自定义渲染函数 #

在 Grid 组件的 props 中传入 groupRowRendererParams，通过 innerRenderer 生成带样式的计数元素：

import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

// 自定义CSS样式
const customStyles = `
  .custom-group-count {
    color: #27ae60;
    font-weight: 600;
    margin-left: 8px;
    font-size: 0.9em;
  }
`;

const YourGridComponent = () => {
  const columnDefs = [
    { field: 'category', rowGroup: true, hide: true },
    { field: 'productName' },
    // 其他列定义
  ];

  const rowData = [
    // 你的业务数据
  ];

  const groupRowRendererParams = {
    innerRenderer: (params) => {
      // 获取默认子行数量
      const defaultCount = params.node.childrenAfterFilter.length;
      // 返回自定义渲染结构
      return (
        <>
          <style>{customStyles}</style>
          {params.value}
          <span className="custom-group-count">({defaultCount})</span>
        </>
      );
    },
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
        groupRowRendererParams={groupRowRendererParams}
        autoGroupColumnDef={{ headerName: '分组名称' }}
      />
    </div>
  );
};

二、根据子行单元格值计算计数 #

如果需要替换默认的子行数量，改为基于子行某列值的统计（如求和、符合条件的数量），可以通过两种方式实现：

方式1：利用列聚合函数（推荐） #

先在目标列定义中设置 aggFunc 实现聚合，再在 innerRenderer 中获取聚合结果：

const columnDefs = [
  { field: 'category', rowGroup: true, hide: true },
  { field: 'productName' },
  // 定义聚合列，这里以求和为例
  { 
    field: 'price', 
    aggFunc: 'sum', // AG Grid内置聚合函数：sum、count、min、max等
    hide: false // 若不需要显示该列可设为true
  },
];

const groupRowRendererParams = {
  innerRenderer: (params) => {
    // 获取聚合后的price总和
    const totalPrice = params.node.groupData?.price || 0;
    return (
      <>
        <style>{customStyles}</style>
        {params.value}
        <span className="custom-group-count">({totalPrice.toFixed(2)})</span>
      </>
    );
  },
};

如果需要自定义聚合逻辑（如统计子行中状态为"已完成"的数量），可以自定义 aggFunc：

{
  field: 'status',
  aggFunc: (values) => {
    // 统计values中等于"已完成"的数量
    return values.filter(val => val === '已完成').length;
  },
  hide: true
}

方式2：直接遍历子行计算 #

如果不需要依赖列聚合，也可以直接在 innerRenderer 中遍历子行数据计算：

const groupRowRendererParams = {
  innerRenderer: (params) => {
    // 获取过滤后的所有子行节点
    const childNodes = params.node.childrenAfterFilter;
    // 自定义计算逻辑：比如统计价格大于50的子行数量
    const count = childNodes.filter(node => node.data.price > 50).length;
    return (
      <>
        <style>{customStyles}</style>
        {params.value}
        <span className="custom-group-count">({count})</span>
      </>
    );
  },
};

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