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 Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

30
const container = document.getElementById('example1');
31
const hot = new Handsontable(container, {
32
  data,
33
  colHeaders: true,
34
  rowHeaders: true,
50 collapsed lines
35
  columns: [
36
    {
37
      title: 'Model',
38
      type: 'text',
39
      data: 'model',
40
      width: 150,
41
      headerClassName: 'htLeft',
42
    },
43
    {
44
      title: 'Price',
45
      type: 'numeric',
46
      data: 'price',
47
      width: 80,
48
      locale: 'en-US',
49
      numericFormat: {
50
        style: 'currency',
51
        currency: 'USD',
52
        minimumFractionDigits: 2,
53
      },
54
      className: 'htRight',
55
      headerClassName: 'htRight',
56
    },
57
    {
58
      title: 'Date',
59
      type: 'intl-date',
60
      data: 'sellDate',
61
      width: 130,
62
      locale: 'en-US',
63
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
64
      className: 'htRight',
65
      headerClassName: 'htRight',
66
    },
67
    {
68
      title: 'Time',
69
      type: 'intl-time',
70
      data: 'sellTime',
71
      width: 90,
72
      locale: 'en-US',
73
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
74
      className: 'htRight',
75
      headerClassName: 'htRight',
76
    },
77
    {
78
      title: 'In stock',
79
      type: 'checkbox',
80
      data: 'inStock',
81
      className: 'htCenter',
82
      headerClassName: 'htCenter',
83
    },
84
  ],
85
  width: '100%',
86
  height: 300,
87
  stretchH: 'all',
88
  loading: true,
89
  licenseKey: 'non-commercial-and-evaluation',
90
});
91

92
// Show loading dialog after initialization
93
const loadingPlugin = hot.getPlugin('loading');
94

95
loadingPlugin.show();

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

30
const container = document.getElementById('example1')!;
31

32
const hot = new Handsontable(container, {
33
  data,
34
  colHeaders: true,
35
  rowHeaders: true,
50 collapsed lines
36
  columns: [
37
    {
38
      title: 'Model',
39
      type: 'text',
40
      data: 'model',
41
      width: 150,
42
      headerClassName: 'htLeft',
43
    },
44
    {
45
      title: 'Price',
46
      type: 'numeric',
47
      data: 'price',
48
      width: 80,
49
      locale: 'en-US',
50
      numericFormat: {
51
        style: 'currency',
52
        currency: 'USD',
53
        minimumFractionDigits: 2,
54
      },
55
      className: 'htRight',
56
      headerClassName: 'htRight',
57
    },
58
    {
59
      title: 'Date',
60
      type: 'intl-date',
61
      data: 'sellDate',
62
      width: 130,
63
      locale: 'en-US',
64
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
65
      className: 'htRight',
66
      headerClassName: 'htRight',
67
    },
68
    {
69
      title: 'Time',
70
      type: 'intl-time',
71
      data: 'sellTime',
72
      width: 90,
73
      locale: 'en-US',
74
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
75
      className: 'htRight',
76
      headerClassName: 'htRight',
77
    },
78
    {
79
      title: 'In stock',
80
      type: 'checkbox',
81
      data: 'inStock',
82
      className: 'htCenter',
83
      headerClassName: 'htCenter',
84
    },
85
  ],
86
  width: '100%',
87
  height: 300,
88
  stretchH: 'all',
89
  loading: true,
90
  licenseKey: 'non-commercial-and-evaluation',
91
});
92

93
// Show loading dialog after initialization
94
const loadingPlugin = hot.getPlugin('loading');
95

96
loadingPlugin.show();

Custom configuration

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

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

