Skip to content
RevoGrid [Pro]

Overlay

Module Extensions

HTMLRevoGridElementEventMap (Extended from global)

interface HTMLRevoGridElementEventMap {
  overlaynode: OverlayRegisterEvent;
  overlayclearnode: OverlayUnRegisterEvent
}

Plugin API

OverlayPlugin

OverlayPlugin, a plugin for RevoGrid that manages overlay content within the grid environment. It provides mechanisms to render, position, and update overlay elements dynamically based on grid events and interactions.

Key Features:

  • Dynamic Overlay Management: Utilizes virtual nodes (VNode) to manage overlay content, allowing for flexible rendering and updating of overlay elements as grid data or layout changes.
  • Position and Size Calculations: Calculates and sets the position and height of overlay elements relative to grid scroll and dimension changes, ensuring overlays are correctly aligned with grid content.
  • Event Handling: Listens for and responds to various grid events such as scroll, node updates, and dimension changes, refreshing overlay content and adjusting positions as needed.
  • Debounced Refreshing: Integrates debouncing to optimize performance by reducing unnecessary updates during rapid event sequences.

Usage:

  • Integrate this plugin into a RevoGrid instance to enable advanced overlay management, enhancing the ability to display additional, context-sensitive information or controls over grid content.

Example

import { OverlayPlugin } from '@revolist/revogrid-pro'


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

The OverlayPlugin is essential for applications that require dynamic and context-aware overlay content within RevoGrid, providing a robust solution for managing additional grid features or information layers.

class OverlayPlugin {
  destroy();
}

OverlayRegisterEvent

export type OverlayRegisterEvent =  {
  nodeId: string;
  vnode: ReturnType<typeof h>;
};

OverlayUnRegisterEvent

export type OverlayUnRegisterEvent =  {
  nodeIds: string[];
};