Dropdown cell type

Collect user input with a searchable list of choices, by using the dropdown cell type.

The dropdown cell type lets users select a value from a predefined list. It is a simplified version of autocomplete with strict mode always on.

Overview

The dropdown cell type is based on an autocomplete cell type and can also be searchable.

Usage

This example shows the usage of the dropdown feature. Dropdown is based on Autocomplete cell type. All options used by autocomplete cell type apply to dropdown as well.

Internally, cell { type: 'dropdown' } is equivalent to cell { type:'autocomplete', strict: true, filter: false }. Therefore you can think of dropdown as a searchable <select>.

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-dropdown-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
    ['Tesla', 2017, 'black', 'black'],
17
    ['Nissan', 2018, 'blue', 'blue'],
18
    ['Chrysler', 2019, 'yellow', 'black'],
19
    ['Volvo', 2020, 'white', 'gray'],
20
  ];
21

22
  readonly gridSettings: GridSettings = {
23
    height: 'auto',
24
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
25
    autoWrapRow: true,
26
    autoWrapCol: true,
27
    columns: [
28
      {},
29
      { type: 'numeric' },
30
      {
31
        type: 'dropdown',
32
        source: [
33
          'yellow',
34
          'red',
35
          'orange',
36
          'green',
37
          'blue',
38
          'gray',
39
          'black',
40
          'white',
41
        ],
42
      },
43
      {
44
        type: 'dropdown',
45
        source: [
46
          'yellow',
47
          'red',
48
          'orange',
49
          'green',
50
          'blue',
51
          'gray',
52
          'black',
53
          'white',
54
        ],
55
      },
56
    ]
57
  };
58
}
59

60
/* end-file */
61

62

63

64
/* file: app.config.ts */
65
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
66
import { registerAllModules } from 'handsontable/registry';
67
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
68

69
// register Handsontable's modules
70
registerAllModules();
71

72
export const appConfig: ApplicationConfig = {
73
  providers: [
74
    provideZoneChangeDetection({ eventCoalescing: true }),
75
    {
76
      provide: HOT_GLOBAL_CONFIG,
77
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
78
    },
79
  ],
80
};
81
/* end-file */

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

The `source` option

The source option can be provided in two formats:

Array of values

You can provide the source option as an array of values that will be used as the dropdown options.

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example2-dropdown-cell-type',
7
  standalone: true,
8
  imports: [HotTableModule],
9
  template: ` <div>
10
    <hot-table [data]="shipmentKVData" [settings]="gridSettings"></hot-table>
11
  </div>`
12
})
13
export class AppComponent {
14
  readonly shipmentKVData = [
15
    ['Electronics and Gadgets','Los Angeles International Airport'],
16
    ['Medical Supplies', 'John F. Kennedy International Airport'],
17
    ['Auto Parts', 'Chicago O\'Hare International Airport'],
18
    ['Fresh Produce', 'London Heathrow Airport'],
19
    ['Textiles', 'Charles de Gaulle Airport'],
20
    ['Industrial Equipment', 'Dubai International Airport'],
21
    ['Pharmaceuticals', 'Tokyo Haneda Airport'],
22
    ['Consumer Goods', 'Beijing Capital International Airport'],
23
    ['Machine Parts', 'Singapore Changi Airport'],
24
    ['Food Products', 'Amsterdam Airport Schiphol']
25
  ];
26

27
  readonly airportKVData = [
28
    'Los Angeles International Airport',
29
    'John F. Kennedy International Airport',
30
    'Chicago O\'Hare International Airport',
31
    'London Heathrow Airport',
32
    'Charles de Gaulle Airport',
33
    'Dubai International Airport',
34
    'Tokyo Haneda Airport',
35
    'Beijing Capital International Airport',
36
    'Singapore Changi Airport',
37
    'Amsterdam Airport Schiphol',
38
    'Frankfurt Airport',
39
    'Seoul Incheon International Airport',
40
    'Toronto Pearson International Airport',
41
    'Madrid-Barajas Airport',
42
    'Bangkok Suvarnabhumi Airport',
43
    'Munich International Airport',
44
    'Sydney Kingsford Smith Airport',
45
    'Barcelona-El Prat Airport',
46
    'Kuala Lumpur International Airport',
47
    'Zurich Airport'
48
  ];
49

50
  readonly gridSettings: GridSettings = {
51
    height: 'auto',
52
    autoWrapRow: true,
53
    autoWrapCol: true,
54
    columns: [
55
      {
56
        title: 'Shipment',
57
      },
58
      {
59
        type: 'dropdown',
60
        source: this.airportKVData,
61
        title: 'Airport',
62
      },
63
    ],
64
  };
65
}
66
/* end-file */
67

68

69

70
/* file: app.config.ts */
71
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
72
import { registerAllModules } from 'handsontable/registry';
73
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
74

75
// register Handsontable's modules
76
registerAllModules();
77

78
export const appConfig: ApplicationConfig = {
79
  providers: [
80
    provideZoneChangeDetection({ eventCoalescing: true }),
81
    {
82
      provide: HOT_GLOBAL_CONFIG,
83
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
84
    },
85
  ],
86
};
87
/* end-file */

