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 React, { useRef, useEffect } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

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

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

31
const ExampleComponent = () => {
32
  const hotTableRef = useRef(null);
33

34
  useEffect(() => {
35
    const hotInstance = hotTableRef.current?.hotInstance;
36

37
    if (!hotInstance) {
38
      return;
39
    }
40

41
    hotInstance.getPlugin('dialog').show({
42
      content: 'This is a basic dialog with default configuration.',
43
      closable: true,
44
    });
45
  }, []);
46

47
  return (
48
    <HotTable
49
      ref={hotTableRef}
50
      data={data}
51
      width="100%"
52
      height={300}
53
      stretchH="all"
54
      contextMenu={true}
55
      rowHeaders={true}
56
      colHeaders={true}
57
      autoWrapRow={true}
58
      autoWrapCol={true}
59
      autoRowSize={true}
60
      dialog={true}
61
      licenseKey="non-commercial-and-evaluation"
62
    >
63
      <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
64
      <HotColumn
65
        title="Price"
66
        type="numeric"
67
        data="price"
68
        width={80}
69
        locale="en-US"
70
        numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
71
        className="htRight"
72
        headerClassName="htRight"
73
      />
74
      <HotColumn
75
        title="Date"
76
        type="intl-date"
77
        data="sellDate"
78
        width={131}
79
        locale="en-US"
80
        dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
81
        className="htRight"
82
        headerClassName="htRight"
83
      />
84
      <HotColumn
85
        title="Time"
86
        type="intl-time"
87
        data="sellTime"
88
        width={90}
89
        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
90
        className="htRight"
91
        headerClassName="htRight"
92
      />
93
      <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
94
    </HotTable>
95
  );
96
};
97

98
export default ExampleComponent;

1
import React, { useRef, useEffect } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

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

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

31
const ExampleComponent = () => {
32
  const hotTableRef = useRef(null);
33

34
  useEffect(() => {
35
    const hotInstance = hotTableRef.current?.hotInstance;
36

37
    if (!hotInstance) {
38
      return;
39
    }
40

41
    hotInstance.getPlugin('dialog').show({
42
      content: 'This is a basic dialog with default configuration.',
43
      closable: true,
44
    });
45
  }, []);
46

47
  return (
48
    <HotTable
49
      ref={hotTableRef}
50
      data={data}
51
      width="100%"
52
      height={300}
53
      stretchH="all"
54
      contextMenu={true}
55
      rowHeaders={true}
56
      colHeaders={true}
57
      autoWrapRow={true}
58
      autoWrapCol={true}
59
      autoRowSize={true}
60
      dialog={true}
61
      licenseKey="non-commercial-and-evaluation"
62
    >
63
      <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
64
      <HotColumn
65
        title="Price"
66
        type="numeric"
67
        data="price"
68
        width={80}
69
        locale="en-US" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
70
        className="htRight"
71
        headerClassName="htRight"
72
      />
73
      <HotColumn
74
        title="Date"
75
        type="intl-date"
76
        data="sellDate"
77
        width={131}
78
        locale="en-US" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
79
        className="htRight"
80
        headerClassName="htRight"
81
      />
82
      <HotColumn
83
        title="Time"
84
        type="intl-time"
85
        data="sellTime"
86
        width={90}
87
        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
88
        className="htRight"
89
        headerClassName="htRight"
90
      />
91
      <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
92
    </HotTable>
93
  );
94
};
95

96
export default ExampleComponent;

Content types

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

Plain text content

1
import React, { useRef, useEffect } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

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

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

31
const ExampleComponent = () => {
32
  const hotTableRef = useRef(null);
33

34
  useEffect(() => {
35
    const hotInstance = hotTableRef.current?.hotInstance;
36

37
    hotInstance.getPlugin('dialog').show();
38
  }, []);
39

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

94
export default ExampleComponent;

1
import React, { useRef, useEffect } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

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

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

31
const ExampleComponent = () => {
32
  const hotTableRef = useRef(null);
33

34
  useEffect(() => {
35
    const hotInstance = hotTableRef.current?.hotInstance;
36

37
    hotInstance.getPlugin('dialog').show();
38
  }, []);
39

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

92
export default ExampleComponent;

HTML content

1
import React, { useRef, useEffect } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

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

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

31
const ExampleComponent = () => {
32
  const hotTableRef = useRef(null);
33

34
  useEffect(() => {
35
    const hotInstance = hotTableRef.current?.hotInstance;
36

37
    if (!hotInstance) {
38
      return;
39
    }
40

41
    hotInstance.getPlugin('dialog').show();
42
    document.getElementById('example3-button')?.addEventListener('click', () => {
43
      hotInstance.getPlugin('dialog').hide();
44
    });
45
  }, []);
46

47
  return (
48
    <HotTable
49
      ref={hotTableRef}
50
      data={data}
51
      width="100%"
52
      height={300}
53
      stretchH="all"
54
      contextMenu={true}
55
      rowHeaders={true}
56
      colHeaders={true}
57
      autoWrapRow={true}
58
      autoWrapCol={true}
59
      autoRowSize={true}
60
      dialog={{
61
        content:
62
          '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button id="example3-button">Hide dialog</button>',
63
        closable: true,
64
      }}
65
      licenseKey="non-commercial-and-evaluation"
66
    >
67
      <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
68
      <HotColumn
69
        title="Price"
70
        type="numeric"
71
        data="price"
72
        width={80}
73
        locale="en-US"
74
        numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
75
        className="htRight"
76
        headerClassName="htRight"
77
      />
78
      <HotColumn
79
        title="Date"
80
        type="intl-date"
81
        data="sellDate"
82
        width={131}
83
        locale="en-US"
84
        dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
85
        className="htRight"
86
        headerClassName="htRight"
87
      />
88
      <HotColumn
89
        title="Time"
90
        type="intl-time"
91
        data="sellTime"
92
        width={90}
93
        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
94
        className="htRight"
95
        headerClassName="htRight"
96
      />
97
      <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
98
    </HotTable>
99
  );
100
};
101

102
export default ExampleComponent;

1
import React, { useRef, useEffect } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

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

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

31
const ExampleComponent = () => {
32
  const hotTableRef = useRef(null);
33

34
  useEffect(() => {
35
    const hotInstance = hotTableRef.current?.hotInstance;
36

37
    if (!hotInstance) {
38
      return;
39
    }
40

41
    hotInstance.getPlugin('dialog').show();
42

43
    document.getElementById('example3-button')?.addEventListener('click', () => {
44
      hotInstance.getPlugin('dialog').hide();
45
    });
46
  }, []);
47

48
  return (
49
    <HotTable
50
      ref={hotTableRef}
51
      data={data}
52
      width="100%"
53
      height={300}
54
      stretchH="all"
55
      contextMenu={true}
56
      rowHeaders={true}
57
      colHeaders={true}
58
      autoWrapRow={true}
59
      autoWrapCol={true}
60
      autoRowSize={true}
61
      dialog={{
62
        content:
63
          '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button id="example3-button">Hide dialog</button>',
64
        closable: true,
65
      }}
66
      licenseKey="non-commercial-and-evaluation"
67
    >
68
      <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
69
      <HotColumn
70
        title="Price"
71
        type="numeric"
72
        data="price"
73
        width={80}
74
        locale="en-US" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
75
        className="htRight"
76
        headerClassName="htRight"
77
      />
78
      <HotColumn
79
        title="Date"
80
        type="intl-date"
81
        data="sellDate"
82
        width={131}
83
        locale="en-US" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
84
        className="htRight"
85
        headerClassName="htRight"
86
      />
87
      <HotColumn
88
        title="Time"
89
        type="intl-time"
90
        data="sellTime"
91
        width={90}
92
        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
93
        className="htRight"
94
        headerClassName="htRight"
95
      />
96
      <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
97
    </HotTable>
98
  );
99
};
100

101
export default ExampleComponent;

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 React, { useRef } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

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

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

31
const ExampleComponent = () => {
32
  const hotTableRef = useRef(null);
33
  const showAlert = () => {
34
    const hotInstance = hotTableRef.current?.hotInstance;
35

36
    if (!hotInstance) {
37
      return;
38
    }
39

40
    const dialogPlugin = hotInstance.getPlugin('dialog');
41

42
    dialogPlugin.showAlert(
43
      {
44
        title: 'Alert',
45
        description: 'This is an example of the alert dialog.',
46
      },
47
      () => {
48
        dialogPlugin.hide();
49
      }
50
    );
51
  };
52

53
  const showConfirm = () => {
54
    const hotInstance = hotTableRef.current?.hotInstance;
55

56
    if (!hotInstance) {
57
      return;
58
    }
59

60
    const dialogPlugin = hotInstance.getPlugin('dialog');
61
    const undoRedoPlugin = hotInstance.getPlugin('undoRedo');
62

63
    dialogPlugin.showConfirm(
64
      'Do you want to undo the last action?',
65
      () => {
66
        undoRedoPlugin.undo();
67
        dialogPlugin.hide();
68
      },
69
      () => {
70
        dialogPlugin.hide();
71
      }
72
    );
73
  };
74

75
  const showCustomConfirm = () => {
76
    const hotInstance = hotTableRef.current?.hotInstance;
77

78
    if (!hotInstance) {
79
      return;
80
    }
81

82
    const dialogPlugin = hotInstance.getPlugin('dialog');
83

84
    dialogPlugin.show({
85
      template: {
86
        type: 'confirm',
87
        title: 'Increase the price of the first row by:',
88
        buttons: [
89
          {
90
            text: 'Cancel',
91
            type: 'secondary',
92
            callback: () => {
93
              dialogPlugin.hide();
94
            },
95
          },
96
          {
97
            text: '$100',
98
            type: 'secondary',
99
            callback: () => {
100
              dialogPlugin.hide();
101
              hotInstance.setDataAtCell(0, 1, hotInstance.getDataAtCell(0, 1) + 100);
102
              hotInstance.selectCell(0, 1);
103
            },
104
          },
105
          {
106
            text: '$200',
107
            type: 'secondary',
108
            callback: () => {
109
              dialogPlugin.hide();
110
              hotInstance.setDataAtCell(0, 1, hotInstance.getDataAtCell(0, 1) + 200);
111
              hotInstance.selectCell(0, 1);
112
            },
113
          },
114
          {
115
            text: '$500',
116
            type: 'secondary',
117
            callback: () => {
118
              dialogPlugin.hide();
119
              hotInstance.setDataAtCell(0, 1, hotInstance.getDataAtCell(0, 1) + 500);
120
              hotInstance.selectCell(0, 1);
121
            },
122
          },
123
        ],
124
      },
125
      background: 'solid',
126
      contentBackground: false,
127
      closable: true,
128
    });
129
  };
130

131
  return (
132
    <>
133
      <div style={{ marginBottom: '16px', display: 'flex', gap: '10px' }}>
134
        <button onClick={showAlert}>Show Alert</button>
135
        <button onClick={showConfirm}>Show Confirm</button>
136
        <button onClick={showCustomConfirm}>Show custom Confirm (with solid background)</button>
137
      </div>
138
      <HotTable
139
        ref={hotTableRef}
140
        data={data}
141
        width="100%"
142
        height={300}
143
        stretchH="all"
144
        contextMenu={true}
145
        rowHeaders={true}
146
        colHeaders={true}
147
        autoWrapRow={true}
148
        autoWrapCol={true}
149
        autoRowSize={true}
150
        dialog={true}
151
        licenseKey="non-commercial-and-evaluation"
152
      >
153
        <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
154
        <HotColumn
155
          title="Price"
156
          type="numeric"
157
          data="price"
158
          width={80}
159
          locale="en-US"
160
          numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
161
          className="htRight"
162
          headerClassName="htRight"
163
        />
164
        <HotColumn
165
          title="Date"
166
          type="intl-date"
167
          data="sellDate"
168
          width={131}
169
          locale="en-US"
170
          dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
171
          className="htRight"
172
          headerClassName="htRight"
173
        />
174
        <HotColumn
175
          title="Time"
176
          type="intl-time"
177
          data="sellTime"
178
          width={90}
179
          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
180
          className="htRight"
181
          headerClassName="htRight"
182
        />
183
        <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
184
      </HotTable>
185
    </>
186
  );
187
};
188

189
export default ExampleComponent;

1
import React, { useRef } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

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

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

31
const ExampleComponent = () => {
32
  const hotTableRef = useRef(null);
33
  const showAlert = () => {
34
    const hotInstance = hotTableRef.current?.hotInstance;
35

36
    if (!hotInstance) {
37
      return;
38
    }
39

40
    const dialogPlugin = hotInstance.getPlugin('dialog');
41

42
    dialogPlugin.showAlert(
43
      {
44
        title: 'Alert',
45
        description: 'This is an example of the alert dialog.',
46
      },
47
      () => {
48
        dialogPlugin.hide();
49
      }
50
    );
51
  };
52

53
  const showConfirm = () => {
54
    const hotInstance = hotTableRef.current?.hotInstance;
55

56
    if (!hotInstance) {
57
      return;
58
    }
59

60
    const dialogPlugin = hotInstance.getPlugin('dialog');
61
    const undoRedoPlugin = hotInstance.getPlugin('undoRedo');
62

63
    dialogPlugin.showConfirm(
64
      'Do you want to undo the last action?',
65
      () => {
66
        undoRedoPlugin.undo();
67
        dialogPlugin.hide();
68
      },
69
      () => {
70
        dialogPlugin.hide();
71
      }
72
    );
73
  };
74

75
  const showCustomConfirm = () => {
76
    const hotInstance = hotTableRef.current?.hotInstance;
77

78
    if (!hotInstance) {
79
      return;
80
    }
81

82
    const dialogPlugin = hotInstance.getPlugin('dialog');
83

84
    dialogPlugin.show({
85
      template: {
86
        type: 'confirm',
87
        title: 'Increase the price of the first row by:',
88
        buttons: [
89
          {
90
            text: 'Cancel',
91
            type: 'secondary',
92
            callback: () => {
93
              dialogPlugin.hide();
94
            },
95
          },
96
          {
97
            text: '$100',
98
            type: 'secondary',
99
            callback: () => {
100
              dialogPlugin.hide();
101
              hotInstance.setDataAtCell(0, 1, hotInstance.getDataAtCell(0, 1) + 100);
102
              hotInstance.selectCell(0, 1);
103
            },
104
          },
105
          {
106
            text: '$200',
107
            type: 'secondary',
108
            callback: () => {
109
              dialogPlugin.hide();
110
              hotInstance.setDataAtCell(0, 1, hotInstance.getDataAtCell(0, 1) + 200);
111
              hotInstance.selectCell(0, 1);
112
            },
113
          },
114
          {
115
            text: '$500',
116
            type: 'secondary',
117
            callback: () => {
118
              dialogPlugin.hide();
119
              hotInstance.setDataAtCell(0, 1, hotInstance.getDataAtCell(0, 1) + 500);
120
              hotInstance.selectCell(0, 1);
121
            },
122
          },
123
        ],
124
      },
125
      background: 'solid',
126
      contentBackground: false,
127
      closable: true,
128
    });
129
  };
130

131
  return (
132
    <>
133
      <div style={{ marginBottom: '16px', display: 'flex', gap: '10px' }}>
134
        <button onClick={showAlert}>Show Alert</button>
135
        <button onClick={showConfirm}>Show Confirm</button>
136
        <button onClick={showCustomConfirm}>Show custom Confirm (with solid background)</button>
137
      </div>
138
      <HotTable
139
        ref={hotTableRef}
140
        data={data}
141
        width="100%"
142
        height={300}
143
        stretchH="all"
144
        contextMenu={true}
145
        rowHeaders={true}
146
        colHeaders={true}
147
        autoWrapRow={true}
148
        autoWrapCol={true}
149
        autoRowSize={true}
150
        dialog={true}
151
        licenseKey="non-commercial-and-evaluation"
152
      >
153
        <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
154
        <HotColumn
155
          title="Price"
156
          type="numeric"
157
          data="price"
158
          width={80}
159
          locale="en-US" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
160
          className="htRight"
161
          headerClassName="htRight"
162
        />
163
        <HotColumn
164
          title="Date"
165
          type="intl-date"
166
          data="sellDate"
167
          width={131}
168
          locale="en-US" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
169
          className="htRight"
170
          headerClassName="htRight"
171
        />
172
        <HotColumn
173
          title="Time"
174
          type="intl-time"
175
          data="sellTime"
176
          width={90}
177
          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
178
          className="htRight"
179
          headerClassName="htRight"
180
        />
181
        <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
182
      </HotTable>
183
    </>
184
  );
185
};
186

187
export default ExampleComponent;

Background variants

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

1
import React, { useRef, useEffect, useState } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

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

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

31
const backgroundOptions = [
32
  { value: 'solid', label: 'Solid' },
33
  { value: 'semi-transparent', label: 'Semi-transparent' },
34
];
35

36
const ExampleComponent = () => {
37
  const hotTableRef = useRef(null);
38
  const [isOpen, setIsOpen] = useState(false);
39
  const [selected, setSelected] = useState('solid');
40
  const dropdownRef = useRef(null);
41

42
  useEffect(() => {
43
    const hotInstance = hotTableRef.current?.hotInstance;
44

45
    if (!hotInstance) {
46
      return;
47
    }
48

49
    hotInstance.getPlugin('dialog').show();
50
  }, []);
51

52
  useEffect(() => {
53
    const handleClickOutside = (e) => {
54
      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
55
        setIsOpen(false);
56
      }
57
    };
58
    const handleEscape = (e) => {
59
      if (e.key === 'Escape') setIsOpen(false);
60
    };
61

62
    document.addEventListener('click', handleClickOutside);
63
    document.addEventListener('keydown', handleEscape);
64

65
    return () => {
66
      document.removeEventListener('click', handleClickOutside);
67
      document.removeEventListener('keydown', handleEscape);
68
    };
69
  }, []);
70

71
  const handleSelect = (value) => {
72
    setSelected(value);
73
    setIsOpen(false);
74

75
    const hotInstance = hotTableRef.current?.hotInstance;
76

77
    if (!hotInstance) {
78
      return;
79
    }
80

81
    const content =
82
      value === 'solid'
83
        ? 'This dialog uses a solid background (default).'
84
        : 'This dialog uses a semi-transparent background.';
85

86
    hotInstance.getPlugin('dialog').update({ content, background: value });
87
  };
88

89
  return (
90
    <>
91
      <div className="example-controls-container">
92
        <div className="controls">
93
          <div className="theme-dropdown" ref={dropdownRef}>
94
            <button
95
              className="theme-dropdown-trigger"
96
              type="button"
97
              aria-haspopup="listbox"
98
              aria-expanded={isOpen}
99
              onClick={() => setIsOpen(!isOpen)}
100
            >
101
              <span>{backgroundOptions.find((o) => o.value === selected)?.label}</span>
102
              <svg className="theme-dropdown-chevron" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6l6 -6"/></svg>
103
            </button>
104
            {isOpen && (
105
              <ul className="theme-dropdown-menu" role="listbox">
106
                {backgroundOptions.map((opt) => (
107
                  <li key={opt.value} role="option" aria-selected={selected === opt.value} onClick={() => handleSelect(opt.value)}>
108
                    {opt.label}
109
                  </li>
110
                ))}
111
              </ul>
112
            )}
113
          </div>
114
        </div>
115
      </div>
116
      <HotTable
117
        ref={hotTableRef}
118
        data={data}
119
        width="100%"
120
        height={300}
121
        stretchH="all"
122
        contextMenu={true}
123
        rowHeaders={true}
124
        colHeaders={true}
125
        autoWrapRow={true}
126
        autoWrapCol={true}
127
        autoRowSize={true}
128
        dialog={{
129
          content: 'This dialog uses a solid background (default).',
130
          background: 'solid',
131
          closable: true,
132
        }}
133
        licenseKey="non-commercial-and-evaluation"
134
      >
135
        <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
136
        <HotColumn
137
          title="Price"
138
          type="numeric"
139
          data="price"
140
          width={80}
141
          locale="en-US"
142
          numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
143
          className="htRight"
144
          headerClassName="htRight"
145
        />
146
        <HotColumn
147
          title="Date"
148
          type="intl-date"
149
          data="sellDate"
150
          width={131}
151
          locale="en-US"
152
          dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
153
          className="htRight"
154
          headerClassName="htRight"
155
        />
156
        <HotColumn
157
          title="Time"
158
          type="intl-time"
159
          data="sellTime"
160
          width={90}
161
          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
162
          className="htRight"
163
          headerClassName="htRight"
164
        />
165
        <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
166
      </HotTable>
167
    </>
168
  );
169
};
170

171
export default ExampleComponent;

1
import React, { useRef, useEffect, useState } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

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

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

31
const backgroundOptions = [
32
  { value: 'solid', label: 'Solid' },
33
  { value: 'semi-transparent', label: 'Semi-transparent' },
34
];
35

36
const ExampleComponent = () => {
37
  const hotTableRef = useRef(null);
38
  const [isOpen, setIsOpen] = useState(false);
39
  const [selected, setSelected] = useState('solid');
40
  const dropdownRef = useRef<HTMLDivElement>(null);
41

42
  useEffect(() => {
43
    const hotInstance = hotTableRef.current?.hotInstance;
44

45
    if (!hotInstance) {
46
      return;
47
    }
48

49
    hotInstance.getPlugin('dialog').show();
50
  }, []);
51

52
  useEffect(() => {
53
    const handleClickOutside = (e: MouseEvent) => {
54
      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
55
        setIsOpen(false);
56
      }
57
    };
58
    const handleEscape = (e: KeyboardEvent) => {
59
      if (e.key === 'Escape') setIsOpen(false);
60
    };
61

62
    document.addEventListener('click', handleClickOutside);
63
    document.addEventListener('keydown', handleEscape);
64

65
    return () => {
66
      document.removeEventListener('click', handleClickOutside);
67
      document.removeEventListener('keydown', handleEscape);
68
    };
69
  }, []);
70

71
  const handleSelect = (value: string) => {
72
    setSelected(value);
73
    setIsOpen(false);
74

75
    const hotInstance = hotTableRef.current?.hotInstance;
76

77
    if (!hotInstance) {
78
      return;
79
    }
80

81
    const content =
82
      value === 'solid'
83
        ? 'This dialog uses a solid background (default).'
84
        : 'This dialog uses a semi-transparent background.';
85

86
    hotInstance.getPlugin('dialog').update({ content, background: value });
87
  };
88

89
  return (
90
    <>
91
      <div className="example-controls-container">
92
        <div className="controls">
93
          <div className="theme-dropdown" ref={dropdownRef}>
94
            <button
95
              className="theme-dropdown-trigger"
96
              type="button"
97
              aria-haspopup="listbox"
98
              aria-expanded={isOpen}
99
              onClick={() => setIsOpen(!isOpen)}
100
            >
101
              <span>{backgroundOptions.find((o) => o.value === selected)?.label}</span>
102
              <svg className="theme-dropdown-chevron" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6l6 -6"/></svg>
103
            </button>
104
            {isOpen && (
105
              <ul className="theme-dropdown-menu" role="listbox">
106
                {backgroundOptions.map((opt) => (
107
                  <li key={opt.value} role="option" aria-selected={selected === opt.value} onClick={() => handleSelect(opt.value)}>
108
                    {opt.label}
109
                  </li>
110
                ))}
111
              </ul>
112
            )}
113
          </div>
114
        </div>
115
      </div>
116
      <HotTable
117
        ref={hotTableRef}
118
        data={data}
119
        width="100%"
120
        height={300}
121
        stretchH="all"
122
        contextMenu={true}
123
        rowHeaders={true}
124
        colHeaders={true}
125
        autoWrapRow={true}
126
        autoWrapCol={true}
127
        autoRowSize={true}
128
        dialog={{
129
          content: 'This dialog uses a solid background (default).',
130
          background: 'solid',
131
          closable: true,
132
        }}
133
        licenseKey="non-commercial-and-evaluation"
134
      >
135
        <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
136
        <HotColumn
137
          title="Price"
138
          type="numeric"
139
          data="price"
140
          width={80}
141
          locale="en-US" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
142
          className="htRight"
143
          headerClassName="htRight"
144
        />
145
        <HotColumn
146
          title="Date"
147
          type="intl-date"
148
          data="sellDate"
149
          width={131}
150
          locale="en-US" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
151
          className="htRight"
152
          headerClassName="htRight"
153
        />
154
        <HotColumn
155
          title="Time"
156
          type="intl-time"
157
          data="sellTime"
158
          width={90}
159
          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
160
          className="htRight"
161
          headerClassName="htRight"
162
        />
163
        <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
164
      </HotTable>
165
    </>
166
  );
167
};
168

169
export default ExampleComponent;

Content background

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

1
import React, { useRef, useEffect } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

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

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

31
const ExampleComponent = () => {
32
  const hotTableRef = useRef(null);
33

34
  useEffect(() => {
35
    const hotInstance = hotTableRef.current?.hotInstance;
36

37
    if (!hotInstance) {
38
      return;
39
    }
40

41
    hotInstance.getPlugin('dialog').show();
42
  }, []);
43

44
  return (
45
    <HotTable
46
      ref={hotTableRef}
47
      data={data}
48
      width="100%"
49
      height={300}
50
      stretchH="all"
51
      contextMenu={true}
52
      rowHeaders={true}
53
      colHeaders={true}
54
      autoWrapRow={true}
55
      autoWrapCol={true}
56
      autoRowSize={true}
57
      dialog={{
58
        content: 'This dialog uses a semi-transparent and content background.',
59
        contentBackground: true,
60
        background: 'semi-transparent',
61
        closable: true,
62
      }}
63
      licenseKey="non-commercial-and-evaluation"
64
    >
65
      <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
66
      <HotColumn
67
        title="Price"
68
        type="numeric"
69
        data="price"
70
        width={80}
71
        locale="en-US"
72
        numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
73
        className="htRight"
74
        headerClassName="htRight"
75
      />
76
      <HotColumn
77
        title="Date"
78
        type="intl-date"
79
        data="sellDate"
80
        width={131}
81
        locale="en-US"
82
        dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
83
        className="htRight"
84
        headerClassName="htRight"
85
      />
86
      <HotColumn
87
        title="Time"
88
        type="intl-time"
89
        data="sellTime"
90
        width={90}
91
        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
92
        className="htRight"
93
        headerClassName="htRight"
94
      />
95
      <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
96
    </HotTable>
97
  );
98
};
99

