JavaScript數據網格方案AG Grid 34.1更新：提升開發效率，優化測試與布局體驗

近日，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);
    },
  },
}

該功能雖為底層能力，但大大減少了格式化邏輯的重復編碼，提升項目維護性與一致性。

上圖演示了使用列值格式化程序來格式化工具提示值的集成圖表

? 無障礙體驗持續優化

34.1 版本在無障礙支持方面持續升級，針對單元格編輯與列菜單功能進行了更完善的鍵盤導航與屏幕閱讀器適配。這些細節優化，有助于打造更包容、專業的產品體驗。

?? 升級提示

AG Grid 34.1 為非破壞性版本，可直接從 33.x 升級，無需改動現有代碼，快速享受新功能帶來的開發便利與用戶體驗提升。

AG Grid最新版下載，請聯系AG Grid中國區合作伙伴慧都科技

?? 關于 AG Grid

AG Grid 是全球領先的 JavaScript 數據表格控件，廣泛應用于金融、電信、制造等行業，支持 Angular、React、Vue 和純 JavaScript 項目，擁有企業級的性能與功能深度。