1
<div>
2
  <example2-dropdown-cell-type></example2-dropdown-cell-type>
3
</div>

Array of objects

You can provide the source option as an array of objects with key and value properties. The value property will be used as the dropdown option, while the entire object will be used as the value of the cell.

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example3-dropdown-cell-type',
7
  standalone: true,
8
  imports: [HotTableModule],
9
  template: ` <div>
10
    <hot-table [data]="shipmentKVData" [settings]="gridSettings"></hot-table>
11
  </div>`
12
})
13
export class AppComponent {
14
  readonly shipmentKVData = [
15
    [
16
      'Electronics and Gadgets',
17
      { key: 'LAX', value: 'Los Angeles International Airport' },
18
    ],
19
    [
20
      'Medical Supplies',
21
      { key: 'JFK', value: 'John F. Kennedy International Airport' }
22
    ],
23
    [
24
      'Auto Parts',
25
      { key: 'ORD', value: 'Chicago O\'Hare International Airport' }
26
    ],
27
    [
28
      'Fresh Produce',
29
      { key: 'LHR', value: 'London Heathrow Airport' }
30
    ],
31
    [
32
      'Textiles',
33
      { key: 'CDG', value: 'Charles de Gaulle Airport' }
34
    ],
35
    [
36
      'Industrial Equipment',
37
      { key: 'DXB', value: 'Dubai International Airport' }
38
    ],
39
    [
40
      'Pharmaceuticals',
41
      { key: 'HND', value: 'Tokyo Haneda Airport' }
42
    ],
43
    [
44
      'Consumer Goods',
45
      { key: 'PEK', value: 'Beijing Capital International Airport' }
46
    ],
47
    [
48
      'Machine Parts',
49
      { key: 'SIN', value: 'Singapore Changi Airport' }
50
    ],
51
    [
52
      'Food Products',
53
      { key: 'AMS', value: 'Amsterdam Airport Schiphol' }
54
    ]
55
  ];
56

57
  readonly airportKVData = [
58
    { key: 'LAX', value: 'Los Angeles International Airport' },
59
    { key: 'JFK', value: 'John F. Kennedy International Airport' },
60
    { key: 'ORD', value: 'Chicago O\'Hare International Airport' },
61
    { key: 'LHR', value: 'London Heathrow Airport' },
62
    { key: 'CDG', value: 'Charles de Gaulle Airport' },
63
    { key: 'DXB', value: 'Dubai International Airport' },
64
    { key: 'HND', value: 'Tokyo Haneda Airport' },
65
    { key: 'PEK', value: 'Beijing Capital International Airport' },
66
    { key: 'SIN', value: 'Singapore Changi Airport' },
67
    { key: 'AMS', value: 'Amsterdam Airport Schiphol' },
68
    { key: 'FRA', value: 'Frankfurt Airport' },
69
    { key: 'ICN', value: 'Seoul Incheon International Airport' },
70
    { key: 'YYZ', value: 'Toronto Pearson International Airport' },
71
    { key: 'MAD', value: 'Madrid-Barajas Airport' },
72
    { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },
73
    { key: 'MUC', value: 'Munich International Airport' },
74
    { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },
75
    { key: 'BCN', value: 'Barcelona-El Prat Airport' },
76
    { key: 'KUL', value: 'Kuala Lumpur International Airport' },
77
    { key: 'ZRH', value: 'Zurich Airport' }
78
  ];
79

80
  readonly gridSettings: GridSettings = {
81
    height: 'auto',
82
    autoWrapRow: true,
83
    autoWrapCol: true,
84
    columns: [
85
      {
86
        title: 'Shipment',
87
      },
88
      {
89
        type: 'dropdown',
90
        source: this.airportKVData,
91
        title: 'Airport',
92
      },
93
    ],
94
  };
95
}
96
/* end-file */
97

98

99

100
/* file: app.config.ts */
101
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
102
import { registerAllModules } from 'handsontable/registry';
103
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
104

105
// register Handsontable's modules
106
registerAllModules();
107

108
export const appConfig: ApplicationConfig = {
109
  providers: [
110
    provideZoneChangeDetection({ eventCoalescing: true }),
111
    {
112
      provide: HOT_GLOBAL_CONFIG,
113
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
114
    },
115
  ],
116
};
117
/* end-file */

1
<div>
2
  <example3-dropdown-cell-type></example3-dropdown-cell-type>
3
</div>

API methods

When working with object-based dropdown data, you can use methods like getSourceData(), getSourceDataAtCell(), getSourceDataAtRow() etc., to get the data in its original object format with both key and value properties. The getData() method will return only the value property’s content.

By default, the dropdown list matches the width of the edited cell, so long options can be truncated. To let the list expand to fit its longest option, set trimDropdown to false.

Setting	Description
`true` (default)	Match the dropdown list’s width to the edited cell.
`false`	Scale the dropdown list’s width to its longest option.

In the example below, the Department (default) column trims the list to the cell, while the Department (full width) column expands it. Open a cell in each column to compare.

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
4

