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.
There are two types of overlay components:
- Loading Overlay: Overlay for when the grid is loading data.
- No Rows: Overlay for when the grid has loaded an empty array of rows.
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
.
Implementing a Loading Overlay Component
Implement this interface to provide a custom overlay when data is being loaded.
interface ILoadingOverlayComp {
// mandatory methods
// Returns the DOM element for this overlay
getGui(): HTMLElement;
// optional methods
// The init(params) method is called on the overlay once. See below for details on the parameters.
init(params: ILoadingOverlayParams): void;
// Gets called when the `loadingOverlayComponentParams` grid option is updated
refresh(params: ILoadingOverlayParams): void;
}
The interface for the overlay parameters is as follows:
Properties available on the ILoadingOverlayParams<TData = any, TContext = any>
interface.
apiTypeGridApi | The grid api. |
contextTypeTContext | Application context as set on gridOptions.context . |
Implementing a No Rows Overlay Component
Implement this interface to provide a custom overlay when no rows loaded.
interface INoRowsOverlayComp {
// mandatory methods
// Returns the DOM element for this overlay
getGui(): HTMLElement;
// optional methods
// The init(params) method is called on the overlay once. See below for details on the parameters.
init(params: INoRowsOverlayParams): void;
// Gets called when the `noRowsOverlayComponentParams` grid option is updated
refresh(params: INoRowsOverlayParams): void;
}
The interface for the overlay parameters is as follows:
Properties available on the INoRowsOverlayParams<TData = any, TContext = any>
interface.
apiTypeGridApi | The grid api. |
contextTypeTContext | Application context as set on gridOptions.context . |
Registering Overlay Components
See Registering Custom Components for details on registering and using custom overlays.