Loader

Module Extensions

HTMLRevoGridElementEventMap (Extended from global)

interface HTMLRevoGridElementEventMap {
  /**
       * Event for loader
       *
       * @example
       * ```typescript
       * grid.addEventListener(LOADER_EVENT, (e) => {
       *   console.log(e);
       * });
       */
      [LOADER_EVENT]: boolean
}

Plugin API

LoaderPlugin

The LoaderPlugin is a RevoGrid plugin designed to manage and display a loading indicator within the grid. This plugin provides a visual cue to users that a background operation is in progress, enhancing user experience by signaling when the grid is busy with data processing tasks.

Functionality:

• Loader Element Integration: Integrates a loader element into the grid’s virtual DOM by registering a VNode containing a “loader” class, which can be styled via CSS.
• Event-driven State Management: Listens for LOADER_EVENT to toggle the loader’s visibility based on the operation’s state. This is controlled by adding or removing a “busy” class to the loader element.
• Public Method: Provides a busy method to programmatically trigger the loading state by emitting the LOADER_EVENT. This allows external components or processes to indicate grid activity.

Usage:

• To utilize the LoaderPlugin, include it in the grid’s plugin list and invoke the busy method with a boolean parameter to show or hide the loader based on current operations.

Example

import { LoaderPlugin } from '@revolist/revogrid-pro';

const grid = document.createElement('revo-grid');
grid.plugins = [LoaderPlugin];

// Trigger loader
const loaderPlugin = grid.plugins.find(plugin => plugin instanceof LoaderPlugin);
loaderPlugin.busy(true); // Show loader
loaderPlugin.busy(false); // Hide loader

This plugin is ideal for developers looking to provide immediate feedback to users during data-intensive operations, ensuring a responsive and intuitive grid interface.

class LoaderPlugin {
  busy(isBusy: boolean);
}