JavaScript 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:
class CustomLoadingCellRenderer {
init(params) {
this.eGui = document.createElement('div');
this.eGui.innerHTML = `
<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>`;
}
getGui() {
return this.eGui;
}
}
const gridOptions: GridOptions = {
...
loadingOverlayComponent: CustomLoadingCellRenderer,
loadingOverlayComponentParams: {
loadingMessage: 'One moment please...',
},
}Below is an example of no rows overlay class with custom noRowsMessageFunc() param:
class CustomNoRowsOverlay {
init(params) {
this.eGui = document.createElement('div');
this.eGui.innerHTML = `
<div class="ag-overlay-loading-center" style="background-color: lightcoral;">
<i class="far fa-frown">${params.noRowsMessageFunc()} </i> </div>`;
}
getGui() {
return this.eGui;
}
}
const gridOptions: GridOptions = {
...
noRowsOverlayComponent: CustomNoRowsOverlay,
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.
Implement this interface to provide a custom overlay when data is being loaded.
interface ILoadingOverlayComp {
// mandatory methods
// The init(params) method is called on the overlay once. See below for details on the parameters.
init(params: ILoadingOverlayParams): void;
// Returns the DOM element for this overlay
getGui(): HTMLElement;
}Implement this interface to provide a custom overlay when no rows loaded.
interface INoRowsOverlayComp {
// mandatory methods
// The init(params) method is called on the overlay once. See below for details on the parameters.
init(params: INoRowsOverlayParams): void;
// Returns the DOM element for this overlay
getGui(): HTMLElement;
}The interface for the overlay parameters is as follows:
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.