Dialog

Display modal dialogs, alerts, loading indicators, and notifications to enhance user interaction and provide feedback in your data grid application.

Overview

The Dialog plugin provides a modal dialog system for Handsontable that allows you to display custom content in modal dialogs that overlay the table. This is useful for showing notifications, error messages, loading indicators, or any other interactive content that requires user attention.

The dialog system is designed to be flexible and customizable, supporting various content types including plain text, HTML, and DOM elements. It also provides options for styling, animations, and user interaction controls.

The plugin works on the main grid only. A grid nested in a cell, that is a cell of the handsontable, autocomplete, or dropdown cell type, has no overlay layer to render a dialog into, so the dialog option has no effect there.

Basic configuration

To enable the Dialog plugin, set the dialog option to true or provide a configuration object.

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

4
// register Handsontable's modules
5
registerAllModules();
6

7
const data = [
8
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
9
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
10
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
11
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
12
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
13
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
14
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
15
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
16
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
17
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
18
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
19
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
20
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
21
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
22
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
23
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
24
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
25
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
26
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
27
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
28
];
29

30
const container = document.getElementById('example1');
31
const hot = new Handsontable(container, {
32
  data,
33
  colHeaders: true,
34
  rowHeaders: true,
35
  columns: [
36
    {
37
      title: 'Model',
38
      type: 'text',
39
      data: 'model',
40
      width: 150,
41
      headerClassName: 'htLeft',
42
    },
43
    {
44
      title: 'Price',
45
      type: 'numeric',
46
      data: 'price',
47
      width: 80,
48
      locale: 'en-US',
49
      numericFormat: {
50
        style: 'currency',
51
        currency: 'USD',
52
        minimumFractionDigits: 2,
53
      },
54
      className: 'htRight',
55
      headerClassName: 'htRight',
56
    },
57
    {
58
      title: 'Date',
59
      type: 'intl-date',
60
      data: 'sellDate',
61
      width: 131,
62
      locale: 'en-US',
63
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
64
      className: 'htRight',
65
      headerClassName: 'htRight',
66
    },
67
    {
68
      title: 'Time',
69
      type: 'intl-time',
70
      data: 'sellTime',
71
      width: 90,
72
      locale: 'en-US',
73
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
74
      className: 'htRight',
75
      headerClassName: 'htRight',
76
    },
77
    {
78
      title: 'In stock',
79
      type: 'checkbox',
80
      data: 'inStock',
81
      className: 'htCenter',
82
      headerClassName: 'htCenter',
83
    },
84
  ],
85
  width: '100%',
86
  height: 300,
87
  stretchH: 'all',
88
  dialog: true,
89
  licenseKey: 'non-commercial-and-evaluation',
90
});
91

92
// Show dialog after initialization
93
const dialogPlugin = hot.getPlugin('dialog');
94

95
dialogPlugin.show({
96
  content: 'This is a basic dialog with default configuration.',
97
  closable: true,
98
});

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

4
// register Handsontable's modules
5
registerAllModules();
6

7
const data = [
8
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
9
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
10
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
11
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
12
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
13
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
14
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
15
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
16
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
17
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
18
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
19
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
20
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
21
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
22
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
23
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
24
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
25
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
26
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
27
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
28
];
29

30
const container = document.getElementById('example1')!;
31

32
const hot = new Handsontable(container, {
33
  data,
34
  colHeaders: true,
35
  rowHeaders: true,
36
  columns: [
37
    {
38
      title: 'Model',
39
      type: 'text',
40
      data: 'model',
41
      width: 150,
42
      headerClassName: 'htLeft',
43
    },
44
    {
45
      title: 'Price',
46
      type: 'numeric',
47
      data: 'price',
48
      width: 80,
49
      locale: 'en-US',
50
      numericFormat: {
51
        style: 'currency',
52
        currency: 'USD',
53
        minimumFractionDigits: 2,
54
      },
55
      className: 'htRight',
56
      headerClassName: 'htRight',
57
    },
58
    {
59
      title: 'Date',
60
      type: 'intl-date',
61
      data: 'sellDate',
62
      width: 131,
63
      locale: 'en-US',
64
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
65
      className: 'htRight',
66
      headerClassName: 'htRight',
67
    },
68
    {
69
      title: 'Time',
70
      type: 'intl-time',
71
      data: 'sellTime',
72
      width: 90,
73
      locale: 'en-US',
74
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
75
      className: 'htRight',
76
      headerClassName: 'htRight',
77
    },
78
    {
79
      title: 'In stock',
80
      type: 'checkbox',
81
      data: 'inStock',
82
      className: 'htCenter',
83
      headerClassName: 'htCenter',
84
    },
85
  ],
86
  width: '100%',
87
  height: 300,
88
  stretchH: 'all',
89
  dialog: true,
90
  licenseKey: 'non-commercial-and-evaluation',
91
});
92

93
// Show dialog after initialization
94
const dialogPlugin = hot.getPlugin('dialog');
95

96
dialogPlugin.show({
97
  content: 'This is a basic dialog with default configuration.',
98
  closable: true,
99
});

Content types

The dialog supports multiple content types including plain text, HTML strings, and DOM elements.

Plain text content

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

4
// register Handsontable's modules
5
registerAllModules();
6

7
const data = [
8
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
9
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
10
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
11
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
12
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
13
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
14
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
15
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
16
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
17
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
18
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
19
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
20
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
21
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
22
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
23
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
24
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
25
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
26
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
27
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
28
];
29

30
const container = document.getElementById('example2');
31
const hot = new Handsontable(container, {
32
  data,
33
  colHeaders: true,
34
  rowHeaders: true,
35
  columns: [
36
    {
37
      title: 'Model',
38
      type: 'text',
39
      data: 'model',
40
      width: 150,
41
      headerClassName: 'htLeft',
42
    },
43
    {
44
      title: 'Price',
45
      type: 'numeric',
46
      data: 'price',
47
      width: 80,
48
      locale: 'en-US',
49
      numericFormat: {
50
        style: 'currency',
51
        currency: 'USD',
52
        minimumFractionDigits: 2,
53
      },
54
      className: 'htRight',
55
      headerClassName: 'htRight',
56
    },
57
    {
58
      title: 'Date',
59
      type: 'intl-date',
60
      data: 'sellDate',
61
      width: 131,
62
      locale: 'en-US',
63
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
64
      className: 'htRight',
65
      headerClassName: 'htRight',
66
    },
67
    {
68
      title: 'Time',
69
      type: 'intl-time',
70
      data: 'sellTime',
71
      width: 90,
72
      locale: 'en-US',
73
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
74
      className: 'htRight',
75
      headerClassName: 'htRight',
76
    },
77
    {
78
      title: 'In stock',
79
      type: 'checkbox',
80
      data: 'inStock',
81
      className: 'htCenter',
82
      headerClassName: 'htCenter',
83
    },
84
  ],
85
  width: '100%',
86
  height: 300,
87
  stretchH: 'all',
88
  dialog: {
89
    content: 'This is a simple text message displayed in the dialog.',
90
    closable: true,
91
  },
92
  licenseKey: 'non-commercial-and-evaluation',
93
});
94

