React Data GridPlugin: Loading

On this page

• Description
• Options
  • loading
• Methods
  • destroy
  • disablePlugin
  • enablePlugin
  • hide
  • isEnabled
  • isVisible
  • show
  • update
  • updatePlugin

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

const MyComponent = () => {
  const hotRef = useRef(null);

  useEffect(() => {
    const hot = hotRef.current.hotInstance;
    const loadingPlugin = hot.getPlugin('loading');

    loadingPlugin.show();
  }, []);

  return (
    <HotTable
      ref={hotRef}
      settings={{
        data: data,
        loading: {
          icon: 'A custom loading icon in SVG format',
          title: 'Custom loading title',
          description: 'Custom loading description',
        }
      }}
    />
  );
}

Options

loading

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

Source code

loading.destroy()

Destroy plugin instance.

disablePlugin

Source code

loading.disablePlugin()

Disable plugin for this Handsontable instance.

enablePlugin

Source code

loading.enablePlugin()

Enable plugin for this Handsontable instance.

hide

Source code

loading.hide()

Hide loading dialog.

isEnabled

Source code

loading.isEnabled() ⇒ boolean

Check if the plugin is enabled in the handsontable settings.

isVisible

Source code

loading.isVisible() ⇒ boolean

Check if loading dialog is currently visible.

show

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

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

Source code

loading.updatePlugin()

Update plugin state after Handsontable settings update.