前端表格工具AG Grid 34.3 发布:重磅引入AI工具包,全面支持 React 19.2!

近日,全球知名的前端表格工具AG Grid 发布最新版本 v34.3!本次更新带来了全新的AI工具包(AI Toolkit)、列宽自适应与数据透视增强功能,并正式支持React 19.2,助力开发者打造更智能、更高效的数据可视化体验。

AG Grid最新版下载

核心亮点一览

  • AI Toolkit ------ 基于大模型(LLM)的智能网格交互,让终端用户可通过自然语言操控表格状态。

  • MCP Server ------ 为 LLM 提供框架与版本级知识,让开发者更高效地集成与升级 AG Grid。

  • Scaled Column Auto-Sizing ------ 列宽自动缩放,自适应屏幕宽度,保持视觉整齐与数据可读性。

  • Date & Time Pivoting ------ 新增时间维度透视支持(按日、周、月、年),更便捷地进行时序分析。

  • React 19.2 官方支持 ------ 全面兼容最新版本 React,性能与稳定性进一步提升。

💡 本次为非破坏性更新:使用 AG Grid 33.x 的项目可直接升级至 34.3,无需修改代码。


AI Toolkit:让表格理解自然语言

AG Grid 34.3 全新引入 AI Toolkit,可与任意大语言模型(LLM)集成,让用户直接用自然语言对表格进行查询和操作。

🔹 支持 ChatGPT、Gemini 等主流 LLM

🔹 自动生成 JSON Schema 格式的结构化输出

🔹 模型可直接返回符合 Schema 的结果,一步完成状态更新

示例代码:

复制代码
// 获取表格状态结构
const gridSchema = gridApi.getStructuredSchema();

// 将用户请求、当前状态与 Schema 一并传入 LLM
const response = await callLLM(userRequest, gridApi.getState(), gridSchema);

// 更新表格状态
gridApi.setState(response.newGridState);

借助 AI Toolkit,用户可用自然语言轻松完成复杂操作,例如:"按销售额降序排列并只显示前10行"。


MCP Server:让 AI 理解 AG Grid

全新的 MCP(Model Context Protocol)Server,为 AI 工具(如 Claude Code、ChatGPT Plugins 等)提供框架级知识。 开发者可通过以下命令快速接入:

复制代码
claude mcp add ag-mcp npx ag-mcp

安装完成后,AI 即可自动获取 AG Grid 的上下文信息,更准确地协助代码集成与版本维护。


Scaled Column Auto-Sizing:智能列宽自适应

全新列宽自适应算法在常规自动计算基础上,

会根据可用空间 等比例放大列宽,确保整体布局紧凑、视觉平衡。

启用方式示例:

复制代码
gridRef.current.api.autoSizeColumns({
  skipHeader,
  scaleUpToFitGridWidth
});

非常适合动态生成列结构或未知数据宽度的场景。


📅 Date & Time Pivoting:时间维度透视分析

Pivot 功能现已支持 日期与时间字段,可按"年/月/日"等层级进行分组汇总。

复制代码
{ field: 'date', pivot: true, groupHierarchy: ['year', 'month']
}

开发者可直接在表格中完成时序趋势分析,无需外部 BI 工具。


⚛️ React 19.2 官方支持

AG Grid 团队已全面适配 React 19.2 ,并完成所有示例的兼容性验证。

开发者可立即使用新版 React 带来的性能与特性提升。


🧾 总结

AG Grid 34.3 不仅强化了数据展示与操作体验,更引入了创新的 AI 能力,为前端数据交互打开全新可能。

🔹 AI Toolkit ------ 让表格"懂你说的话"

🔹 MCP Server ------ 让 AI "懂 AG Grid"

🔹 自适应列宽与时间透视 ------ 提升可视化细节体验

🔹 React 19.2 支持 ------ 最新生态无缝接轨

📌 关于 AG Grid

**AG Grid**是全球领先的 JavaScript 数据表格控件,广泛应用于金融、电信、制造等行业,支持 Angular、React、Vue 和纯 JavaScript 项目,拥有企业级的性能与功能深度。

相关推荐
剑小麟5 小时前
maven中properties和dependencys标签的区别
java·前端·maven
西洼工作室5 小时前
优化网页性能指标:提升用户体验的关键
前端·css
掘金一周5 小时前
第一台 Andriod XR 设备发布,Jetpack Compose XR 有什么不同?对原生开发有何影响? | 掘金一周 10.30
前端·人工智能·后端
_大学牲5 小时前
Flutter 之魂 Dio🔥:四两拨千斤的网络库
前端·数据库·flutter
一枚前端小能手5 小时前
🌐 HTML DOM API全攻略(上篇)- 从基础操作到高级技巧的完整指南
前端·javascript·html
黄毛火烧雪下5 小时前
使用 Ant Design Pro CLI 快速创建前端中台项目
前端
呼叫69455 小时前
AggregateError:JavaScript 中的聚合错误处理
前端·javascript
一枚前端小能手5 小时前
🌐 HTML DOM API全攻略(下篇)- 高级接口与现代Web开发实践
前端·javascript·html
IT_陈寒5 小时前
React性能翻倍!3个90%开发者不知道的Hooks优化技巧 🚀
前端·人工智能·后端