Loading

Display loading indicators and progress feedback in your data grid application using the Loading plugin.

Overview

The Loading plugin provides a loading overlay for Handsontable using the Dialog plugin. It displays a loading indicator with a customizable title, icon, and description. This is useful for showing progress feedback during data operations, API calls, or any other time-consuming tasks.

With simplicity and effectiveness in mind, the loading plugin was designed to provide a consistent user experience with customizable appearance and behavior. It requires the Dialog plugin to be enabled to function properly.

Basic configuration

To enable the Loading plugin, set the loading option to true or provide a configuration object.

1
import React, { useRef, useEffect } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

22 collapsed lines
8
const data = [
9
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
10
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
11
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
12
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
13
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
14
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
15
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
16
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
17
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
18
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
19
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
20
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
21
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
22
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
23
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
24
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
25
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
26
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
27
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
28
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
29
];
30

31
const ExampleComponent = () => {
32
  const hotTableRef = useRef(null);
33

34
  useEffect(() => {
35
    const hotInstance = hotTableRef.current?.hotInstance;
36

37
    if (!hotInstance) {
38
      return;
39
    }
40

41
    hotInstance.getPlugin('loading').show();
42
  }, []);
43

44
  return (
45
    <HotTable
46
      ref={hotTableRef}
47
      data={data}
48
      width="100%"
49
      height={300}
50
      stretchH="all"
51
      contextMenu={true}
52
      rowHeaders={true}
53
      colHeaders={true}
54
      autoWrapRow={true}
55
      autoWrapCol={true}
56
      autoRowSize={true}
57
      loading={true}
58
      licenseKey="non-commercial-and-evaluation"
59
    >
31 collapsed lines
60
      <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
61
      <HotColumn
62
        title="Price"
63
        type="numeric"
64
        data="price"
65
        width={80}
66
        locale="en-US"
67
        numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
68
        className="htRight"
69
        headerClassName="htRight"
70
      />
71
      <HotColumn
72
        title="Date"
73
        type="intl-date"
74
        data="sellDate"
75
        width={130}
76
        locale="en-US"
77
        dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
78
        className="htRight"
79
        headerClassName="htRight"
80
      />
81
      <HotColumn
82
        title="Time"
83
        type="intl-time"
84
        data="sellTime"
85
        width={90}
86
        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
87
        className="htRight"
88
        headerClassName="htRight"
89
      />
90
      <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
91
    </HotTable>
92
  );
93
};
94

95
export default ExampleComponent;

1
import React, { useRef, useEffect } from 'react';
2
import { HotTable, HotColumn, HotTableRef } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

22 collapsed lines
8
const data = [
9
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
10
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
11
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
12
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
13
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
14
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
15
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
16
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
17
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
18
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
19
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
20
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
21
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
22
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
23
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
24
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
25
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
26
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
27
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
28
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
29
];
30

31
const ExampleComponent = () => {
32
  const hotTableRef = useRef<HotTableRef>(null);
33

34
  useEffect(() => {
35
    const hotInstance = hotTableRef.current?.hotInstance;
36

37
    if (!hotInstance) {
38
      return;
39
    }
40

41
    hotInstance.getPlugin('loading').show();
42
  }, []);
43

44
  return (
45
    <HotTable
46
      ref={hotTableRef}
47
      data={data}
48
      width="100%"
49
      height={300}
50
      stretchH="all"
51
      contextMenu={true}
52
      rowHeaders={true}
53
      colHeaders={true}
54
      autoWrapRow={true}
55
      autoWrapCol={true}
56
      autoRowSize={true}
57
      loading={true}
58
      licenseKey="non-commercial-and-evaluation"
59
    >
29 collapsed lines
60
      <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
61
      <HotColumn
62
        title="Price"
63
        type="numeric"
64
        data="price"
65
        width={80}
66
        locale="en-US" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
67
        className="htRight"
68
        headerClassName="htRight"
69
      />
70
      <HotColumn
71
        title="Date"
72
        type="intl-date"
73
        data="sellDate"
74
        width={130}
75
        locale="en-US" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
76
        className="htRight"
77
        headerClassName="htRight"
78
      />
79
      <HotColumn
80
        title="Time"
81
        type="intl-time"
82
        data="sellTime"
83
        width={90}
84
        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
85
        className="htRight"
86
        headerClassName="htRight"
87
      />
88
      <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
89
    </HotTable>
90
  );
91
};
92

