Row Context Menu

This example demonstrates how to create a custom row context menu with interactive actions. The menu appears when right-clicking on a row header and provides menu items with actions.
Key features:
Custom row context menu implementation
Actions with visual indicators
Styled menu buttons with hover effects
Source code
1
import { defineCustomElements } from '@revolist/revogrid/loader';
2
defineCustomElements();
3

4

5
import { currentTheme, useRandomData } from '../composables/useRandomData';
6
import { rowHeaders, ContextMenuPlugin, RowHeaderPlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';
7
import type { ContextMenuConfig } from '@/release/plugins/context-menu/context-menu.types';
8
const { createRandomData } = useRandomData();
9
const { isDark } = currentTheme();
10

11
const grid = document.querySelector('revo-grid');
12
if (grid) {
13
  grid.source = createRandomData(100);
14
  // Define columns
15
  grid.columns = [
16
    {
17
      name: '🆔 ID',
18
      prop: 'id',
19
    },
20
    {
21
      name: '🍎 Fruit',
22
      prop: 'name',
23
      size: 180,
24
    },
25
    {
26
      name: '💰 Price',
27
      prop: 'price',
28
    },
29
  ];
30
  // Define plugin
31
  grid.plugins = [RowHeaderPlugin, ContextMenuPlugin, ColumnStretchPlugin];
32
  grid.rowHeaders = rowHeaders({ showHeaderFocusBtn: true });
33

34
  const rowContextMenu: ContextMenuConfig = {
35
    items: [
36
      {
37
        name: 'Add row above',
38
        action: (_, cell) => {
39
          if (!cell) {
40
            return;
41
          }
42
          grid.source.splice(cell.y, 0, {
43
            id: 0,
44
            name: 'New row',
45
            price: 0,
46
          });
47
          grid.source = [...grid.source];
48
        },
49
      },
50
      {
51
        name: 'Add row below',
52
        action: (_, cell) => {
53
          if (!cell) {
54
            return;
55
          }
56
          grid.source.splice(cell.y + 1, 0, {
57
            id: 0,
58
            name: 'New row',
59
            price: 0,
60
          });
61
          grid.source = [...grid.source];
62
        },
63
      },
64
      {
65
        name: (focused, range) => {
66
          if (!focused) {
67
            return '';
68
          }
69
          if (!range) {
70
            range = {
71
              x: 0,
72
              y: focused.y,
73
              x1: 0,
74
              y1: focused.y,
75
            };
76
          }
77
          const rows = range.y1 - range.y + 1;
78
          if (!range || rows < 2) {
79
            return 'Delete row';
80
          }
81
          return `Delete ${rows} rows`;
82
        },
83
        action: (_, focused, range) => {
84
          if (!focused) {
85
            return;
86
          }
87

88
          if (!range) {
89
            range = {
90
              x: 0,
91
              y: focused.y,
92
              x1: 0,
93
              y1: focused.y,
94
            };
95
          }
96

97
          const rows = range.y1 - range.y + 1;
98
          grid.source.splice(range.y, rows);
99
          grid.source = [...grid.source];
100
        },
101
      }
102
    ]
103
  };
104
  grid.additionalData = {
105
    // Define context menu
106
    rowContextMenu,
107
    stretch: 'all'
108
  };
109

110
  // Set theme
111
  grid.theme = isDark() ? 'darkCompact' : 'compact';
112
}