Select cell type

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

Overview

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

Usage

The select editor should be considered an example of how to write editors rather than used as a fully-featured editor. It is a much simpler form of the Dropdown editor. We recommend that you use the latter in your projects.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example1');
8

9
new Handsontable(container, {
10
  data: [
11
    ['2017', 'Honda', 10],
12
    ['2018', 'Toyota', 20],
13
    ['2019', 'Nissan', 30],
14
  ],
15
  colWidths: [50, 70, 50],
16
  colHeaders: true,
17
  columns: [
18
    {},
19
    {
20
      type: 'select',
21
      selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],
22
    },
23
    {},
24
  ],
25
  autoWrapRow: true,
26
  autoWrapCol: true,
27
  height: 'auto',
28
  licenseKey: 'non-commercial-and-evaluation',
29
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example1')!;
8

9
new Handsontable(container, {
10
  data: [
11
    ['2017', 'Honda', 10],
12
    ['2018', 'Toyota', 20],
13
    ['2019', 'Nissan', 30],
14
  ],
15
  colWidths: [50, 70, 50],
16
  colHeaders: true,
17
  columns: [
18
    {},
19
    {
20
      type: 'select',
21
      selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],
22
    },
23
    {},
24
  ],
25
  autoWrapRow: true,
26
  autoWrapCol: true,
27
  height: 'auto',
28
  licenseKey: 'non-commercial-and-evaluation',
29
});