Handsontable

a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery

Context Menu

This page shows how to use and configure right-click context menu with Handsontable:

dependencies
context menu with default options
context menu with specific options
context menu with fully custom configuration

Dependencies

Context Menu feature has a required dependency on jQuery contextMenu plugin (tested with version 1.5.25). This plugin is included in jquery.handsontable.full.js.

jQuery contextMenu plugin has optional dependency on jQuery UI Position, which makes sure that the menu is always visible in the viewport. This plugin is NOT included in jquery.handsontable.full.js. Please report in GitHub issues board if you wish it was added to jquery.handsontable.full.js.


        <script src="lib/jQuery-contextMenu/jquery.contextMenu.js"></script>
        <link rel="stylesheet" media="screen"
        href="lib/jQuery-contextMenu/jquery.contextMenu.css">

        <!-- optional -->
        <script src="lib/jQuery-contextMenu/jquery.ui.position.js"></script>

Context Menu with default options

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

Edit in jsFiddle

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

Edit in jsFiddle

Context Menu with with fully custom configuration

For greatest configurability, you use contextMenu option as a configuration object as described in jQuery contextMenu documentation.

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.

Edit in jsFiddle

For more examples, head back to the main page.