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
import '@fortawesome/fontawesome-free/css/all.min.css';
3
defineCustomElements();
4

5

6
import { currentTheme, useRandomData } from '../composables/useRandomData';
7
import { ContextMenuPlugin, RowHeaderPlugin, ColumnStretchPlugin, RowOddPlugin } from '@revolist/revogrid-pro';
8
const { createRandomData } = useRandomData();
9
const { isDark } = currentTheme();
10

11
// Buffer to store copied/cut row data
12
let rowBuffer: any = null;
13

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

37
  grid.additionalData = {
38
    // Define context menu
39
    rowContextMenu: {
40
      items: [
41
        {
42
          icon: 'fa-solid fa-copy',
43
          name: 'Copy row',
44
          action: (_, cell) => {
45
            if (!cell) return;
46
            rowBuffer = { ...grid.source[cell.y] };
47
          },
48
        },
49
        {
50
          icon: 'fa-solid fa-cut',
51
          name: 'Cut row',
52
          action: (_, cell) => {
53
            if (!cell) return;
54
            rowBuffer = { ...grid.source[cell.y] };
55
            grid.source.splice(cell.y, 1);
56
            grid.source = [...grid.source];
57
          },
58
        },
59
        {
60
          icon: 'fa-solid fa-paste',
61
          name: 'Paste row',
62
          hidden: () => !rowBuffer,
63
          action: (_, cell) => {
64
            if (!cell || !rowBuffer) return;
65
            const newRow = { ...rowBuffer };
66
            grid.source.splice(cell.y + 1, 0, newRow);
67
            grid.source = [...grid.source];
68
          },
69
        },
70
        {
71
          icon: 'fa-solid fa-arrow-up',
72
          name: 'Add row above',
73
          action: (_, cell) => {
74
            if (!cell) {
75
              return;
76
            }
77
            grid.source.splice(cell.y, 0, {
78
              id: 0,
79
              name: 'New row',
80
              price: 0,
81
            });
82
            grid.source = [...grid.source];
83
          },
84
        },
85
        {
86
          icon: 'fa-solid fa-arrow-down',
87
          name: 'Add row below',
88
          action: (_, cell) => {
89
            if (!cell) {
90
              return;
91
            }
92
            grid.source.splice(cell.y + 1, 0, {
93
              id: 0,
94
              name: 'New row',
95
              price: 0,
96
            });
97
            grid.source = [...grid.source];
98
          },
99
        },
100
        {
101
          icon: 'fa-solid fa-trash',
102
          name: (focused, range) => {
103
            if (!focused) {
104
              return '';
105
            }
106
            if (!range) {
107
              range = {
108
                x: 0,
109
                y: focused.y,
110
                x1: 0,
111
                y1: focused.y,
112
              };
113
            }
114
            const rows = range.y1 - range.y + 1;
115
            if (!range || rows < 2) {
116
              return 'Delete row';
117
            }
118
            return `Delete ${rows} rows`;
119
          },
120
          action: (_, focused, range) => {
121
            if (!focused) {
122
              return;
123
            }
124

125
            if (!range) {
126
              range = {
127
                x: 0,
128
                y: focused.y,
129
                x1: 0,
130
                y1: focused.y,
131
              };
132
            }
133

134
            const rows = range.y1 - range.y + 1;
135
            grid.source.splice(range.y, rows);
136
            grid.source = [...grid.source];
137
          },
138
        }
139
      ]
140
    },
141
    stretch: 'all'
142
  };
143

144
  // Set theme
145
  grid.theme = isDark() ? 'darkMaterial' : 'material';
146
}