Skip to content
Handsontable

Custom context menu in Vue 3

In this tutorial, you will add custom items to the Handsontable context menu in a Vue 3 application. You will learn to define menu items with labels and callback functions.

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

What you learned

  • How to enable the context menu in a Vue 3 Handsontable application.
  • How to define custom menu items with labels and callback functions.
  • How to restrict menu items to specific contexts using the contextMenu option.

Next steps