JavaScript Data Grid Context menu

Quickly access contextual actions such as removing rows, inserting columns or copying data, by opening the context menu.

Context menu with default options

Enable the context menu with the default configuration:

contextMenu: true,

To see the context menu, right-click on a cell:

    Context menu with specific options

    You can define items in the menu by passing the contextMenu option as an array of keys which are strings:

    Key Action, required plugins
    row_above Insert a row above
    row_below Insert a row below
    col_left Insert a column to the left
    col_right Insert a column to the right
    --------- The menu items separator
    remove_row Remove the selected row
    clear_column Delete the data of the selected columns
    undo Undo the last action (UndoRedo)
    redo Redo the last action (UndoRedo)
    make_read_only Make the selected cells read-only
    alignment Align text
    cut Cut the contents of the selected cells to the system clipboard (CopyPaste)
    copy Copy the contents of the selected cells to the system clipboard (CopyPaste)
    copy_with_column_headers Copy the contents of the selected cells and their nearest column headers (CopyPaste)
    copy_with_column_group_headers Copy the contents of the selected cells and all their related column headers (CopyPaste, NestedHeaders)
    copy_column_headers_only Copy the contents of column headers that are nearest to the selected cells (CopyPaste)
    freeze_column Freeze the selected column (ManualColumnFreeze)
    unfreeze_column Unfreeze the selected column (ManualColumnFreeze)
    borders Add borders around the selected cells (CustomBorders)
    commentsAddEdit Add or edit a comment (Comments)
    commentsRemove Remove the comment (Comments)
    commentsReadOnly Make the comment read-only (Comments)
    mergeCells Merge or unmerge the selected cells (MergeCells)
    add_child Insert a child row (NestedRows)
    detach_from_parent Detach the selected row from its parent row (NestedRows)
    hidden_columns_hide Hide the selected columns (HiddenColumns)
    hidden_columns_show Show hidden columns (HiddenColumns)
    hidden_rows_hide Hide the selected rows (HiddenRows)
    hidden_rows_show Show hidden rows (HiddenRows)
    filter_by_condition Add a first filter condition (Filters)
    filter_by_condition2 Add a second filter condition (Filters)
    filter_operators Select a filter parameter (Filters)
    filter_by_value Add a filter value (Filters)
    filter_action_bar Apply the configured filter (Filters)

    To see the context menu, right-click on a cell:

      Context menu with a fully custom configuration

      This example shows how to:

      • add common callback for all options
      • dynamically disable option
      • set custom text for predefined option
      • add own custom option
      • add callback for specific option

      To see the context menu, right-click on a cell:

        Windows macOS Action Excel Sheets
        Arrow keys Arrow keys Move one available menu item up, down, left, or right
        Page Up Page Up Move to the first visible item of the context menu or submenu
        Page Down Page Down Move to the last visible item of the context menu or submenu
        Escape Escape Close the context menu or submenu
        Enter Enter Run the action of the selected menu item