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:
gridOptions.loadingOverlayComponent
.gridOptions loadingOverlayComponentParams
.gridOptions.noRowsOverlayComponent
.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
:
See the section registering custom components for details on registering and using custom overlays.