Dropdown cell type

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

Overview
Usage
The source option
- Array of values
- Array of objects
Related articles
- Related guides
- Related API reference

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>.

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --disable-host-check",
    "build": "ng build"
  },
  "dependencies": {
    "@angular/core": "^20.2.0",
    "@angular/common": "^20.2.0",
    "@angular/forms": "^20.2.0",
    "@angular/platform-browser": "^20.2.0",
    "@angular/platform-browser-dynamic": "^20.2.0",
    "@angular/animations": "^20.2.0",
    "@angular/compiler": "^20.2.0",
    "@angular/router": "^20.2.0",
    "numbro": "^2.4.0",
    "rxjs": "^7.8.0",
    "tslib": "^2.6.2",
    "zone.js": "~0.15.0",
    "hyperformula": "^3.0.0",
    "handsontable": "16.1",
    "@handsontable/angular-wrapper": "16.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^20.2.0",
    "@angular/localize": "latest",
    "@angular/service-worker": "latest",
    "@angular/cli": "^20.2.0",
    "@angular/compiler-cli": "^20.2.0",
    "@types/node": "~22.18.0",
    "ts-node": "~10.9.0",
    "typescript": "~5.8.0"
  }
}

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "sandbox": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "styles": [
              "node_modules/handsontable/styles/handsontable.min.css",
              "node_modules/handsontable/styles/ht-theme-main.min.css"
            ],
            "scripts": [],
            "preserveSymlinks": true,
            "allowedCommonJsDependencies": [
              "core-js",
              "@handsontable/pikaday",
              "numbro"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "buildTarget": "sandbox:build"
          },
          "configurations": {
            "production": {
              "buildTarget": "sandbox:build:production"
            },
            "development": {
              "buildTarget": "sandbox:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "sandbox:build"
          }
        }
      }
    }
  },
  "defaultProject": "sandbox",
  "cli": {
    "analytics": false
  }
}

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "disableTypeScriptVersionCheck": true,
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Handsontable for Angular example</title>
    <base href="." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div>
  <example1-dropdown-cell-type></example1-dropdown-cell-type>
</div>

  </body>
</html>

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

import { Component } from '@angular/core';
import { GridSettings } from '@handsontable/angular-wrapper';

@Component({
  selector: 'example1-dropdown-cell-type',
  standalone: false,
  template: ` <div>
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
  </div>`,
})
export class Example1DropdownCellTypeComponent {

  readonly data = [
    ['Tesla', 2017, 'black', 'black'],
    ['Nissan', 2018, 'blue', 'blue'],
    ['Chrysler', 2019, 'yellow', 'black'],
    ['Volvo', 2020, 'white', 'gray'],
  ];

  readonly gridSettings: GridSettings = {
    height: 'auto',
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
    autoWrapRow: true,
    autoWrapCol: true,
    columns: [
      {},
      { type: 'numeric' },
      {
        type: 'dropdown',
        source: [
          'yellow',
          'red',
          'orange',
          'green',
          'blue',
          'gray',
          'black',
          'white',
        ],
      },
      {
        type: 'dropdown',
        source: [
          'yellow',
          'red',
          'orange',
          'green',
          'blue',
          'gray',
          'black',
          'white',
        ],
      },
    ]
  };
}

import { NgModule, ApplicationConfig } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { registerAllModules } from 'handsontable/registry';
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
import { CommonModule } from '@angular/common';
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
import { Example1DropdownCellTypeComponent } from './app.component';

// register Handsontable's modules
registerAllModules();

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: {
        themeName: 'ht-theme-main',
        license: NON_COMMERCIAL_LICENSE,
      } as HotGlobalConfig
    }
  ],
};

@NgModule({
  imports: [ BrowserModule, HotTableModule, CommonModule ],
  declarations: [ Example1DropdownCellTypeComponent ],
  providers: [...appConfig.providers],
  bootstrap: [ Example1DropdownCellTypeComponent ]
})

export class AppModule { }

import { enableProdMode } from '@angular/core';

enableProdMode();

/* file: app.component.ts */
import { Component } from '@angular/core';
import { GridSettings } from '@handsontable/angular-wrapper';

@Component({
  selector: 'example1-dropdown-cell-type',
  standalone: false,
  template: ` <div>
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
  </div>`,
})
export class Example1DropdownCellTypeComponent {