93
export default ExampleComponent;

Custom configuration

The loading dialog supports customization of the icon, title, and description.

1
import React, { useRef, useEffect } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

22 collapsed lines
8
const data = [
9
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
10
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
11
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
12
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
13
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
14
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
15
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
16
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
17
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
18
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
19
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
20
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
21
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
22
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
23
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
24
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
25
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
26
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
27
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
28
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
29
];
30

31
const ExampleComponent = () => {
32
  const hotTableRef = useRef(null);
33

34
  useEffect(() => {
35
    const hotInstance = hotTableRef.current?.hotInstance;
36

37
    if (!hotInstance) {
38
      return;
39
    }
40

41
    hotInstance.getPlugin('loading').show();
42
  }, []);
43

44
  return (
45
    <HotTable
46
      ref={hotTableRef}
47
      data={data}
48
      width="100%"
49
      height={300}
50
      stretchH="all"
51
      contextMenu={true}
52
      rowHeaders={true}
53
      colHeaders={true}
54
      autoWrapRow={true}
55
      autoWrapCol={true}
56
      autoRowSize={true}
57
      loading={{
58
        icon: '<svg class="ht-loading__icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="currentColor" stroke-width="2" d="M15 8a7 7 0 1 1-3.5-6.062"></path></svg>',
59
        title: 'Processing Data...',
60
        description: 'Please wait while we load your inventory data...',
61
      }}
62
      licenseKey="non-commercial-and-evaluation"
63
    >
31 collapsed lines
64
      <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
65
      <HotColumn
66
        title="Price"
67
        type="numeric"
68
        data="price"
69
        width={80}
70
        locale="en-US"
71
        numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
72
        className="htRight"
73
        headerClassName="htRight"
74
      />
75
      <HotColumn
76
        title="Date"
77
        type="intl-date"
78
        data="sellDate"
79
        width={130}
80
        locale="en-US"
81
        dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
82
        className="htRight"
83
        headerClassName="htRight"
84
      />
85
      <HotColumn
86
        title="Time"
87
        type="intl-time"
88
        data="sellTime"
89
        width={90}
90
        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
91
        className="htRight"
92
        headerClassName="htRight"
93
      />
94
      <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
95
    </HotTable>
96
  );
97
};
98

99
export default ExampleComponent;

1
import React, { useRef, useEffect } from 'react';
2
import { HotTable, HotColumn, HotTableRef } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

22 collapsed lines
8
const data = [
9
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
10
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
11
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
12
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
13
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
14
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
15
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
16
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
17
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
18
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
19
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
20
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
21
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
22
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
23
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
24
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
25
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
26
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
27
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
28
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
29
];
30

31
const ExampleComponent = () => {
32
  const hotTableRef = useRef<HotTableRef>(null);
33

34
  useEffect(() => {
35
    const hotInstance = hotTableRef.current?.hotInstance;
36

37
    if (!hotInstance) {
38
      return;
39
    }
40

41
    hotInstance.getPlugin('loading').show();
42
  }, []);
43

44
  return (
45
    <HotTable
46
      ref={hotTableRef}
47
      data={data}
48
      width="100%"
49
      height={300}
50
      stretchH="all"
51
      contextMenu={true}
52
      rowHeaders={true}
53
      colHeaders={true}
54
      autoWrapRow={true}
55
      autoWrapCol={true}
56
      autoRowSize={true}
57
      loading={{
58
        icon: '<svg class="ht-loading__icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="currentColor" stroke-width="2" d="M15 8a7 7 0 1 1-3.5-6.062"></path></svg>',
59
        title: 'Processing Data...',
60
        description: 'Please wait while we load your inventory data...',
61
      }}
62
      licenseKey="non-commercial-and-evaluation"
63
    >
29 collapsed lines
64
      <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
65
      <HotColumn
66
        title="Price"
67
        type="numeric"
68
        data="price"
69
        width={80}
70
        locale="en-US" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
71
        className="htRight"
72
        headerClassName="htRight"
73
      />
74
      <HotColumn
75
        title="Date"
76
        type="intl-date"
77
        data="sellDate"
78
        width={130}
79
        locale="en-US" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
80
        className="htRight"
81
        headerClassName="htRight"
82
      />
83
      <HotColumn
84
        title="Time"
85
        type="intl-time"
86
        data="sellTime"
87
        width={90}
88
        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
89
        className="htRight"
90
        headerClassName="htRight"
91
      />
92
      <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
93
    </HotTable>
94
  );
95
};
96

