Overlay Component
Overlay components allow you to add your own overlays to ag-Grid. Use these when the provided overlay's do not meet
your requirements.
Loading Rows Overlay Interface
Implement this interface to provide a custom overlay when loading rows.
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 GUI for this overlay. The GUI can be a) a string of html or b) a DOM element or node.
getGui(): any;
}
interface ILoadingOverlayCompParams {
// an optional template for the loading rows overlay
loadingRowsTemplate?: string
// The grid API
api: any;
}
No Rows Overlay Interface
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 GUI for this overlay. The GUI can be a) a string of html or b) a DOM element or node.
getGui(): any;
}
interface INoRowsOverlayParams {
// an optional template for the no rows overlay
noRowsTemplate?: string
// The grid API
api: any;
}
Registering Overlay Components
See the section registering custom components
for details on registering and using custom overlays.
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.