  readonly data = [
    ['Tesla', 2017, 'black', 'black'],
    ['Nissan', 2018, 'blue', 'blue'],
    ['Chrysler', 2019, 'yellow', 'black'],
    ['Volvo', 2020, 'white', 'gray'],
  ];

  readonly gridSettings: GridSettings = {
    height: 'auto',
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
    autoWrapRow: true,
    autoWrapCol: true,
    columns: [
      {},
      { type: 'numeric' },
      {
        type: 'dropdown',
        source: [
          'yellow',
          'red',
          'orange',
          'green',
          'blue',
          'gray',
          'black',
          'white',
        ],
      },
      {
        type: 'dropdown',
        source: [
          'yellow',
          'red',
          'orange',
          'green',
          'blue',
          'gray',
          'black',
          'white',
        ],
      },
    ]
  };
}




/* file: app.module.ts */
import { NgModule, ApplicationConfig } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { registerAllModules } from 'handsontable/registry';
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
import { CommonModule } from '@angular/common';
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';

// register Handsontable's modules
registerAllModules();

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: {
        themeName: 'ht-theme-main',
        license: NON_COMMERCIAL_LICENSE,
      } as HotGlobalConfig
    }
  ],
};

@NgModule({
  imports: [ BrowserModule, HotTableModule, CommonModule ],
  declarations: [ Example1DropdownCellTypeComponent ],
  providers: [...appConfig.providers],
  bootstrap: [ Example1DropdownCellTypeComponent ]
})

export class AppModule { }


import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => { console.error(err) });

<script src="https://cdn.jsdelivr.net/npm/handsontable@16.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.1/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.1/styles/ht-theme-main.css" /> 
<script src="https://cdn.jsdelivr.net/npm/rxjs@6/bundles/rxjs.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/core-js@2/client/core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/zone.js@0.15.0/bundles/zone.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-core-primitives-signals.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-compiler.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-core.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-common.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-forms.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-platformBrowser.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-platformBrowserDynamic.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/handsontable-angular-wrapper.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/fixer.js"></script>

<div>
  <example1-dropdown-cell-type></example1-dropdown-cell-type>
</div>

/* file: app.component.ts */
import { Component } from '@angular/core';
import { GridSettings } from '@handsontable/angular-wrapper';

@Component({
  selector: 'example1-dropdown-cell-type',
  standalone: false,
  template: ` <div>
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
  </div>`,
})
export class Example1DropdownCellTypeComponent {

  readonly data = [
    ['Tesla', 2017, 'black', 'black'],
    ['Nissan', 2018, 'blue', 'blue'],
    ['Chrysler', 2019, 'yellow', 'black'],
    ['Volvo', 2020, 'white', 'gray'],
  ];

  readonly gridSettings: GridSettings = {
    height: 'auto',
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
    autoWrapRow: true,
    autoWrapCol: true,
    columns: [
      {},
      { type: 'numeric' },
      {
        type: 'dropdown',
        source: [
          'yellow',
          'red',
          'orange',
          'green',
          'blue',
          'gray',
          'black',
          'white',
        ],
      },
      {
        type: 'dropdown',
        source: [
          'yellow',
          'red',
          'orange',
          'green',
          'blue',
          'gray',
          'black',
          'white',
        ],
      },
    ]
  };
}




/* file: app.module.ts */
import { NgModule, ApplicationConfig } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { registerAllModules } from 'handsontable/registry';
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
import { CommonModule } from '@angular/common';
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
import { Example1DropdownCellTypeComponent } from './app.component';

// register Handsontable's modules
registerAllModules();

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: {
        themeName: 'ht-theme-main',
        license: NON_COMMERCIAL_LICENSE,
      } as HotGlobalConfig
    }
  ],
};

@NgModule({
  imports: [ BrowserModule, HotTableModule, CommonModule ],
  declarations: [ Example1DropdownCellTypeComponent ],
  providers: [...appConfig.providers],
  bootstrap: [ Example1DropdownCellTypeComponent ]
})