97
export default ExampleComponent;

Real-world usage

Here are some common scenarios where the loading dialog is useful:

1
import React, { useRef, useState } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const Table = ({ hotTableRef, data }) => {
9
  return (
10
    <>
11
      <HotTable
12
        ref={hotTableRef}
13
        data={data}
14
        width="100%"
15
        height={300}
16
        stretchH="all"
17
        contextMenu={true}
18
        rowHeaders={true}
19
        colHeaders={true}
20
        autoWrapRow={true}
21
        autoWrapCol={true}
22
        autoRowSize={true}
23
        loading={true}
24
        licenseKey="non-commercial-and-evaluation"
25
      >
31 collapsed lines
26
        <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
27
        <HotColumn
28
          title="Price"
29
          type="numeric"
30
          data="price"
31
          width={80}
32
          locale="en-US"
33
          numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
34
          className="htRight"
35
          headerClassName="htRight"
36
        />
37
        <HotColumn
38
          title="Date"
39
          type="intl-date"
40
          data="sellDate"
41
          width={130}
42
          locale="en-US"
43
          dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
44
          className="htRight"
45
          headerClassName="htRight"
46
        />
47
        <HotColumn
48
          title="Time"
49
          type="intl-time"
50
          data="sellTime"
51
          width={90}
52
          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
53
          className="htRight"
54
          headerClassName="htRight"
55
        />
56
        <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
57
      </HotTable>
58
    </>
59
  );
60
};
61