95
// Show dialog after initialization
96
const dialogPlugin = hot.getPlugin('dialog');
97

98
dialogPlugin.show();

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

4
// register Handsontable's modules
5
registerAllModules();
6

7
const data = [
8
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
9
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
10
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
11
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
12
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
13
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
14
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
15
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
16
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
17
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
18
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
19
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
20
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
21
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
22
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
23
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
24
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
25
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
26
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
27
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
28
];
29

30
const container = document.getElementById('example2')!;
31

32
const hot = new Handsontable(container, {
33
  data,
34
  colHeaders: true,
35
  rowHeaders: true,
36
  columns: [
37
    {
38
      title: 'Model',
39
      type: 'text',
40
      data: 'model',
41
      width: 150,
42
      headerClassName: 'htLeft',
43
    },
44
    {
45
      title: 'Price',
46
      type: 'numeric',
47
      data: 'price',
48
      width: 80,
49
      locale: 'en-US',
50
      numericFormat: {
51
        style: 'currency',
52
        currency: 'USD',
53
        minimumFractionDigits: 2,
54
      },
55
      className: 'htRight',
56
      headerClassName: 'htRight',
57
    },
58
    {
59
      title: 'Date',
60
      type: 'intl-date',
61
      data: 'sellDate',
62
      width: 131,
63
      locale: 'en-US',
64
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
65
      className: 'htRight',
66
      headerClassName: 'htRight',
67
    },
68
    {
69
      title: 'Time',
70
      type: 'intl-time',
71
      data: 'sellTime',
72
      width: 90,
73
      locale: 'en-US',
74
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
75
      className: 'htRight',
76
      headerClassName: 'htRight',
77
    },
78
    {
79
      title: 'In stock',
80
      type: 'checkbox',
81
      data: 'inStock',
82
      className: 'htCenter',
83
      headerClassName: 'htCenter',
84
    },
85
  ],
86
  width: '100%',
87
  height: 300,
88
  stretchH: 'all',
89
  dialog: {
90
    content: 'This is a simple text message displayed in the dialog.',
91
    closable: true,
92
  },
93
  licenseKey: 'non-commercial-and-evaluation',
94
});
95

96
// Show dialog after initialization
97
const dialogPlugin = hot.getPlugin('dialog');
98

99
dialogPlugin.show();

HTML content

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

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];
8
const ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];
9
const DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];
10

11
// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:
12
// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting
13
// a range degrades to plain text. In production, use a vetted library such as DOMPurify.
14
// See https://handsontable.com/docs/security/
15
const sanitizeDialogContent = (html) => {
16
  const template = document.createElement('template');
17

18
  template.innerHTML = html;
19

20
  template.content.querySelectorAll('*').forEach((element) => {
21
    if (DROPPED_TAGS.includes(element.tagName)) {
22
      // Unwrapping these would promote their source text into the output
23
      element.remove();
24
    } else if (ALLOWED_TAGS.includes(element.tagName)) {
25
      Array.from(element.attributes).forEach((attribute) => {
26
        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {
27
          element.removeAttribute(attribute.name);
28
        }
29
      });
30
    } else {
31
      // Unwrap a disallowed element, keeping its text content
32
      element.replaceWith(...Array.from(element.childNodes));
33
    }
34
  });
35

36
  return template.innerHTML;
37
};
38

39
const data = [
40
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
41
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
42
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
43
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
44
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
45
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
46
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
47
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
48
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
49
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
50
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
51
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
52
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
53
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
54
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
55
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
56
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
57
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
58
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
59
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
60
];
61

62
const container = document.getElementById('example3');
63

64
const hot = new Handsontable(container, {
65
  data,
66
  colHeaders: true,
67
  rowHeaders: true,
68
  columns: [
69
    {
70
      title: 'Model',
71
      type: 'text',
72
      data: 'model',
73
      width: 150,
74
      headerClassName: 'htLeft',
75
    },
76
    {
77
      title: 'Price',
78
      type: 'numeric',
79
      data: 'price',
80
      width: 80,
81
      locale: 'en-US',
82
      numericFormat: {
83
        style: 'currency',
84
        currency: 'USD',
85
        minimumFractionDigits: 2,
86
      },
87
      className: 'htRight',
88
      headerClassName: 'htRight',
89
    },
90
    {
91
      title: 'Date',
92
      type: 'intl-date',
93
      data: 'sellDate',
94
      width: 131,
95
      locale: 'en-US',
96
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
97
      className: 'htRight',
98
      headerClassName: 'htRight',
99
    },
100
    {
101
      title: 'Time',
102
      type: 'intl-time',
103
      data: 'sellTime',
104
      width: 90,
105
      locale: 'en-US',
106
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
107
      className: 'htRight',
108
      headerClassName: 'htRight',
109
    },
110
    {
111
      title: 'In stock',
112
      type: 'checkbox',
113
      data: 'inStock',
114
      className: 'htCenter',
115
      headerClassName: 'htCenter',
116
    },
117
  ],
118
  width: '100%',
119
  height: 300,
120
  stretchH: 'all',
121
  dialog: {
122
    content:
123
      '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button type="button" class="hot-doc-dialog-html-button" id="example3-button">Hide dialog</button>',
124
    closable: true,
125
  },
126
  // Required for the dialog's HTML content to be rendered safely
127
  sanitizer: sanitizeDialogContent,
128
  licenseKey: 'non-commercial-and-evaluation',
129
});
130

131
// Show dialog after initialization
132
const dialogPlugin = hot.getPlugin('dialog');
133

134
dialogPlugin.show();
135

136
document.getElementById('example3-button').addEventListener('click', () => {
137
  dialogPlugin.hide();
138
});

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

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];
8
const ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];
9
const DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];
10