export class AppModule { }

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.

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --disable-host-check",
    "build": "ng build"
  },
  "dependencies": {
    "@angular/core": "^20.2.0",
    "@angular/common": "^20.2.0",
    "@angular/forms": "^20.2.0",
    "@angular/platform-browser": "^20.2.0",
    "@angular/platform-browser-dynamic": "^20.2.0",
    "@angular/animations": "^20.2.0",
    "@angular/compiler": "^20.2.0",
    "@angular/router": "^20.2.0",
    "numbro": "^2.4.0",
    "rxjs": "^7.8.0",
    "tslib": "^2.6.2",
    "zone.js": "~0.15.0",
    "hyperformula": "^3.0.0",
    "handsontable": "16.1",
    "@handsontable/angular-wrapper": "16.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^20.2.0",
    "@angular/localize": "latest",
    "@angular/service-worker": "latest",
    "@angular/cli": "^20.2.0",
    "@angular/compiler-cli": "^20.2.0",
    "@types/node": "~22.18.0",
    "ts-node": "~10.9.0",
    "typescript": "~5.8.0"
  }
}

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "sandbox": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "styles": [
              "node_modules/handsontable/styles/handsontable.min.css",
              "node_modules/handsontable/styles/ht-theme-main.min.css"
            ],
            "scripts": [],
            "preserveSymlinks": true,
            "allowedCommonJsDependencies": [
              "core-js",
              "@handsontable/pikaday",
              "numbro"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "buildTarget": "sandbox:build"
          },
          "configurations": {
            "production": {
              "buildTarget": "sandbox:build:production"
            },
            "development": {
              "buildTarget": "sandbox:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "sandbox:build"
          }
        }
      }
    }
  },
  "defaultProject": "sandbox",
  "cli": {
    "analytics": false
  }
}

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "disableTypeScriptVersionCheck": true,
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Handsontable for Angular example</title>
    <base href="." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div>
  <example2-dropdown-cell-type></example2-dropdown-cell-type>
</div>

  </body>
</html>

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

import { Component } from '@angular/core';
import { GridSettings } from '@handsontable/angular-wrapper';

@Component({
  selector: 'example2-dropdown-cell-type',
  standalone: false,
  template: ` <div>
    <hot-table [data]="shipmentKVData" [settings]="gridSettings"></hot-table>
  </div>`
})
export class Example2DropdownCellTypeComponent {
  readonly shipmentKVData = [
    ['Electronics and Gadgets','Los Angeles International Airport'],
    ['Medical Supplies', 'John F. Kennedy International Airport'],
    ['Auto Parts', 'Chicago O\'Hare International Airport'],
    ['Fresh Produce', 'London Heathrow Airport'],
    ['Textiles', 'Charles de Gaulle Airport'],
    ['Industrial Equipment', 'Dubai International Airport'],
    ['Pharmaceuticals', 'Tokyo Haneda Airport'],
    ['Consumer Goods', 'Beijing Capital International Airport'],
    ['Machine Parts', 'Singapore Changi Airport'],
    ['Food Products', 'Amsterdam Airport Schiphol']
  ];

  readonly airportKVData = [
    'Los Angeles International Airport',
    'John F. Kennedy International Airport',
    'Chicago O\'Hare International Airport',
    'London Heathrow Airport',
    'Charles de Gaulle Airport',
    'Dubai International Airport',
    'Tokyo Haneda Airport',
    'Beijing Capital International Airport',
    'Singapore Changi Airport',
    'Amsterdam Airport Schiphol',
    'Frankfurt Airport',
    'Seoul Incheon International Airport',
    'Toronto Pearson International Airport',
    'Madrid-Barajas Airport',
    'Bangkok Suvarnabhumi Airport',
    'Munich International Airport',
    'Sydney Kingsford Smith Airport',
    'Barcelona-El Prat Airport',
    'Kuala Lumpur International Airport',
    'Zurich Airport'
  ];

  readonly gridSettings: GridSettings = {
    height: 'auto',
    autoWrapRow: true,
    autoWrapCol: true,
    columns: [
      {
        title: 'Shipment',
      },
      {
        type: 'dropdown',
        source: this.airportKVData,
        title: 'Airport',
      },
    ],
  };
}

import { NgModule, ApplicationConfig } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { registerAllModules } from 'handsontable/registry';
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
import { CommonModule } from '@angular/common';
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
import { Example2DropdownCellTypeComponent } from './app.component';

// register Handsontable's modules
registerAllModules();

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: {
        themeName: 'ht-theme-main',
        license: NON_COMMERCIAL_LICENSE,
      } as HotGlobalConfig
    }
  ],
};

