Skip to content
RevoGrid [Pro]

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 
<template>
  <div class="flex flex-col gap-4">
    <div class="flex gap-4 items-center">
      <button
        @click="addRandomNote"
        class="rounded-md bg-slate-800 mb-2 py-1.5 px-3 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      >
        Add Random Note
      </button>
      <button
        @click="clearNotes"
        class="rounded-md bg-orange-500 mb-2 py-1.5 px-3 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-orange-400 focus:shadow-none active:bg-orange-400 hover:bg-orange-400 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
>        Clear Notes
      </button>
    </div>
    <RevoGrid
      ref="grid"
      class="rounded-lg overflow-hidden"
      :theme="isDark ? 'darkMaterial' : 'material'"
      :source="source"
      :columns="columns"
      :plugins="plugins"
      :additionalData="additionalData"
      :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 additionalData = {
  stretch: 'last',
};


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>

Table of Contents

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.