Ag-Grid React入門

Ag-Grid和React相容性:

react	Ag-Grid
15.x	18 - 21.2.0
16.3X	22+

安裝

npm install --save ag-grid-community ag-grid-react ag-grid-enterprise

• ag-grid-community: 原始版本，零依賴性，不會拉取第三方依賴關係到應用程式中
• 分組等高階功能是ag-grid-enterprise獨有的功能。可以免費試用，如果打算用於生產專案，需要獲取企業許可證金鑰。
• ag-grid-enterprise自定義上下文選單和更高階的列選單彈出。
  高階列選單控制grid顯示或隱藏部分列資料；控制grid列的寬度是否自適應，列pin的位置。
  自定義的上下文選單提供了複製、貼上、匯出資料（.cvs、.xlsx、.xml格式）的功能

使用

// import依賴
import React, { useState } from 'react'
import { AgGridColumn, AgGridReact } from 'ag-grid-react';
import 'ag-grid-enterprise'
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

// 定義資料rowData
const [rowData, setRowData] = useState([
	{ make: "Toyota", model: "Celica", price: 35000 },
	{ make: "Ford", model: "Mondeo", price: 32000 },
	{ make: "Porsche", model: "Boxter", price: 72000 }
])

// grid定義
<div className="ag-theme-alpine-dark" style={ { height: 400, width: 600 } }>
	<AgGridReact
		rowSelection="multiple"
		rowData={rowData}
	>
		<AgGridColumn field="make" sortable={true} filter={true} checkboxSelection={true}></AgGridColumn>
		<AgGridColumn field="model" filter={true}></AgGridColumn>
		<AgGridColumn field="price" sortable={true}></AgGridColumn>
	</AgGridReact>
</div>

• 通過容器元素的className設定網格theme
• rowData物件的欄位與AgGridColumn中的field值匹配

基本使用

排序

• 在AgGridColumn上定義sortable屬性，點選表頭在升序、降序、無序之間切換

<AgGridColumn field="price" sortable={true}></AgGridColumn>

過濾

• 在AgGridColumn上定義filter屬性，篩選功能顯示在列選單中顯示

<AgGridColumn field="model" filter={true}></AgGridColumn>

選擇

• AgGridReact上定義rowSelection屬性，定義checkboxSelection屬性
• 獲取並儲存選中狀態需要用到Ag-Grid提供的api，onGridReady事件返回params，包含各種api

// params 包含有type、api(gridApi)、columnApi
const [gridApi, setGridApi] = useState(null)
const [gridColumnApi, setGridColumnApi] = useState(null)

function onGridReady(params) {
	setGridApi(params.api);
	setGridColumnApi(params.columnApi);
}

<AgGridReact
	rowSelection="multiple"
	rowData={rowData}
	onGridReady={onGridReady}
>
	<AgGridColumn field="make" checkboxSelection={true}></AgGridColumn>
</AgGridReact>

分組

• AgGridReact上設定autoGroupColumnDef和groupSelectsChildren；
• AgGridColumn上設定rowGroup

<AgGridReact
	rowSelection="multiple"
	rowData={rowData}
	onGridReady={onGridReady}
	groupSelectsChildren={true}
	autoGroupColumnDef={{
		headerName: "Price",
		field: "price",
		cellRenderer:'agGroupCellRenderer',
		cellRendererParams: {
			checkbox: true
		}
	}}
>
	<AgGridColumn field="make" filter={true} rowGroup={true}></AgGridColumn>
</AgGridReact>