Framework:Javascript GridAngular GridReact GridVue Grid

React Grid: Overlay Component

Overlay components allow you to add your own overlays to AG Grid. Use these when the provided overlays do not meet your requirements.

Simple Loading Overlay Component

Below is a simple example of overlay component as a Hook:

export default props => {
   return (
       <div className="ag-custom-loading-cell" style={{paddingLeft: '10px', lineHeight: '25px'}}>
           <i className="fas fa-spinner fa-pulse"></i> <span> {props.loadingMessage}</span>
       </div>
   );
};

And here is the same example as a Class-based Component:

export default class CustomLoadingOverlay extends Component {
   render() {
       return (
           <div className="ag-overlay-loading-center" style={{backgroundColor: 'lightsteelblue', height: '9%'}}>
               <i className="fas fa-hourglass-half"> {this.props.loadingMessage} </i>
           </div>
       );
   }
}

Simple No-Rows Overlay Component

Below is a simple example of a no rows overlay component as a Hook:

export default props => {
   return (
       <div className="ag-overlay-loading-center" style={{backgroundColor: 'lightcoral', height: '9%'}}>
           <i className="far fa-frown"> {props.noRowsMessageFunc()}</i>
       </div>
   );
};

And here is the same example as a Class-based Component:

export default class CustomNoRowsOverlay extends Component {
   render() {
       return (
           <div className="ag-overlay-loading-center" style={{backgroundColor: 'lightcoral', height: '9%'}}>
               <i className="far fa-frown"> {this.props.noRowsMessageFunc()}</i>
           </div>
       );
   }
}

Example: Custom Overlay Components

The example below demonstrates how to provide custom overlay components to the grid. Notice the following:

  • Custom Loading Overlay Renderer is supplied by name via gridOptions.loadingOverlayComponent.
  • Custom Loading Overlay Renderer Parameters are supplied using gridOptions loadingOverlayComponentParams.
  • Custom No Rows Overlay Renderer is supplied by name via gridOptions.noRowsOverlayComponent.
  • Custom No Rows Overlay Renderer Parameters are supplied using gridOptions.noRowsOverlayComponentParams.

Overlay Component Interface

Any valid React component can be an Overlay. When a custom Overlay Component is instantiated within both a template and the Grid API will be made available on props:

Loading Overlay Params Interface

interface ILoadingOverlayParams {
    // The grid API
    api: GridApi;
}

No Rows Overlay Params Interface

interface INoRowsOverlayParams {
    // The grid API
    api: GridApi;
}

Registering Overlay Components

See the section registering custom components for details on registering and using custom overlays.