Overlay Notes

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.

Source code

Vue vue

<template>
  <div class="flex flex-col gap-4 grow">
    <div class="flex gap-4 items-center">
      <button
        @click="addRandomNote"
        class="rv-btn"
      >
        Add Random Note
      </button>
      <button
        @click="clearNotes"
        class="rv-btn-danger"
      >
        Clear Notes
      </button>
    </div>
    <RevoGrid
      ref="grid"
      class="rounded-lg overflow-hidden grow"
      :theme="isDark ? 'darkMaterial' : 'material'"
      :source="source"
      :columns="columns"
      :plugins="plugins"
      stretch="all"
      :row-size="40"
      :row-headers="{
        cellTemplate: () => '',
        prop: 'rw_header',
      }"
      hide-attribution
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import RevoGrid from '@revolist/vue3-datagrid';
import {
  OverlayPlugin,
  RowOddPlugin,
  RowSelectPlugin,
  OVERLAY_CLEAR_NODES,
  OVERLAY_NODE,
} from '@revolist/revogrid-pro';
import { currentThemeVue } from '../composables/useRandomData';
import { makeData, allColumns } from '../composables/makeData';
import { h } from '@revolist/revogrid';

const { isDark } = currentThemeVue();
const grid = ref<{ $el: HTMLRevoGridElement } | null>(null);

const source = ref(makeData(20));
const columns = allColumns();
columns.splice(0, 1);

const plugins = [
  OverlayPlugin,
  RowOddPlugin,
  RowSelectPlugin,
];

const noteColors = [
  'rgba(255, 255, 0, 0.7)',
  'rgba(0, 255, 0, 0.7)',
  'rgba(255, 0, 0, 0.7)',
  'rgba(0, 0, 255, 0.7)',
];

const noteBorders = [
  '#ffd700',
  '#00ff00',
  '#ff0000',
  '#0000ff',
];

const addRandomNote = () => {
  if (!grid.value) return;
  
  const rowIndex = Math.floor(Math.random() * source.value.length - 1);
  const colorIndex = Math.floor(Math.random() * noteColors.length);
  
  const noteNode = h('div', {
    class: { note: true },
    style: {
      position: 'absolute',
      top: `${rowIndex * 40}px`,
      left: '0',
      padding: '5px',
      backgroundColor: noteColors[colorIndex],
      border: `1px solid ${noteBorders[colorIndex]}`,
      borderRadius: '0 10px 10px 0',
      zIndex: 1,
    }
  }, [
    h('div', { class: { 'font-bold': true } }, `Note row ${rowIndex + 1}`)
  ]);

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

const clearNotes = () => {
  if (!grid.value) return;
  
  const nodeIds = Array.from({ length: source.value.length }, (_, i) => `note-${i}`);
  grid.value?.$el.dispatchEvent(new CustomEvent(OVERLAY_CLEAR_NODES, {
    detail: {
      nodeIds
    }
  }));
};

onMounted(() => {
  // Add some initial notes
  setTimeout(() => {
    addRandomNote();
    addRandomNote();
    addRandomNote();
  }, 100);
});
</script>

<style scoped>
:deep(.note) {
  transition: all 0.3s ease;
}

:deep(.note:hover) {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style> 

Why it matters

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
• Installation
• Usage
  • Basic Setup
  • Adding Notes
  • Customizing Notes
• 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:

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

2. Initialize the Grid with the Plugin:

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

3. Add Notes to Rows:

   // 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

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

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.

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

overlayclearnode

Dispatched to remove notes from the overlay layer.

interface OverlayClearNodeEvent {
  nodeIds: string[];
}

Methods

refresh()

Manually refresh the overlay layer’s positioning and content.