Loading Component

The Loading Component is displayed for a row to show data is loading.

The example below demonstrates replacing the Provided Loading Component with a Custom Loading Component.

• Custom Loading Component is supplied by name via gridOptions.loadingCellRenderer.
• Custom Loading Component 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.

Custom Component

The interface for the loading cell renderer component is as follows:

interface ILoadingCellRendererComp {
   // The init(params) method is called on the loading cell renderer once. See below for details on the parameters.
   init(params: ILoadingCellRendererParams): void;

   // Returns the DOM element for this loading cell renderer
   getGui(): HTMLElement;
}

The interface for the loading cell renderer parameters is as follows:

Dynamic Selection

It's possible to determine what Loading Cell Renderer to use dynamically - i.e. at runtime. This requires providing a loadingCellRendererSelector.

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;
       }
   }
}