30
const container = document.getElementById('example2');
31
const hot = new Handsontable(container, {
32
  data,
33
  colHeaders: true,
34
  rowHeaders: true,
50 collapsed lines
35
  columns: [
36
    {
37
      title: 'Model',
38
      type: 'text',
39
      data: 'model',
40
      width: 150,
41
      headerClassName: 'htLeft',
42
    },
43
    {
44
      title: 'Price',
45
      type: 'numeric',
46
      data: 'price',
47
      width: 80,
48
      locale: 'en-US',
49
      numericFormat: {
50
        style: 'currency',
51
        currency: 'USD',
52
        minimumFractionDigits: 2,
53
      },
54
      className: 'htRight',
55
      headerClassName: 'htRight',
56
    },
57
    {
58
      title: 'Date',
59
      type: 'intl-date',
60
      data: 'sellDate',
61
      width: 130,
62
      locale: 'en-US',
63
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
64
      className: 'htRight',
65
      headerClassName: 'htRight',
66
    },
67
    {
68
      title: 'Time',
69
      type: 'intl-time',
70
      data: 'sellTime',
71
      width: 90,
72
      locale: 'en-US',
73
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
74
      className: 'htRight',
75
      headerClassName: 'htRight',
76
    },
77
    {
78
      title: 'In stock',
79
      type: 'checkbox',
80
      data: 'inStock',
81
      className: 'htCenter',
82
      headerClassName: 'htCenter',
83
    },
84
  ],
85
  width: '100%',
86
  height: 300,
87
  stretchH: 'all',
88
  loading: {
89
    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>',
90
    title: 'Processing Data...',
91
    description: 'Please wait while we load your inventory data...',
92
  },
93
  licenseKey: 'non-commercial-and-evaluation',
94
});
95

96
// Show loading dialog after initialization
97
const loadingPlugin = hot.getPlugin('loading');
98

99
loadingPlugin.show();

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

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

30
const container = document.getElementById('example2')!;
31

32
const hot = new Handsontable(container, {
33
  data,
34
  colHeaders: true,
35
  rowHeaders: true,
50 collapsed lines
36
  columns: [
37
    {
38
      title: 'Model',
39
      type: 'text',
40
      data: 'model',
41
      width: 150,
42
      headerClassName: 'htLeft',
43
    },
44
    {
45
      title: 'Price',
46
      type: 'numeric',
47
      data: 'price',
48
      width: 80,
49
      locale: 'en-US',
50
      numericFormat: {
51
        style: 'currency',
52
        currency: 'USD',
53
        minimumFractionDigits: 2,
54
      },
55
      className: 'htRight',
56
      headerClassName: 'htRight',
57
    },
58
    {
59
      title: 'Date',
60
      type: 'intl-date',
61
      data: 'sellDate',
62
      width: 130,
63
      locale: 'en-US',
64
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
65
      className: 'htRight',
66
      headerClassName: 'htRight',
67
    },
68
    {
69
      title: 'Time',
70
      type: 'intl-time',
71
      data: 'sellTime',
72
      width: 90,
73
      locale: 'en-US',
74
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
75
      className: 'htRight',
76
      headerClassName: 'htRight',
77
    },
78
    {
79
      title: 'In stock',
80
      type: 'checkbox',
81
      data: 'inStock',
82
      className: 'htCenter',
83
      headerClassName: 'htCenter',
84
    },
85
  ],
86
  width: '100%',
87
  height: 300,
88
  stretchH: 'all',
89
  loading: {
90
    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>',
91
    title: 'Processing Data...',
92
    description: 'Please wait while we load your inventory data...',
93
  },
94
  licenseKey: 'non-commercial-and-evaluation',
95
});
96

97
// Show loading dialog after initialization
98
const loadingPlugin = hot.getPlugin('loading');
99

100
loadingPlugin.show();

Real-world usage

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

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