100
export default ExampleComponent;

1
import React, { useRef, useEffect } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

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

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

31
const ExampleComponent = () => {
32
  const hotTableRef = useRef(null);
33

34
  useEffect(() => {
35
    const hotInstance = hotTableRef.current?.hotInstance;
36

37
    if (!hotInstance) {
38
      return;
39
    }
40

41
    hotInstance.getPlugin('dialog').show();
42
  }, []);
43

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

98
export default ExampleComponent;

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 React, { useRef, useEffect } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

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

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

31
const ExampleComponent = () => {
32
  const hotTableRef = useRef(null);
33

34
  useEffect(() => {
35
    const hotInstance = hotTableRef.current?.hotInstance;
36

37
    if (!hotInstance) {
38
      return;
39
    }
40

41
    hotInstance.getPlugin('dialog').show();
42
  }, []);
43

44
  return (
45
    <HotTable
46
      ref={hotTableRef}
47
      data={data}
48
      width="100%"
49
      height={300}
50
      stretchH="all"
51
      contextMenu={true}
52
      rowHeaders={true}
53
      colHeaders={true}
54
      autoWrapRow={true}
55
      autoWrapCol={true}
56
      autoRowSize={true}
57
      dialog={{
58
        content: '<h2 id="example6-title">Title</h2><p id="example6-description">Description</p>',
59
        a11y: {
60
          role: 'alertdialog',
61
          ariaLabel: 'Title',
62
          ariaLabelledby: 'example6-title',
63
          ariaDescribedby: 'example6-description',
64
        },
65
        closable: true,
66
      }}
67
      licenseKey="non-commercial-and-evaluation"
68
    >
69
      <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
70
      <HotColumn
71
        title="Price"
72
        type="numeric"
73
        data="price"
74
        width={80}
75
        locale="en-US"
76
        numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
77
        className="htRight"
78
        headerClassName="htRight"
79
      />
80
      <HotColumn
81
        title="Date"
82
        type="intl-date"
83
        data="sellDate"
84
        width={131}
85
        locale="en-US"
86
        dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
87
        className="htRight"
88
        headerClassName="htRight"
89
      />
90
      <HotColumn
91
        title="Time"
92
        type="intl-time"
93
        data="sellTime"
94
        width={90}
95
        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
96
        className="htRight"
97
        headerClassName="htRight"
98
      />
99
      <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
100
    </HotTable>
101
  );
102
};
103

104
export default ExampleComponent;

1
import React, { useRef, useEffect } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

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

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

31
const ExampleComponent = () => {
32
  const hotTableRef = useRef(null);
33

34
  useEffect(() => {
35
    const hotInstance = hotTableRef.current?.hotInstance;
36

37
    if (!hotInstance) {
38
      return;
39
    }
40

41
    hotInstance.getPlugin('dialog').show();
42
  }, []);
43

44
  return (
45
    <HotTable
46
      ref={hotTableRef}
47
      data={data}
48
      width="100%"
49
      height={300}
50
      stretchH="all"
51
      contextMenu={true}
52
      rowHeaders={true}
53
      colHeaders={true}
54
      autoWrapRow={true}
55
      autoWrapCol={true}
56
      autoRowSize={true}
57
      dialog={{
58
        content: '<h2 id="example6-title">Title</h2><p id="example6-description">Description</p>',
59
        a11y: {
60
          role: 'alertdialog',
61
          ariaLabel: 'Title',
62
          ariaLabelledby: 'example6-title',
63
          ariaDescribedby: 'example6-description',
64
        },
65
        closable: true,
66
      }}
67
      licenseKey="non-commercial-and-evaluation"
68
    >
69
      <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
70
      <HotColumn
71
        title="Price"
72
        type="numeric"
73
        data="price"
74
        width={80}
75
        locale="en-US" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
76
        className="htRight"
77
        headerClassName="htRight"
78
      />
79
      <HotColumn
80
        title="Date"
81
        type="intl-date"
82
        data="sellDate"
83
        width={131}
84
        locale="en-US" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
85
        className="htRight"
86
        headerClassName="htRight"
87
      />
88
      <HotColumn
89
        title="Time"
90
        type="intl-time"
91
        data="sellTime"
92
        width={90}
93
        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
94
        className="htRight"
95
        headerClassName="htRight"
96
      />
97
      <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
98
    </HotTable>
99
  );
100
};
101

102
export default ExampleComponent;

Programmatic control

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

Show and hide dialog

1
import React, { useRef } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

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

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

31
const ExampleComponent = () => {
32
  const hotTableRef = useRef(null);
33
  const showDialog = () => {
34
    const hotInstance = hotTableRef.current?.hotInstance;
35

36
    if (!hotInstance) {
37
      return;
38
    }
39

40
    hotInstance.getPlugin('dialog').show();
41
  };
42

43
  const hideDialog = () => {
44
    const hotInstance = hotTableRef.current?.hotInstance;
45

46
    if (!hotInstance) {
47
      return;
48
    }
49

50
    hotInstance.getPlugin('dialog').hide();
51
  };
52

53
  return (
54
    <>
55
      <div style={{ marginBottom: '16px', display: 'flex', gap: '10px' }}>
56
        <button onClick={showDialog}>Show Dialog</button>
57
        <button onClick={hideDialog}>Hide Dialog</button>
58
      </div>
59
      <HotTable
60
        ref={hotTableRef}
61
        data={data}
62
        width="100%"
63
        height={300}
64
        stretchH="all"
65
        contextMenu={true}
66
        rowHeaders={true}
67
        colHeaders={true}
68
        autoWrapRow={true}
69
        autoWrapCol={true}
70
        autoRowSize={true}
71
        dialog={{
72
          content: 'This dialog can be controlled programmatically.',
73
          closable: true,
74
        }}
75
        licenseKey="non-commercial-and-evaluation"
76
      >
77
        <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
78
        <HotColumn
79
          title="Price"
80
          type="numeric"
81
          data="price"
82
          width={80}
83
          locale="en-US"
84
          numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
85
          className="htRight"
86
          headerClassName="htRight"
87
        />
88
        <HotColumn
89
          title="Date"
90
          type="intl-date"
91
          data="sellDate"
92
          width={131}
93
          locale="en-US"
94
          dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
95
          className="htRight"
96
          headerClassName="htRight"
97
        />
98
        <HotColumn
99
          title="Time"
100
          type="intl-time"
101
          data="sellTime"
102
          width={90}
103
          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
104
          className="htRight"
105
          headerClassName="htRight"
106
        />
107
        <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
108
      </HotTable>
109
    </>
110
  );
111
};
112

113
export default ExampleComponent;

1
import React, { useRef } from 'react';
2
import { HotTable, HotColumn, HotTableRef } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

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

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

31
const ExampleComponent = () => {
32
  const hotTableRef = useRef<HotTableRef>(null);
33

34
  const showDialog = () => {
35
    const hotInstance = hotTableRef.current?.hotInstance;
36

37
    if (!hotInstance) {
38
      return;
39
    }
40

41
    hotInstance.getPlugin('dialog').show();
42
  };
43

44
  const hideDialog = () => {
45
    const hotInstance = hotTableRef.current?.hotInstance;
46

47
    if (!hotInstance) {
48
      return;
49
    }
50

51
    hotInstance.getPlugin('dialog').hide();
52
  };
53

54
  return (
55
    <>
56
      <div style={{ marginBottom: '16px', display: 'flex', gap: '10px' }}>
57
        <button onClick={showDialog}>Show Dialog</button>
58
        <button onClick={hideDialog}>Hide Dialog</button>
59
      </div>
60
      <HotTable
61
        ref={hotTableRef}
62
        data={data}
63
        width="100%"
64
        height={300}
65
        stretchH="all"
66
        contextMenu={true}
67
        rowHeaders={true}
68
        colHeaders={true}
69
        autoWrapRow={true}
70
        autoWrapCol={true}
71
        autoRowSize={true}
72
        dialog={{
73
          content: 'This dialog can be controlled programmatically.',
74
          closable: true,
75
        }}
76
        licenseKey="non-commercial-and-evaluation"
77
      >
78
        <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
79
        <HotColumn
80
          title="Price"
81
          type="numeric"
82
          data="price"
83
          width={80}
84
          locale="en-US" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
85
          className="htRight"
86
          headerClassName="htRight"
87
        />
88
        <HotColumn
89
          title="Date"
90
          type="intl-date"
91
          data="sellDate"
92
          width={131}
93
          locale="en-US" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
94
          className="htRight"
95
          headerClassName="htRight"
96
        />
97
        <HotColumn
98
          title="Time"
99
          type="intl-time"
100
          data="sellTime"
101
          width={90}
102
          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
103
          className="htRight"
104
          headerClassName="htRight"
105
        />
106
        <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
107
      </HotTable>
108
    </>
109
  );
110
};
111

112
export default ExampleComponent;

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