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.

The select cell type renders a native HTML <select> element. Consider using the dropdown cell type instead for autocomplete and search capabilities.

Overview

The select cell type is a simpler form of the dropdown cell type.

Usage

Note: The select editor is intended as a reference implementation for writing custom editors rather than as a fully-featured editor. It is a much simpler form of the Dropdown editor. Use the dropdown cell type in your projects for a better user experience.

JavaScript
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';


// register Handsontable's modules
registerAllModules();


const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['2017', 'Honda', 10],
        ['2018', 'Toyota', 20],
        ['2019', 'Nissan', 30],
      ]}
      colWidths={[50, 70, 50]}
      colHeaders={true}
      columns={[
        {},
        {
          type: 'select',
          selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],
        },
        {},
      ]}
      autoWrapRow={true}
      autoWrapCol={true}
      height="auto"
      licenseKey="non-commercial-and-evaluation"
    />
  );
};


export default ExampleComponent;
TypeScript
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';


// register Handsontable's modules
registerAllModules();


const ExampleComponent = () => {
  return (
    <HotTable
      data={[
        ['2017', 'Honda', 10],
        ['2018', 'Toyota', 20],
        ['2019', 'Nissan', 30],
      ]}
      colWidths={[50, 70, 50]}
      colHeaders={true}
      columns={[
        {},
        {
          type: 'select',
          selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],
        },
        {},
      ]}
      autoWrapRow={true}
      autoWrapCol={true}
      height="auto"
      licenseKey="non-commercial-and-evaluation"
    />
  );
};


export default ExampleComponent;

Result

After configuring the select cell type, cells render a native HTML <select> element when the user activates them. The user picks a value from the list and the selected value is written to the data source.

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