# Overlay Nodes
URL: https://pro.rv-grid.com/guides/grid-utilities/overlay-nodes/
Source: src/content/docs/guides/grid-utilities/overlay-nodes.mdx
Description: A guide to using the Overlay Plugin to display notes on grid rows.
The **Overlay Plugin** in RevoGrid provides a powerful way to display additional content over the grid cells. This guide demonstrates how to use it to show notes on specific rows.

  1. **Dynamic Overlay Positioning**: The Overlay Plugin automatically handles positioning and scrolling of overlay elements, ensuring they stay aligned with their corresponding grid rows.
  2. **Performance Optimized**: Despite rendering additional content, the overlay layer remains virtualized, maintaining high performance even with many notes.
  3. **Flexible Content**: You can display any type of content in the overlay, from simple notes to complex interactive components.

## Table of Contents

- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
  - [Basic Setup](#basic-setup)
  - [Adding Notes](#adding-notes)
  - [Customizing Notes](#customizing-notes)
- [API Reference](#api-reference)

---

## Features

- **Row-Specific Notes**: Display notes on specific grid rows
- **Automatic Positioning**: Notes automatically position themselves relative to their rows
- **Scroll Synchronization**: Notes stay aligned with their rows during scrolling
- **Custom Styling**: Fully customizable note appearance and behavior

---

## Basic Setup

1. **Import the Overlay Plugin:**

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

2. **Initialize the Grid with the Plugin:**

   ```javascript
   const grid = document.querySelector('revo-grid');
   grid.plugins = [OverlayPlugin];
   ```

3. **Add Notes to Rows:**

   ```javascript
   // Dispatch an event to add a note
   grid.dispatchEvent(new CustomEvent('overlaynode', {
     detail: {
       nodeId: `note-${rowIndex}`,
       vnode: h('div', { class: 'note' }, 'Your note text here')
     }
   }));
   ```

### Adding Notes

To add a note to a specific row, you need to:

1. Create a unique `nodeId` for the note
2. Create a virtual node (vnode) for the note content
3. Dispatch the `overlaynode` event with the note details

```javascript
const addNote = (rowIndex, noteText) => {
  const noteNode = h('div', {
    class: 'note',
    style: {
      position: 'absolute',
      top: `${rowIndex * rowHeight}px`,
      left: '0',
      width: '100%',
      padding: '8px',
      backgroundColor: 'rgba(255, 255, 0, 0.2)',
      border: '1px solid #ffd700'
    }
  }, noteText);

  grid.dispatchEvent(new CustomEvent('overlaynode', {
    detail: {
      nodeId: `note-${rowIndex}`,
      vnode: noteNode
    }
  }));
};
```

### Customizing Notes

You can customize the appearance and behavior of notes by:

1. Modifying the note's CSS styles
2. Adding interactive elements
3. Implementing custom positioning logic

```javascript
const createCustomNote = (rowIndex, noteData) => {
  return h('div', {
    class: 'custom-note',
    style: {
      position: 'absolute',
      top: `${rowIndex * rowHeight}px`,
      left: '0',
      width: '100%',
      padding: '12px',
      backgroundColor: noteData.color || 'rgba(255, 255, 0, 0.2)',
      border: `1px solid ${noteData.borderColor || '#ffd700'}`,
      borderRadius: '4px'
    }
  }, [
    h('div', { class: 'note-header' }, noteData.title),
    h('div', { class: 'note-content' }, noteData.content)
  ]);
};
```

---

## API Reference

### OverlayPlugin Events

#### `overlaynode`

Dispatched to add or update a note in the overlay layer.

```typescript
interface OverlayNodeEvent {
  nodeId: string;
  vnode: VNode;
}
```

#### `overlayclearnode`

Dispatched to remove notes from the overlay layer.

```typescript
interface OverlayClearNodeEvent {
  nodeIds: string[];
}
```

### Methods

#### `refresh()`

Manually refresh the overlay layer's positioning and content.