5
const departments = [
6
  'Engineering and Platform Infrastructure',
7
  'Marketing and Brand Communications',
8
  'Financial Planning and Analysis',
9
  'People Operations and Talent Acquisition',
10
  'Customer Success and Enterprise Accounts',
11
];
12

13
@Component({
14
  selector: 'example4-dropdown-cell-type',
15
  standalone: true,
16
  imports: [HotTableModule],
17
  template: ` <div>
18
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
19
  </div>`,
20
})
21
export class AppComponent {
22

23
  readonly data = [
24
    ['Ana García', departments[0], departments[0]],
25
    ['James Okafor', departments[1], departments[1]],
26
    ['Li Wei', departments[2], departments[2]],
27
    ['Sofia Rossi', departments[3], departments[3]],
28
  ];
29

30
  readonly gridSettings: GridSettings = {
31
    height: 'auto',
32
    colHeaders: ['Employee', 'Department (default)', 'Department (full width)'],
33
    autoWrapRow: true,
34
    autoWrapCol: true,
35
    columns: [
36
      {},
37
      {
38
        type: 'dropdown',
39
        source: departments,
40
        width: 140,
41
        // trim the list to the cell's width (default)
42
        trimDropdown: true,
43
      },
44
      {
45
        type: 'dropdown',
46
        source: departments,
47
        width: 140,
48
        // expand the list to fit its longest option
49
        trimDropdown: false,
50
      },
51
    ]
52
  };
53
}
54

55
/* end-file */
56

57

58

59
/* file: app.config.ts */
60
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
61
import { registerAllModules } from 'handsontable/registry';
62
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
63

64
// register Handsontable's modules
65
registerAllModules();
66

67
export const appConfig: ApplicationConfig = {
68
  providers: [
69
    provideZoneChangeDetection({ eventCoalescing: true }),
70
    {
71
      provide: HOT_GLOBAL_CONFIG,
72
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
73
    },
74
  ],
75
};
76
/* end-file */

1
<div>
2
  <example4-dropdown-cell-type></example4-dropdown-cell-type>
3
</div>

By default, the dropdown list shows up to 10 options before a scrollbar appears. To change how many options are visible at once, set visibleRows to the number of options you want to show.

In the example below, the Job title (default) column uses the default height, while the Job title (compact) column shows three options at a time. Open a cell in each column to compare.

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
4

5
const jobTitles = [
6
  'Software Engineer',
7
  'Senior Software Engineer',
8
  'Staff Engineer',
9
  'Engineering Manager',
10
  'Product Manager',
11
  'Product Designer',
12
  'Data Analyst',
13
  'Data Scientist',
14
  'Marketing Specialist',
15
  'Account Executive',
16
  'Customer Success Manager',
17
  'Finance Analyst',
18
  'Recruiter',
19
  'Office Manager',
20
];
21

22
@Component({
23
  selector: 'example5-dropdown-cell-type',
24
  standalone: true,
25
  imports: [HotTableModule],
26
  template: ` <div>
27
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
28
  </div>`,
29
})
30
export class AppComponent {
31

32
  readonly data = [
33
    ['Ana García', 'Senior Software Engineer', 'Senior Software Engineer'],
34
    ['James Okafor', 'Product Manager', 'Product Manager'],
35
    ['Li Wei', 'Data Scientist', 'Data Scientist'],
36
    ['Sofia Rossi', 'Account Executive', 'Account Executive'],
37
  ];
38

39
  readonly gridSettings: GridSettings = {
40
    height: 'auto',
41
    colHeaders: ['Employee', 'Job title (default)', 'Job title (compact)'],
42
    autoWrapRow: true,
43
    autoWrapCol: true,
44
    columns: [
45
      {},
46
      {
47
        type: 'dropdown',
48
        source: jobTitles,
49
      },
50
      {
51
        type: 'dropdown',
52
        source: jobTitles,
53
        // show 3 options at a time, then scroll
54
        visibleRows: 3,
55
      },
56
    ]
57
  };
58
}
59

60
/* end-file */
61

62

63

64
/* file: app.config.ts */
65
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
66
import { registerAllModules } from 'handsontable/registry';
67
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
68

69
// register Handsontable's modules
70
registerAllModules();
71

72
export const appConfig: ApplicationConfig = {
73
  providers: [
74
    provideZoneChangeDetection({ eventCoalescing: true }),
75
    {
76
      provide: HOT_GLOBAL_CONFIG,
77
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
78
    },
79
  ],
80
};
81
/* end-file */

1
<div>
2
  <example5-dropdown-cell-type></example5-dropdown-cell-type>
3
</div>

Result

After configuring the dropdown cell type, cells display a button that opens a dropdown list of options. Users can search the list by typing. Only values from the source list are accepted. The selected value is stored in the data source.

Keyboard shortcuts

The dropdown cell editor is an autocomplete editor with strict mode always on, so it uses the same keyboard shortcuts as Autocomplete strict mode. See the keyboard shortcuts reference for details.

Related guides

Autocomplete cell type

Cell type

Select cell type

Configuration options

Core methods

Hooks