7
const container = document.getElementById('example3');
8
const hot = new Handsontable(container, {
9
  data: [],
10
  colHeaders: true,
11
  rowHeaders: true,
50 collapsed lines
12
  columns: [
13
    {
14
      title: 'Model',
15
      type: 'text',
16
      data: 'model',
17
      width: 150,
18
      headerClassName: 'htLeft',
19
    },
20
    {
21
      title: 'Price',
22
      type: 'numeric',
23
      data: 'price',
24
      width: 80,
25
      locale: 'en-US',
26
      numericFormat: {
27
        style: 'currency',
28
        currency: 'USD',
29
        minimumFractionDigits: 2,
30
      },
31
      className: 'htRight',
32
      headerClassName: 'htRight',
33
    },
34
    {
35
      title: 'Date',
36
      type: 'intl-date',
37
      data: 'sellDate',
38
      width: 130,
39
      locale: 'en-US',
40
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
41
      className: 'htRight',
42
      headerClassName: 'htRight',
43
    },
44
    {
45
      title: 'Time',
46
      type: 'intl-time',
47
      data: 'sellTime',
48
      width: 90,
49
      locale: 'en-US',
50
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
51
      className: 'htRight',
52
      headerClassName: 'htRight',
53
    },
54
    {
55
      title: 'In stock',
56
      type: 'checkbox',
57
      data: 'inStock',
58
      className: 'htCenter',
59
      headerClassName: 'htCenter',
60
    },
61
  ],
62
  width: '100%',
63
  height: 300,
64
  stretchH: 'all',
65
  loading: true,
66
  licenseKey: 'non-commercial-and-evaluation',
67
});
68

69
// Get loading plugin instance
70
const loadingPlugin = hot.getPlugin('loading');
71
const loadDataButton = document.getElementById('example3-loadData');
72

73
// Simulate data loading
74
async function loadData() {
75
  // Show loading dialog
76
  loadingPlugin.show();
77
  loadDataButton.disabled = true;
78

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

83
    // Simulated data
12 collapsed lines
84
    const data = [
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

97
    // Load data into the table
98
    hot.loadData(data);
99
    // Hide loading dialog
100
    loadingPlugin.hide();
101
    loadDataButton.disabled = false;
102
    loadDataButton.innerHTML = 'Reload Data';
103
  } catch (error) {
104
    // Handle error
105
    setTimeout(() => {
106
      loadingPlugin.hide();
107
      loadDataButton.disabled = false;
108
      loadDataButton.innerHTML = 'Load Data';
109
    }, 2000);
110
  }
111
}
112

113
loadDataButton.addEventListener('click', loadData);

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

7
const container = document.getElementById('example3')!;
8

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

70
// Get loading plugin instance
71
const loadingPlugin = hot.getPlugin('loading');
72

73
const loadDataButton = document.getElementById('example3-loadData') as HTMLButtonElement;
74

75
// Simulate data loading
76
async function loadData(): Promise<void> {
77
  // Show loading dialog
78
  loadingPlugin.show();
79
  loadDataButton.disabled = true;
80

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

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

99
    // Load data into the table
100
    hot.loadData(data);
101

102
    // Hide loading dialog
103
    loadingPlugin.hide();
104
    loadDataButton.disabled = false;
105
    loadDataButton.innerHTML = 'Reload Data';
106
  } catch (error) {
107
    // Handle error
108
    setTimeout(() => {
109
      loadingPlugin.hide();
110
      loadDataButton.disabled = false;
111
      loadDataButton.innerHTML = 'Load Data';
112
    }, 2000);
113
  }
114
}
115

116
loadDataButton.addEventListener('click', loadData);

1
<div style="margin-bottom: 16px; display: flex; gap: 10px">
2
  <button id="example3-loadData">Load Data</button>
3
</div>
4
<div id="example3"></div>

Loading with Pagination plugin

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

This is a demonstration of how to use the Loading plugin with pagination in external container. You need to create pagination overlay manually, after that you can use the afterLoadingShow and afterLoadingHide hooks to show and hide the pagination container overlay.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

