JavaScript 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.
The loading cell renderer is only used with the Server-Side Row Model. To customise the Loading Overlay used with the Client-Side Row Model, see the Overlay Component section.
Simple Loading Cell Renderer Component
Below is an example of cell renderer class:
class CustomLoadingCellRenderer {
init(params) {
this.eGui = document.createElement('div');
this.eGui.innerHTML = `
<div class="ag-custom-loading-cell" style="padding-left: 10px; line-height: 25px;">
<i class="fas fa-spinner fa-pulse"></i>
<span>${params.loadingMessage} </span>
</div>
`;
}
getGui() {
return this.eGui;
}
}
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
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 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.