---
title: "Quick Start"
framework: react
version: "36.1.0"
---

# Quick Start

AG Grid is a high-performance React Data Grid library for building [React Tables](https://www.ag-grid.com/react-table/) with unbeatable performance and hundreds of features. Available in Community and Enterprise editions. Visit [Community vs. Enterprise](https://www.ag-grid.com/react-data-grid/community-vs-enterprise/) to learn more.

[React Data Grid quick start video tutorial](https://www.youtube.com/watch?v=6hxbPqziELk&list=PLsZlhayVgqNwHNHeqpCkSgdRV08xrKtzW)

## Create a React Data Grid

Add AG Grid to your application in 60 seconds:

### 1. NPM Install

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

```bash
npm install ag-grid-react
```

### 2. Provide Modules

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

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

> **Note**
>
> To minimize bundle size, only provide the modules you want to use. See the [Modules](https://www.ag-grid.com/react-data-grid/modules/) docs for more information.

### 3. Import the React Data Grid

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

### 4. Define Rows and Columns

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

    // ...
}
```

### 5. React Data Grid Component

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

```jsx
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>
)
```

### 6. Example React Data Grid

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

#### Quick Start Example

```tsx
'use client';
import React, { StrictMode, useState } from "react";
import { createRoot } from "react-dom/client";

import type { ColDef } from "ag-grid-community";
import { AllCommunityModule } from "ag-grid-community";
import { AgGridProvider, AgGridReact } from "ag-grid-react";

// Row Data Interface
interface IRow {
  make: string;
  model: string;
  price: number;
  electric: boolean;
}

// Create new GridExample component
const GridExample = () => {
  // Row Data: The data to be displayed.
  const [rowData, setRowData] = useState<IRow[]>([
    { 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 },
    { make: "Mercedes", model: "EQA", price: 48890, electric: true },
    { make: "Fiat", model: "500", price: 15774, electric: false },
    { make: "Nissan", model: "Juke", price: 20675, electric: false },
  ]);

  // Column Definitions: Defines & controls grid columns.
  const [colDefs, setColDefs] = useState<ColDef<IRow>[]>([
    { field: "make" },
    { field: "model" },
    { field: "price" },
    { field: "electric" },
  ]);

  const defaultColDef: ColDef = {
    flex: 1,
  };

  // Container: Defines the grid's theme & dimensions.
  return (
    <AgGridProvider modules={[AllCommunityModule]}>
      <div style={{ width: "100%", height: "100%" }}>
        <AgGridReact
          rowData={rowData}
          columnDefs={colDefs}
          defaultColDef={defaultColDef}
        />
      </div>
    </AgGridProvider>
  );
};

// Render GridExample
const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

[Live example: Quick Start Example](https://www.ag-grid.com/examples/getting-started/quick-start-example/reactFunctionalTs)

> **Note**
>
> 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:

- [Key Features](https://www.ag-grid.com/react-data-grid/key-features/) — Browse an overview of our commonly used features
- [Tutorials](https://www.ag-grid.com/react-data-grid/deep-dive/) — Get started with our step-by-step tutorials
- [Community vs. Enterprise](https://www.ag-grid.com/react-data-grid/community-vs-enterprise/) — Understand the differences between each version