AG Grid：15.4K Star 的 JavaScript 数据表格

AG Grid 在 GitHub 上已经拿到 15,443 Star 了。

这个项目是一个功能完整的 JavaScript 数据表格，支持 React、Angular、Vue 三种主流框架。它的特点是无第三方依赖、性能出色、可高度自定义。

1、 这玩意儿是干嘛的

就一件事：在网页里展示和操作表格数据。

排序、筛选、分页、单元格编辑，这些基本操作用几行代码就能跑起来。社区版免费开源（MIT 协议），企业版有更高级的功能，收费。

2、 为什么要用它

前端开发里做数据表格，看起来简单做起来烦。

排序要自己写、筛选要自己写、分页要自己写、表格要能编辑还得自己写。要是数据量大还要考虑虚拟滚动、性能优化。换了框架所有东西再写一遍。

AG Grid 把这些全包了。不管用什么框架，装一个包，配置一下列定义和数据，该有的功能都有了。

3、 社区版和企业版

AG Grid 分两个版本：

• 社区版：免费，MIT 协议，包含排序、筛选、分页、单元格编辑、自定义组件、主题等核心功能。
• 企业版：商业授权，多了 AI 工具包、集成图表、公式、行分组、透视表、Excel 导出、主从表、服务端行模型等功能，还有专属技术支持。

大部分开发者用社区版就够了。需要高级功能再升级企业版。

4、 快速上手

安装：

npm install --save ag-grid-community

在页面里放一个容器 div，设置高度：

<div id="myGrid" style="height: 500px"></div>

然后创建表格：

const gridOptions = {
    rowData: [
        { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
        { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
    ],
    columnDefs: [
        { field: 'make' },
        { field: 'model' },
        { field: 'price' },
        { field: 'electric' },
    ],
};

const myGridElement = document.querySelector('#myGrid');
agGrid.createGrid(myGridElement, gridOptions);

5、 适合哪些人用

• 需要在网页里展示和操作表格数据的前端开发者
• 做后台管理系统、数据看板、报表工具的人
• 希望一套表格方案覆盖 React/Angular/Vue 三个框架的团队

格数据的前端开发者

• 做后台管理系统、数据看板、报表工具的人
• 希望一套表格方案覆盖 React/Angular/Vue 三个框架的团队