Class TableOverlay

The overlay layer over the table body: "Loading…" with a CSS spinner, "No rows to show", "No matching rows". One element per table (.ge-table-overlay, a child of the host, aria-hidden – the table announces the texts through its live region instead). It is created once and only changed when the shown overlay changes, so scrolling costs one comparison per frame.

Apps use it through TableApi.showLoadingOverlay, TableApi.showNoRowsOverlay, TableApi.hideOverlay and TableApi.getOverlayState; texts and behaviour come from TableOptionsIf.overlayOptions.

Example

const overlay = new TableOverlay(hostDiv, new ConvenienceDomService(new SimpleDomService()), {}, () => {
  overlay.update(0, 0);
});
overlay.showLoading("Saving…"); // calls the update callback
console.log(overlay.getState()); // "loading"
overlay.destroy();

Since

1.1.92

Hierarchy

  • TableOverlay

Constructors

constructor

Properties

contentElement element options

Methods

destroy getState hide isBlocking isEventBlocked setBounds showLoading showNoRows update

Constructors

constructor

Properties

Readonly contentElement

contentElement: HTMLDivElement

The content box, centered in the overlay (.ge-table-overlay-content).

Readonly element

element: HTMLDivElement

The overlay element (.ge-table-overlay).

Readonly options

options: OverlayOptions

Methods

destroy

getState

hide

isBlocking

isEventBlocked

  • true for a mouse event on a blocking loading overlay: the table ignores it (click, double click, mouse down, context menu, hover). The event is not stopped – page handlers (e.g. "click outside closes the menu") see it.

    Parameters

    • evt: Event

      a mouse event that reached the host

    Returns boolean

    the table must not react to it

setBounds

  • Places the overlay over the body (px, relative to the host). Unchanged values do not touch the DOM.

    Parameters

    • left: number
    • top: number
    • width: number
    • height: number

    Returns void

showLoading

showNoRows

update

  • Shows the overlay that fits the body: a requested one, else "no matching rows" / "no rows to show" for an empty body. Changes the DOM only if the result differs from what is shown.

    Parameters

    • rowCount: number

      getRowCount() of the body

    • Optional unfilteredRowCount: number

      getUnfilteredRowCount() of the body (only needed for 0 rows)

    Returns undefined | TableOverlayChange

    the change, undefined if nothing changed

Settings

Member Visibility

Theme

On This Page