Using ag-Grid with React: Getting Started

Basic Data

In the last video, we set up our basic React app and installed ag-Grid Community and the React wrapper.

In this video, we'll add ag-Grid to our app and use some basic data. The finished code in App.js will look like this:

// App.js
import React, { Component } from 'react';
import './App.css';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

class App extends Component {
  constructor(props) {
    this.state = {
      columnDefs: [
          headerName: 'Make',
          field: 'make',
          sortable: true,
          filter: true,
          checkboxSelection: true
          headerName: 'Model',
          field: 'model',
          sortable: true,
          filter: true
          headerName: 'Price',
          field: 'price',
          sortable: true,
          filter: true
      rowData: [{
        make: "Toyota", model: "Celica", price: 35000
      }, {
        make: "Ford", model: "Mondeo", price: 32000
      }, {
        make: "Porsche", model: "Boxter", price: 72000

  render() {
    return (
          height: '500px',
          width: '600px'

export default App;

Run npm start again and navigate to localhost:3000. You should see the grid with 3 columns and 3 rows of sample data. Awesome!

In the next video, we'll add basic sorting and filtering.