今日推荐的GitHub项目是AG Grid，它是一个功能齐全且高度可定制的JavaScript数据网格。AG Grid提供了出色的性能，不需要第三方依赖，并且可以与所有主要的JavaScript框架流畅地集成。
该项目已经收获了8.6k的Star。
项目地址：https://github.com/ag-grid/ag-grid#readme
下图为启用多个过滤器和分组情况下的网格外观。
特性功能
AG Grid可以提供任何网格都具备的标准功能，如下所示。
- 列交互（调整大小、重新排序和固定列）
- 分页
- 排序
- 行选择
除此之外，AG Grid还能提供一些特有功能，如下所示。
- 分组/整合
- 可访问性支持
- 自定义过滤
- In-place单元格编辑
- 记录延迟加载
- 服务器端记录操作
- 直播流媒体更新
- 分层数据支持和树视图
- 可定制外观
- 可定制单元格内容
- 状态持续性
- 键盘导航
- 数据导出到CSV
- 数据导出到Excel
- 类Excel旋转
- 行重新排序
- 复制粘贴
- 列跨越
- 固定行
- 全宽行
- 集成图表
- 迷你图
开始上手
安装依赖
$ npm install –save ag-grid-community
添加一个占位符到HTML
导入网格和风格
import { Grid } from ‘ag-grid-community’;import ‘ag-grid-community/dist/styles/ag-grid.css’;import ‘ag-grid-community/dist/styles/ag-theme-alpine.css’;
设置配置
var 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: ‘Boxster’, price: 72000 }]};
初始化网格
var eGridDiv = document.querySelector(‘#myGrid’);new Grid(eGridDiv, this.gridOptions);
更多细节请参照原项目。
