Revision history [back]

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.