如何配置AG Grid行分组实现数据版本历史时间轴展示

你自己摸索的两个配置方向完全正确，只需要补全几个配套配置就能跑通，之前试treeData、masterDetail没达到效果，是因为这两个方案本身的设计目标就和你的需求不匹配，不是你读文档有偏差。 #

核心实现逻辑 #

不需要单独定义分组专用列，主分组行、展开后的子行100%复用你现有的columnDefs配置，核心是把主从表的行展开能力和整行分组渲染模式结合，避开三个默认行为的坑：

• 不要开treeData：treeData依赖固定的节点路径字段，会强制渲染树形缩进列，和你要的效果冲突
• 不要用纯masterDetail：纯主从表的详情区是独立渲染的子网格，列配置要单独定义，没法和主表共用一套列结构
• 不要给任何业务列加rowGroup: true：加了之后AG Grid会自动按列值做聚合分组，没法自定义你需要的时间轴父节点结构

最小可复用配置 #

直接抄核心配置，替换成你自己的业务字段即可：

const gridOptions = {
  // 这里放你原本的业务列定义就行，完全不用改，不需要加任何分组相关配置
  columnDefs: [
    { field: 'operateTime', headerName: '操作时间' },
    { field: 'operatorName', headerName: '操作人' },
    { field: 'operateType', headerName: '操作类型' },
    { field: 'content', headerName: '操作详情' }
  ],
  // 分组基础配置
  groupDisplayType: 'groupRows', // 分组行占整行宽度，不生成单独的分组单元格
  autoGroupColumnDef: undefined, // 关掉自动生成的分组列
  rowGroupPanelShow: 'never', // 隐藏顶部的分组拖拽面板，普通用户不需要感知分组逻辑
  groupDefaultExpanded: 0, // 默认所有分组折叠
  // 配置哪些行是可展开的父分组行
  isRowMaster: (rowData) => {
    // 替换成你自己的判断逻辑：有子历史记录的时间轴节点/父条目才返回true
    return Array.isArray(rowData.historyChildren) && rowData.historyChildren.length > 0;
  },
  // 告诉网格每个父节点的子项数量，正确渲染展开/折叠箭头
  getChildCount: (rowData) => rowData.historyChildren?.length || 0,
  onGridReady: (params) => {
    // 你的原始数据结构参考：父节点是时间轴维度的汇总行，子节点是对应时间段的审计记录
    const originRowData = [
      {
        id: 'group_202406',
        operateTime: '2024年6月',
        operatorName: '',
        operateType: '月度汇总',
        content: '共2条操作记录',
        historyChildren: [
          { operateTime: '2024-06-18 16:22', operatorName: '王某', operateType: '编辑', content: '修改订单配送地址' },
          { operateTime: '2024-06-05 10:07', operatorName: '李某', operateType: '审批', content: '通过采购申请' }
        ]
      }
    ];
    // 监听分组展开事件，展开时把对应子记录注入到网格行流中
    params.api.addEventListener('rowGroupOpened', (e) => {
      if (e.node.expanded && e.node.data?.historyChildren) {
        e.node.setRowChildren(e.node.data.historyChildren);
      }
    });
    params.api.setRowData(originRowData);
  }
};

样式调整提示 #

如果要区分父分组行和普通子行，直接用getRowStyle回调判断即可，比如给父行加浅灰色背景、加粗字体，和普通行的样式配置逻辑完全一致，不需要单独写分组行的自定义渲染模板。

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