7
const container = document.getElementById('example4');
8
const paginationContainer = document.getElementById('example4-pagination');
9
const hot = new Handsontable(container, {
10
  data: [],
11
  colHeaders: true,
12
  rowHeaders: true,
50 collapsed lines
13
  columns: [
14
    {
15
      title: 'Model',
16
      type: 'text',
17
      data: 'model',
18
      width: 150,
19
      headerClassName: 'htLeft',
20
    },
21
    {
22
      title: 'Price',
23
      type: 'numeric',
24
      data: 'price',
25
      width: 80,
26
      locale: 'en-US',
27
      numericFormat: {
28
        style: 'currency',
29
        currency: 'USD',
30
        minimumFractionDigits: 2,
31
      },
32
      className: 'htRight',
33
      headerClassName: 'htRight',
34
    },
35
    {
36
      title: 'Date',
37
      type: 'intl-date',
38
      data: 'sellDate',
39
      width: 130,
40
      locale: 'en-US',
41
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
42
      className: 'htRight',
43
      headerClassName: 'htRight',
44
    },
45
    {
46
      title: 'Time',
47
      type: 'intl-time',
48
      data: 'sellTime',
49
      width: 90,
50
      locale: 'en-US',
51
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
52
      className: 'htRight',
53
      headerClassName: 'htRight',
54
    },
55
    {
56
      title: 'In stock',
57
      type: 'checkbox',
58
      data: 'inStock',
59
      className: 'htCenter',
60
      headerClassName: 'htCenter',
61
    },
62
  ],
63
  width: '100%',
64
  height: 300,
65
  stretchH: 'all',
66
  loading: true,
67
  pagination: {
68
    uiContainer: paginationContainer,
69
  },
70
  licenseKey: 'non-commercial-and-evaluation',
71
});
72

73
// Add hooks to show and hide the pagination container overlay
74
hot.addHook('afterLoadingShow', () => {
75
  paginationContainer.classList.add('overlay');
76
});
77
hot.addHook('afterLoadingHide', () => {
78
  paginationContainer.classList.remove('overlay');
79
});
80

81
// Get loading plugin instance
82
const loadingPlugin = hot.getPlugin('loading');
83
const loadDataButton = document.getElementById('example4-loadData');
84

