Skip to content
Handsontable dev

Custom context menu in Vue 3

Customize the context menu of your Vue 3 data grid, by creating a custom function for each menu item.

Example

The following example implements the @handsontable/vue3 component, adding a custom Context Menu.

Find out which Vue 3 versions are supported

JavaScript
import { defineComponent } from 'vue';
import { HotTable } from '@handsontable/vue3';
import { ContextMenu } from 'handsontable/plugins/contextMenu';
import { registerAllModules } from 'handsontable/registry';


// register Handsontable's modules
registerAllModules();


const ExampleComponent = defineComponent({
  data() {
    return {
      hotSettings: {
        data: [
          ['A1', 'B1', 'C1', 'D1', 'E1'],
          ['A2', 'B2', 'C2', 'D2', 'E2'],
          ['A3', 'B3', 'C3', 'D3', 'E3'],
          ['A4', 'B4', 'C4', 'D4', 'E4'],
          ['A5', 'B5', 'C5', 'D5', 'E5'],
        ],
        colHeaders: true,
        contextMenu: {
          items: {
            row_above: {
              name: 'Insert row above this one (custom name)'
            },
            row_below: {},
            separator: ContextMenu.SEPARATOR,
            clear_custom: {
              name: 'Clear all cells (custom)',
              callback() {
                this.clear();
              }
            }
          }
        },
        height: 'auto',
        autoWrapRow: true,
        autoWrapCol: true,
        licenseKey: 'non-commercial-and-evaluation'
      }
    };
  },
  components: {
    HotTable,
  }
});


export default ExampleComponent;
HTML
<div id="example1">
  <hot-table :settings="hotSettings"></hot-table>
</div>

Related guides

Context menu
Adding comments via the context menu
Clipboard: Context menu
Icon pack

Related blog articles

Customize Handsontable context menu

Configuration options

allowInsertColumn
allowInsertRow
allowRemoveColumn
allowRemoveRow
contextMenu
dropdownMenu

Hooks

afterContextMenuDefaultOptions
afterContextMenuHide
afterContextMenuShow
afterDropdownMenuDefaultOptions
afterDropdownMenuHide
afterDropdownMenuShow
afterOnCellContextMenu
beforeContextMenuSetItems
beforeContextMenuShow
beforeDropdownMenuSetItems
beforeDropdownMenuShow
beforeOnCellContextMenu

Plugins

ContextMenu