11
// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:
12
// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting
13
// a range degrades to plain text. In production, use a vetted library such as DOMPurify.
14
// See https://handsontable.com/docs/security/
15
const sanitizeDialogContent = (html: string): string => {
16
  const template = document.createElement('template');
17

18
  template.innerHTML = html;
19

20
  template.content.querySelectorAll('*').forEach((element) => {
21
    if (DROPPED_TAGS.includes(element.tagName)) {
22
      // Unwrapping these would promote their source text into the output
23
      element.remove();
24
    } else if (ALLOWED_TAGS.includes(element.tagName)) {
25
      Array.from(element.attributes).forEach((attribute) => {
26
        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {
27
          element.removeAttribute(attribute.name);
28
        }
29
      });
30
    } else {
31
      // Unwrap a disallowed element, keeping its text content
32
      element.replaceWith(...Array.from(element.childNodes));
33
    }
34
  });
35

36
  return template.innerHTML;
37
};
38

39
const data = [
40
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
41
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
42
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
43
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
44
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
45
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
46
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
47
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
48
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
49
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
50
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
51
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
52
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
53
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
54
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
55
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
56
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
57
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
58
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
59
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
60
];
61

62
const container = document.getElementById('example3')!;
63

64
const hot = new Handsontable(container, {
65
  data,
66
  colHeaders: true,
67
  rowHeaders: true,
68
  columns: [
69
    {
70
      title: 'Model',
71
      type: 'text',
72
      data: 'model',
73
      width: 150,
74
      headerClassName: 'htLeft',
75
    },
76
    {
77
      title: 'Price',
78
      type: 'numeric',
79
      data: 'price',
80
      width: 80,
81
      locale: 'en-US',
82
      numericFormat: {
83
        style: 'currency',
84
        currency: 'USD',
85
        minimumFractionDigits: 2,
86
      },
87
      className: 'htRight',
88
      headerClassName: 'htRight',
89
    },
90
    {
91
      title: 'Date',
92
      type: 'intl-date',
93
      data: 'sellDate',
94
      width: 131,
95
      locale: 'en-US',
96
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
97
      className: 'htRight',
98
      headerClassName: 'htRight',
99
    },
100
    {
101
      title: 'Time',
102
      type: 'intl-time',
103
      data: 'sellTime',
104
      width: 90,
105
      locale: 'en-US',
106
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
107
      className: 'htRight',
108
      headerClassName: 'htRight',
109
    },
110
    {
111
      title: 'In stock',
112
      type: 'checkbox',
113
      data: 'inStock',
114
      className: 'htCenter',
115
      headerClassName: 'htCenter',
116
    },
117
  ],
118
  width: '100%',
119
  height: 300,
120
  stretchH: 'all',
121
  dialog: {
122
    content:
123
      '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button type="button" class="hot-doc-dialog-html-button" id="example3-button">Hide dialog</button>',
124
    closable: true,
125
  },
126
  // Required for the dialog's HTML content to be rendered safely
127
  sanitizer: sanitizeDialogContent,
128
  licenseKey: 'non-commercial-and-evaluation',
129
});
130

131
// Show dialog after initialization
132
const dialogPlugin = hot.getPlugin('dialog');
133

134
dialogPlugin.show();
135

136
(document.getElementById('example3-button') as HTMLElement).addEventListener('click', () => {
137
  dialogPlugin.hide();
138
});

Template types

As the content option allows you to use plain text, HTML strings, and DOM elements, the template option allows you to use predefined dialog templates instead of custom content which can be useful for displaying alerts, confirmations, and other common ready-to-use dialogs.

The plugin offers two new methods to display predefined dialog templates: showAlert and showConfirm. For users looking for more customizability, the show method allows using templates with other options that the dialog offers, such as background variants, content background, and more.

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

4
// register Handsontable's modules
5
registerAllModules();
6

7
const data = [
8
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
9
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
10
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
11
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
12
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
13
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
14
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
15
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
16
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
17
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
18
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
19
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
20
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
21
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
22
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
23
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
24
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
25
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
26
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
27
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
28
];
29

30
const container = document.getElementById('example4');
31
const hot = new Handsontable(container, {
32
  data,
33
  colHeaders: true,
34
  rowHeaders: true,
35
  columns: [
36
    {
37
      title: 'Model',
38
      type: 'text',
39
      data: 'model',
40
      width: 150,
41
      headerClassName: 'htLeft',
42
    },
43
    {
44
      title: 'Price',
45
      type: 'numeric',
46
      data: 'price',
47
      width: 80,
48
      locale: 'en-US',
49
      numericFormat: {
50
        style: 'currency',
51
        currency: 'USD',
52
        minimumFractionDigits: 2,
53
      },
54
      className: 'htRight',
55
      headerClassName: 'htRight',
56
    },
57
    {
58
      title: 'Date',
59
      type: 'intl-date',
60
      data: 'sellDate',
61
      width: 131,
62
      locale: 'en-US',
63
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
64
      className: 'htRight',
65
      headerClassName: 'htRight',
66
    },
67
    {
68
      title: 'Time',
69
      type: 'intl-time',
70
      data: 'sellTime',
71
      width: 90,
72
      locale: 'en-US',
73
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
74
      className: 'htRight',
75
      headerClassName: 'htRight',
76
    },
77
    {
78
      title: 'In stock',
79
      type: 'checkbox',
80
      data: 'inStock',
81
      className: 'htCenter',
82
      headerClassName: 'htCenter',
83
    },
84
  ],
85
  width: '100%',
86
  height: 300,
87
  stretchH: 'all',
88
  dialog: true,
89
  licenseKey: 'non-commercial-and-evaluation',
90
});
91

92
const dialogPlugin = hot.getPlugin('dialog');
93

