React Data GridQuick Start

ReactAngularVueJavascript

Create a grid in 60 Seconds

At a minimum, three things are required to create a grid:

• Container: for the grids placement in your application.
• Styles: to define the grid's theme & dimensions.
• Row Data & Column Definitions: to define the data and how it should be displayed.

Install

First, install the ag-grid-react library:

npm install ag-grid-react

Create a Component

Then, create a new component in your application with the required dependencies:

import { AgGridReact } from 'ag-grid-react'; // React Grid Logic
import "ag-grid-community/styles/ag-grid.css"; // Core CSS
import "ag-grid-community/styles/ag-theme-quartz.css"; // Theme

const GridExample = () => {
  return (<div></div>);
}

Row Data & Column Definitions

Next, add the rowData and colDefs arrays to your component to define the data and how it should be displayed:

const GridExample = () => {
  // Row Data: The data to be displayed.
  const [rowData, setRowData] = useState([
    { mission: "Voyager", company: "NASA", location: "Cape Canaveral", date: "1977-09-05", rocket: "Titan-Centaur ", price: 86580000, successful: true },
    { mission: "Apollo 13", company: "NASA", location: "Kennedy Space Center", date: "1970-04-11", rocket: "Saturn V", price: 3750000, successful: false },
    { mission: "Falcon 9", company: "SpaceX", location: "Cape Canaveral", date: "2015-12-22", rocket: "Falcon 9", price: 9750000, successful: true }
  ]);
  
  // Column Definitions: Defines & controls grid columns.
  const [colDefs, setColDefs] = useState([
    { field: "mission" },
    { field: "company" },
    { field: "location" },
    { field: "date" },
    { field: "price" },
    { field: "successful" },
    { field: "rocket" }
  ]);

  // ...

}

This is a basic example of Row Data & Column Definitions. The column definitions will access data via the provided field property, which maps directly to fields inside of the rowData objects.

Rendering the Grid

Then, return the AgGridReact component (wrapped in a container div) with rowData and colDefs as props:

return (
  // Container
  <div>
    {/* The AG Grid component */}
    <AgGridReact rowData={rowData} columnDefs={colDefs} />
  </div>
)

Styling the Grid

Finally, configure the theme & dimensions for the grid, which are controlled by the grid's container element.

In the container <div> add the ag-theme-quartz CSS class to apply the Quartz theme and specify a height:

// Container with theme & dimensions
<div className="ag-theme-quartz" style={{ height: 500 }}>
  {/* The AG Grid component */}
  <AgGridReact rowData={rowData} columnDefs={colDefs} />
</div>

Result

When you run your application, you should see a basic grid with three rows. To see the full code, click the </> Code button below the example.

Next Steps

• Read our Introductory Tutorial.
• Watch our Video Tutorials.