# Info Panel
URL: https://pro.rv-grid.com/api/info-panel/
Source: src/content/docs/api/info-panel.md
## Module Extensions

### `HTMLRevoGridElement` (Extended from `global`)

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

---

### `AdditionalData` (Extended from `@revolist/revogrid`)

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

## Plugin API

### `InfoPanelConfig`

```ts
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
```typescript
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.

```ts
class InfoPanelPlugin {}
```
