Search
Vue Data Grid

Overlays

vue logo

Overlays are for displaying messages over the grid.

When using the Client-side Data the grid uses two overlays:

  1. Loading Overlay: Displayed if rowData or columnDefs are set to null or undefined.
  2. No Rows Overlay: Displayed if rowData is an empty list.

You can manually show the overlays using the grid API's showLoadingOverlay(), showNoRowsOverlay() and hideOverlay().

HTML templates can be provided to the overlays using grid properties overlayLoadingTemplate and overlayNoRowsTemplate.

Custom Overlays

This example demonstrates Custom Overlay Components.

Loading Overlay Component is configured via the grid properties loadingOverlayComponent and loadingOverlayComponentParams.

Any valid Vue component can be a loading overlay component, however it is also possible to implement the following optional methods:

interface ILoadingOverlay {
   // Gets called when the `loadingOverlayComponentParams` grid option is updated
   refresh(params: ILoadingOverlayParams): void;
}

When a custom loading overlay is instantiated, the following will be made available on this.params:

Properties available on the ILoadingOverlayParams<TData = any, TContext = any> interface.

No Rows Overlay Component is configured via the grid properties noRowsOverlayComponent and noRowsOverlayComponentParams.

Any valid Vue component can be a no rows overlay component, however it is also possible to implement the following optional methods:

interface INoRowsOverlay {
   // Gets called when the `noRowsOverlayComponentParams` grid option is updated
   refresh(params: INoRowsOverlayParams): void;
}

When a custom no rows overlay is instantiated, the following will be made available on this.params:

Properties available on the INoRowsOverlayParams<TData = any, TContext = any> interface.