Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

React Data GridLoading Cell Renderer

Loading cell renderers allow you to add your own loading renderers to AG Grid. Use these when the provided loading renderers do not meet your requirements.

Simple Loading Cell Renderer Component

Below is a simple example of loading cell renderer component as a Hook:

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

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

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

Example: Custom Loading Cell Renderer

The example below demonstrates how to provide custom loading cell renderer component to the grid. Notice the following:

  • Custom Loading Cell Renderer is supplied by name via gridOptions.loadingCellRenderer.
  • Custom Loading Cell Renderer Parameters are supplied using gridOptions.loadingCellRendererParams.
  • Example simulates a long delay to display the spinner clearly.
  • Scrolling the grid will request more rows and again display the loading cell renderer.

Loading Cell Renderer Component

Any valid React component can be a Loading Cell Renderer Component.

When a custom Loading Cell Renderer Component is instantiated within the the grid the following will be made available on props:

ILoadingCellRendererParams

Properties available on the ILoadingCellRendererParams<TData = any, TContext = any> interface.

node
IRowNode
The row node.
api
GridApi
The grid api.
columnApi
ColumnApi
The column api.
context
TContext
Application context as set on gridOptions.context.

Dynamic Cell Loading Renderer

It's possible to determine what Loading Cell Renderer to use dynamically - i.e. at runtime. For this you'll make use of the

loadingCellRendererSelector: (params) => {
   const useCustomRenderer = ...some condition/check...
   if (useCustomRenderer) {
       return {
           component: CustomLoadingCellRenderer,
           params: {
               // parameters to supply to the custom loading cell renderer
               loadingMessage: '--- CUSTOM LOADING MESSAGE ---',
           },
       };
       } else {
           // no loading cell renderer
           return undefined;
       }
   }
}

Registering Loading Cell Renderer Components

See the section registering custom components for details on registering and using custom loading cell renderers.