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.

The nested grid is not the main grid, so the options that drive main-grid UI have no effect when you set them inside the handsontable option: dialog, notification, emptyDataState, pagination, and loading. Set them on the main grid instead. The same applies to the nested grid that the autocomplete and dropdown cell types open.

Basic example

The first column uses the handsontable cell type for a searchable manufacturer list. The color columns use the dropdown cell type for compact selection from a short list.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
// Register all Handsontable's modules.
4
registerAllModules();
5
const manufacturerData = [
6
    { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },
7
    { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },
8
    { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },
9
    { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },
10
    { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },
11
    { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },
12
];
13
const container = document.querySelector('#example1');
14
new Handsontable(container, {
15
    height: 'auto',
16
    licenseKey: 'non-commercial-and-evaluation',
17
    data: [
18
        ['Tesla', 2017, 'black', 'black'],
19
        ['Nissan', 2018, 'blue', 'blue'],
20
        ['Chrysler', 2019, 'yellow', 'black'],
21
        ['Volvo', 2020, 'white', 'gray'],
22
    ],
23
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
24
    columns: [
25
        {
26
            type: 'handsontable',
27
            handsontable: {
28
                colHeaders: ['Marque', 'Country', 'Parent company'],
29
                autoColumnSize: true,
30
                data: manufacturerData,
31
                getValue() {
32
                    const selection = this.getSelectedLast();
33
                    // Get the manufacturer name of the clicked row and ignore header
34
                    // coordinates (negative values)
35
                    const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0));
36
                    return row.name;
37
                },
38
            },
39
        },
40
        { type: 'numeric' },
41
        {
42
            type: 'dropdown',
43
            source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],
44
        },
45
        {
46
            type: 'dropdown',
47
            source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],
48
        },
49
    ],
50
    autoWrapRow: true,
51
    autoWrapCol: true,
52
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
interface Manufacturer {
8
  name: string;
9
  country: string;
10
  owner: string;
11
}
12

13
const manufacturerData: Manufacturer[] = [
14
  { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },
15
  { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },
16
  { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },
17
  { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },
18
  { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },
19
  { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },
20
];
21

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

24
new Handsontable(container, {
25
  height: 'auto',
26
  licenseKey: 'non-commercial-and-evaluation',
27
  data: [
28
    ['Tesla', 2017, 'black', 'black'],
29
    ['Nissan', 2018, 'blue', 'blue'],
30
    ['Chrysler', 2019, 'yellow', 'black'],
31
    ['Volvo', 2020, 'white', 'gray'],
32
  ],
33
  colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
34
  columns: [
35
    {
36
      type: 'handsontable',
37
      handsontable: {
38
        colHeaders: ['Marque', 'Country', 'Parent company'],
39
        autoColumnSize: true,
40
        data: manufacturerData,
41
        getValue() {
42
          const selection = this.getSelectedLast();
43

44
          // Get the manufacturer name of the clicked row and ignore header
45
          // coordinates (negative values)
46
          const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0)) as { name: string };
47

48
          return row.name;
49
        },
50
      },
51
    },
52
    { type: 'numeric' },
53
    {
54
      type: 'dropdown',
55
      source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],
56
    },
57
    {
58
      type: 'dropdown',
59
      source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],
60
    },
61
  ],
62
  autoWrapRow: true,
63
  autoWrapCol: true,
64
});

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`

For the full list of default keyboard shortcuts, see keyboard shortcuts.

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 guides

Cell type

Configuration options

Core methods