In this tutorial we will create a sample to load static data in a grid.
AG Grid is a fully-featured and highly customizable JavaScript data grid. It delivers outstanding performance, has no 3rd party dependencies and integrates smoothly with React as React Component.
Module not found: Can't resolve 'ag-grid-community/dist/styles/ag-grid.css'
C:\reactdev\myreactdev>npm install --save ag-grid-community
https://www.npmjs.com/package/ag-grid-community
Module not found: Can't resolve 'ag-grid-react' in 'C:\reactdev\myreactdev\src'
C:\reactdev\myreactdev>npm i --save ag-grid-community ag-grid-react react-dom-factories
https://www.npmjs.com/package/ag-grid-react
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
)
public/index.html
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ReactJS </title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/App.js
//src/App.js
import { AgGridColumn, AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import './App.css';
const rowData = [
{
id: 1,
email: "george.bluth@reqres.in",
first_name: "George",
last_name: "Bluth",
avatar: "https://reqres.in/img/faces/1-image.jpg"
},
{
id: 2,
email: "janet.weaver@reqres.in",
first_name: "Janet",
last_name: "Weaver",
avatar: "https://reqres.in/img/faces/2-image.jpg"
},
{
id: 3,
email: "emma.wong@reqres.in",
first_name: "Emma",
last_name: "Wong",
avatar: "https://reqres.in/img/faces/3-image.jpg"
},
{
id: 4,
email: "eve.holt@reqres.in",
first_name: "Eve",
last_name: "Holt",
avatar: "https://reqres.in/img/faces/4-image.jpg"
},
{
id: 5,
email: "charles.morris@reqres.in",
first_name: "Charles",
last_name: "Morris",
avatar: "https://reqres.in/img/faces/5-image.jpg"
},
{
id: 6,
email: "tracey.ramos@reqres.in",
first_name: "Tracey",
last_name: "Ramos",
avatar: "https://reqres.in/img/faces/6-image.jpg"
},
{
id: 7,
email: "michael.lawson@reqres.in",
first_name: "Michael",
last_name: "Lawson",
avatar: "https://reqres.in/img/faces/7-image.jpg"
},
{
id: 8,
email: "lindsay.ferguson@reqres.in",
first_name: "Lindsay",
last_name: "Ferguson",
avatar: "https://reqres.in/img/faces/8-image.jpg"
},
{
id: 9,
email: "tobias.funke@reqres.in",
first_name: "Tobias",
last_name: "Funke",
avatar: "https://reqres.in/img/faces/9-image.jpg"
},
{
id: 10,
email: "byron.fields@reqres.in",
first_name: "Byron",
last_name: "Fields",
avatar: "https://reqres.in/img/faces/10-image.jpg"
},
{
id: 11,
email: "george.edwards@reqres.in",
first_name: "George",
last_name: "Edwards",
avatar: "https://reqres.in/img/faces/11-image.jpg"
},
{
id: 12,
email: "rachel.howell@reqres.in",
first_name: "Rachel",
last_name: "Howell",
avatar: "https://reqres.in/img/faces/12-image.jpg"
}
];
function App() {
const avatarFormatter = ({ value }) => {
return <img src={value} width="50px" height="50px" />
}
return (
<div className="App">
<h2>ReactJS How to Implement AG Grid</h2>
<div className="ag-theme-alpine ag-style">
<AgGridReact
defaultColDef={{ flex: 1 }}
rowHeight={60}
rowData={rowData} >
<AgGridColumn field="first_name" headerName="First Name" sortable={true} filter={true} cellClass="vertical-middle" />
<AgGridColumn field="last_name" headerName="Last Name" sortable={true} filter={true} cellClass="vertical-middle" />
<AgGridColumn field="email" headerName="Email" sortable={true} filter={true} cellClass="vertical-middle" />
<AgGridColumn field="avatar" headerName="Avatar" sortable={true} filter={true} cellRendererFramework={avatarFormatter} cellClass="vertical-middle" />
</AgGridReact>
</div>
</div>
);
}
export default App;
src/App.css
//src/App.css
.App {
padding: 50px;
}
.ag-style {
height: 500px;
width: 100%;
}
.vertical-middle {
display: flex;
align-items: center;
}
.vertical-middle img {
display: block;
border: 1px solid #ddd;
border-radius: 3px;
}