94
// Add event listeners for buttons
95
document.getElementById('showAlert').addEventListener('click', () => {
96
  dialogPlugin.showAlert(
97
    {
98
      title: 'Alert',
99
      description: 'This is an example of the alert dialog.',
100
    },
101
    () => {
102
      dialogPlugin.hide();
103
    }
104
  );
105
});
106
document.getElementById('showConfirm').addEventListener('click', () => {
107
  dialogPlugin.showConfirm(
108
    'Do you want to undo the last action?',
109
    () => {
110
      hot.getPlugin('undoRedo').undo();
111
      dialogPlugin.hide();
112
    },
113
    () => {
114
      dialogPlugin.hide();
115
    }
116
  );
117
});
118
document.getElementById('showCustomConfirm').addEventListener('click', () => {
119
  dialogPlugin.show({
120
    template: {
121
      type: 'confirm',
122
      title: 'Increase the price of the first row by:',
123
      buttons: [
124
        {
125
          text: 'Cancel',
126
          type: 'secondary',
127
          callback: () => {
128
            dialogPlugin.hide();
129
          },
130
        },
131
        {
132
          text: '$100',
133
          type: 'secondary',
134
          callback: () => {
135
            dialogPlugin.hide();
136
            hot.setDataAtCell(0, 1, hot.getDataAtCell(0, 1) + 100);
137
            hot.selectCell(0, 1);
138
          },
139
        },
140
        {
141
          text: '$200',
142
          type: 'secondary',
143
          callback: () => {
144
            dialogPlugin.hide();
145
            hot.setDataAtCell(0, 1, hot.getDataAtCell(0, 1) + 200);
146
            hot.selectCell(0, 1);
147
          },
148
        },
149
        {
150
          text: '$500',
151
          type: 'secondary',
152
          callback: () => {
153
            dialogPlugin.hide();
154
            hot.setDataAtCell(0, 1, hot.getDataAtCell(0, 1) + 500);
155
            hot.selectCell(0, 1);
156
          },
157
        },
158
      ],
159
    },
160
    background: 'solid',
161
    contentBackground: false,
162
    closable: true,
163
  });
164
});

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

4
// register Handsontable's modules
5
registerAllModules();
6

7
const data = [
8
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
9
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
10
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
11
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
12
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
13
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
14
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
15
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
16
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
17
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
18
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
19
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
20
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
21
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
22
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
23
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
24
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
25
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
26
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
27
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
28
];
29

30
const container = document.getElementById('example4')!;
31
const hot = new Handsontable(container, {
32
  data,
33
  colHeaders: true,
34
  rowHeaders: true,
35
  columns: [
36
    {
37
      title: 'Model',
38
      type: 'text',
39
      data: 'model',
40
      width: 150,
41
      headerClassName: 'htLeft',
42
    },
43
    {
44
      title: 'Price',
45
      type: 'numeric',
46
      data: 'price',
47
      width: 80,
48
      locale: 'en-US',
49
      numericFormat: {
50
        style: 'currency',
51
        currency: 'USD',
52
        minimumFractionDigits: 2,
53
      },
54
      className: 'htRight',
55
      headerClassName: 'htRight',
56
    },
57
    {
58
      title: 'Date',
59
      type: 'intl-date',
60
      data: 'sellDate',
61
      width: 131,
62
      locale: 'en-US',
63
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
64
      className: 'htRight',
65
      headerClassName: 'htRight',
66
    },
67
    {
68
      title: 'Time',
69
      type: 'intl-time',
70
      data: 'sellTime',
71
      width: 90,
72
      locale: 'en-US',
73
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
74
      className: 'htRight',
75
      headerClassName: 'htRight',
76
    },
77
    {
78
      title: 'In stock',
79
      type: 'checkbox',
80
      data: 'inStock',
81
      className: 'htCenter',
82
      headerClassName: 'htCenter',
83
    },
84
  ],
85
  width: '100%',
86
  height: 300,
87
  stretchH: 'all',
88
  dialog: true,
89
  licenseKey: 'non-commercial-and-evaluation',
90
});
91

92
const dialogPlugin = hot.getPlugin('dialog');
93

94
// Add event listeners for buttons
95
document.getElementById('showAlert')!.addEventListener('click', () => {
96
  dialogPlugin.showAlert(
97
    {
98
      title: 'Alert',
99
      description: 'This is an example of the alert dialog.',
100
    },
101
    () => {
102
      dialogPlugin.hide();
103
    }
104
  );
105
});
106
document.getElementById('showConfirm')!.addEventListener('click', () => {
107
  dialogPlugin.showConfirm(
108
    'Do you want to undo the last action?',
109
    () => {
110
      hot.getPlugin('undoRedo').undo();
111
      dialogPlugin.hide();
112
    },
113
    () => {
114
      dialogPlugin.hide();
115
    }
116
  );
117
});
118
document.getElementById('showCustomConfirm')!.addEventListener('click', () => {
119
  dialogPlugin.show({
120
    template: {
121
      type: 'confirm',
122
      title: 'Increase the price of the first row by:',
123
      buttons: [
124
        {
125
          text: 'Cancel',
126
          type: 'secondary',
127
          callback: () => {
128
            dialogPlugin.hide();
129
          },
130
        },
131
        {
132
          text: '$100',
133
          type: 'secondary',
134
          callback: () => {
135
            dialogPlugin.hide();
136
            hot.setDataAtCell(0, 1, hot.getDataAtCell(0, 1) + 100);
137
            hot.selectCell(0, 1);
138
          },
139
        },
140
        {
141
          text: '$200',
142
          type: 'secondary',
143
          callback: () => {
144
            dialogPlugin.hide();
145
            hot.setDataAtCell(0, 1, hot.getDataAtCell(0, 1) + 200);
146
            hot.selectCell(0, 1);
147
          },
148
        },
149
        {
150
          text: '$500',
151
          type: 'secondary',
152
          callback: () => {
153
            dialogPlugin.hide();
154
            hot.setDataAtCell(0, 1, hot.getDataAtCell(0, 1) + 500);
155
            hot.selectCell(0, 1);
156
          },
157
        },
158
      ],
159
    },
160
    background: 'solid',
161
    contentBackground: false,
162
    closable: true,
163
  });
164
});

1
<div class="example-controls-container">
2
  <div class="controls">
3
    <button type="button" id="showAlert">Show Alert</button>
4
    <button type="button" id="showConfirm">Show Confirm</button>
5
    <button type="button" id="showCustomConfirm">Show custom Confirm (with solid background)</button>
6
  </div>
7
</div>
8
<div id="example4"></div>

Background variants

The dialog supports two background variants: solid and semi-transparent.

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

4
// register Handsontable's modules
5
registerAllModules();
6

7
const data = [
8
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
9
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
10
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
11
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
12
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
13
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
14
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
15
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
16
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
17
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
18
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
19
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
20
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
21
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
22
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
23
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
24
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
25
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
26
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
27
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
28
];
29

