React Data GridQuick Start

AG Grid is a high-performance React Data Grid library for building React Tables with unbeatable performance and hundreds of features. Available in Community and Enterprise editions. Visit Community vs. Enterprise to learn more.

Create a React Data Grid Copy

Add AG Grid to your application in 60 seconds:

NPM Install Copy

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

npm install ag-grid-react

Register Modules Copy

Register the AllCommunityModule to access all Community features:

import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; 

// Register all Community features
ModuleRegistry.registerModules([AllCommunityModule]);

Import the React Data Grid Copy

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

Define Rows and Columns Copy

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

    // ...
}

React Data Grid Component Copy

Return the AgGridReact component, wrapped in a parent container div with a fixed height. Set Rows and Columns as AgGridReact component attributes:

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

Example React Data Grid Copy

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

Next Steps Copy

Now that you have a basic React Data Grid running, choose one of the following options to continue your learning journey: