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.

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 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('example3');
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:
90
      '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button id="example3-button">Hide dialog</button>',
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
document.getElementById('example3-button').addEventListener('click', () => {
101
  dialogPlugin.hide();
102
});

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('example3')!;
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:
91
      '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button id="example3-button">Hide dialog</button>',
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
(document.getElementById('example3-button') as HTMLElement).addEventListener('click', () => {
103
  dialogPlugin.hide();
104
});

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 style="margin-bottom: 16px; display: flex; gap: 10px">
2
  <button id="showAlert">Show Alert</button>
3
  <button id="showConfirm">Show Confirm</button>
4
  <button id="showCustomConfirm">Show custom Confirm (with solid background)</button>
5
</div>
6
<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 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('example7');
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: '<h2 id="example6-title">Title</h2><p id="example6-description">Description</p>',
90
    a11y: {
91
      role: 'alertdialog',
92
      ariaLabel: 'Title',
93
      ariaLabelledby: 'example6-title',
94
      ariaDescribedby: 'example6-description',
95
    },
96
    closable: true,
97
  },
98
  licenseKey: 'non-commercial-and-evaluation',
99
});
100

101
// Show dialog after initialization
102
const dialogPlugin = hot.getPlugin('dialog');
103

104
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('example7')!;
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: '<h2 id="example6-title">Title</h2><p id="example6-description">Description</p>',
91
    a11y: {
92
      role: 'alertdialog',
93
      ariaLabel: 'Title',
94
      ariaLabelledby: 'example6-title',
95
      ariaDescribedby: 'example6-description',
96
    },
97
    closable: true,
98
  },
99
  licenseKey: 'non-commercial-and-evaluation',
100
});
101

102
// Show dialog after initialization
103
const dialogPlugin = hot.getPlugin('dialog');
104

105
dialogPlugin.show();

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 style="margin-bottom: 16px; display: flex; gap: 10px">
2
  <button id="showDialog">Show Dialog</button>
3
  <button id="hideDialog">Hide Dialog</button>
4
</div>
5
<div id="example8"></div>

Configuration options

dialog

Plugins

Dialog

Dialog

Overview

Basic configuration

Content types

Plain text content

HTML content

Template types

Background variants

Content background

Dialog accessibility

Programmatic control

Show and hide dialog

Related API reference