Skip to content
Handsontable dev

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.

Content types

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

Plain text content

HTML content

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.

Background variants

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

Content background

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

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

Programmatic control

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

Show and hide dialog

Configuration options

dialog

Plugins

Dialog