React
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) {
    super(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 (
      <div
        className="ag-theme-balham"
        style={{
          height: '500px',
          width: '600px'
        }}
      >
        <AgGridReact
          onGridReady={this.onGridReady}
          columnDefs={this.state.columnDefs}
          rowData={this.state.rowData}
        ></AgGridReact>
      </div>
    );
  }
}

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.