Expand All

  Getting Started

  Interfacing

  Features

  Row Models

  Themes

  Components

  Examples

  Third Party

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Overlays

At present, there are two overlays for the grid:

  • Loading: Gets displayed when the grid is loading data.
  • No Rows: Gets displayed when loading has complete but no rows to show.

The grid manages showing and hiding of the overlays for you, so you may not ever need to call the above API methods. When the table is first initialised, the loading panel is displayed if rowData is set to null or undefined. When the api function setRowData is called, the loading panel is hidden.

Overlay API

At any point, you can show or hide any of the overlays using the methods below. You may never use these methods, as the grid manages the overlays for you. However you may find some edge cases where you need complete control (such as showing 'loading' if an option outside the grid is changed).

// show 'loading' overlay
gridOptions.api.showLoadingOverlay()

// show 'no rows' overlay
gridOptions.api.showNoRowsOverlay()

// clear all overlays
gridOptions.api.hideOverlay()

The overlays are mutually exclusive, you cannot show more than one overlay at any given time.

Custom Templates

If your not happy with the provided overlay templates, you can provide your own. This is done with the grid properties overlayLoadingTemplate and overlayNoRowsTemplate. These templates should be plain HTML.

Example

In the example below, the table is not provided with rows on initialisation, hence the loading icon is shown. When the rows are read back, onNewRows is called, which automatically removes the loading panel. The example below also waits for two seconds before loading the rows, to help demonstrate the loading page.

The example also shows the api methods in action, so you can show / hide the panels at your will.