30
const container = document.getElementById('example5');
31
const hot = new Handsontable(container, {
32
  data,
33
  colHeaders: true,
34
  rowHeaders: true,
35
  columns: [
36
    {
37
      title: 'Model',
38
      type: 'text',
39
      data: 'model',
40
      width: 150,
41
      headerClassName: 'htLeft',
42
    },
43
    {
44
      title: 'Price',
45
      type: 'numeric',
46
      data: 'price',
47
      width: 80,
48
      locale: 'en-US',
49
      numericFormat: {
50
        style: 'currency',
51
        currency: 'USD',
52
        minimumFractionDigits: 2,
53
      },
54
      className: 'htRight',
55
      headerClassName: 'htRight',
56
    },
57
    {
58
      title: 'Date',
59
      type: 'intl-date',
60
      data: 'sellDate',
61
      width: 131,
62
      locale: 'en-US',
63
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
64
      className: 'htRight',
65
      headerClassName: 'htRight',
66
    },
67
    {
68
      title: 'Time',
69
      type: 'intl-time',
70
      data: 'sellTime',
71
      width: 90,
72
      locale: 'en-US',
73
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
74
      className: 'htRight',
75
      headerClassName: 'htRight',
76
    },
77
    {
78
      title: 'In stock',
79
      type: 'checkbox',
80
      data: 'inStock',
81
      className: 'htCenter',
82
      headerClassName: 'htCenter',
83
    },
84
  ],
85
  width: '100%',
86
  height: 300,
87
  stretchH: 'all',
88
  dialog: {
89
    content: 'This dialog uses a solid background (default).',
90
    background: 'solid',
91
    closable: true,
92
  },
93
  licenseKey: 'non-commercial-and-evaluation',
94
});
95

96
// Show dialog after initialization
97
const dialogPlugin = hot.getPlugin('dialog');
98

99
dialogPlugin.show();
100

101
// Custom dropdown logic
102
const dropdown = document.getElementById('backgroundDropdown');
103
const trigger = document.getElementById('backgroundTrigger');
104
const menu = document.getElementById('backgroundMenu');
105
const label = document.getElementById('backgroundLabel');
106

107
trigger.addEventListener('click', () => {
108
  const isOpen = !menu.hidden;
109

110
  menu.hidden = isOpen;
111
  trigger.setAttribute('aria-expanded', String(!isOpen));
112
});
113

114
menu.addEventListener('click', (e) => {
115
  const item = e.target.closest('li[data-value]');
116

117
  if (item) {
118
    label.textContent = item.textContent.trim();
119
    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));
120
    item.setAttribute('aria-selected', 'true');
121
    menu.hidden = true;
122
    trigger.setAttribute('aria-expanded', 'false');
123

124
    const background = item.dataset.value;
125
    const content =
126
      background === 'solid'
127
        ? 'This dialog uses a solid background (default).'
128
        : 'This dialog uses a semi-transparent background.';
129

130
    dialogPlugin.update({ content, background });
131
  }
132
});
133

134
document.addEventListener('click', (e) => {
135
  if (!dropdown.contains(e.target)) {
136
    menu.hidden = true;
137
    trigger.setAttribute('aria-expanded', 'false');
138
  }
139
});
140

141
document.addEventListener('keydown', (e) => {
142
  if (e.key === 'Escape' && !menu.hidden) {
143
    menu.hidden = true;
144
    trigger.setAttribute('aria-expanded', 'false');
145
    trigger.focus();
146
  }
147
});

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

4
// register Handsontable's modules
5
registerAllModules();
6

7
const data = [
8
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
9
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
10
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
11
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
12
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
13
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
14
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
15
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
16
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
17
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
18
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
19
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
20
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
21
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
22
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
23
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
24
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
25
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
26
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
27
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
28
];
29

30
const container = document.getElementById('example5')!;
31

32
const hot = new Handsontable(container, {
33
  data,
34
  colHeaders: true,
35
  rowHeaders: true,
36
  columns: [
37
    {
38
      title: 'Model',
39
      type: 'text',
40
      data: 'model',
41
      width: 150,
42
      headerClassName: 'htLeft',
43
    },
44
    {
45
      title: 'Price',
46
      type: 'numeric',
47
      data: 'price',
48
      width: 80,
49
      locale: 'en-US',
50
      numericFormat: {
51
        style: 'currency',
52
        currency: 'USD',
53
        minimumFractionDigits: 2,
54
      },
55
      className: 'htRight',
56
      headerClassName: 'htRight',
57
    },
58
    {
59
      title: 'Date',
60
      type: 'intl-date',
61
      data: 'sellDate',
62
      width: 131,
63
      locale: 'en-US',
64
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
65
      className: 'htRight',
66
      headerClassName: 'htRight',
67
    },
68
    {
69
      title: 'Time',
70
      type: 'intl-time',
71
      data: 'sellTime',
72
      width: 90,
73
      locale: 'en-US',
74
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
75
      className: 'htRight',
76
      headerClassName: 'htRight',
77
    },
78
    {
79
      title: 'In stock',
80
      type: 'checkbox',
81
      data: 'inStock',
82
      className: 'htCenter',
83
      headerClassName: 'htCenter',
84
    },
85
  ],
86
  width: '100%',
87
  height: 300,
88
  stretchH: 'all',
89
  dialog: {
90
    content: 'This dialog uses a solid background (default).',
91
    background: 'solid',
92
    closable: true,
93
  },
94
  licenseKey: 'non-commercial-and-evaluation',
95
});
96

97
// Show dialog after initialization
98
const dialogPlugin = hot.getPlugin('dialog');
99

100
dialogPlugin.show();
101

102
// Custom dropdown logic
103
const dropdown = document.getElementById('backgroundDropdown')!;
104
const trigger = document.getElementById('backgroundTrigger')!;
105
const menu = document.getElementById('backgroundMenu')!;
106
const label = document.getElementById('backgroundLabel')!;
107

108
trigger.addEventListener('click', () => {
109
  const isOpen = !menu.hidden;
110

111
  menu.hidden = isOpen;
112
  trigger.setAttribute('aria-expanded', String(!isOpen));
113
});
114

115
menu.addEventListener('click', (e: MouseEvent) => {
116
  const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLElement | null;
117

118
  if (item) {
119
    label.textContent = item.textContent!.trim();
120
    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));
121
    item.setAttribute('aria-selected', 'true');
122
    menu.hidden = true;
123
    trigger.setAttribute('aria-expanded', 'false');
124

125
    const background = item.dataset.value!;
126
    const content =
127
      background === 'solid'
128
        ? 'This dialog uses a solid background (default).'
129
        : 'This dialog uses a semi-transparent background.';
130

131
    dialogPlugin.update({ content, background });
132
  }
133
});
134

135
document.addEventListener('click', (e: MouseEvent) => {
136
  if (!dropdown.contains(e.target as Node)) {
137
    menu.hidden = true;
138
    trigger.setAttribute('aria-expanded', 'false');
139
  }
140
});
141