@NgModule({
  imports: [ BrowserModule, HotTableModule, CommonModule ],
  declarations: [ Example2DropdownCellTypeComponent ],
  providers: [...appConfig.providers],
  bootstrap: [ Example2DropdownCellTypeComponent ]
})

export class AppModule { }

import { enableProdMode } from '@angular/core';

enableProdMode();

/* file: app.component.ts */
import { Component } from '@angular/core';
import { GridSettings } from '@handsontable/angular-wrapper';

@Component({
  selector: 'example2-dropdown-cell-type',
  standalone: false,
  template: ` <div>
    <hot-table [data]="shipmentKVData" [settings]="gridSettings"></hot-table>
  </div>`
})
export class Example2DropdownCellTypeComponent {
  readonly shipmentKVData = [
    ['Electronics and Gadgets','Los Angeles International Airport'],
    ['Medical Supplies', 'John F. Kennedy International Airport'],
    ['Auto Parts', 'Chicago O\'Hare International Airport'],
    ['Fresh Produce', 'London Heathrow Airport'],
    ['Textiles', 'Charles de Gaulle Airport'],
    ['Industrial Equipment', 'Dubai International Airport'],
    ['Pharmaceuticals', 'Tokyo Haneda Airport'],
    ['Consumer Goods', 'Beijing Capital International Airport'],
    ['Machine Parts', 'Singapore Changi Airport'],
    ['Food Products', 'Amsterdam Airport Schiphol']
  ];

  readonly airportKVData = [
    'Los Angeles International Airport',
    'John F. Kennedy International Airport',
    'Chicago O\'Hare International Airport',
    'London Heathrow Airport',
    'Charles de Gaulle Airport',
    'Dubai International Airport',
    'Tokyo Haneda Airport',
    'Beijing Capital International Airport',
    'Singapore Changi Airport',
    'Amsterdam Airport Schiphol',
    'Frankfurt Airport',
    'Seoul Incheon International Airport',
    'Toronto Pearson International Airport',
    'Madrid-Barajas Airport',
    'Bangkok Suvarnabhumi Airport',
    'Munich International Airport',
    'Sydney Kingsford Smith Airport',
    'Barcelona-El Prat Airport',
    'Kuala Lumpur International Airport',
    'Zurich Airport'
  ];

  readonly gridSettings: GridSettings = {
    height: 'auto',
    autoWrapRow: true,
    autoWrapCol: true,
    columns: [
      {
        title: 'Shipment',
      },
      {
        type: 'dropdown',
        source: this.airportKVData,
        title: 'Airport',
      },
    ],
  };
}



/* file: app.module.ts */
import { NgModule, ApplicationConfig } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { registerAllModules } from 'handsontable/registry';
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
import { CommonModule } from '@angular/common';
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';

// register Handsontable's modules
registerAllModules();

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: {
        themeName: 'ht-theme-main',
        license: NON_COMMERCIAL_LICENSE,
      } as HotGlobalConfig
    }
  ],
};

@NgModule({
  imports: [ BrowserModule, HotTableModule, CommonModule ],
  declarations: [ Example2DropdownCellTypeComponent ],
  providers: [...appConfig.providers],
  bootstrap: [ Example2DropdownCellTypeComponent ]
})

export class AppModule { }


import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => { console.error(err) });

<script src="https://cdn.jsdelivr.net/npm/handsontable@16.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.1/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.1/styles/ht-theme-main.css" /> 
<script src="https://cdn.jsdelivr.net/npm/rxjs@6/bundles/rxjs.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/core-js@2/client/core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/zone.js@0.15.0/bundles/zone.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-core-primitives-signals.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-compiler.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-core.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-common.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-forms.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-platformBrowser.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-platformBrowserDynamic.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/handsontable-angular-wrapper.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/fixer.js"></script>

<div>
  <example2-dropdown-cell-type></example2-dropdown-cell-type>
</div>

/* file: app.component.ts */
import { Component } from '@angular/core';
import { GridSettings } from '@handsontable/angular-wrapper';

