Framework:Javascript GridAngular GridReact GridVue Grid

Vue 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.

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 DOM element for this overlay
    getGui(): HTMLElement;
}
interface ILoadingOverlayParams {
    // 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 DOM element for this overlay
    getGui(): HTMLElement;
}
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.