Vue 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.
Below is a simple example of loading cell renderer component:
const MyRenderer = {
template: `
<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>`
}
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.
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
:
ILoadingCellRendererParams
Properties available on the ILoadingCellRendererParams<TData = any, TContext = any>
interface.
| The row node. | |
| The grid api. | |
| The column api. | |
| Application context as set on gridOptions.context . |
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 {
// 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;
}
}
}
See the section registering custom components for details on registering and using custom loading cell renderers.