Handsontable cell type
Add a spreadsheet editor in a popup, by using the Handsontable cell type.
The Handsontable cell type embeds a second grid instance as a cell editor (HOT-in-HOT). Use it when users need to search and select from a large dataset.
Usage
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.
Basic example
Keyboard shortcuts
| Key | Action |
|---|---|
| Escape | Close editor and cancel change |
| Enter | Close editor and apply change; move selection in the main HOT downwards or according to the enterMoves setting |
| Tab | Same as Enter, but move selection to the right or left according to the tabMoves setting |
| Arrow Down | Move selection in HOT-in-HOT downwards. No effect if last row is selected |
| Arrow Up | Move selection in HOT-in-HOT upwards. If the first row was selected, deselect. If HOT-in-HOT was deselected, behave as Enter but move main HOT selection upwards |
| Arrow Right | Move text cursor in the text field to the left. If cursor was at start, behave as Enter but move main HOT selection to the left |
| Arrow Left | Move text cursor in the text field to the right. If cursor was at end, behave as Tab |
Result
After configuring the Handsontable cell type, cells display a text input with a trigger icon. Activating the cell opens a second embedded grid that users can navigate and select from. The selected row value is written back to the parent cell.
Related articles
Related guides
Configuration options
Core methods
Hooks