近日，JavaScript 數據表格方案AG Grid版本，本次更新為開發者帶來了更靈活的數據分組方式、更順暢的大數據集交互體驗，以及更直觀的 UI 提示與操作反饋。

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

以下為本次更新的核心亮點：

核心功能更新

1. 日期與時間分組

支持基於日期的層級分組（如日、周、月、季度、年等），開發者可通過rowGroupingHierarchy或groupHierarchyConfig來實現內置或自定義分組方式，滿足更多業務場景下的數據分析需求。

const [columnDefs, setColumnDefs] = useState([
    {
        field: 'date',
        rowGroup: true,
        rowGroupingHierarchy: ['year', 'month'] // Built-in
    },
    // ...other column definitions
]);

// Custom Grouping Definitions
const groupHierarchyConfig = useMemo(() => {
  return {
    week: {
      headerValueGetter: (params) => { /* Grouping Definiton */ },
      valueGetter: (params) => { /* Grouping Definiton */ }
    }
  }
});

<AgGridReact 
  columnDefs={columnDefs} 
  groupHierarchyConfig={groupHierarchyConfig}
/>

2. 工具面板外置

在 AG Grid 34.2 中，工具面板不僅可以在默認的側邊欄中顯示，還可以被渲染到網格外的容器中，例如彈窗或獨立 UI 區域。這使得開發者在小屏幕或緊湊佈局中，能更靈活地組織界面。

const columnsToolPanel = useMemo(() => {
  return {
    parent: popupContentRef.current, // Define tool panel container
    ...
  };
}, [popupContentRef.current]);

return (
  <AgGridReact
    // Element that contains the tool panel's container & the grid
    popupParent={document.body} 
    ...
  />

  /* Div to display the Column Tool Panel in */
  <div id="popup" ref={popupRef}>...</div>
);

3. SSRM 模型下的組展開/收起

在服務端行模型（SSRM）中，現在可以一次性展開或收起所有分組，包括尚未加載到客户端的數據。通過expandAll()、collapseAll()API 及ssrmExpandAllAffectsAllRows配置，用户可更流暢地瀏覽海量分組數據。

4. 剪貼板增強

AG Grid 34.2 優化了複製粘貼體驗：

• 支持將複製的單元格區域粘貼到大小不同的區域，行為更貼近 Excel。

• 支持通過右鍵菜單執行粘貼操作。

• 在大數據場景（SSRM）下複製大範圍單元格時，性能進一步優化。

5. 行拖拽改進

新增isRowValidDropPosition回調，允許在自定義拖拽邏輯中校驗行是否可放置，並在無效位置自動顯示“禁止”圖標，支持通過 Theming API 定製圖標樣式，為用户提供即時、直觀的反饋。

升級提示

AG Grid 34.2 為 非破壞性更新，目前使用 33.x 版本的用户可直接升級，無需修改代碼。

總結

AG Grid 34.2 帶來了：

• 更靈活的日期時間分組

• 工具面板外置顯示

• SSRM 下的全局組展開/收起

• Excel 風格的剪貼板增強

• 更清晰的拖拽反饋

這些功能大幅提升了數據處理的靈活性與用户體驗，幫助開發者在構建複雜應用時更加高效。

📌 關於 AG Grid

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

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