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
Any valid Vue 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 this.params
:
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 {
// the component to use - registered previously
component: 'customLoadingCellRenderer',
params: {
// parameters to supply to the custom loading cell renderer
loadingMessage: '--- CUSTOM LOADING MESSAGE ---',
},
};
} else {
// no loading cell renderer
return undefined;
}
}
}