Info Panel

Module Extensions

HTMLRevoGridElement (Extended from global)

interface HTMLRevoGridElement {
  infoPanel?: InfoPanelConfig;
  'info-panel'?: InfoPanelConfig
}

---

AdditionalData (Extended from @revolist/revogrid)

interface AdditionalData {
  /**
       * Legacy info panel configuration.
       * @deprecated Use `grid.infoPanel` instead.
       */
      infoPanel?: InfoPanelConfig
}

Plugin API

InfoPanelConfig

interface InfoPanelConfig {
  keys?: string[]
}

---

InfoPanelPlugin

The InfoPanelPlugin enhances RevoGrid by providing a dynamic and customizable information panel that displays detailed data about the selected row. The panel appears when a row is clicked and can be populated with specific fields, making it highly useful for displaying additional information without cluttering the main grid.

Features:

• Listens for row selection events (afterfocus) and dynamically displays detailed information based on the selected row.
• Supports customization of displayed fields through the infoPanel.keys property in RevoGrid’s additionalData.
• Emits a beforeinfopanelshow event, allowing users to intercept and prevent the panel from being shown if necessary.
• Supports both plain text and HTML content rendering within the panel.
• Smoothly toggles visibility of the panel using the hidden attribute.

Usage:

• Import InfoPanelPlugin and add it to the RevoGrid’s plugin list.
• Optionally, define which keys should be displayed in the info panel by setting additionalData.infoPanel.keys.

Example

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

const grid = document.createElement('revo-grid');
grid.additionalData = {
  infoPanel: { keys: ['name', 'age', 'email'] } // Specify keys to display
};
grid.plugins = [InfoPanelPlugin]; // Add info panel functionality to the grid

This plugin is ideal for enhancing user interaction by providing a non-intrusive way to display detailed information about grid entries, commonly used in data visualization, management dashboards, and administrative tools.

Dependencies

• Event integration afterfocus: Integrates with row focus events to show selected row details.
• Config integration additionalData.infoPanel: Reads legacy panel configuration from additionalData.infoPanel.

class InfoPanelPlugin {}