@Component({
  selector: 'example2-dropdown-cell-type',
  standalone: false,
  template: ` <div>
    <hot-table [data]="shipmentKVData" [settings]="gridSettings"></hot-table>
  </div>`
})
export class Example2DropdownCellTypeComponent {
  readonly shipmentKVData = [
    ['Electronics and Gadgets','Los Angeles International Airport'],
    ['Medical Supplies', 'John F. Kennedy International Airport'],
    ['Auto Parts', 'Chicago O\'Hare International Airport'],
    ['Fresh Produce', 'London Heathrow Airport'],
    ['Textiles', 'Charles de Gaulle Airport'],
    ['Industrial Equipment', 'Dubai International Airport'],
    ['Pharmaceuticals', 'Tokyo Haneda Airport'],
    ['Consumer Goods', 'Beijing Capital International Airport'],
    ['Machine Parts', 'Singapore Changi Airport'],
    ['Food Products', 'Amsterdam Airport Schiphol']
  ];

  readonly airportKVData = [
    'Los Angeles International Airport',
    'John F. Kennedy International Airport',
    'Chicago O\'Hare International Airport',
    'London Heathrow Airport',
    'Charles de Gaulle Airport',
    'Dubai International Airport',
    'Tokyo Haneda Airport',
    'Beijing Capital International Airport',
    'Singapore Changi Airport',
    'Amsterdam Airport Schiphol',
    'Frankfurt Airport',
    'Seoul Incheon International Airport',
    'Toronto Pearson International Airport',
    'Madrid-Barajas Airport',
    'Bangkok Suvarnabhumi Airport',
    'Munich International Airport',
    'Sydney Kingsford Smith Airport',
    'Barcelona-El Prat Airport',
    'Kuala Lumpur International Airport',
    'Zurich Airport'
  ];

  readonly gridSettings: GridSettings = {
    height: 'auto',
    autoWrapRow: true,
    autoWrapCol: true,
    columns: [
      {
        title: 'Shipment',
      },
      {
        type: 'dropdown',
        source: this.airportKVData,
        title: 'Airport',
      },
    ],
  };
}



/* file: app.module.ts */
import { NgModule, ApplicationConfig } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { registerAllModules } from 'handsontable/registry';
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
import { CommonModule } from '@angular/common';
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
import { Example2DropdownCellTypeComponent } from './app.component';

// register Handsontable's modules
registerAllModules();

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: {
        themeName: 'ht-theme-main',
        license: NON_COMMERCIAL_LICENSE,
      } as HotGlobalConfig
    }
  ],
};

@NgModule({
  imports: [ BrowserModule, HotTableModule, CommonModule ],
  declarations: [ Example2DropdownCellTypeComponent ],
  providers: [...appConfig.providers],
  bootstrap: [ Example2DropdownCellTypeComponent ]
})

export class AppModule { }

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.

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --disable-host-check",
    "build": "ng build"
  },
  "dependencies": {
    "@angular/core": "^20.2.0",
    "@angular/common": "^20.2.0",
    "@angular/forms": "^20.2.0",
    "@angular/platform-browser": "^20.2.0",
    "@angular/platform-browser-dynamic": "^20.2.0",
    "@angular/animations": "^20.2.0",
    "@angular/compiler": "^20.2.0",
    "@angular/router": "^20.2.0",
    "numbro": "^2.4.0",
    "rxjs": "^7.8.0",
    "tslib": "^2.6.2",
    "zone.js": "~0.15.0",
    "hyperformula": "^3.0.0",
    "handsontable": "16.1",
    "@handsontable/angular-wrapper": "16.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^20.2.0",
    "@angular/localize": "latest",
    "@angular/service-worker": "latest",
    "@angular/cli": "^20.2.0",
    "@angular/compiler-cli": "^20.2.0",
    "@types/node": "~22.18.0",
    "ts-node": "~10.9.0",
    "typescript": "~5.8.0"
  }
}

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "sandbox": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "styles": [
              "node_modules/handsontable/styles/handsontable.min.css",
              "node_modules/handsontable/styles/ht-theme-main.min.css"
            ],
            "scripts": [],
            "preserveSymlinks": true,
            "allowedCommonJsDependencies": [
              "core-js",
              "@handsontable/pikaday",
              "numbro"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "buildTarget": "sandbox:build"
          },
          "configurations": {
            "production": {
              "buildTarget": "sandbox:build:production"
            },
            "development": {
              "buildTarget": "sandbox:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "sandbox:build"
          }
        }
      }
    }
  },
  "defaultProject": "sandbox",
  "cli": {
    "analytics": false
  }
}

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "disableTypeScriptVersionCheck": true,
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Handsontable for Angular example</title>
    <base href="." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div>
  <example3-dropdown-cell-type></example3-dropdown-cell-type>
