安装:
npm install --save ag-grid-community
提供表格盒子
<div
id="myGrid"
class="grid-table ag-theme-alpine"
style="height: 150px; width: 1648px"
/>
引入样式,和初始化表格方法
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
import { Grid } from "ag-grid-community";
初始化表格
const myGrid = document.querySelector("#myGrid");
new Grid(myGrid, gridViewService.gridOption);
表格配置
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 }
]
};
列属性:
列分组,用children属性。
columnDefs: [
{
headerName: 'Group one',
children: [
{ headerName: 'Age', field: 'age' },
{ headerName: 'Name', field: 'name },
{ headerName: 'Sex, field: 'sex' }
]
}
],