Tutorial: Context menu

Context menu

Edit this page

Context menu with default options

To run the basic configuration of the Context Menu, just set the contextMenu option to true.

From version 0.11, context menu also works for row and column headers. When the context menu for the row header is opened, the column options are disabled. Likewise, when the context menu for the column header is opened, the row options are disabled

Context menu with specific options

You can limit options available in the context menu using contextMenu option as an array of strings:

  • row_above
  • row_below
  • hsep1
  • col_left
  • col_right
  • hsep2
  • remove_row
  • remove_col
  • hsep3
  • undo
  • redo
  • make_read_only
  • alignment
  • borders (with Custom Borders turned on)
  • commentsAddEdit, commentsRemove (with Comments turned on)

Context menu with fully custom configuration

This example shows how to set custom text, how to disable "Remove row" and "Insert row above" for the first row and how to add your own option.

Copy-paste configuration

Copy and Paste feature are available in Handsontable by default, but only as key shortcuts (Ctrl (Cmd) + C and Ctrl (Cmd) + V respectively).
This plugin makes them available also as a clickable options in the context menu. Unfortunately, due to the browser's security restrictions, Handsontable is forced to use a third-party flash-based library. We chose to use ZeroClipboard - it adds a small invisible flash clip to your website, allowing the user to click on it, and thus save data to the clipboard.

Please note, that our Copy/Paste Context Menu plugin requires some additional preparation:

  • ZeroClipboard.js must be present on your server and included in your website's script tag.
  • ZeroClipboard.swf must also be present at your server

To configure Handsontable to use this plugin you need to add a contextMenuCopyPaste config item to your Hansontable instance.

It can be set to:

  • true - if the ZeroClipboard.swf file is placed in the same directory as the ZeroClipboard.js, or
  • {swfPath: [path to the swf file]}

<script src="/bower_components/zeroclipboard/dist/ZeroClipboard.min.js"></script>