</div>

  </body>
</html>

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

import { Component } from '@angular/core';
import { GridSettings } from '@handsontable/angular-wrapper';

@Component({
  selector: 'example3-dropdown-cell-type',
  standalone: false,
  template: ` <div>
    <hot-table [data]="shipmentKVData" [settings]="gridSettings"></hot-table>
  </div>`
})
export class Example3DropdownCellTypeComponent {
  readonly shipmentKVData = [
    [
      'Electronics and Gadgets',
      { key: 'LAX', value: 'Los Angeles International Airport' },
    ],
    [
      'Medical Supplies',
      { key: 'JFK', value: 'John F. Kennedy International Airport' }
    ],
    [
      'Auto Parts',
      { key: 'ORD', value: 'Chicago O\'Hare International Airport' }
    ],
    [
      'Fresh Produce',
      { key: 'LHR', value: 'London Heathrow Airport' }
    ],
    [
      'Textiles',
      { key: 'CDG', value: 'Charles de Gaulle Airport' }
    ],
    [
      'Industrial Equipment',
      { key: 'DXB', value: 'Dubai International Airport' }
    ],
    [
      'Pharmaceuticals',
      { key: 'HND', value: 'Tokyo Haneda Airport' }
    ],
    [
      'Consumer Goods',
      { key: 'PEK', value: 'Beijing Capital International Airport' }
    ],
    [
      'Machine Parts',
      { key: 'SIN', value: 'Singapore Changi Airport' }
    ],
    [
      'Food Products',
      { key: 'AMS', value: 'Amsterdam Airport Schiphol' }
    ]
  ];

  readonly airportKVData = [
    { key: 'LAX', value: 'Los Angeles International Airport' },
    { key: 'JFK', value: 'John F. Kennedy International Airport' },
    { key: 'ORD', value: 'Chicago O\'Hare International Airport' },
    { key: 'LHR', value: 'London Heathrow Airport' },
    { key: 'CDG', value: 'Charles de Gaulle Airport' },
    { key: 'DXB', value: 'Dubai International Airport' },
    { key: 'HND', value: 'Tokyo Haneda Airport' },
    { key: 'PEK', value: 'Beijing Capital International Airport' },
    { key: 'SIN', value: 'Singapore Changi Airport' },
    { key: 'AMS', value: 'Amsterdam Airport Schiphol' },
    { key: 'FRA', value: 'Frankfurt Airport' },
    { key: 'ICN', value: 'Seoul Incheon International Airport' },
    { key: 'YYZ', value: 'Toronto Pearson International Airport' },
    { key: 'MAD', value: 'Madrid-Barajas Airport' },
    { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },
    { key: 'MUC', value: 'Munich International Airport' },
    { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },
    { key: 'BCN', value: 'Barcelona-El Prat Airport' },
    { key: 'KUL', value: 'Kuala Lumpur International Airport' },
    { key: 'ZRH', value: 'Zurich Airport' }
  ];

  readonly gridSettings: GridSettings = {
    height: 'auto',
    autoWrapRow: true,
    autoWrapCol: true,
    columns: [
      {
        title: 'Shipment',
      },
      {
        type: 'dropdown',
        source: this.airportKVData,
        title: 'Airport',
      },
    ],
  };
}

import { NgModule, ApplicationConfig } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { registerAllModules } from 'handsontable/registry';
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
import { CommonModule } from '@angular/common';
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
import { Example3DropdownCellTypeComponent } from './app.component';

// register Handsontable's modules
registerAllModules();

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: {
        themeName: 'ht-theme-main',
        license: NON_COMMERCIAL_LICENSE,
      } as HotGlobalConfig
    }
  ],
};

@NgModule({
  imports: [ BrowserModule, HotTableModule, CommonModule ],
  declarations: [ Example3DropdownCellTypeComponent ],
  providers: [...appConfig.providers],
  bootstrap: [ Example3DropdownCellTypeComponent ]
})

export class AppModule { }

import { enableProdMode } from '@angular/core';

enableProdMode();

/* file: app.component.ts */
import { Component } from '@angular/core';
import { GridSettings } from '@handsontable/angular-wrapper';

