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