Dropdown cell type

Collect user input with a searchable list of choices, by using the dropdown cell type.

Overview
Usage
Related articles
- Related guides
- Related API reference

Overview

The dropdown cell type is based on an autocomplete cell type and can also be searchable.

Usage

This example shows the usage of the dropdown feature. Dropdown is based on Autocomplete cell type. All options used by autocomplete cell type apply to dropdown as well.

Internally, cell {type: 'dropdown'} is equivalent to cell {type: 'autocomplete', strict: true, filter: false}. Therefore you can think of dropdown as a searchable <select>.

{
    "name": "handsontable",
    "version": "1.0.0",
    "description": "",
    "dependencies": {
      "hyperformula": "^2.4.0",
      "handsontable": "15.0"
    }
  }

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Handsontable</title>
    </head>
  
    <body>
      <div id="example1" class="hot ht-theme-main-dark-auto docs-height-small"></div>
    </body>
  </html>

import './styles.css'
import Handsontable from 'handsontable';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

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

new Handsontable(container, {
  data: [
    ['Tesla', 2017, 'black', 'black'],
    ['Nissan', 2018, 'blue', 'blue'],
    ['Chrysler', 2019, 'yellow', 'black'],
    ['Volvo', 2020, 'white', 'gray'],
  ],
  colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
  columns: [
    {},
    { type: 'numeric' },
    {
      type: 'dropdown',
      source: [
        'yellow',
        'red',
        'orange',
        'green',
        'blue',
        'gray',
        'black',
        'white',
      ],
    },
    {
      type: 'dropdown',
      source: [
        'yellow',
        'red',
        'orange',
        'green',
        'blue',
        'gray',
        'black',
        'white',
      ],
    },
  ],
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

import Handsontable from 'handsontable';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

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

new Handsontable(container, {
  data: [
    ['Tesla', 2017, 'black', 'black'],
    ['Nissan', 2018, 'blue', 'blue'],
    ['Chrysler', 2019, 'yellow', 'black'],
    ['Volvo', 2020, 'white', 'gray'],
  ],
  colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
  columns: [
    {},
    { type: 'numeric' },
    {
      type: 'dropdown',
      source: [
        'yellow',
        'red',
        'orange',
        'green',
        'blue',
        'gray',
        'black',
        'white',
      ],
    },
    {
      type: 'dropdown',
      source: [
        'yellow',
        'red',
        'orange',
        'green',
        'blue',
        'gray',
        'black',
        'white',
      ],
    },
  ],
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

<script src="https://cdn.jsdelivr.net/npm/handsontable@15.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.0/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.0/styles/ht-theme-main.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@15.0/styles/ht-theme-horizon.css" /> 
<script src="https://handsontable.com/docs/scripts/fixer.js"></script>

<div id="example1" class="hot ht-theme-main-dark-auto docs-height-small"></div>

JavaScript Data GridDropdown cell type

Overview

Usage

Related articles

Related guides

Related API reference