62
const ExampleComponent = () => {
63
  const hotTableRef = useRef(null);
64
  const [data, setData] = useState([]);
65
  const [isLoading, setIsLoading] = useState(false);
66
  // Simulate data loading
67
  const loadData = async () => {
68
    const hotInstance = hotTableRef.current?.hotInstance;
69

70
    if (!hotInstance) {
71
      return;
72
    }
73

74
    const loadingPlugin = hotInstance.getPlugin('loading');
75

76
    setIsLoading(true);
77
    // Show loading dialog
78
    loadingPlugin.show();
79

80
    try {
81
      // Simulate API call delay
82
      await new Promise((resolve) => setTimeout(resolve, 3000));
83
      // Simulated data
12 collapsed lines
84
      setData([
85
        { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
86
        { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
87
        { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
88
        { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
89
        { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
90
        { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
91
        { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
92
        { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
93
        { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
94
        { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
95
      ]);
96
      // Load data into the table
97
      hotTableRef.current?.hotInstance?.loadData(data);
98
      // Hide loading dialog
99
      loadingPlugin.hide();
100
      setIsLoading(false);
101
    } catch (error) {
102
      // Handle error
103
      setTimeout(() => {
104
        loadingPlugin.hide();
105
        setIsLoading(false);
106
      }, 2000);
107
    }
108
  };
109

110
  return (
111
    <>
112
      <div style={{ marginBottom: '16px' }}>
113
        <button id="loadData" onClick={loadData} disabled={isLoading}>
114
          {data.length > 0 ? 'Reload Data' : 'Load Data'}
115
        </button>
116
      </div>
117
      <Table hotTableRef={hotTableRef} data={data} />
118
    </>
119
  );
120
};
121

122
export default ExampleComponent;

1
import React, { useRef, useState } from 'react';
2
import { HotTable, HotColumn, HotTableRef } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const Table = ({ hotTableRef, data }: { hotTableRef: React.RefObject<HotTableRef>; data: any[] }) => {
9
  return (
10
    <>
11
      <HotTable
12
        ref={hotTableRef}
13
        data={data}
14
        width="100%"
15
        height={300}
16
        stretchH="all"
17
        contextMenu={true}
18
        rowHeaders={true}
19
        colHeaders={true}
20
        autoWrapRow={true}
21
        autoWrapCol={true}
22
        autoRowSize={true}
23
        loading={true}
24
        licenseKey="non-commercial-and-evaluation"
25
      >
29 collapsed lines
26
        <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
27
        <HotColumn
28
          title="Price"
29
          type="numeric"
30
          data="price"
31
          width={80}
32
          locale="en-US" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
33
          className="htRight"
34
          headerClassName="htRight"
35
        />
36
        <HotColumn
37
          title="Date"
38
          type="intl-date"
39
          data="sellDate"
40
          width={130}
41
          locale="en-US" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
42
          className="htRight"
43
          headerClassName="htRight"
44
        />
45
        <HotColumn
46
          title="Time"
47
          type="intl-time"
48
          data="sellTime"
49
          width={90}
50
          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
51
          className="htRight"
52
          headerClassName="htRight"
53
        />
54
        <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
55
      </HotTable>
56
    </>
57
  );
58
};
59

60
const ExampleComponent = () => {
61
  const hotTableRef = useRef<HotTableRef>(null);
62
  const [data, setData] = useState([]);
63
  const [isLoading, setIsLoading] = useState(false);
64

65
  // Simulate data loading
66
  const loadData = async () => {
67
    const hotInstance = hotTableRef.current?.hotInstance;
68

69
    if (!hotInstance) {
70
      return;
71
    }
72

73
    const loadingPlugin = hotInstance.getPlugin('loading');
74

75
    setIsLoading(true);
76

77
    // Show loading dialog
78
    loadingPlugin.show();
79

80
    try {
81
      // Simulate API call delay
82
      await new Promise((resolve) => setTimeout(resolve, 3000));
83

84
      // Simulated data
12 collapsed lines
85
      setData([
86
        { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
87
        { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
88
        { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
89
        { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
90
        { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
91
        { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
92
        { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
93
        { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
94
        { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
95
        { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
96
      ]);
97

98
      // Load data into the table
99
      hotTableRef.current?.hotInstance?.loadData(data);
100

101
      // Hide loading dialog
102
      loadingPlugin.hide();
103

104
      setIsLoading(false);
105
    } catch (error) {
106
      // Handle error
107
      setTimeout(() => {
108
        loadingPlugin.hide();
109
        setIsLoading(false);
110
      }, 2000);
111
    }
112
  };
113

114
  return (
115
    <>
116
      <div style={{ marginBottom: '16px' }}>
117
        <button id="loadData" onClick={loadData} disabled={isLoading}>
118
          {data.length > 0 ? 'Reload Data' : 'Load Data'}
119
        </button>
120
      </div>
121
      <Table hotTableRef={hotTableRef} data={data} />
122
    </>
123
  );
124
};
125

126
export default ExampleComponent;

Loading with Pagination plugin

The example below demonstrates how to use the Loading plugin with pagination in external container:

1
import React, { useRef, useState, useEffect } from 'react';
2
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const Table = React.memo(({ hotTableRef, data }) => {
9
  return (
10
    <>
11
      <HotTable
12
        ref={hotTableRef}
13
        data={data}
14
        width="100%"
15
        height={300}
16
        stretchH="all"
17
        contextMenu={true}
18
        rowHeaders={true}
19
        colHeaders={true}
20
        autoWrapRow={true}
21
        autoWrapCol={true}
22
        autoRowSize={true}
23
        loading={true}
24
        licenseKey="non-commercial-and-evaluation"
25
      >
31 collapsed lines
26
        <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
27
        <HotColumn
28
          title="Price"
29
          type="numeric"
30
          data="price"
31
          width={80}
32
          locale="en-US"
33
          numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
34
          className="htRight"
35
          headerClassName="htRight"
36
        />
37
        <HotColumn
38
          title="Date"
39
          type="intl-date"
40
          data="sellDate"
41
          width={130}
42
          locale="en-US"
43
          dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
44
          className="htRight"
45
          headerClassName="htRight"
46
        />
47
        <HotColumn
48
          title="Time"
49
          type="intl-time"
50
          data="sellTime"
51
          width={90}
52
          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
53
          className="htRight"
54
          headerClassName="htRight"
55
        />
56
        <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
57
      </HotTable>
58
    </>
59
  );
60
});
61

62
const ExampleComponent = () => {
63
  const hotTableRef = useRef(null);
64
  const paginationContainerRef = useRef(null);
65
  const [data, setData] = useState([]);
66
  const [isLoading, setIsLoading] = useState(false);
67

68
  useEffect(() => {
69
    const paginationContainer = paginationContainerRef?.current;
70
    const hot = hotTableRef.current?.hotInstance;
71

72
    if (!hot || !paginationContainer) {
73
      return;
74
    }
75

76
    hot.updateSettings({
77
      pagination: {
78
        uiContainer: paginationContainer,
79
      },
80
    });
81
    // Add hooks to show and hide the pagination container overlay
82
    hot.addHook('afterLoadingShow', () => {
83
      paginationContainer.classList.add('overlay');
84
    });
85
    hot.addHook('afterLoadingHide', () => {
86
      paginationContainer.classList.remove('overlay');
87
    });
88
  }, []);
89

90
  // Simulate data loading
91
  const loadData = async () => {
92
    const hotInstance = hotTableRef.current?.hotInstance;
93

94
    if (!hotInstance) {
95
      return;
96
    }
97

98
    const loadingPlugin = hotInstance.getPlugin('loading');
99

100
    setIsLoading(true);
101
    // Show loading dialog
102
    loadingPlugin.show();
103

104
    try {
105
      // Simulate API call delay
106
      await new Promise((resolve) => setTimeout(resolve, 3000));
107
      // Simulated data
30 collapsed lines
108
      setData([
109
        { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
110
        { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
111
        { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
112
        { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
113
        { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
114
        { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
115
        { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
116
        { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
117
        { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
118
        { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
119
        { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
120
        { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
121
        { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
122
        { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
123
        { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
124
        { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },
125
        { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },
126
        { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },
127
        { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },
128
        { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },
129
        { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },
130
        { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },
131
        { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },
132
        { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },
133
        { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },
134
        { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },
135
        { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },
136
        { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },
137
      ]);
138
      // Load data into the table
139
      hotTableRef.current?.hotInstance?.loadData(data);
140
      // Hide loading dialog
141
      loadingPlugin.hide();
142
      setIsLoading(false);
143
    } catch (error) {
144
      // Handle error
145
      setTimeout(() => {
146
        loadingPlugin.hide();
147
        setIsLoading(false);
148
      }, 2000);
149
    }
150
  };
151

152
  return (
153
    <>
154
      <Table hotTableRef={hotTableRef} data={data} />
155
      <div style={{ marginTop: '16px' }}>
156
        <button id="loadData" onClick={loadData} disabled={isLoading}>
157
          {data.length > 0 ? 'Reload Data' : 'Load Data'}
158
        </button>
159
      </div>
160
      <div style={{ marginTop: '16px' }}>
161
        <p style={{ padding: 0, fontSize: 'var(--sl-text-xs)', color: 'var(--sl-color-gray-3)' }}>
162
          This is a demonstration of how to use the Loading plugin with pagination in external container. You need to
163
          create pagination overlay manually, after that you can use the <code>afterLoadingShow</code> and{' '}
164
          <code>afterLoadingHide</code> hooks to show and hide the pagination container overlay.
165
        </p>
166
      </div>
167
      <div style={{ marginTop: '16px' }}>
168
        <div className="example4-pagination" ref={paginationContainerRef}></div>
169
      </div>
170
    </>
171
  );
172
};
173

174
export default ExampleComponent;

1
import React, { useRef, useState, useEffect } from 'react';
2
import { HotTable, HotColumn, HotTableRef } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const Table = React.memo(({ hotTableRef, data }: { hotTableRef: React.RefObject<HotTableRef>; data: any[] }) => {
9
  return (
10
    <>
11
      <HotTable
12
        ref={hotTableRef}
13
        data={data}
14
        width="100%"
15
        height={300}
16
        stretchH="all"
17
        contextMenu={true}
18
        rowHeaders={true}
19
        colHeaders={true}
20
        autoWrapRow={true}
21
        autoWrapCol={true}
22
        autoRowSize={true}
23
        loading={true}
24
        licenseKey="non-commercial-and-evaluation"
25
      >
29 collapsed lines
26
        <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
27
        <HotColumn
28
          title="Price"
29
          type="numeric"
30
          data="price"
31
          width={80}
32
          locale="en-US" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
33
          className="htRight"
34
          headerClassName="htRight"
35
        />
36
        <HotColumn
37
          title="Date"
38
          type="intl-date"
39
          data="sellDate"
40
          width={130}
41
          locale="en-US" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
42
          className="htRight"
43
          headerClassName="htRight"
44
        />
45
        <HotColumn
46
          title="Time"
47
          type="intl-time"
48
          data="sellTime"
49
          width={90}
50
          timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
51
          className="htRight"
52
          headerClassName="htRight"
53
        />
54
        <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
55
      </HotTable>
56
    </>
57
  );
58
});
59

60
const ExampleComponent = () => {
61
  const hotTableRef = useRef<HotTableRef>(null);
62
  const paginationContainerRef = useRef<HTMLDivElement>(null);
63
  const [data, setData] = useState([]);
64
  const [isLoading, setIsLoading] = useState(false);
65

66
  useEffect(() => {
67
    const paginationContainer = paginationContainerRef?.current;
68
    const hot = hotTableRef.current?.hotInstance;
69

70
    if (!hot || !paginationContainer) {
71
      return;
72
    }
73

74
    hot.updateSettings({
75
      pagination: {
76
        uiContainer: paginationContainer,
77
      },
78
    });
79

80
    // Add hooks to show and hide the pagination container overlay
81
    hot.addHook('afterLoadingShow', () => {
82
      paginationContainer.classList.add('overlay');
83
    });
84

85
    hot.addHook('afterLoadingHide', () => {
86
      paginationContainer.classList.remove('overlay');
87
    });
88
  }, []);
89

90
  // Simulate data loading
91
  const loadData = async () => {
92
    const hotInstance = hotTableRef.current?.hotInstance;
93

94
    if (!hotInstance) {
95
      return;
96
    }
97

98
    const loadingPlugin = hotInstance.getPlugin('loading');
99

100
    setIsLoading(true);
101
    // Show loading dialog
102
    loadingPlugin.show();
103

104
    try {
105
      // Simulate API call delay
106
      await new Promise((resolve) => setTimeout(resolve, 3000));
107
      // Simulated data
30 collapsed lines
108
      setData([
109
        { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
110
        { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
111
        { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
112
        { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
113
        { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
114
        { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
115
        { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
116
        { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
117
        { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
118
        { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
119
        { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
120
        { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
121
        { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
122
        { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
123
        { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
124
        { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },
125
        { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },
126
        { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },
127
        { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },
128
        { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },
129
        { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },
130
        { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },
131
        { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },
132
        { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },
133
        { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },
134
        { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },
135
        { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },
136
        { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },
137
      ]);
138
      // Load data into the table
139
      hotTableRef.current?.hotInstance?.loadData(data);
140
      // Hide loading dialog
141
      loadingPlugin.hide();
142
      setIsLoading(false);
143
    } catch (error) {
144
      // Handle error
145
      setTimeout(() => {
146
        loadingPlugin.hide();
147
        setIsLoading(false);
148
      }, 2000);
149
    }
150
  };
151

152
  return (
153
    <>
154
      <Table hotTableRef={hotTableRef} data={data} />
155
      <div style={{ marginTop: '16px' }}>
156
        <button id="loadData" onClick={loadData} disabled={isLoading}>
157
          {data.length > 0 ? 'Reload Data' : 'Load Data'}
158
        </button>
159
      </div>
160
      <div style={{ marginTop: '16px' }}>
161
        <p style={{ padding: 0, fontSize: 'var(--sl-text-xs)', color: 'var(--sl-color-gray-3)' }}>
162
          This is a demonstration of how to use the Loading plugin with pagination in external container. You need to
163
          create pagination overlay manually, after that you can use the <code>afterLoadingShow</code> and{' '}
164
          <code>afterLoadingHide</code> hooks to show and hide the pagination container overlay.
165
        </p>
166
      </div>
167
      <div style={{ marginTop: '16px' }}>
168
        <div className="example4-pagination" ref={paginationContainerRef}></div>
169
      </div>
170
    </>
171
  );
172
};
173

174
export default ExampleComponent;

1
.example4-pagination {
2
  position: relative;
3
}
4

5
.example4-pagination.overlay .ht-pagination::before {
6
  content: "";
7
  display: block;
8
  width: 100%;
9
  height: 100%;
10
  background-color: var(--ht-dialog-semi-transparent-background-color);
11
  position: absolute;
12
  inset: 0;
13
  z-index: 1000;
14
}

Localize loading

Translate default loading dialog labels using the global translations mechanism. The loading dialog introduces the following keys to the language dictionary that you can use to translate the loading UI: