Loading

Description

The loading plugin provides a loading overlay system for Handsontable using the Dialog plugin. It displays a loading indicator with customizable title, icon, and description.

In order to enable the loading mechanism, Options#loading option must be set to true.

The plugin provides several configuration options to customize the loading behavior and appearance:

• icon: Loading icon to display HTML (as string) in svg format (default: <svg ... />).
• title: Loading title to display (default: ‘Loading…’).
• description: Loading description to display (default: ”).

Example

// Enable loading plugin with default options
loading: true,

// Enable loading plugin with custom configuration
loading: {
  icon: 'A custom loading icon in SVG format',
  title: 'Custom loading title',
  description: 'Custom loading description',
}

// Access to loading plugin instance:
const loadingPlugin = hot.getPlugin('loading');

// Show a loading programmatically:
loadingPlugin.show();

// Hide the loading programmatically:
loadingPlugin.hide();

// Check if dialog is visible:
const isVisible = loadingPlugin.isVisible();

Options

loading

Ask AI

Source code

loading.loading : boolean | object

The loading option configures the Loading plugin.

Loading plugin, automatically loads Dialog plugin.

You can set the loading option to one of the following:

Setting	Description
false	Disable the Loading plugin
true	Enable the Loading plugin with default configuration
An object	- Enable the Loading plugin - Apply custom configuration

If you set the loading option to an object, you can configure the following loading options:

Option	Possible settings	Description
icon	A string	Custom loading icon to display (default: <svg />)
title	A string	Custom loading title to display (default: 'Loading...')
description	A string	Custom loading description to display (default: '')

Read more:

• Plugins: Loading

Default: false
Since: 16.1.0
Example

// enable the `Loading` plugin with default configuration
loading: true,

// enable the `Loading` plugin with custom configuration
loading: {
  icon: 'A custom loading icon in SVG format',
  title: 'Custom loading title',
  description: 'Custom loading description',
}

Methods

destroy

Ask AI

Source code

loading.destroy()

Destroy plugin instance.

disablePlugin

Ask AI

Source code

loading.disablePlugin()

Disable plugin for this Handsontable instance.

enablePlugin

Ask AI

Source code

loading.enablePlugin()

Enable plugin for this Handsontable instance.

hide

Ask AI

Source code

loading.hide()

Hide loading dialog.

isEnabled

Ask AI

Source code

loading.isEnabled() ⇒ boolean

Check if the plugin is enabled in the handsontable settings.

isVisible

Ask AI

Source code

loading.isVisible() ⇒ boolean

Check if loading dialog is currently visible.

show

Ask AI

Source code

loading.show(options)

Show loading dialog with optional custom options.

Param	Type	Description
options	object	Custom loading options.
options.icon	string	Custom loading icon.
options.title	string	Custom loading title.
options.description	string	Custom loading description.

update

Ask AI

Source code

loading.update(options)

Update loading description without hiding/showing the dialog.

Param	Type	Description
options	object	Custom loading options.
options.icon	string	Custom loading icon.
options.title	string	Custom loading title.
options.description	string	Custom loading description.

updatePlugin

Ask AI

Source code

loading.updatePlugin()

Update plugin state after Handsontable settings update.