高度可定制JavaScript數據網格，無需第三方依賴，兼容主流JS框架

今日推薦的GitHub項目是AG Grid，它是一個功能齊全且高度可定制的JavaScript數據網格 。AG Grid提供了出色的性能
，不需要第三方依賴 ，并且可以與所有主要的JavaScript框架流暢地集成 。

該項目已經收獲了8.6k的Star。

項目地址：https://github.com/ag-grid/ag-grid#readme

下圖為啟用多個過濾器和分組情況下的網格外觀。

特性功能

AG Grid可以提供任何網格都具備的標準功能，如下所示。

• 列交互（調整大小 、重新排序和固定列）
• 分頁
• 排序
• 行選擇

除此之外，AG Grid還能提供一些特有功能，如下所示 。

• 分組/整合
• 可訪問性支持
• 自定義過濾
• In-place單元格編輯
• 記錄延遲加載
• 服務器端記錄操作
• 直播流媒體更新
• 分層數據支持和樹視圖
• 可定制外觀
• 可定制單元格內容
• 狀態(tài)持續(xù)性
• 鍵盤導航
• 數據導出到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);

更多細節(jié)請參照原項目
。

投稿時間 ：2022-06-04  最后更新：2022-09-09