Блог

Я решил использовать версию AG Grid community react для некоторых моих целей в сетке данных. проследил за установкой из https://www.npmjs.com/package/@ag-grid-community/react и использовал точно такой же код из документации, но я получил странную ошибку

1. не удалось найти подходящую модель строки для клиента rowModelType
2. Сетка AG: Модель строки «На стороне клиента» не найдена. Пожалуйста, убедитесь, что модель @ag-grid-сообщества/строки на стороне клиента зарегистрирована.’;

У кого-нибудь было какое-либо решение этой проблемы? код добавлен для ссылки.

 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>
    );
}
 

У меня есть решение,

Установите 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>
);
 

}