Skip to content
Handsontable dev

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.

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


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


  readonly data = [
    ['2017', 'Honda', 10],
    ['2018', 'Toyota', 20],
    ['2019', 'Nissan', 30],
  ];


  readonly gridSettings: GridSettings = {
    height: 'auto',
    colWidths: [50, 70, 50],
    colHeaders: true,
    autoWrapRow: true,
    autoWrapCol: true,
    columns: [
      {},
      {
        type: 'select',
        selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],
      },
      {},
    ]
  };
}
/* end-file */




/* 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';
/* start:skip-in-compilation */
import { Example1SelectCellTypeComponent } from './app.component';
/* end:skip-in-compilation */


// register Handsontable's modules
registerAllModules();


export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: {
        license: NON_COMMERCIAL_LICENSE,
      } as HotGlobalConfig
    }
  ],
};


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


export class AppModule { }
/* end-file */
HTML
<div>
  <example1-select-cell-type></example1-select-cell-type>
</div>

Related guides

Autocomplete cell type
Cell type
Dropdown cell type

Configuration options

selectOptions
type

Core methods

getCellMeta()
getCellMetaAtRow()
getCellsMeta()
getDataType()
setCellMeta()
setCellMetaObject()
removeCellMeta()

Hooks

afterGetCellMeta
afterSetCellMeta
beforeGetCellMeta
beforeSetCellMeta