近日,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 gridpopupParent={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中国区合作伙伴慧都科技