博客原文可点击《ag-Grid 超丰富的表格插件（1）——简易使用》查看哦！
由于最近一直接触的ag-Grid，但是网上的博文却很少见，有些困惑想搜索却找不到答案，不晓得为什嘛，所以想写一些常见的功能介绍，也能和大家一起探讨一下。
作为经历过手写table表格的我，ag-Grid带给我的感受简直不要不要的，感觉是一款功能超级丰富表格插件，因为没用过其他什么table表格插件，所以不能说它是最好用的。
说不上如何深挖，请叫我亲爱的的翻译官吧，毕竟是一种痛，每次一个网页加载出来，都不舍得刷新重新了O(∩_∩)O哈哈~。ag-Grid官方文档上有详细的属性、方法说明介绍，且配有案例和代码以及在线编辑功能，十分强大。
想看官方网站原址可点击这里查看哦。
好吧，接下来让我们看看这个神奇的ag-Grid。
安装
ag-Grid有两种版本，一个是community，还有一个是企业级的enterprise版本，并不知道干嘛的，我们直接安装ag-Grid就好了。
NPM安装
ag-Grid：
$ npm install --save ag-grid
复制代码community、enterprise：
npm install --save ag-grid-community
npm install --save ag-grid-enterprise
复制代码本地下载
可点击这里下载源文件直接本地使用
头文件引入
"stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"/>
<script src="https://unpkg.com/[email protected]/dist/ag-grid-community.min.js">script>
复制代码使用
1、首先，在HTML里添加表格插入的div容器
<div id="myGrid" style="height: 150px;width: 600px" class="ag-theme-balham">div>
复制代码2、头文件引入表格文件和样式文件
import {Grid} from "ag-grid/main";
import "ag-grid/dist/styles/ag-grid.css";
import "ag-grid/dist/styles/ag-theme-balham.css";
复制代码3、配置表格列和行数据
const gridOptions = {
columnDefs: [
{headerName: 'Make', field: 'make'},
{headerName: 'Model', field: 'model'},
{headerName: 'Price', field: 'price'}
],
rowData: [
{make: 'Toyota', model: 'Celica', price: 35000},
{make: 'Ford', model: 'Mondeo', price: 32000},
{make: 'Porsche', model: 'Boxter', price: 72000}
]
};
复制代码4、初始化表格
let eGridDiv = document.querySelector('#myGrid');
new Grid(eGridDiv, this.gridOptions);
复制代码5、大功告成！然后可得到如下表格
是不是很迅速很过瘾？！！！可能你会说其他很多表格组件也都如此，没什么特别的，不要方，这才刚开始，花式玩表格等着你！！！