16.0.1Angular Data Grid Select cell type

Angular Data GridSelect cell type

Use the select cell type to collect user input with an HTML <select> element that creates a multi-item dropdown list.

On this page

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.

/* 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'],
      },
      {},
    ]
  };
}



/* 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 { Example1SelectCellTypeComponent } 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: [ Example1SelectCellTypeComponent ],
  providers: [...appConfig.providers],
  bootstrap: [ Example1SelectCellTypeComponent ]
})

export class AppModule { }