Select cell type

Table of contents

• Overview
• Usage

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@11.0/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@11.0/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',
});