JavaScript数据网格方案AG Grid 34.1更新：提升开发效率，优化测试与布局体验

13小时前发布

0505

近日，JavaScript 数据表格方案AG Grid 正式发布 34.1 版本，本次更新以“提升开发者生产力、简化测试流程、增强布局与样式控制”为核心目标，带来了多项实用功能与体验优化。值得一提的是，该版本为非中断版本，当前使用 33.x 版本的开发者可无缝升级，无需修改已有代码。

AG Grid最新版下载，请联系AG Grid中国区合作伙伴慧都科技

以下为本次更新的主要亮点：

Tree Data 与 Master/Detail 的融合支持

34.1版本实现了 Tree Data 与 Master/Detail 视图的无缝集成，父节点与叶子节点均可作为主行进行详情展开。

该功能无需额外配置，只需启用treeData和masterDetail选项，即可实现复杂树状数据的直观展示：

<AgGridReact
  treeData={true}
  masterDetail={true}
/>

此项增强使开发者能够更轻松地组织和展示嵌套数据结构，大幅提升数据可视化效果与用户交互体验。

Test IDs：更高效的测试定位方式

新增的 Test IDs 功能，便于开发者精确定位网格中的元素（如单元格、复选框等），以支持更强健的自动化测试。

通过setupAgTestIds方法，可为交互元素自动添加可自定义的data-testid属性：

if(process.env.NODE_ENV !== "production"){
    setupAgTestIds({ testIdAttribute: 'data-customAttr' });
}

借助 Test IDs，测试脚本更加清晰、稳定，极大提升测试效率与系统可靠性。

更紧凑的列标题布局

为解决列分组下列头留白过多的问题，AG Grid 34.1 提供了 紧凑型列标题（Compact Column Headers） 选项。启用后，将移除不必要的列头内边距，使表格布局更加紧凑、空间利用更高效：

<AgGridReact
  hidePaddedHeaderRows={true}
/>

该优化在多级列头、复杂分组布局中尤为实用，有效提升表格的可读性与专业感。

内置图表格式器支持 Grid 上下文

集成图表的格式器（Integrated Charts Formatters）现已支持访问 Grid 的 API 与上下文，开发者可通过该接口复用表格中的格式化逻辑，确保数据在图表与表格中保持一致。

示例代码：

chartThemeOverrides: {
  common: {
    formatter: (params) => {
      const { context } = params;
      const column = colId ? context.api.getColumn(colId) : null;
      const valueFormatter = colDef.valueFormatter;
      return valueFormatter(params.value);
    },
  },
}

该功能虽为底层能力，但大大减少了格式化逻辑的重复编码，提升项目维护性与一致性。