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.

React Data Grid quick start video tutorial thumbnail

Create a React Data Grid

Add AG Grid to your application in 60 seconds:

NPM Install

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

npm install ag-grid-react

Import the React Data Grid

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

Register Modules

Register the AllCommunityModule to access all Community features:

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

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

To minimize bundle size, only register the modules you want to use. See the Modules docs for more information.

Define Rows and Columns

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

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

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

To live-edit the code, open the example in CodeSandbox or Plunker using the buttons to the lower-right.

Next Steps

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