You can display a loading message in ag-grid using React by setting the loadingOverlayComponent
property in the gridOptions
object.
First, create a custom component for the loading overlay. For example:
import React from 'react';
const LoadingOverlay = () => {
return (
<div className="ag-overlay-loading-wrapper">
<div className="ag-overlay-loading-center">
<i className="fas fa-spinner fa-spin"></i>
<span>Loading...</span>
</div>
</div>
);
};
export default LoadingOverlay;
Then, in your ag-grid React component, set the loadingOverlayComponent
property in the gridOptions
object to your custom component:
import { AgGridReact } from 'ag-grid-react';
import LoadingOverlay from './LoadingOverlay';
const MyGrid = () => {
const gridOptions = {
// ...
loadingOverlayComponent: LoadingOverlay,
// ...
};
// ...
return (
<div className="ag-theme-alpine">
<AgGridReact
{...gridOptions}
// ...
/>
</div>
);
};
This will display your custom loading overlay component whenever the ag-grid component is loading data.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2021-09-17 11:00:00 +0000
Seen: 11 times
Last updated: Apr 19 '21
Despite setting `verbose` to `False`, why does Moviepy still display a progress bar?
How can Xcode 13.1 display the source code framework of an app?
How can I display the address field from the lead object in various sections?
Can AG-GRID display everything in a single column?
How can I modify Angular 8 to display a blank page without any error messages?
How can you display a Pandas Dataframe using a for loop?
How can the output of VBA be displayed in a cell within Excel?
What is the method for placing an element at the center below its preceding sibling element?