Vue Data GridOverlay Component
Overlay components allow you to add your own overlays to AG Grid. Use these when the provided overlays do not meet your requirements.
Below is a example of loading overlay class with a custom loadingMessage
param:
const MyOverlay = {
template: `
<div class="ag-overlay-loading-center" style="background-color: lightsteelblue;">
<i class="fas fa-hourglass-half"> {{ params.loadingMessage }} </i> </div>`
}
const gridOptions: GridOptions = {
...
loadingOverlayComponent: 'MyOverlay',
loadingOverlayComponentParams: {
loadingMessage: 'One moment please...',
},
}
Below is an example of no rows overlay class with custom noRowsMessageFunc()
param:
const MyOverlay = {
template: `
<div class="ag-overlay-loading-center" style="background-color: lightcoral;">
<i class="far fa-frown"> {{params.noRowsMessageFunc()}}</i> </div>`
}
const gridOptions: GridOptions = {
...
noRowsOverlayComponent: 'MyOverlay',
noRowsOverlayComponentParams: {
noRowsMessageFunc: () => 'Sorry - no rows! at: ' + new Date(),
},
}
The example below demonstrates how to provide custom overlay components to the grid. Notice the following:
- Custom Loading Overlay Renderer is supplied by name via
gridOptions.loadingOverlayComponent
. - Custom Loading Overlay Renderer Parameters are supplied using
gridOptions loadingOverlayComponentParams
. - Custom No Rows Overlay Renderer is supplied by name via
gridOptions.noRowsOverlayComponent
. - Custom No Rows Overlay Renderer Parameters are supplied using
gridOptions.noRowsOverlayComponentParams
.
Any valid Vue component can be an Overlay. When a custom Overlay Component is instantiated within both a template and the Grid API will be made available on this.params
:
ILoadingOverlayParams
Properties available on the ILoadingOverlayParams<TData = any, TContext = any>
interface.
| The grid api. | |
| The column api. | |
| Application context as set on gridOptions.context . |
INoRowsOverlayParams
Properties available on the INoRowsOverlayParams<TData = any, TContext = any>
interface.
| The grid api. | |
| The column api. | |
| Application context as set on gridOptions.context . |
See the section registering custom components for details on registering and using custom overlays.