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.