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.

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: [50, 70, 50],
17
  colHeaders: true,
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 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.

Related guides

Autocomplete cell type

Cell type

Dropdown cell type

Configuration options

Core methods