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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example1-select-cell-type',
7
  standalone: true,
8
  imports: [HotTableModule],
9
  template: ` <div>
10
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
11
  </div>`,
12
})
13
export class AppComponent {
14

15
  readonly data = [
16
    ['2017', 'Honda', 10],
17
    ['2018', 'Toyota', 20],
18
    ['2019', 'Nissan', 30],
19
  ];
20

21
  readonly gridSettings: GridSettings = {
22
    height: 'auto',
23
    colWidths: [50, 70, 50],
24
    colHeaders: true,
25
    autoWrapRow: true,
26
    autoWrapCol: true,
27
    columns: [
28
      {},
29
      {
30
        type: 'select',
31
        selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],
32
      },
33
      {},
34
    ]
35
  };
36
}
37
/* end-file */
38

39

40

41
/* file: app.config.ts */
42
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
43
import { registerAllModules } from 'handsontable/registry';
44
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
45

46
// register Handsontable's modules
47
registerAllModules();
48

49
export const appConfig: ApplicationConfig = {
50
  providers: [
51
    provideZoneChangeDetection({ eventCoalescing: true }),
52
    {
53
      provide: HOT_GLOBAL_CONFIG,
54
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
55
    },
56
  ],
57
};
58
/* end-file */

1
<div>
2
  <example1-select-cell-type></example1-select-cell-type>
3
</div>

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