142
document.addEventListener('keydown', (e: KeyboardEvent) => {
143
  if (e.key === 'Escape' && !menu.hidden) {
144
    menu.hidden = true;
145
    trigger.setAttribute('aria-expanded', 'false');
146
    trigger.focus();
147
  }
148
});

1
<div class="example-controls-container">
2
  <div class="controls">
3
    <div class="theme-dropdown" id="backgroundDropdown">
4
      <button class="theme-dropdown-trigger" id="backgroundTrigger" type="button" aria-haspopup="listbox" aria-expanded="false">
5
        <span id="backgroundLabel">Solid</span>
6
        <svg class="theme-dropdown-chevron" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6l6 -6"/></svg>
7
      </button>
8
      <ul class="theme-dropdown-menu" id="backgroundMenu" role="listbox" hidden>
9
        <li role="option" data-value="solid" aria-selected="true">Solid</li>
10
        <li role="option" data-value="semi-transparent">Semi-transparent</li>
11
      </ul>
12
    </div>
13
  </div>
14
</div>
15
<div id="example5"></div>

Content background

The dialog content can have a background color using the contentBackground option.

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

4
// register Handsontable's modules
5
registerAllModules();
6

7
const data = [
8
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
9
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
10
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
11
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
12
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
13
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
14
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
15
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
16
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
17
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
18
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
19
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
20
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
21
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
22
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
23
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
24
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
25
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
26
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
27
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
28
];
29

30
const container = document.getElementById('example6');
31
const hot = new Handsontable(container, {
32
  data,
33
  colHeaders: true,
34
  rowHeaders: true,
35
  columns: [
36
    {
37
      title: 'Model',
38
      type: 'text',
39
      data: 'model',
40
      width: 150,
41
      headerClassName: 'htLeft',
42
    },
43
    {
44
      title: 'Price',
45
      type: 'numeric',
46
      data: 'price',
47
      width: 80,
48
      locale: 'en-US',
49
      numericFormat: {
50
        style: 'currency',
51
        currency: 'USD',
52
        minimumFractionDigits: 2,
53
      },
54
      className: 'htRight',
55
      headerClassName: 'htRight',
56
    },
57
    {
58
      title: 'Date',
59
      type: 'intl-date',
60
      data: 'sellDate',
61
      width: 131,
62
      locale: 'en-US',
63
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
64
      className: 'htRight',
65
      headerClassName: 'htRight',
66
    },
67
    {
68
      title: 'Time',
69
      type: 'intl-time',
70
      data: 'sellTime',
71
      width: 90,
72
      locale: 'en-US',
73
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
74
      className: 'htRight',
75
      headerClassName: 'htRight',
76
    },
77
    {
78
      title: 'In stock',
79
      type: 'checkbox',
80
      data: 'inStock',
81
      className: 'htCenter',
82
      headerClassName: 'htCenter',
83
    },
84
  ],
85
  width: '100%',
86
  height: 300,
87
  stretchH: 'all',
88
  dialog: {
89
    content: 'This dialog uses a semi-transparent background.',
90
    contentBackground: true,
91
    background: 'semi-transparent',
92
    closable: true,
93
  },
94
  licenseKey: 'non-commercial-and-evaluation',
95
});
96

97
// Show dialog after initialization
98
const dialogPlugin = hot.getPlugin('dialog');
99

100
dialogPlugin.show();

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

4
// register Handsontable's modules
5
registerAllModules();
6

7
const data = [
8
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
9
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
10
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
11
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
12
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
13
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
14
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
15
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
16
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
17
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
18
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
19
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
20
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
21
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
22
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
23
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
24
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
25
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
26
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
27
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
28
];
29

30
const container = document.getElementById('example6')!;
31

32
const hot = new Handsontable(container, {
33
  data,
34
  colHeaders: true,
35
  rowHeaders: true,
36
  columns: [
37
    {
38
      title: 'Model',
39
      type: 'text',
40
      data: 'model',
41
      width: 150,
42
      headerClassName: 'htLeft',
43
    },
44
    {
45
      title: 'Price',
46
      type: 'numeric',
47
      data: 'price',
48
      width: 80,
49
      locale: 'en-US',
50
      numericFormat: {
51
        style: 'currency',
52
        currency: 'USD',
53
        minimumFractionDigits: 2,
54
      },
55
      className: 'htRight',
56
      headerClassName: 'htRight',
57
    },
58
    {
59
      title: 'Date',
60
      type: 'intl-date',
61
      data: 'sellDate',
62
      width: 131,
63
      locale: 'en-US',
64
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
65
      className: 'htRight',
66
      headerClassName: 'htRight',
67
    },
68
    {
69
      title: 'Time',
70
      type: 'intl-time',
71
      data: 'sellTime',
72
      width: 90,
73
      locale: 'en-US',
74
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
75
      className: 'htRight',
76
      headerClassName: 'htRight',
77
    },
78
    {
79
      title: 'In stock',
80
      type: 'checkbox',
81
      data: 'inStock',
82
      className: 'htCenter',
83
      headerClassName: 'htCenter',
84
    },
85
  ],
86
  width: '100%',
87
  height: 300,
88
  stretchH: 'all',
89
  dialog: {
90
    content: 'This dialog uses a semi-transparent background.',
91
    contentBackground: true,
92
    background: 'semi-transparent',
93
    closable: true,
94
  },
95
  licenseKey: 'non-commercial-and-evaluation',
96
});
97

98
// Show dialog after initialization
99
const dialogPlugin = hot.getPlugin('dialog');
100

101
dialogPlugin.show();

Dialog accessibility

The dialog plugin provides accessibility features through ARIA attributes. You can configure the dialog’s accessibility properties using the a11y option, which includes:

role - Sets the ARIA role (defaults to “dialog”)
ariaLabel - Sets the dialog’s accessible name (defaults to “Dialog”). This is used when there is no visible dialog title that can be referenced by ariaLabelledby. If both ariaLabel and ariaLabelledby are provided, ariaLabelledby takes precedence
ariaLabelledby - References an element that labels the dialog
ariaDescribedby - References an element that describes the dialog

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

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];
8
const ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];
9
const DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];
10

11
// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:
12
// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting
13
// a range degrades to plain text. In production, use a vetted library such as DOMPurify.
14
// See https://handsontable.com/docs/security/
15
const sanitizeDialogContent = (html) => {
16
  const template = document.createElement('template');
17

18
  template.innerHTML = html;
19

20
  template.content.querySelectorAll('*').forEach((element) => {
21
    if (DROPPED_TAGS.includes(element.tagName)) {
22
      // Unwrapping these would promote their source text into the output
23
      element.remove();
24
    } else if (ALLOWED_TAGS.includes(element.tagName)) {
25
      Array.from(element.attributes).forEach((attribute) => {
26
        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {
27
          element.removeAttribute(attribute.name);
28
        }
29
      });
30
    } else {
31
      // Unwrap a disallowed element, keeping its text content
32
      element.replaceWith(...Array.from(element.childNodes));
33
    }
34
  });
35

36
  return template.innerHTML;
37
};
38

