Select cell type

Use the select cell type to collect user input with an HTML <select> element that creates a multi-item dropdown list.

The select cell type renders a native HTML <select> element. Consider using the dropdown cell type instead for autocomplete and search capabilities.

Overview

The select cell type is a simpler form of the dropdown cell type.

Usage

Note: The select editor is intended as a reference implementation for writing custom editors rather than as a fully-featured editor. It is a much simpler form of the Dropdown editor. Use the dropdown cell type in your projects for a better user experience.

In the demo below, the Make column uses the select cell type. The cell looks like plain text — there is no dropdown arrow to indicate it. A single click only selects the cell. To open the list of options, double-click the cell or press Enter.

1
<script setup lang="ts">
2
import { ref } from 'vue';
3
import { HotTable } from '@handsontable/vue3';
4
import { registerAllModules } from 'handsontable/registry';
5
import type { GridSettings } from 'handsontable/settings';
6

7
// register Handsontable's modules
8
registerAllModules();
9

10
const hotSettings = ref<GridSettings>({
11
  data: [
12
    ['2017', 'Honda', 10],
13
    ['2018', 'Toyota', 20],
14
    ['2019', 'Nissan', 30],
15
  ],
16
  colWidths: [70, 90, 80],
17
  colHeaders: ['Year', 'Make', 'In stock'],
18
  columns: [
19
    {},
20
    {
21
      type: 'select',
22
      selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],
23
    },
24
    {},
25
  ],
26
  autoWrapRow: true,
27
  autoWrapCol: true,
28
  height: 'auto',
29
  licenseKey: 'non-commercial-and-evaluation',
30
});
31
</script>
32

33
<template>
34
  <div id="example1">
35
    <HotTable :settings="hotSettings" />
36
  </div>
37
</template>

Result

After configuring the select cell type, cells in the Make column render a native HTML <select> element when the user activates them. The user picks a value from the list and the selected value is written to the data source.

Open the editor by pressing Enter or F2, or by double-clicking the cell. While the editor is open, use these keys to navigate the options:

↑ selects the previous option, and ↓ selects the next option. See the select editor keyboard shortcuts.
Enter confirms the selected option and closes the editor. Escape cancels the change and closes the editor.

The cell uses a native HTML <select> element, so you can also type a character to jump to the next option that starts with that character. This typeahead comes from the browser, and its exact behavior varies between browsers.

Related guides

Autocomplete cell type

Cell type

Dropdown cell type

Configuration options

Core methods