article

Monday, November 29, 2021

ReactJS AG Grid fetch json

ReactJS AG Grid fetch json

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.


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
?
1
2
3
4
5
6
7
8
9
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//src/app.js
import { useEffect, useState } from 'react';
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';
 
function App() {
 
  const [rowData, setRowData] = useState([]);
 
  useEffect(() => {
    fetch('https://reqres.in/api/users?per_page=12')
      .then(res => res.json())
      .then(result => setRowData(result.data));
  }, []);
 
  const avatarFormatter = ({ value }) => {
    return <img src={value} width="50px" height="50px" alt="images"/>
  }
 
  return (
    <div className="App">
      <h2>ReactJS AG Grid fetch json</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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//src/App.css
.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;
}

Posted by ednalan at 11:18 PM . Under .

Related Post