Numeric type

By default, Handsontable treats all cell values as string type. This is because <textarea> returns a string as its value. In many cases you will prefer cell values to be treated as number type. This allows to format numbers nicely and sort them correctly. To trigger the numeric cell type, use the option type: 'numeric' in columns array or cells function. Make sure your cell values are numbers and not strings as Handsontable will not parse strings to numbers.

Date type

To trigger the Date cell type, use the option type: 'date' in columns array or cells function. The Date cell uses Pikaday datepicker as the UI control and Moment.js as a date formatter. All data entered to the data-typed cells are validated agains the default date format (DD/MM/YYYY), unless another format is provided. If you enable the correctFormat config item, the dates will be automatically formatted to match the desired format.

Dropdown type

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


The following example demonstrates Handsontable as a cell editor in Handsontable. HOT-in-HOT opens by any of the following: F2 or Enter key is pressed while the cell is selected; the triangle icon is clicked; the cell content is double clicked. While HOT-in-HOT is opened, the text field above the HOT-in-HOT remains focused at all times.

Select type

The following example demonstrates select cell type. Select editor should be considered an example how to write editors rather than used as a fully featured editor. To enable select, add editor: 'select' option to your columns: [] configuration. In this example double click on Year column cells will open select menu with year options.