Dropdown cell type - Guide - Handsontable Documentation

This page covers a non-latest version of Handsontable.

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>.

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

const hot = 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']
    }
  ],
  licenseKey: 'non-commercial-and-evaluation'
});

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.0/dist/handsontable.full.min.css" /> 

<div id="example1" class="hot "></div>

← Select cell type Autocomplete cell type →