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.