Handsontable - Cell Types
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.
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.
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.
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.