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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';
4

5
const colorData = [
6
  ['yellow'],
7
  ['red'],
8
  ['orange'],
9
  ['green'],
10
  ['blue'],
11
  ['gray'],
12
  ['black'],
13
  ['white'],
14
];
15

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

25
@Component({
26
  selector: 'example1-handsontable-cell-type',
27
  standalone: true,
28
  imports: [HotTableModule],
29
  template: ` <div>
30
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
31
  </div>`,
32
})
33
export class AppComponent {
34

35
  readonly data = [
36
    ['Tesla', 2017, 'black', 'black'],
37
    ['Nissan', 2018, 'blue', 'blue'],
38
    ['Chrysler', 2019, 'yellow', 'black'],
39
    ['Volvo', 2020, 'white', 'gray'],
40
  ];
41

42
  readonly gridSettings: GridSettings = {
43
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
44
    height: 'auto',
45
    autoWrapRow: true,
46
    autoWrapCol: true,
47
    columns: [
48
      {
49
        type: 'handsontable',
50
        handsontable: {
51
          colHeaders: ['Marque', 'Country', 'Parent company'],
52
          autoColumnSize: true,
53
          data: manufacturerData,
54
          getValue() {
55
            const selection = this.getSelectedLast();
56

57
            // Get the manufacturer name of the clicked row and ignore header
58
            // coordinates (negative values)
59
            return this.getSourceDataAtRow(Math.max(selection[0], 0)).name;
60
          },
61
        },
62
      },
63
      { type: 'numeric' },
64
      {
65
        type: 'handsontable',
66
        handsontable: {
67
          colHeaders: false,
68
          data: colorData,
69
        },
70
      },
71
      {
72
        type: 'handsontable',
73
        handsontable: {
74
          colHeaders: false,
75
          data: colorData,
76
        },
77
      },
78
    ]
79
  };
80
}
81
/* end-file */
82

83

84

85
/* file: app.config.ts */
86
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
87
import { registerAllModules } from 'handsontable/registry';
88
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
89

90
// register Handsontable's modules
91
registerAllModules();
92

93
export const appConfig: ApplicationConfig = {
94
  providers: [
95
    provideZoneChangeDetection({ eventCoalescing: true }),
96
    {
97
      provide: HOT_GLOBAL_CONFIG,
98
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
99
    },
100
  ],
101
};
102
/* end-file */

1
<div>
2
  <example1-handsontable-cell-type></example1-handsontable-cell-type>
3
</div>

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