React Data GridQuick Start

Install the ag-grid-react package, which also installs ag-grid-community:

npm install ag-grid-react

Pass the AllCommunityModule to the AgGridProvider to access all Community features:

import { AllCommunityModule } from 'ag-grid-community';
import { AgGridProvider } from 'ag-grid-react';

const modules = [AllCommunityModule];

function App() {
    return (
        <AgGridProvider modules={modules}>
            {/* Your AgGridReact components go here */}
        </AgGridProvider>
    );
}

import { AgGridReact } from 'ag-grid-react'; // React Data Grid Component

const GridExample = () => {
    // Row Data: The data to be displayed.
    const [rowData, setRowData] = useState([
        { make: "Tesla", model: "Model Y", price: 64950, electric: true },
        { make: "Ford", model: "F-Series", price: 33850, electric: false },
        { make: "Toyota", model: "Corolla", price: 29600, electric: false },
    ]);

    // Column Definitions: Defines the columns to be displayed.
    const [colDefs, setColDefs] = useState([
        { field: "make" },
        { field: "model" },
        { field: "price" },
        { field: "electric" }
    ]);

    // ...
}

Return the AgGridReact component inside AgGridProvider, wrapped in a parent container div with a fixed height:

const modules = [AllCommunityModule];

return (
    <AgGridProvider modules={modules}>
        {/* Data Grid will fill the size of the parent container */}
        <div style={{ height: 500 }}>
            <AgGridReact
                rowData={rowData}
                columnDefs={colDefs}
            />
        </div>
    </AgGridProvider>
)

Below is a live example of the application running. Click </> Code to see the code.