JavaScript Data Grid: Overlay Component
Overlay components allow you to add your own overlays to AG Grid. Use these when the provided overlays do not meet your requirements.
Simple Loading Overlay Component
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...',
},
}
Simple No-Rows Overlay Component
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(),
},
}
Example: Custom Overlay Components
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
.
Overlay Component Interfaces
Loading Overlay
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;
}
No Rows Overlay
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 . |
Registering Overlay Components
See the section registering custom components for details on registering and using custom overlays.
- Overlay Component
- Simple Loading Overlay Component
- Simple No-Rows Overlay Component
- Example: Custom Overlay Components
- Overlay Component Interfaces
- Loading Overlay
- No Rows Overlay
- Overlay Components Interfaces
- Loading Overlay
- No Rows Overlay
- Overlay Component Interface
- Overlay Component Interface
- Registering Overlay Components