Load data from the API in React AG Grid
Today we’ll show you how to load data from the API in React AG Grid.
In the previous article, we have implemented the React AG Grid with the static data. Checkout several examples on the DataTable.
You may also like the following articles on ReactJS.
Demo Application
Steps to load data from the API in React AG Grid
1. Implement AG Grid in React
Let’s create a react application using the create-react-app and implement AG Grid in React. Check the following article for more information.
How to implement AG Grid in React
2. Call an API to load the data in Grid
Use the useEffect and useState to call an API and store data in the state variable using React Hooks.
1 2 3 4 5 6 7 | const [rowData, setRowData] = useState([]); useEffect(() => { fetch('https://reqres.in/api/users?per_page=12') .then(res => res.json()) .then(result => setRowData(result.data)); }, []); |
Let’s combine all the code together and see how it looks.
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 | 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" /> } return ( <div className="App"> <h2>Implement AG Grid in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></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; |
3. Output
Now, run the react application and check the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!! 🙂
