Skip to content
Handsontable dev

Notification

Show non-blocking toast notifications for save confirmations, errors, and other transient feedback. Toasts are anchored to the Handsontable root, support stacking per corner, and work with the design system themes.

Overview

The Notification plugin adds a small API on top of the grid: showMessage, hide, hideAll, isVisible, and getQueueSize. You can choose severity variants, corner positions, optional titles, action buttons, and auto-dismiss timing. The plugin is disabled by default; set notification to true or to a configuration object.

Toasts use aria-live="polite" for informational variants and aria-live="assertive" for the error variant so assistive technologies announce them without moving keyboard focus. Press F6 to move focus into the notification region when at least one toast is visible; Tab and Shift+Tab then move between controls across visible toasts. Tab from the last control in the region moves focus to the highlighted grid cell (the notification host follows the grid in the DOM, so default tab order would otherwise leave the table). Shift+Tab from the first control behaves like Escape and returns focus to the element that was active before you entered. Press Escape to leave the region the same way. Hiding the last toast while focus is in the notification region or on that toast restores focus the same way as Escape. Opening a toast does not move focus on its own.

Basic configuration

Enable the plugin with notification: true, then call showMessage() for each toast. The example below opens four toasts at once (duration: 0), one in each corner (top-start, top-end, bottom-start, and bottom-end), with info, success, warning, and error variants.

Toolbar actions (inventory-style)

Use separate buttons for save, error recovery, and warnings. Primary and secondary actions on an error toast can call hideAll() before showing follow-up feedback.

API summary

MethodDescription
showMessage(options)Shows a toast. Returns a string id.
hide(id)Hides one toast.
hideAll()Hides every visible toast and clears the queue.
isVisible(id?)Returns whether a given toast or any toast is visible.
getQueueSize()Returns how many toasts are waiting when stackLimit is reached.

Hooks: beforeNotificationShow, afterNotificationShow, beforeNotificationHide, and afterNotificationHide. Returning false from beforeNotificationShow cancels showMessage (no id, nothing enqueued). That hook runs once per call to showMessage, including when the toast is queued because stackLimit is full; it does not run again when a queued toast mounts. Returning false from beforeNotificationHide keeps the toast visible and stops automatic dismissal for that toast.

Handsontable 16.2.0: Simplified theming and advanced user notifications

Read more