@Component({
  selector: 'example3-dropdown-cell-type',
  standalone: false,
  template: ` <div>
    <hot-table [data]="shipmentKVData" [settings]="gridSettings"></hot-table>
  </div>`
})
export class Example3DropdownCellTypeComponent {
  readonly shipmentKVData = [
    [
      'Electronics and Gadgets',
      { key: 'LAX', value: 'Los Angeles International Airport' },
    ],
    [
      'Medical Supplies',
      { key: 'JFK', value: 'John F. Kennedy International Airport' }
    ],
    [
      'Auto Parts',
      { key: 'ORD', value: 'Chicago O\'Hare International Airport' }
    ],
    [
      'Fresh Produce',
      { key: 'LHR', value: 'London Heathrow Airport' }
    ],
    [
      'Textiles',
      { key: 'CDG', value: 'Charles de Gaulle Airport' }
    ],
    [
      'Industrial Equipment',
      { key: 'DXB', value: 'Dubai International Airport' }
    ],
    [
      'Pharmaceuticals',
      { key: 'HND', value: 'Tokyo Haneda Airport' }
    ],
    [
      'Consumer Goods',
      { key: 'PEK', value: 'Beijing Capital International Airport' }
    ],
    [
      'Machine Parts',
      { key: 'SIN', value: 'Singapore Changi Airport' }
    ],
    [
      'Food Products',
      { key: 'AMS', value: 'Amsterdam Airport Schiphol' }
    ]
  ];

  readonly airportKVData = [
    { key: 'LAX', value: 'Los Angeles International Airport' },
    { key: 'JFK', value: 'John F. Kennedy International Airport' },
    { key: 'ORD', value: 'Chicago O\'Hare International Airport' },
    { key: 'LHR', value: 'London Heathrow Airport' },
    { key: 'CDG', value: 'Charles de Gaulle Airport' },
    { key: 'DXB', value: 'Dubai International Airport' },
    { key: 'HND', value: 'Tokyo Haneda Airport' },
    { key: 'PEK', value: 'Beijing Capital International Airport' },
    { key: 'SIN', value: 'Singapore Changi Airport' },
    { key: 'AMS', value: 'Amsterdam Airport Schiphol' },
    { key: 'FRA', value: 'Frankfurt Airport' },
    { key: 'ICN', value: 'Seoul Incheon International Airport' },
    { key: 'YYZ', value: 'Toronto Pearson International Airport' },
    { key: 'MAD', value: 'Madrid-Barajas Airport' },
    { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },
    { key: 'MUC', value: 'Munich International Airport' },
    { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },
    { key: 'BCN', value: 'Barcelona-El Prat Airport' },
    { key: 'KUL', value: 'Kuala Lumpur International Airport' },
    { key: 'ZRH', value: 'Zurich Airport' }
  ];

  readonly gridSettings: GridSettings = {
    height: 'auto',
    autoWrapRow: true,
    autoWrapCol: true,
    columns: [
      {
        title: 'Shipment',
      },
      {
        type: 'dropdown',
        source: this.airportKVData,
        title: 'Airport',
      },
    ],
  };
}



/* file: app.module.ts */
import { NgModule, ApplicationConfig } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { registerAllModules } from 'handsontable/registry';
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
import { CommonModule } from '@angular/common';
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';

// register Handsontable's modules
registerAllModules();

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: {
        themeName: 'ht-theme-main',
        license: NON_COMMERCIAL_LICENSE,
      } as HotGlobalConfig
    }
  ],
};

@NgModule({
  imports: [ BrowserModule, HotTableModule, CommonModule ],
  declarations: [ Example3DropdownCellTypeComponent ],
  providers: [...appConfig.providers],
  bootstrap: [ Example3DropdownCellTypeComponent ]
})

export class AppModule { }


import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => { console.error(err) });

<script src="https://cdn.jsdelivr.net/npm/handsontable@16.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.1/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.1/styles/ht-theme-main.css" /> 
<script src="https://cdn.jsdelivr.net/npm/rxjs@6/bundles/rxjs.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/core-js@2/client/core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/zone.js@0.15.0/bundles/zone.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-core-primitives-signals.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-compiler.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-core.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-common.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-forms.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-platformBrowser.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/angular-platformBrowserDynamic.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/prebuilt-umd/handsontable-angular-wrapper.umd.min.js"></script>
<script src="https://handsontable.com/docs/16.1/scripts/fixer.js"></script>

