近日，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中國區合作伙伴慧都科技
