How to add a loading in React AG Grid
Today we’ll show you how to add a loading in React AG Grid.
In the previous article, we have implement server side pagination in React AG Grid. Here, we’ll show you how to show loading during an API call and how to hide it after receiving a response.
Checkout more articles on ReactJS
Demo Application
Steps to add a loading in AG Grid
1. Load data using API in AG Grid
First of all, we have to implement the React AG Grid and integrate the API in AG Grid. Check the following article to implement server-side pagination in React AG Grid.
Implement server side pagination in React AG Grid
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | import React, { 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 [gridApi, setGridApi] = useState(null); const perPage = 3; const onGridReady = (params) => { setGridApi(params.api); }; useEffect(() => { if (gridApi) { const dataSource = { getRows: (params) => { // Use startRow and endRow for sending pagination to Backend // params.startRow : Start Page // params.endRow : End Page const page = params.endRow / perPage; fetch(`https://reqres.in/api/users?per_page=${perPage}&page=${page}`) .then(resp => resp.json()) .then(res => { params.successCallback(res.data, res.total); }).catch(err => { params.successCallback([], 0); }); } } gridApi.setDatasource(dataSource); } }, [gridApi]); const avatarFormatter = ({ value }) => { return <img src={value} width="50px" height="50px" /> } return ( <div className="App"> <h2>Add a loading in React AG Grid - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h2> <div className="ag-theme-alpine ag-style"> <AgGridReact pagination={true} rowModelType={'infinite'} paginationPageSize={perPage} cacheBlockSize={perPage} onGridReady={onGridReady} rowHeight={60} defaultColDef={{ flex: 1 }} > <AgGridColumn field="first_name" headerName="First Name" cellClass="vertical-middle" /> <AgGridColumn field="last_name" headerName="Last Name" cellClass="vertical-middle" /> <AgGridColumn field="email" headerName="Email" cellClass="vertical-middle" /> <AgGridColumn field="avatar" headerName="Avatar" cellRendererFramework={avatarFormatter} cellClass="vertical-middle" /> </AgGridReact> </div> </div> ); } export default App; |
2. Add loading in Grid
We will use the overlay to add the loading indicator in the Grid.
There are two types of the overlay for the grid.
- Loading: Gets displayed when the grid is loading data.
- No Rows: Gets displayed when loading has completed but no rows to show.
Use the following methods for overlays.
- To show loading overlay:
gridApi.showLoadingOverlay(); - To show no rows overlay:
gridApi.showNoRowsOverlay(); - To clear all overlays:
gridApi.hideOverlay();
We can also add the custom template using the overlayLoadingTemplate and overlayNoRowsTemplate. Check the following code to show/hide a loading template.
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | ... ... function App() { useEffect(() => { if (gridApi) { const dataSource = { getRows: (params) => { // Use startRow and endRow for sending pagination to Backend // params.startRow : Start Page // params.endRow : End Page gridApi.showLoadingOverlay(); const page = params.endRow / perPage; fetch(`https://reqres.in/api/users?per_page=${perPage}&page=${page}`) .then(resp => resp.json()) .then(res => { if (!res.data.length) { gridApi.showNoRowsOverlay(); } else { gridApi.hideOverlay(); } params.successCallback(res.data, res.total); }).catch(err => { gridApi.showNoRowsOverlay(); params.successCallback([], 0); }); } } gridApi.setDatasource(dataSource); } }, [gridApi]); return ( <div className="App"> ... ... <div className="ag-theme-alpine ag-style"> <AgGridReact ... ... overlayLoadingTemplate={ '<span className="ag-overlay-loading-center">Please wait while your rows are loading...</span>' } overlayNoRowsTemplate={ '<span className="ag-overlay-loading-center">No data found to display.</span>' } > ... ... </AgGridReact> </div> </div> ); } export default App; |
3. Output
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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | import React, { 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 [gridApi, setGridApi] = useState(null); const perPage = 3; const onGridReady = (params) => { setGridApi(params.api); }; useEffect(() => { if (gridApi) { const dataSource = { getRows: (params) => { // Use startRow and endRow for sending pagination to Backend // params.startRow : Start Page // params.endRow : End Page gridApi.showLoadingOverlay(); const page = params.endRow / perPage; fetch(`https://reqres.in/api/users?per_page=${perPage}&page=${page}`) .then(resp => resp.json()) .then(res => { if (!res.data.length) { gridApi.showNoRowsOverlay(); } else { gridApi.hideOverlay(); } params.successCallback(res.data, res.total); }).catch(err => { gridApi.showNoRowsOverlay(); params.successCallback([], 0); }); } } gridApi.setDatasource(dataSource); } }, [gridApi]); const avatarFormatter = ({ value }) => { return <img src={value} width="50px" height="50px" /> } return ( <div className="App"> <h2>Add a loading in React AG Grid - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h2> <div className="ag-theme-alpine ag-style"> <AgGridReact pagination={true} rowModelType={'infinite'} paginationPageSize={perPage} cacheBlockSize={perPage} onGridReady={onGridReady} rowHeight={60} defaultColDef={{ flex: 1 }} overlayLoadingTemplate={ '<span className="ag-overlay-loading-center">Please wait while your rows are loading...</span>' } overlayNoRowsTemplate={ '<span className="ag-overlay-loading-center">No data found to display.</span>' } > <AgGridColumn field="first_name" headerName="First Name" cellClass="vertical-middle" /> <AgGridColumn field="last_name" headerName="Last Name" cellClass="vertical-middle" /> <AgGridColumn field="email" headerName="Email" cellClass="vertical-middle" /> <AgGridColumn field="avatar" headerName="Avatar" cellRendererFramework={avatarFormatter} cellClass="vertical-middle" /> </AgGridReact> </div> </div> ); } export default App; |
Run the application and check the output in the browser.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
Hello, I think your blog might be having browser compatibility issues. When I look at your website in Opera, it looks fine but when opening in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up! Other then that, awesome blog!
Thank you. We will look into it.