85
// Simulate data loading
86
async function loadData() {
87
  // Show loading dialog
88
  loadingPlugin.show();
89
  loadDataButton.disabled = true;
90

91
  try {
92
    // Simulate API call delay
93
    await new Promise((resolve) => setTimeout(resolve, 3000));
94

95
    // Simulated data
30 collapsed lines
96
    const data = [
97
      { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
98
      { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
99
      { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
100
      { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
101
      { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
102
      { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
103
      { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
104
      { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
105
      { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
106
      { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
107
      { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
108
      { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
109
      { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
110
      { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
111
      { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
112
      { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },
113
      { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },
114
      { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },
115
      { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },
116
      { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },
117
      { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },
118
      { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },
119
      { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },
120
      { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },
121
      { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },
122
      { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },
123
      { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },
124
      { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },
125
    ];
126

127
    // Load data into the table
128
    hot.loadData(data);
129
    // Hide loading dialog
130
    loadingPlugin.hide();
131
    loadDataButton.disabled = false;
132
    loadDataButton.innerHTML = 'Reload Data';
133
  } catch (error) {
134
    // Handle error
135
    setTimeout(() => {
136
      loadingPlugin.hide();
137
      loadDataButton.disabled = false;
138
      loadDataButton.innerHTML = 'Load Data';
139
    }, 2000);
140
  }
141
}
142

143
loadDataButton.addEventListener('click', loadData);

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

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

7
const container = document.getElementById('example4')!;
8
const paginationContainer = document.getElementById('example4-pagination')!;
9

10
const hot = new Handsontable(container, {
11
  data: [],
12
  colHeaders: true,
13
  rowHeaders: true,
50 collapsed lines
14
  columns: [
15
    {
16
      title: 'Model',
17
      type: 'text',
18
      data: 'model',
19
      width: 150,
20
      headerClassName: 'htLeft',
21
    },
22
    {
23
      title: 'Price',
24
      type: 'numeric',
25
      data: 'price',
26
      width: 80,
27
      locale: 'en-US',
28
      numericFormat: {
29
        style: 'currency',
30
        currency: 'USD',
31
        minimumFractionDigits: 2,
32
      },
33
      className: 'htRight',
34
      headerClassName: 'htRight',
35
    },
36
    {
37
      title: 'Date',
38
      type: 'intl-date',
39
      data: 'sellDate',
40
      width: 130,
41
      locale: 'en-US',
42
      dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
43
      className: 'htRight',
44
      headerClassName: 'htRight',
45
    },
46
    {
47
      title: 'Time',
48
      type: 'intl-time',
49
      data: 'sellTime',
50
      width: 90,
51
      locale: 'en-US',
52
      timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
53
      className: 'htRight',
54
      headerClassName: 'htRight',
55
    },
56
    {
57
      title: 'In stock',
58
      type: 'checkbox',
59
      data: 'inStock',
60
      className: 'htCenter',
61
      headerClassName: 'htCenter',
62
    },
63
  ],
64
  width: '100%',
65
  height: 300,
66
  stretchH: 'all',
67
  loading: true,
68
  pagination: {
69
    uiContainer: paginationContainer,
70
  },
71
  licenseKey: 'non-commercial-and-evaluation',
72
});
73

74
// Add hooks to show and hide the pagination container overlay
75
hot.addHook('afterLoadingShow', () => {
76
  paginationContainer.classList.add('overlay');
77
});
78

79
hot.addHook('afterLoadingHide', () => {
80
  paginationContainer.classList.remove('overlay');
81
});
82

83
// Get loading plugin instance
84
const loadingPlugin = hot.getPlugin('loading');
85
const loadDataButton = document.getElementById('example4-loadData') as HTMLButtonElement;
86

87
// Simulate data loading
88
async function loadData(): Promise<void> {
89
  // Show loading dialog
90
  loadingPlugin.show();
91
  loadDataButton.disabled = true;
92

93
  try {
94
    // Simulate API call delay
95
    await new Promise((resolve) => setTimeout(resolve, 3000));
96

97
    // Simulated data
30 collapsed lines
98
    const data = [
99
      { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
100
      { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
101
      { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
102
      { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
103
      { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
104
      { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
105
      { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
106
      { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
107
      { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
108
      { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
109
      { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
110
      { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
111
      { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
112
      { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
113
      { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
114
      { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },
115
      { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },
116
      { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },
117
      { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },
118
      { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },
119
      { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },
120
      { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },
121
      { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },
122
      { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },
123
      { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },
124
      { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },
125
      { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },
126
      { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },
127
    ];
128

129
    // Load data into the table
130
    hot.loadData(data);
131

132
    // Hide loading dialog
133
    loadingPlugin.hide();
134
    loadDataButton.disabled = false;
135
    loadDataButton.innerHTML = 'Reload Data';
136
  } catch (error) {
137
    // Handle error
138
    setTimeout(() => {
139
      loadingPlugin.hide();
140
      loadDataButton.disabled = false;
141
      loadDataButton.innerHTML = 'Load Data';
142
    }, 2000);
143
  }
144
}
145

146
loadDataButton.addEventListener('click', loadData);

1
<div id="example4"></div>
2

3
<div style="margin-top: 16px; display: flex; gap: 10px">
4
  <button id="example4-loadData">Load Data</button>
5
</div>
6
<div style="margin-top: 16px;">
7
  <p style="padding: 0; font-size: var(--sl-text-xs); color: var(--sl-color-gray-3);">This is a demonstration of how to use the Loading plugin with pagination in external container. You need to create pagination overlay manually, after that you can use the <code>afterLoadingShow</code> and <code>afterLoadingHide</code> hooks to show and hide the pagination container overlay.</p>
8
</div>
9
<div style="margin-top: 16px;">
10
  <div id="example4-pagination"></div>
11
</div>

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: