Skip to content
RevoGrid [Pro]

Info Panel

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.

class InfoPanelPlugin {}