React Data Grid

Overlays

Overlays are for displaying messages over the grid.

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

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

The example above demonstrates the default loading and no rows overlays.

Overlay API

You can manually show the overlays using the grid API.

showLoadingOverlay TypeFunction	Show the 'loading' overlay.
showNoRowsOverlay TypeFunction	Show the 'no rows' overlay.
hideOverlay TypeFunction	Hides the overlay if showing.

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

overlayLoadingTemplate Typestring	Provide a template for 'loading' overlay.
overlayNoRowsTemplate Typestring	Provide a template for 'no rows' overlay.

This example demonstrates Custom Overlay Components.

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

When a loading overlay component is instantiated within the grid, the following will be made available on props:

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

api TypeGridApi	The grid api.
context TypeTContext	Application context as set on `gridOptions.context`.

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

When a no rows overlay component is instantiated within the grid, the following will be made available on props:

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

api TypeGridApi	The grid api.
context TypeTContext	Application context as set on `gridOptions.context`.