39
const data = [
40
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
41
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
42
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
43
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
44
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
45
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
46
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
47
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
48
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
49
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
50
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
51
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
52
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
53
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
54
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
55
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
56
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
57
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
58
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
59
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
60
];
61

62
const container = document.getElementById('example7');
63
const hot = new Handsontable(container, {
64
  data,
65
  colHeaders: true,
66
  rowHeaders: true,
67
  columns: [
68
    {
69
      title: 'Model',
70
      type: 'text',
71
      data: 'model',
72
      width: 150,
73
      headerClassName: 'htLeft',
74
    },
75
    {
76
      title: 'Price',
77
      type: 'numeric',
78
      data: 'price',
79
      width: 80,
80
      locale: 'en-US',
81
      numericFormat: {
82
        style: 'currency',
83
        currency: 'USD',
84
        minimumFractionDigits: 2,
85
      },
86
      className: 'htRight',
87
      headerClassName: 'htRight',
88
    },
89
    {
90
      title: 'Date',
91
      type: 'intl-date',
92
      data: 'sellDate',
93
      width: 131,
94
      locale: 'en-US',
95
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
96
      className: 'htRight',
97
      headerClassName: 'htRight',
98
    },
99
    {
100
      title: 'Time',
101
      type: 'intl-time',
102
      data: 'sellTime',
103
      width: 90,
104
      locale: 'en-US',
105
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
106
      className: 'htRight',
107
      headerClassName: 'htRight',
108
    },
109
    {
110
      title: 'In stock',
111
      type: 'checkbox',
112
      data: 'inStock',
113
      className: 'htCenter',
114
      headerClassName: 'htCenter',
115
    },
116
  ],
117
  width: '100%',
118
  height: 300,
119
  stretchH: 'all',
120
  dialog: {
121
    content: '<h2 id="example6-title">Title</h2><p id="example6-description">Description</p>',
122
    a11y: {
123
      role: 'alertdialog',
124
      ariaLabel: 'Title',
125
      ariaLabelledby: 'example6-title',
126
      ariaDescribedby: 'example6-description',
127
    },
128
    closable: true,
129
  },
130
  // Required for the dialog's HTML content to be rendered safely
131
  sanitizer: sanitizeDialogContent,
132
  licenseKey: 'non-commercial-and-evaluation',
133
});
134

135
// Show dialog after initialization
136
const dialogPlugin = hot.getPlugin('dialog');
137

138
dialogPlugin.show();

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

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ALLOWED_TAGS = ['H2', 'P', 'STRONG', 'BUTTON', 'BR', 'TABLE', 'THEAD', 'TBODY', 'TR', 'TD', 'TH'];
8
const ALLOWED_ATTRIBUTES = ['id', 'class', 'type', 'colspan', 'rowspan'];
9
const DROPPED_TAGS = ['SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE'];
10

11
// Handsontable has no built-in sanitizer since v18.0, and `sanitizer` is grid-level:
12
// it also filters pasted HTML, so the table tags have to survive -- otherwise pasting
13
// a range degrades to plain text. In production, use a vetted library such as DOMPurify.
14
// See https://handsontable.com/docs/security/
15
const sanitizeDialogContent = (html: string): string => {
16
  const template = document.createElement('template');
17

18
  template.innerHTML = html;
19

20
  template.content.querySelectorAll('*').forEach((element) => {
21
    if (DROPPED_TAGS.includes(element.tagName)) {
22
      // Unwrapping these would promote their source text into the output
23
      element.remove();
24
    } else if (ALLOWED_TAGS.includes(element.tagName)) {
25
      Array.from(element.attributes).forEach((attribute) => {
26
        if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {
27
          element.removeAttribute(attribute.name);
28
        }
29
      });
30
    } else {
31
      // Unwrap a disallowed element, keeping its text content
32
      element.replaceWith(...Array.from(element.childNodes));
33
    }
34
  });
35

36
  return template.innerHTML;
37
};
38

39
const data = [
40
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
41
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
42
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
43
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
44
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
45
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
46
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
47
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
48
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
49
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
50
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
51
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
52
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
53
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
54
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
55
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
56
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
57
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
58
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
59
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
60
];
61

62
const container = document.getElementById('example7')!;
63

64
const hot = new Handsontable(container, {
65
  data,
66
  colHeaders: true,
67
  rowHeaders: true,
68
  columns: [
69
    {
70
      title: 'Model',
71
      type: 'text',
72
      data: 'model',
73
      width: 150,
74
      headerClassName: 'htLeft',
75
    },
76
    {
77
      title: 'Price',
78
      type: 'numeric',
79
      data: 'price',
80
      width: 80,
81
      locale: 'en-US',
82
      numericFormat: {
83
        style: 'currency',
84
        currency: 'USD',
85
        minimumFractionDigits: 2,
86
      },
87
      className: 'htRight',
88
      headerClassName: 'htRight',
89
    },
90
    {
91
      title: 'Date',
92
      type: 'intl-date',
93
      data: 'sellDate',
94
      width: 131,
95
      locale: 'en-US',
96
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
97
      className: 'htRight',
98
      headerClassName: 'htRight',
99
    },
100
    {
101
      title: 'Time',
102
      type: 'intl-time',
103
      data: 'sellTime',
104
      width: 90,
105
      locale: 'en-US',
106
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
107
      className: 'htRight',
108
      headerClassName: 'htRight',
109
    },
110
    {
111
      title: 'In stock',
112
      type: 'checkbox',
113
      data: 'inStock',
114
      className: 'htCenter',
115
      headerClassName: 'htCenter',
116
    },
117
  ],
118
  width: '100%',
119
  height: 300,
120
  stretchH: 'all',
121
  dialog: {
122
    content: '<h2 id="example6-title">Title</h2><p id="example6-description">Description</p>',
123
    a11y: {
124
      role: 'alertdialog',
125
      ariaLabel: 'Title',
126
      ariaLabelledby: 'example6-title',
127
      ariaDescribedby: 'example6-description',
128
    },
129
    closable: true,
130
  },
131
  // Required for the dialog's HTML content to be rendered safely
132
  sanitizer: sanitizeDialogContent,
133
  licenseKey: 'non-commercial-and-evaluation',
134
});
135