<div>
  <example3-dropdown-cell-type></example3-dropdown-cell-type>
</div>

/* file: app.component.ts */
import { Component } from '@angular/core';
import { GridSettings } from '@handsontable/angular-wrapper';

@Component({
  selector: 'example3-dropdown-cell-type',
  standalone: false,
  template: ` <div>
    <hot-table [data]="shipmentKVData" [settings]="gridSettings"></hot-table>
  </div>`
})
export class Example3DropdownCellTypeComponent {
  readonly shipmentKVData = [
    [
      'Electronics and Gadgets',
      { key: 'LAX', value: 'Los Angeles International Airport' },
    ],
    [
      'Medical Supplies',
      { key: 'JFK', value: 'John F. Kennedy International Airport' }
    ],
    [
      'Auto Parts',
      { key: 'ORD', value: 'Chicago O\'Hare International Airport' }
    ],
    [
      'Fresh Produce',
      { key: 'LHR', value: 'London Heathrow Airport' }
    ],
    [
      'Textiles',
      { key: 'CDG', value: 'Charles de Gaulle Airport' }
    ],
    [
      'Industrial Equipment',
      { key: 'DXB', value: 'Dubai International Airport' }
    ],
    [
      'Pharmaceuticals',
      { key: 'HND', value: 'Tokyo Haneda Airport' }
    ],
    [
      'Consumer Goods',
      { key: 'PEK', value: 'Beijing Capital International Airport' }
    ],
    [
      'Machine Parts',
      { key: 'SIN', value: 'Singapore Changi Airport' }
    ],
    [
      'Food Products',
      { key: 'AMS', value: 'Amsterdam Airport Schiphol' }
    ]
  ];

  readonly airportKVData = [
    { key: 'LAX', value: 'Los Angeles International Airport' },
    { key: 'JFK', value: 'John F. Kennedy International Airport' },
    { key: 'ORD', value: 'Chicago O\'Hare International Airport' },
    { key: 'LHR', value: 'London Heathrow Airport' },
    { key: 'CDG', value: 'Charles de Gaulle Airport' },
    { key: 'DXB', value: 'Dubai International Airport' },
    { key: 'HND', value: 'Tokyo Haneda Airport' },
    { key: 'PEK', value: 'Beijing Capital International Airport' },
    { key: 'SIN', value: 'Singapore Changi Airport' },
    { key: 'AMS', value: 'Amsterdam Airport Schiphol' },
    { key: 'FRA', value: 'Frankfurt Airport' },
    { key: 'ICN', value: 'Seoul Incheon International Airport' },
    { key: 'YYZ', value: 'Toronto Pearson International Airport' },
    { key: 'MAD', value: 'Madrid-Barajas Airport' },
    { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },
    { key: 'MUC', value: 'Munich International Airport' },
    { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },
    { key: 'BCN', value: 'Barcelona-El Prat Airport' },
    { key: 'KUL', value: 'Kuala Lumpur International Airport' },
    { key: 'ZRH', value: 'Zurich Airport' }
  ];

  readonly gridSettings: GridSettings = {
    height: 'auto',
    autoWrapRow: true,
    autoWrapCol: true,
    columns: [
      {
        title: 'Shipment',
      },
      {
        type: 'dropdown',
        source: this.airportKVData,
        title: 'Airport',
      },
    ],
  };
}



/* file: app.module.ts */
import { NgModule, ApplicationConfig } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { registerAllModules } from 'handsontable/registry';
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
import { CommonModule } from '@angular/common';
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
import { Example3DropdownCellTypeComponent } from './app.component';

// register Handsontable's modules
registerAllModules();

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: {
        themeName: 'ht-theme-main',
        license: NON_COMMERCIAL_LICENSE,
      } as HotGlobalConfig
    }
  ],
};

@NgModule({
  imports: [ BrowserModule, HotTableModule, CommonModule ],
  declarations: [ Example3DropdownCellTypeComponent ],
  providers: [...appConfig.providers],
  bootstrap: [ Example3DropdownCellTypeComponent ]
})

export class AppModule { }

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.

TIP

Note: When the source option is declared as an array of key + value objects, the data in the edited cell should also be an object with key + value properties.