JavaScript Data Grid Select cell type

Table of contents

• Overview
• Usage
• Related articles
  • Related guides
  • Related API reference

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.

const container = document.querySelector('#example1'); const hot = new Handsontable(container, { data: [ ['2017', 'Honda', 10], ['2018', 'Toyota', 20], ['2019', 'Nissan', 30] ], colWidths: [50, 70, 50], colHeaders: true, columns: [ {}, { editor: 'select', selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'] }, {} ], licenseKey: 'non-commercial-and-evaluation', }); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> <div id="example1" class="hot "></div>

const container = document.querySelector('#example1');

const hot = new Handsontable(container, {
  data: [
    ['2017', 'Honda', 10],
    ['2018', 'Toyota', 20],
    ['2019', 'Nissan', 30]
  ],
  colWidths: [50, 70, 50],
  colHeaders: true,
  columns: [
    {},
    {
      editor: 'select',
      selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda']
    },
    {}
  ],
  licenseKey: 'non-commercial-and-evaluation',
});

Related articles

Related guides

• Autocomplete cell type
• Cell type
• Dropdown cell type

Related API reference

• Configuration options:
  • selectOptions
  • type
• Core methods:
  • getCellMeta()
  • getCellMetaAtRow()
  • getCellsMeta()
  • getDataType()
  • setCellMeta()
  • setCellMetaObject()
  • removeCellMeta()
• Hooks:
  • afterGetCellMeta
  • afterSetCellMeta
  • beforeGetCellMeta
  • beforeSetCellMeta