136
// Show dialog after initialization
137
const dialogPlugin = hot.getPlugin('dialog');
138

139
dialogPlugin.show();

When a dialog opens, focus moves into it. Where it lands depends on how you configured the dialog:

With the confirm template, focus moves to the first button. If the template has no buttons, focus moves to the dialog’s content area.
With the content option, focus moves to the dialog box itself. Handsontable does not search your HTML for focusable elements, so it never moves focus to a button inside your content. To place focus yourself, listen to the afterDialogFocus hook and call focus() on the element you want. If you also use the Loading plugin, note that it moves focus to the dialog box on that same hook, so register your callback after it or move focus on a later task.

Focus moves only if the grid was focused when the dialog opened. If the user has not interacted with the grid yet, the dialog opens without taking focus away from the rest of the page. The afterDialogFocus hook follows the same rule, so it does not run in that case either.

While the dialog is open, Tab and Shift+Tab move between the focusable elements inside it and skip the grid. They still reach the other elements on your page. Escape closes the dialog, but only when closable is set to true. The showAlert() and showConfirm() methods set closable to false, so Escape does not close those dialogs.

To move focus to the dialog box at any time, call the focus() method.

Programmatic control

You can control the dialog programmatically using the plugin’s methods.

Show and hide dialog

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

4
// register Handsontable's modules
5
registerAllModules();
6

7
const data = [
8
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
9
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
10
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
11
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
12
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
13
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
14
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
15
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
16
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
17
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
18
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
19
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
20
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
21
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
22
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
23
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
24
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
25
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
26
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
27
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
28
];
29

30
const container = document.getElementById('example8');
31
const hot = new Handsontable(container, {
32
  data,
33
  colHeaders: true,
34
  rowHeaders: true,
35
  columns: [
36
    {
37
      title: 'Model',
38
      type: 'text',
39
      data: 'model',
40
      width: 150,
41
      headerClassName: 'htLeft',
42
    },
43
    {
44
      title: 'Price',
45
      type: 'numeric',
46
      data: 'price',
47
      width: 80,
48
      locale: 'en-US',
49
      numericFormat: {
50
        style: 'currency',
51
        currency: 'USD',
52
        minimumFractionDigits: 2,
53
      },
54
      className: 'htRight',
55
      headerClassName: 'htRight',
56
    },
57
    {
58
      title: 'Date',
59
      type: 'intl-date',
60
      data: 'sellDate',
61
      width: 131,
62
      locale: 'en-US',
63
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
64
      className: 'htRight',
65
      headerClassName: 'htRight',
66
    },
67
    {
68
      title: 'Time',
69
      type: 'intl-time',
70
      data: 'sellTime',
71
      width: 90,
72
      locale: 'en-US',
73
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
74
      className: 'htRight',
75
      headerClassName: 'htRight',
76
    },
77
    {
78
      title: 'In stock',
79
      type: 'checkbox',
80
      data: 'inStock',
81
      className: 'htCenter',
82
      headerClassName: 'htCenter',
83
    },
84
  ],
85
  width: '100%',
86
  height: 300,
87
  stretchH: 'all',
88
  dialog: {
89
    content: 'This dialog can be controlled programmatically.',
90
    closable: true,
91
  },
92
  licenseKey: 'non-commercial-and-evaluation',
93
});
94

95
const dialogPlugin = hot.getPlugin('dialog');
96

97
// Add event listeners for buttons
98
document.getElementById('showDialog').addEventListener('click', () => {
99
  dialogPlugin.show({
100
    content: 'Dialog shown programmatically!',
101
    closable: true,
102
  });
103
});
104
document.getElementById('hideDialog').addEventListener('click', () => {
105
  dialogPlugin.hide();
106
});

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

4
// register Handsontable's modules
5
registerAllModules();
6

7
const data = [
8
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
9
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
10
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
11
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
12
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
13
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
14
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
15
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
16
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
17
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
18
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
19
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
20
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
21
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
22
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
23
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
24
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
25
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
26
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
27
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
28
];
29

30
const container = document.getElementById('example8')!;
31

32
const hot = new Handsontable(container, {
33
  data,
34
  colHeaders: true,
35
  rowHeaders: true,
36
  columns: [
37
    {
38
      title: 'Model',
39
      type: 'text',
40
      data: 'model',
41
      width: 150,
42
      headerClassName: 'htLeft',
43
    },
44
    {
45
      title: 'Price',
46
      type: 'numeric',
47
      data: 'price',
48
      width: 80,
49
      locale: 'en-US',
50
      numericFormat: {
51
        style: 'currency',
52
        currency: 'USD',
53
        minimumFractionDigits: 2,
54
      },
55
      className: 'htRight',
56
      headerClassName: 'htRight',
57
    },
58
    {
59
      title: 'Date',
60
      type: 'intl-date',
61
      data: 'sellDate',
62
      width: 131,
63
      locale: 'en-US',
64
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
65
      className: 'htRight',
66
      headerClassName: 'htRight',
67
    },
68
    {
69
      title: 'Time',
70
      type: 'intl-time',
71
      data: 'sellTime',
72
      width: 90,
73
      locale: 'en-US',
74
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
75
      className: 'htRight',
76
      headerClassName: 'htRight',
77
    },
78
    {
79
      title: 'In stock',
80
      type: 'checkbox',
81
      data: 'inStock',
82
      className: 'htCenter',
83
      headerClassName: 'htCenter',
84
    },
85
  ],
86
  width: '100%',
87
  height: 300,
88
  stretchH: 'all',
89
  dialog: {
90
    content: 'This dialog can be controlled programmatically.',
91
    closable: true,
92
  },
93
  licenseKey: 'non-commercial-and-evaluation',
94
});
95

96
const dialogPlugin = hot.getPlugin('dialog');
97

98
// Add event listeners for buttons
99
(document.getElementById('showDialog') as HTMLElement).addEventListener('click', () => {
100
  dialogPlugin.show({
101
    content: 'Dialog shown programmatically!',
102
    closable: true,
103
  });
104
});
105

106
(document.getElementById('hideDialog') as HTMLElement).addEventListener('click', () => {
107
  dialogPlugin.hide();
108
});

1
<div class="example-controls-container">
2
  <div class="controls">
3
    <button type="button" id="showDialog">Show Dialog</button>
4
    <button type="button" id="hideDialog">Hide Dialog</button>
5
  </div>
6
</div>
7
<div id="example8"></div>