AG Grid 社区 React 版本抱怨 "could not find matching row model for rowModelType clientSide"

Question

我决定将 AG Grid 社区 React 版本用于我的一些数据网格用途。按照 https://www.npmjs.com/package/@ag-grid-community/react 的安装和使用了那里文档中的完全相同的代码，但我得到了一个奇怪的错误

找不到 rowModelType 客户端的匹配行模型
AG 网格：未找到行模型“客户端”。请确保@ag-grid-community/client-side-row-model 已注册。';

有人解决这个问题吗？添加代码以供参考。

import react, {useState} from "react";
import {AgGridColumn, AgGridReact} from '@ag-grid-community/react';
import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-alpine.css';

export default function DataGrid() {

    const [gridApi, setGridApi] = useState(null);
    const [gridColumnApi, setGridColumnApi] = useState(null);

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

    const onGridReady = params => {
        setGridApi(params.api);
        setGridColumnApi(params.columnApi);
    }

    return (
        <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
            <AgGridReact
                onGridReady={onGridReady}
                rowData={rowData}>
                <AgGridColumn field="make"></AgGridColumn>
                <AgGridColumn field="model"></AgGridColumn>
                <AgGridColumn field="price"></AgGridColumn>
            </AgGridReact>
        </div>
    );
}

Answer 1

我得到了解决方案，

使用

安装 1 个新包

npm install --save @ag-grid-community/all-modules

从上面的包

导入AllCommunityModules

这是最终代码

import react, {useState} from "react";
import {AgGridColumn, AgGridReact} from '@ag-grid-community/react';
import {AllCommunityModules} from "@ag-grid-community/all-modules"
import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-alpine.css';

export default function DataGrid() {

    const [gridApi, setGridApi] = useState(null);
    const [gridColumnApi, setGridColumnApi] = useState(null);

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

    const onGridReady = params => {
        setGridApi(params.api);
        setGridColumnApi(params.columnApi);
    }

    return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
        <AgGridReact
            modules={AllCommunityModules}
            onGridReady={onGridReady}
            rowData={rowData}>
            <AgGridColumn field="make"></AgGridColumn>
            <AgGridColumn field="model"></AgGridColumn>
            <AgGridColumn field="price"></AgGridColumn>
        </AgGridReact>
    </div>
);

}

AG Grid 社区 React 版本抱怨 "could not find matching row model for rowModelType clientSide"

AG Grid Community React version complaining "could not find matching row model for rowModelType clientSide"

reactjs

ag-grid

ag-grid-react