JavaScript Data GridDialog
Display modal dialogs, alerts, loading indicators, and notifications to enhance user interaction and provide feedback in your data grid application.
On this page
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.
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';
// register Handsontable's modules
registerAllModules();
const data = [
{ model: 'Trail Helmet', price: 1298.14, sellDate: 'Aug 31, 2025', sellTime: '02:12 PM', inStock: true },
{ model: 'Windbreaker Jacket', price: 178.9, sellDate: 'May 10, 2025', sellTime: '10:26 PM', inStock: false },
{ model: 'Cycling Cap', price: 288.1, sellDate: 'Sep 15, 2025', sellTime: '09:37 AM', inStock: true },
{ model: 'HL Mountain Frame', price: 94.49, sellDate: 'Jan 17, 2025', sellTime: '02:19 PM', inStock: false },
{ model: 'Racing Socks', price: 430.38, sellDate: 'May 10, 2025', sellTime: '01:42 PM', inStock: true },
{ model: 'Racing Socks', price: 138.85, sellDate: 'Sep 20, 2025', sellTime: '02:48 PM', inStock: true },
{ model: 'HL Mountain Frame', price: 1909.63, sellDate: 'Sep 5, 2025', sellTime: '09:35 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 1080.7, sellDate: 'Oct 24, 2025', sellTime: '10:58 PM', inStock: false },
{ model: 'Aero Bottle', price: 1571.13, sellDate: 'May 24, 2025', sellTime: '12:24 AM', inStock: true },
{ model: 'Windbreaker Jacket', price: 919.09, sellDate: 'Jul 16, 2025', sellTime: '07:11 PM', inStock: true },
{ model: 'HL Road Tire', price: 886.22, sellDate: 'Sep 9, 2025', sellTime: '12:42 AM', inStock: false },
{ model: 'Speed Gloves', price: 635.13, sellDate: 'Nov 17, 2025', sellTime: '12:45 PM', inStock: true },
{ model: 'Trail Helmet', price: 1440.64, sellDate: 'Jan 3, 2025', sellTime: '08:16 PM', inStock: false },
{ model: 'Aero Bottle', price: 944.63, sellDate: 'Nov 15, 2025', sellTime: '04:14 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 1161.43, sellDate: 'Jun 24, 2025', sellTime: '01:19 PM', inStock: false },
{ model: 'LED Bike Light', price: 1012.5, sellDate: 'May 1, 2025', sellTime: '05:30 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 635.37, sellDate: 'May 14, 2025', sellTime: '09:05 AM', inStock: true },
{ model: 'Road Tire Tube', price: 1421.27, sellDate: 'Jan 31, 2025', sellTime: '01:33 PM', inStock: true },
{ model: 'Action Camera', price: 1019.05, sellDate: 'Dec 7, 2025', sellTime: '01:26 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 603.96, sellDate: 'Sep 13, 2025', sellTime: '04:10 AM', inStock: false },
];
const container = document.getElementById('example1');
const hot = new Handsontable(container, {
themeName: 'ht-theme-main',
data,
colHeaders: true,
rowHeaders: true,
columns: [
{
title: 'Model',
type: 'text',
data: 'model',
width: 150,
headerClassName: 'htLeft',
},
{
title: 'Price',
type: 'numeric',
data: 'price',
width: 80,
numericFormat: {
pattern: '$0,0.00',
culture: 'en-US',
},
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Date',
type: 'date',
data: 'sellDate',
width: 130,
dateFormat: 'MMM D, YYYY',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Time',
type: 'time',
data: 'sellTime',
width: 90,
timeFormat: 'hh:mm A',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'In stock',
type: 'checkbox',
data: 'inStock',
className: 'htCenter',
headerClassName: 'htCenter',
},
],
width: '100%',
height: 300,
stretchH: 'all',
dialog: true,
licenseKey: 'non-commercial-and-evaluation',
});
// Show dialog after initialization
const dialogPlugin = hot.getPlugin('dialog');
dialogPlugin.show({
content: 'This is a basic dialog with default configuration.',
closable: true,
});Content types
The dialog supports multiple content types including plain text, HTML strings, and DOM elements.
Plain text content
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';
// register Handsontable's modules
registerAllModules();
const data = [
{ model: 'Trail Helmet', price: 1298.14, sellDate: 'Aug 31, 2025', sellTime: '02:12 PM', inStock: true },
{ model: 'Windbreaker Jacket', price: 178.9, sellDate: 'May 10, 2025', sellTime: '10:26 PM', inStock: false },
{ model: 'Cycling Cap', price: 288.1, sellDate: 'Sep 15, 2025', sellTime: '09:37 AM', inStock: true },
{ model: 'HL Mountain Frame', price: 94.49, sellDate: 'Jan 17, 2025', sellTime: '02:19 PM', inStock: false },
{ model: 'Racing Socks', price: 430.38, sellDate: 'May 10, 2025', sellTime: '01:42 PM', inStock: true },
{ model: 'Racing Socks', price: 138.85, sellDate: 'Sep 20, 2025', sellTime: '02:48 PM', inStock: true },
{ model: 'HL Mountain Frame', price: 1909.63, sellDate: 'Sep 5, 2025', sellTime: '09:35 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 1080.7, sellDate: 'Oct 24, 2025', sellTime: '10:58 PM', inStock: false },
{ model: 'Aero Bottle', price: 1571.13, sellDate: 'May 24, 2025', sellTime: '12:24 AM', inStock: true },
{ model: 'Windbreaker Jacket', price: 919.09, sellDate: 'Jul 16, 2025', sellTime: '07:11 PM', inStock: true },
{ model: 'HL Road Tire', price: 886.22, sellDate: 'Sep 9, 2025', sellTime: '12:42 AM', inStock: false },
{ model: 'Speed Gloves', price: 635.13, sellDate: 'Nov 17, 2025', sellTime: '12:45 PM', inStock: true },
{ model: 'Trail Helmet', price: 1440.64, sellDate: 'Jan 3, 2025', sellTime: '08:16 PM', inStock: false },
{ model: 'Aero Bottle', price: 944.63, sellDate: 'Nov 15, 2025', sellTime: '04:14 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 1161.43, sellDate: 'Jun 24, 2025', sellTime: '01:19 PM', inStock: false },
{ model: 'LED Bike Light', price: 1012.5, sellDate: 'May 1, 2025', sellTime: '05:30 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 635.37, sellDate: 'May 14, 2025', sellTime: '09:05 AM', inStock: true },
{ model: 'Road Tire Tube', price: 1421.27, sellDate: 'Jan 31, 2025', sellTime: '01:33 PM', inStock: true },
{ model: 'Action Camera', price: 1019.05, sellDate: 'Dec 7, 2025', sellTime: '01:26 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 603.96, sellDate: 'Sep 13, 2025', sellTime: '04:10 AM', inStock: false },
];
const container = document.getElementById('example2');
const hot = new Handsontable(container, {
themeName: 'ht-theme-main',
data,
colHeaders: true,
rowHeaders: true,
columns: [
{
title: 'Model',
type: 'text',
data: 'model',
width: 150,
headerClassName: 'htLeft',
},
{
title: 'Price',
type: 'numeric',
data: 'price',
width: 80,
numericFormat: {
pattern: '$0,0.00',
culture: 'en-US',
},
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Date',
type: 'date',
data: 'sellDate',
width: 130,
dateFormat: 'MMM D, YYYY',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Time',
type: 'time',
data: 'sellTime',
width: 90,
timeFormat: 'hh:mm A',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'In stock',
type: 'checkbox',
data: 'inStock',
className: 'htCenter',
headerClassName: 'htCenter',
},
],
width: '100%',
height: 300,
stretchH: 'all',
dialog: {
content: 'This is a simple text message displayed in the dialog.',
closable: true,
},
licenseKey: 'non-commercial-and-evaluation',
});
// Show dialog after initialization
const dialogPlugin = hot.getPlugin('dialog');
dialogPlugin.show();HTML content
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';
// register Handsontable's modules
registerAllModules();
const data = [
{ model: 'Trail Helmet', price: 1298.14, sellDate: 'Aug 31, 2025', sellTime: '02:12 PM', inStock: true },
{ model: 'Windbreaker Jacket', price: 178.9, sellDate: 'May 10, 2025', sellTime: '10:26 PM', inStock: false },
{ model: 'Cycling Cap', price: 288.1, sellDate: 'Sep 15, 2025', sellTime: '09:37 AM', inStock: true },
{ model: 'HL Mountain Frame', price: 94.49, sellDate: 'Jan 17, 2025', sellTime: '02:19 PM', inStock: false },
{ model: 'Racing Socks', price: 430.38, sellDate: 'May 10, 2025', sellTime: '01:42 PM', inStock: true },
{ model: 'Racing Socks', price: 138.85, sellDate: 'Sep 20, 2025', sellTime: '02:48 PM', inStock: true },
{ model: 'HL Mountain Frame', price: 1909.63, sellDate: 'Sep 5, 2025', sellTime: '09:35 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 1080.7, sellDate: 'Oct 24, 2025', sellTime: '10:58 PM', inStock: false },
{ model: 'Aero Bottle', price: 1571.13, sellDate: 'May 24, 2025', sellTime: '12:24 AM', inStock: true },
{ model: 'Windbreaker Jacket', price: 919.09, sellDate: 'Jul 16, 2025', sellTime: '07:11 PM', inStock: true },
{ model: 'HL Road Tire', price: 886.22, sellDate: 'Sep 9, 2025', sellTime: '12:42 AM', inStock: false },
{ model: 'Speed Gloves', price: 635.13, sellDate: 'Nov 17, 2025', sellTime: '12:45 PM', inStock: true },
{ model: 'Trail Helmet', price: 1440.64, sellDate: 'Jan 3, 2025', sellTime: '08:16 PM', inStock: false },
{ model: 'Aero Bottle', price: 944.63, sellDate: 'Nov 15, 2025', sellTime: '04:14 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 1161.43, sellDate: 'Jun 24, 2025', sellTime: '01:19 PM', inStock: false },
{ model: 'LED Bike Light', price: 1012.5, sellDate: 'May 1, 2025', sellTime: '05:30 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 635.37, sellDate: 'May 14, 2025', sellTime: '09:05 AM', inStock: true },
{ model: 'Road Tire Tube', price: 1421.27, sellDate: 'Jan 31, 2025', sellTime: '01:33 PM', inStock: true },
{ model: 'Action Camera', price: 1019.05, sellDate: 'Dec 7, 2025', sellTime: '01:26 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 603.96, sellDate: 'Sep 13, 2025', sellTime: '04:10 AM', inStock: false },
];
const container = document.getElementById('example3');
const hot = new Handsontable(container, {
themeName: 'ht-theme-main',
data,
colHeaders: true,
rowHeaders: true,
columns: [
{
title: 'Model',
type: 'text',
data: 'model',
width: 150,
headerClassName: 'htLeft',
},
{
title: 'Price',
type: 'numeric',
data: 'price',
width: 80,
numericFormat: {
pattern: '$0,0.00',
culture: 'en-US',
},
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Date',
type: 'date',
data: 'sellDate',
width: 130,
dateFormat: 'MMM D, YYYY',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Time',
type: 'time',
data: 'sellTime',
width: 90,
timeFormat: 'hh:mm A',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'In stock',
type: 'checkbox',
data: 'inStock',
className: 'htCenter',
headerClassName: 'htCenter',
},
],
width: '100%',
height: 300,
stretchH: 'all',
dialog: {
content:
'<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button id="example3-button">Hide dialog</button>',
closable: true,
},
licenseKey: 'non-commercial-and-evaluation',
});
// Show dialog after initialization
const dialogPlugin = hot.getPlugin('dialog');
dialogPlugin.show();
document.getElementById('example3-button').addEventListener('click', () => {
dialogPlugin.hide();
});Background variants
The dialog supports two background variants: solid and semi-transparent.
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';
// register Handsontable's modules
registerAllModules();
const data = [
{ model: 'Trail Helmet', price: 1298.14, sellDate: 'Aug 31, 2025', sellTime: '02:12 PM', inStock: true },
{ model: 'Windbreaker Jacket', price: 178.9, sellDate: 'May 10, 2025', sellTime: '10:26 PM', inStock: false },
{ model: 'Cycling Cap', price: 288.1, sellDate: 'Sep 15, 2025', sellTime: '09:37 AM', inStock: true },
{ model: 'HL Mountain Frame', price: 94.49, sellDate: 'Jan 17, 2025', sellTime: '02:19 PM', inStock: false },
{ model: 'Racing Socks', price: 430.38, sellDate: 'May 10, 2025', sellTime: '01:42 PM', inStock: true },
{ model: 'Racing Socks', price: 138.85, sellDate: 'Sep 20, 2025', sellTime: '02:48 PM', inStock: true },
{ model: 'HL Mountain Frame', price: 1909.63, sellDate: 'Sep 5, 2025', sellTime: '09:35 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 1080.7, sellDate: 'Oct 24, 2025', sellTime: '10:58 PM', inStock: false },
{ model: 'Aero Bottle', price: 1571.13, sellDate: 'May 24, 2025', sellTime: '12:24 AM', inStock: true },
{ model: 'Windbreaker Jacket', price: 919.09, sellDate: 'Jul 16, 2025', sellTime: '07:11 PM', inStock: true },
{ model: 'HL Road Tire', price: 886.22, sellDate: 'Sep 9, 2025', sellTime: '12:42 AM', inStock: false },
{ model: 'Speed Gloves', price: 635.13, sellDate: 'Nov 17, 2025', sellTime: '12:45 PM', inStock: true },
{ model: 'Trail Helmet', price: 1440.64, sellDate: 'Jan 3, 2025', sellTime: '08:16 PM', inStock: false },
{ model: 'Aero Bottle', price: 944.63, sellDate: 'Nov 15, 2025', sellTime: '04:14 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 1161.43, sellDate: 'Jun 24, 2025', sellTime: '01:19 PM', inStock: false },
{ model: 'LED Bike Light', price: 1012.5, sellDate: 'May 1, 2025', sellTime: '05:30 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 635.37, sellDate: 'May 14, 2025', sellTime: '09:05 AM', inStock: true },
{ model: 'Road Tire Tube', price: 1421.27, sellDate: 'Jan 31, 2025', sellTime: '01:33 PM', inStock: true },
{ model: 'Action Camera', price: 1019.05, sellDate: 'Dec 7, 2025', sellTime: '01:26 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 603.96, sellDate: 'Sep 13, 2025', sellTime: '04:10 AM', inStock: false },
];
const container = document.getElementById('example4');
const hot = new Handsontable(container, {
themeName: 'ht-theme-main',
data,
colHeaders: true,
rowHeaders: true,
columns: [
{
title: 'Model',
type: 'text',
data: 'model',
width: 150,
headerClassName: 'htLeft',
},
{
title: 'Price',
type: 'numeric',
data: 'price',
width: 80,
numericFormat: {
pattern: '$0,0.00',
culture: 'en-US',
},
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Date',
type: 'date',
data: 'sellDate',
width: 130,
dateFormat: 'MMM D, YYYY',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Time',
type: 'time',
data: 'sellTime',
width: 90,
timeFormat: 'hh:mm A',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'In stock',
type: 'checkbox',
data: 'inStock',
className: 'htCenter',
headerClassName: 'htCenter',
},
],
width: '100%',
height: 300,
stretchH: 'all',
dialog: {
content: 'This dialog uses a solid background (default).',
background: 'solid',
closable: true,
},
licenseKey: 'non-commercial-and-evaluation',
});
// Show dialog after initialization
const dialogPlugin = hot.getPlugin('dialog');
dialogPlugin.show();
// Add event listeners for select
document.getElementById('background-select').addEventListener('change', (event) => {
const background = event.target.value;
const content =
background === 'solid'
? 'This dialog uses a solid background (default).'
: 'This dialog uses a semi-transparent background.';
dialogPlugin.update({
content,
background,
});
});<div class="example-controls-container" style="padding-bottom: 16px">
<div class="controlsQuickFilter">
<label for="background-select" class="selectColumn">Select a background:
<select id="background-select">
<option value="solid">Solid</option>
<option value="semi-transparent">Semi-transparent</option>
</select>
</label>
</div>
</div>
<div id="example4"></div>
Content background
The dialog content can have a background color using the contentBackground option.
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';
// register Handsontable's modules
registerAllModules();
const data = [
{ model: 'Trail Helmet', price: 1298.14, sellDate: 'Aug 31, 2025', sellTime: '02:12 PM', inStock: true },
{ model: 'Windbreaker Jacket', price: 178.9, sellDate: 'May 10, 2025', sellTime: '10:26 PM', inStock: false },
{ model: 'Cycling Cap', price: 288.1, sellDate: 'Sep 15, 2025', sellTime: '09:37 AM', inStock: true },
{ model: 'HL Mountain Frame', price: 94.49, sellDate: 'Jan 17, 2025', sellTime: '02:19 PM', inStock: false },
{ model: 'Racing Socks', price: 430.38, sellDate: 'May 10, 2025', sellTime: '01:42 PM', inStock: true },
{ model: 'Racing Socks', price: 138.85, sellDate: 'Sep 20, 2025', sellTime: '02:48 PM', inStock: true },
{ model: 'HL Mountain Frame', price: 1909.63, sellDate: 'Sep 5, 2025', sellTime: '09:35 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 1080.7, sellDate: 'Oct 24, 2025', sellTime: '10:58 PM', inStock: false },
{ model: 'Aero Bottle', price: 1571.13, sellDate: 'May 24, 2025', sellTime: '12:24 AM', inStock: true },
{ model: 'Windbreaker Jacket', price: 919.09, sellDate: 'Jul 16, 2025', sellTime: '07:11 PM', inStock: true },
{ model: 'HL Road Tire', price: 886.22, sellDate: 'Sep 9, 2025', sellTime: '12:42 AM', inStock: false },
{ model: 'Speed Gloves', price: 635.13, sellDate: 'Nov 17, 2025', sellTime: '12:45 PM', inStock: true },
{ model: 'Trail Helmet', price: 1440.64, sellDate: 'Jan 3, 2025', sellTime: '08:16 PM', inStock: false },
{ model: 'Aero Bottle', price: 944.63, sellDate: 'Nov 15, 2025', sellTime: '04:14 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 1161.43, sellDate: 'Jun 24, 2025', sellTime: '01:19 PM', inStock: false },
{ model: 'LED Bike Light', price: 1012.5, sellDate: 'May 1, 2025', sellTime: '05:30 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 635.37, sellDate: 'May 14, 2025', sellTime: '09:05 AM', inStock: true },
{ model: 'Road Tire Tube', price: 1421.27, sellDate: 'Jan 31, 2025', sellTime: '01:33 PM', inStock: true },
{ model: 'Action Camera', price: 1019.05, sellDate: 'Dec 7, 2025', sellTime: '01:26 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 603.96, sellDate: 'Sep 13, 2025', sellTime: '04:10 AM', inStock: false },
];
const container = document.getElementById('example5');
const hot = new Handsontable(container, {
themeName: 'ht-theme-main',
data,
colHeaders: true,
rowHeaders: true,
columns: [
{
title: 'Model',
type: 'text',
data: 'model',
width: 150,
headerClassName: 'htLeft',
},
{
title: 'Price',
type: 'numeric',
data: 'price',
width: 80,
numericFormat: {
pattern: '$0,0.00',
culture: 'en-US',
},
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Date',
type: 'date',
data: 'sellDate',
width: 130,
dateFormat: 'MMM D, YYYY',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Time',
type: 'time',
data: 'sellTime',
width: 90,
timeFormat: 'hh:mm A',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'In stock',
type: 'checkbox',
data: 'inStock',
className: 'htCenter',
headerClassName: 'htCenter',
},
],
width: '100%',
height: 300,
stretchH: 'all',
dialog: {
content: 'This dialog uses a semi-transparent background.',
contentBackground: true,
background: 'semi-transparent',
closable: true,
},
licenseKey: 'non-commercial-and-evaluation',
});
// Show dialog after initialization
const dialogPlugin = hot.getPlugin('dialog');
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 byariaLabelledby. If bothariaLabelandariaLabelledbyare provided,ariaLabelledbytakes precedenceariaLabelledby- References an element that labels the dialogariaDescribedby- References an element that describes the dialog
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';
// register Handsontable's modules
registerAllModules();
const data = [
{ model: 'Trail Helmet', price: 1298.14, sellDate: 'Aug 31, 2025', sellTime: '02:12 PM', inStock: true },
{ model: 'Windbreaker Jacket', price: 178.9, sellDate: 'May 10, 2025', sellTime: '10:26 PM', inStock: false },
{ model: 'Cycling Cap', price: 288.1, sellDate: 'Sep 15, 2025', sellTime: '09:37 AM', inStock: true },
{ model: 'HL Mountain Frame', price: 94.49, sellDate: 'Jan 17, 2025', sellTime: '02:19 PM', inStock: false },
{ model: 'Racing Socks', price: 430.38, sellDate: 'May 10, 2025', sellTime: '01:42 PM', inStock: true },
{ model: 'Racing Socks', price: 138.85, sellDate: 'Sep 20, 2025', sellTime: '02:48 PM', inStock: true },
{ model: 'HL Mountain Frame', price: 1909.63, sellDate: 'Sep 5, 2025', sellTime: '09:35 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 1080.7, sellDate: 'Oct 24, 2025', sellTime: '10:58 PM', inStock: false },
{ model: 'Aero Bottle', price: 1571.13, sellDate: 'May 24, 2025', sellTime: '12:24 AM', inStock: true },
{ model: 'Windbreaker Jacket', price: 919.09, sellDate: 'Jul 16, 2025', sellTime: '07:11 PM', inStock: true },
{ model: 'HL Road Tire', price: 886.22, sellDate: 'Sep 9, 2025', sellTime: '12:42 AM', inStock: false },
{ model: 'Speed Gloves', price: 635.13, sellDate: 'Nov 17, 2025', sellTime: '12:45 PM', inStock: true },
{ model: 'Trail Helmet', price: 1440.64, sellDate: 'Jan 3, 2025', sellTime: '08:16 PM', inStock: false },
{ model: 'Aero Bottle', price: 944.63, sellDate: 'Nov 15, 2025', sellTime: '04:14 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 1161.43, sellDate: 'Jun 24, 2025', sellTime: '01:19 PM', inStock: false },
{ model: 'LED Bike Light', price: 1012.5, sellDate: 'May 1, 2025', sellTime: '05:30 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 635.37, sellDate: 'May 14, 2025', sellTime: '09:05 AM', inStock: true },
{ model: 'Road Tire Tube', price: 1421.27, sellDate: 'Jan 31, 2025', sellTime: '01:33 PM', inStock: true },
{ model: 'Action Camera', price: 1019.05, sellDate: 'Dec 7, 2025', sellTime: '01:26 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 603.96, sellDate: 'Sep 13, 2025', sellTime: '04:10 AM', inStock: false },
];
const container = document.getElementById('example6');
const hot = new Handsontable(container, {
themeName: 'ht-theme-main',
data,
colHeaders: true,
rowHeaders: true,
columns: [
{
title: 'Model',
type: 'text',
data: 'model',
width: 150,
headerClassName: 'htLeft',
},
{
title: 'Price',
type: 'numeric',
data: 'price',
width: 80,
numericFormat: {
pattern: '$0,0.00',
culture: 'en-US',
},
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Date',
type: 'date',
data: 'sellDate',
width: 130,
dateFormat: 'MMM D, YYYY',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Time',
type: 'time',
data: 'sellTime',
width: 90,
timeFormat: 'hh:mm A',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'In stock',
type: 'checkbox',
data: 'inStock',
className: 'htCenter',
headerClassName: 'htCenter',
},
],
width: '100%',
height: 300,
stretchH: 'all',
dialog: {
content: '<h2 id="example6-title">Title</h2><p id="example6-description">Description</p>',
a11y: {
role: 'alertdialog',
ariaLabel: 'Title',
ariaLabelledby: 'example6-title',
ariaDescribedby: 'example6-description',
},
closable: true,
},
licenseKey: 'non-commercial-and-evaluation',
});
// Show dialog after initialization
const dialogPlugin = hot.getPlugin('dialog');
dialogPlugin.show();Programmatic control
You can control the dialog programmatically using the plugin's methods.
Show and hide dialog
import Handsontable from 'handsontable/base';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';
// register Handsontable's modules
registerAllModules();
const data = [
{ model: 'Trail Helmet', price: 1298.14, sellDate: 'Aug 31, 2025', sellTime: '02:12 PM', inStock: true },
{ model: 'Windbreaker Jacket', price: 178.9, sellDate: 'May 10, 2025', sellTime: '10:26 PM', inStock: false },
{ model: 'Cycling Cap', price: 288.1, sellDate: 'Sep 15, 2025', sellTime: '09:37 AM', inStock: true },
{ model: 'HL Mountain Frame', price: 94.49, sellDate: 'Jan 17, 2025', sellTime: '02:19 PM', inStock: false },
{ model: 'Racing Socks', price: 430.38, sellDate: 'May 10, 2025', sellTime: '01:42 PM', inStock: true },
{ model: 'Racing Socks', price: 138.85, sellDate: 'Sep 20, 2025', sellTime: '02:48 PM', inStock: true },
{ model: 'HL Mountain Frame', price: 1909.63, sellDate: 'Sep 5, 2025', sellTime: '09:35 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 1080.7, sellDate: 'Oct 24, 2025', sellTime: '10:58 PM', inStock: false },
{ model: 'Aero Bottle', price: 1571.13, sellDate: 'May 24, 2025', sellTime: '12:24 AM', inStock: true },
{ model: 'Windbreaker Jacket', price: 919.09, sellDate: 'Jul 16, 2025', sellTime: '07:11 PM', inStock: true },
{ model: 'HL Road Tire', price: 886.22, sellDate: 'Sep 9, 2025', sellTime: '12:42 AM', inStock: false },
{ model: 'Speed Gloves', price: 635.13, sellDate: 'Nov 17, 2025', sellTime: '12:45 PM', inStock: true },
{ model: 'Trail Helmet', price: 1440.64, sellDate: 'Jan 3, 2025', sellTime: '08:16 PM', inStock: false },
{ model: 'Aero Bottle', price: 944.63, sellDate: 'Nov 15, 2025', sellTime: '04:14 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 1161.43, sellDate: 'Jun 24, 2025', sellTime: '01:19 PM', inStock: false },
{ model: 'LED Bike Light', price: 1012.5, sellDate: 'May 1, 2025', sellTime: '05:30 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 635.37, sellDate: 'May 14, 2025', sellTime: '09:05 AM', inStock: true },
{ model: 'Road Tire Tube', price: 1421.27, sellDate: 'Jan 31, 2025', sellTime: '01:33 PM', inStock: true },
{ model: 'Action Camera', price: 1019.05, sellDate: 'Dec 7, 2025', sellTime: '01:26 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 603.96, sellDate: 'Sep 13, 2025', sellTime: '04:10 AM', inStock: false },
];
const container = document.getElementById('example7');
const hot = new Handsontable(container, {
themeName: 'ht-theme-main',
data,
colHeaders: true,
rowHeaders: true,
columns: [
{
title: 'Model',
type: 'text',
data: 'model',
width: 150,
headerClassName: 'htLeft',
},
{
title: 'Price',
type: 'numeric',
data: 'price',
width: 80,
numericFormat: {
pattern: '$0,0.00',
culture: 'en-US',
},
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Date',
type: 'date',
data: 'sellDate',
width: 130,
dateFormat: 'MMM D, YYYY',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Time',
type: 'time',
data: 'sellTime',
width: 90,
timeFormat: 'hh:mm A',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'In stock',
type: 'checkbox',
data: 'inStock',
className: 'htCenter',
headerClassName: 'htCenter',
},
],
width: '100%',
height: 300,
stretchH: 'all',
dialog: {
content: 'This dialog can be controlled programmatically.',
closable: true,
},
licenseKey: 'non-commercial-and-evaluation',
});
const dialogPlugin = hot.getPlugin('dialog');
// Add event listeners for buttons
document.getElementById('showDialog').addEventListener('click', () => {
dialogPlugin.show({
content: 'Dialog shown programmatically!',
closable: true,
});
});
document.getElementById('hideDialog').addEventListener('click', () => {
dialogPlugin.hide();
});<div style="margin-bottom: 16px; display: flex; gap: 10px">
<button id="showDialog">Show Dialog</button>
<button id="hideDialog">Hide Dialog</button>
</div>
<div id="example7"></div>
Related API reference
There is a newer version of Handsontable available. Switch to the latest version ⟶