Column menu

Display a configurable dropdown menu, triggered by clicking on a button in a column header.

Overview

The DropdownMenu plugin enables you to add a configurable dropdown menu to the table’s column headers. The dropdown menu acts like the context menu but is triggered by clicking the button in the header.

Quick setup

To enable the plugin, set the dropdownMenu configuration option to true when initializing Handsontable.

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],
12
        ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],
13
        ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],
14
      ]}
15
      colHeaders={true}
16
      dropdownMenu={true}
17
      height="auto"
18
      autoWrapRow={true}
19
      autoWrapCol={true}
20
      licenseKey="non-commercial-and-evaluation"
21
    />
22
  );
23
};
24

25
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],
12
        ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],
13
        ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],
14
      ]}
15
      colHeaders={true}
16
      dropdownMenu={true}
17
      height="auto"
18
      autoWrapRow={true}
19
      autoWrapCol={true}
20
      licenseKey="non-commercial-and-evaluation"
21
    />
22
  );
23
};
24

25
export default ExampleComponent;

Plugin configuration

To use the default dropdown contents, set it to true, or to customize it by setting it to use a custom list of actions. For the available entry options reference, see the Context Menu demo.

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],
12
        ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],
13
        ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],
14
      ]}
15
      colHeaders={true}
16
      autoWrapRow={true}
17
      autoWrapCol={true}
18
      licenseKey="non-commercial-and-evaluation"
19
      height="auto"
20
      dropdownMenu={['remove_col', '---------', 'make_read_only', '---------', 'alignment']}
21
    />
22
  );
23
};
24

25
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],
12
        ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],
13
        ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],
14
      ]}
15
      colHeaders={true}
16
      autoWrapRow={true}
17
      autoWrapCol={true}
18
      licenseKey="non-commercial-and-evaluation"
19
      height="auto"
20
      dropdownMenu={['remove_col', '---------', 'make_read_only', '---------', 'alignment']}
21
    />
22
  );
23
};
24

25
export default ExampleComponent;

When the Filters plugin is enabled, it adds the following items to the dropdown menu. These items build the filtering interface and work only in the dropdown menu, not in the context menu.

Key	Action
`filter_by_condition`	Add the first filter condition.
`filter_by_condition2`	Add the second filter condition. Required for the second condition’s select element.
`filter_operators`	Select the operator (And or Or) that joins the two conditions.
`filter_by_value`	Select the values to keep.
`filter_action_bar`	Apply or cancel the filter with the OK and Cancel buttons.

For a complete filtering guide, see Column filter. For filter-menu keyboard and pointer behavior, see Navigate the filter menu.

Use keyboard shortcuts to navigate the column menu after you open it:

Press Arrow up and Arrow down to move between menu items.
Press Arrow right to open a submenu in left-to-right layouts. Press Arrow left to close it and return to the parent menu.
Press Arrow left to open a submenu in right-to-left layouts. Press Arrow right to close it and return to the parent menu.
Press Home, Ctrl+Arrow up on Windows, or Cmd+Arrow up on macOS to move to the first available item.
Press End, Ctrl+Arrow down on Windows, or Cmd+Arrow down on macOS to move to the last available item.
Press Page Up and Page Down to move by one visible menu page.
Press Enter or Space to run the selected menu item or open its submenu.
Press Escape to close the column menu or active submenu.

Filter controls inside the column menu use additional navigation rules. For filter-menu keyboard and pointer behavior, see Navigate the filter menu.

The Shift+Alt+↓ shortcut works from a data cell. The Ctrl/⌘+Enter shortcut works only when a column header is focused. Enable navigableHeaders: true to move focus onto headers with the arrow keys. For more details, see Keyboard navigation.

Windows	macOS	Action	Excel	Sheets
`Shift`+`Alt`+`↓`	`⇧`+`⌥`+`↓`	Open the column menu. Works in any cell, if the respective column header displays the menu button.	✗	✗
`Ctrl`+`Enter`	`⌘`+`Enter`	Open the column menu. Works only when a column header with the column menu button is focused.	✗	✗