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

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

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

7
const colorData = [['yellow'], ['red'], ['orange'], ['green'], ['blue'], ['gray'], ['black'], ['white']];
8
const manufacturerData = [
9
  { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },
10
  { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },
11
  { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },
12
  { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },
13
  { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },
14
  { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },
15
];
16

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

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

39
          // Get the manufacturer name of the clicked row and ignore header
40
          // coordinates (negative values)
41
          return this.getSourceDataAtRow(Math.max(selection[0], 0)).name;
42
        },
43
      },
44
    },
45
    { type: 'numeric' },
46
    {
47
      type: 'handsontable',
48
      handsontable: {
49
        colHeaders: false,
50
        data: colorData,
51
      },
52
    },
53
    {
54
      type: 'handsontable',
55
      handsontable: {
56
        colHeaders: false,
57
        data: colorData,
58
      },
59
    },
60
  ],
61
  autoWrapRow: true,
62
  autoWrapCol: true,
63
});

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 colorData: [string][] = [['yellow'], ['red'], ['orange'], ['green'], ['blue'], ['gray'], ['black'], ['white']];
14

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

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

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

46
          // Get the manufacturer name of the clicked row and ignore header
47
          // coordinates (negative values)
48
          return this.getSourceDataAtRow(Math.max(selection[0], 0)).name;
49
        },
50
      },
51
    },
52
    { type: 'numeric' },
53
    {
54
      type: 'handsontable',
55
      handsontable: {
56
        colHeaders: false,
57
        data: colorData,
58
      },
59
    },
60
    {
61
      type: 'handsontable',
62
      handsontable: {
63
        colHeaders: false,
64
        data: colorData,
65
      },
66
    },
67
  ],
68
  autoWrapRow: true,
69
  autoWrapCol: true,
70
});

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 guides

Cell type

Configuration options

Core methods