社区版ag-grid使用

安装：

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' }
            ]
        }
    ],