Accessibility

Handsontable is designed to be accessible, aligning with global standards. We prioritize inclusivity, ensuring web applications are usable by people with disabilities.

Overview

Accessibility features of Handsontable include:

Keyboard navigation that lets you use the grid without a mouse.
Support for the most popular screen readers.
Flexible API to configure keyboard shortcuts and navigation methods.

Conformance with standards

Most global standards and regulations are created in accordance with WCAG (Web Content Accessibility Guidelines). Handsontable meets requirements outlined in the WCAG 2.1 AA guidelines, which makes it compatible with most local standards, such as:

USA

Section 508 of the US Rehabilitation Act

Americans with Disabilities ActADA

Europe

European Accessibility ActEAA

Web Accessibility DirectiveWAD

Canada

Standard on Web Accessibility

Handsontable doesn’t require a mouse to navigate across the grid’s elements. This is an important feature for those users with temporary or permanent motor impairments for whom following the mouse cursor is difficult. Keyboard navigation is also a great way to improve productivity, which is why many users choose the keyboard over the mouse regardless of their accessibility needs.

Our experience with hundreds of implementations shows that Handsontable tends to be used either as a spreadsheet application or a data grid component. While at first the difference seems subtle, it significantly impacts user expectations regarding navigation.

In a typical spreadsheet application (think of Microsoft Excel or Google Sheets), you can’t move the focus onto headers. This makes it difficult to sort or filter data without knowing complex keyboard shortcuts. Additionally, opening a column menu is not trivial. Handsontable offers flexibility in this regard, allowing users to switch between data grid and spreadsheet “modes”. To do that switch, you can use a combination of two options: navigableHeaders to enable or disable moving focus onto headers, and tabNavigation to decide if the Tab key can be used to navigate across cells and headers.

The following table provides more details about these two scenarios:

Aspect	Data grid mode	Spreadsheet mode (default)
Configuration	`navigableHeaders: true` `tabNavigation: false`	`navigableHeaders: false` `tabNavigation: true`
Primary navigation method	Arrow keys	`Tab` / `Shift`+`Tab`
Navigable headers	Yes	No
Navigation	Use the arrow keys navigate across the grid. Use simple shortcuts such as `Enter` or `Space` to open menus or interact with headers, cells, or cell editors. You can’t use the `Tab` key for navigation.	Use `Tab` / `Shift`+`Tab` to navigate across the grid. This behavior is similar to Excel or Google Sheets. To open menus, use more complex shortcuts.
Focus behavior	One tab stop. The grid is included in the page tab sequence only once.	Multiple tab stops. All tabbable elements of the grid, such as cells, are included in the page tab sequence.

Handsontable provides a wide range of keyboard shortcuts, but some of them are particularly important for users who navigate the grid with the keyboard only. For example, actions triggered while navigating across headers involve simple key combinations, making them intuitive and useful. For more complex scenarios, you can customize the shortcuts keys through the API.

Windows	macOS	Action	Focused element
`Shift`+`Alt`+`↓`	`Shift`+`Option`+`↓`	Open a column menu	Any cell
`Ctrl`+`Enter`	`Cmd`+`Enter`	Open a column menu	Column header
`Enter`	`Enter`	Sort data	Column header
`Alt`+`A`	`Option`+`A`	Clear filters	Any cell
`Ctrl`+`Space`	`Ctrl`+`Space`*	Select a column	Any cell
`Shift`+`Space`	`Shift`+`Space`	Select a row	Any cell
`Ctrl`+`Shift`+`\` `Shift`+`F10`	`Cmd`+`Shift`+`\` `Shift`+`F10`	Open a context menu	Any cell

*To use this shortcut, disable the default macOS behavior for the Ctrl+Space key combination, under System Settings > Keyboard > Keyboard Shortcuts > Input Sources.

Support for screen readers

Although semantic HTML doesn’t need any additional attributes to be properly interpreted by assistive technologies, some of Handsontable’s complex features are not fully covered by the HTML specification. That’s why Handsontable provides support for screen readers with ARIA attributes (Accessible Rich Internet Applications) applied to its HTML markup.

Each new version of Handsontable is thoroughly tested for accessibility with the following screen readers:

NVDA (Windows)
JAWS (Windows)
VoiceOver (macOS)

Accessible data grid demo

Check out the interactive demo below to see how various Handsontable settings impact its accessibility level and affect the user experience.

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

5
registerAllModules();
6

7
/* start:skip-in-preview */
461 collapsed lines
8
const data = [
9
  {
10
    companyName: 'Hodkiewicz - Hintz',
11
    productName: 'Rustic Soft Ball',
12
    sellDate: '2023-07-05',
13
    inStock: false,
14
    qty: 82,
15
    orderId: '16-3974628',
16
    country: 'United Kingdom',
17
  },
18
  {
19
    companyName: 'Rath LLC',
20
    productName: 'Small Frozen Tuna',
21
    sellDate: '2023-05-31',
22
    inStock: false,
23
    qty: 459,
24
    orderId: '77-7839351',
25
    country: 'Costa Rica',
26
  },
27
  {
28
    companyName: 'Reichert LLC',
29
    productName: 'Rustic Soft Ball',
30
    sellDate: '2023-03-16',
31
    inStock: false,
32
    qty: 318,
33
    orderId: '75-6343150',
34
    country: 'United States of America',
35
  },
36
  {
37
    companyName: 'Kozey Inc',
38
    productName: 'Sleek Wooden Bacon',
39
    sellDate: '2023-04-24',
40
    inStock: true,
41
    qty: 177,
42
    orderId: '56-3608689',
43
    country: 'Pitcairn Islands',
44
  },
45
  {
46
    companyName: 'Nader - Fritsch',
47
    productName: 'Awesome Wooden Hat',
48
    sellDate: '2023-04-29',
49
    inStock: true,
50
    qty: 51,
51
    orderId: '58-1204318',
52
    country: 'Argentina',
53
  },
54
  {
55
    companyName: 'Gerhold - Rowe',
56
    productName: 'Tasty Frozen Table',
57
    sellDate: '2023-03-27',
58
    inStock: false,
59
    qty: 439,
60
    orderId: '62-6066132',
61
    country: 'Senegal',
62
  },
63
  {
64
    companyName: 'Rath LLC',
65
    productName: 'Awesome Wooden Hat',
66
    sellDate: '2022-11-24',
67
    inStock: false,
68
    qty: 493,
69
    orderId: '76-7785471',
70
    country: 'Cyprus',
71
  },
72
  {
73
    companyName: 'Kozey Inc',
74
    productName: 'Rustic Soft Ball',
75
    sellDate: '2023-08-11',
76
    inStock: false,
77
    qty: 225,
78
    orderId: '34-3551159',
79
    country: 'Saint Martin',
80
  },
81
  {
82
    companyName: 'Hodkiewicz - Hintz',
83
    productName: 'Awesome Wooden Hat',
84
    sellDate: '2023-02-07',
85
    inStock: false,
86
    qty: 261,
87
    orderId: '77-1112514',
88
    country: 'Chile',
89
  },
90
  {
91
    companyName: 'Hegmann Inc',
92
    productName: 'Tasty Frozen Table',
93
    sellDate: '2023-05-06',
94
    inStock: false,
95
    qty: 439,
96
    orderId: '12-3252385',
97
    country: 'Switzerland',
98
  },
99
  {
100
    companyName: 'Weber Inc',
101
    productName: 'Awesome Wooden Hat',
102
    sellDate: '2023-04-22',
103
    inStock: true,
104
    qty: 235,
105
    orderId: '71-7639998',
106
    country: 'Brazil',
107
  },
108
  {
109
    companyName: 'Jacobi - Kutch',
110
    productName: 'Sleek Wooden Bacon',
111
    sellDate: '2022-12-13',
112
    inStock: true,
113
    qty: 163,
114
    orderId: '68-1588829',
115
    country: 'Burkina Faso',
116
  },
117
  {
118
    companyName: 'Jenkins LLC',
119
    productName: 'Small Rubber Shoes',
120
    sellDate: '2023-03-26',
121
    inStock: true,
122
    qty: 8,
123
    orderId: '61-6324553',
124
    country: 'Virgin Islands, U.S.',
125
  },
126
  {
127
    companyName: 'Koepp and Sons',
128
    productName: 'Sleek Wooden Bacon',
129
    sellDate: '2023-05-04',
130
    inStock: true,
131
    qty: 355,
132
    orderId: '74-6985005',
133
    country: 'Mozambique',
134
  },
135
  {
136
    companyName: 'Doyle Group',
137
    productName: 'Awesome Wooden Hat',
138
    sellDate: '2023-08-01',
139
    inStock: false,
140
    qty: 186,
141
    orderId: '84-4370131',
142
    country: 'Cocos (Keeling) Islands',
143
  },
144
  {
145
    companyName: 'Rempel - Durgan',
146
    productName: 'Tasty Frozen Table',
147
    sellDate: '2023-09-30',
148
    inStock: false,
149
    qty: 284,
150
    orderId: '13-6461825',
151
    country: 'Monaco',
152
  },
153
  {
154
    companyName: 'Lesch - Jakubowski',
155
    productName: 'Small Fresh Bacon',
156
    sellDate: '2023-09-26',
157
    inStock: true,
158
    qty: 492,
159
    orderId: '13-9465439',
160
    country: 'Iran',
161
  },
162
  {
163
    companyName: 'Jacobi - Kutch',
164
    productName: 'Rustic Cotton Ball',
165
    sellDate: '2023-05-04',
166
    inStock: true,
167
    qty: 300,
168
    orderId: '76-5194058',
169
    country: 'Indonesia',
170
  },
171
  {
172
    companyName: 'Gerhold - Rowe',
173
    productName: 'Rustic Cotton Ball',
174
    sellDate: '2023-07-07',
175
    inStock: true,
176
    qty: 493,
177
    orderId: '61-8600792',
178
    country: 'Norfolk Island',
179
  },
180
  {
181
    companyName: 'Johnston - Wisozk',
182
    productName: 'Small Fresh Fish',
183
    sellDate: '2023-07-14',
184
    inStock: false,
185
    qty: 304,
186
    orderId: '10-6007287',
187
    country: 'Romania',
188
  },
189
  {
190
    companyName: 'Gutkowski Inc',
191
    productName: 'Small Fresh Bacon',
192
    sellDate: '2023-01-10',
193
    inStock: true,
194
    qty: 375,
195
    orderId: '25-1164132',
196
    country: 'Afghanistan',
197
  },
198
  {
199
    companyName: 'Koepp and Sons',
200
    productName: 'Small Fresh Fish',
201
    sellDate: '2023-03-30',
202
    inStock: false,
203
    qty: 365,
204
    orderId: '75-7975820',
205
    country: 'Germany',
206
  },
207
  {
208
    companyName: 'Zboncak and Sons',
209
    productName: 'Small Fresh Fish',
210
    sellDate: '2023-08-17',
211
    inStock: false,
212
    qty: 308,
213
    orderId: '59-6251875',
214
    country: 'Tajikistan',
215
  },
216
  {
217
    companyName: 'Mills Group',
218
    productName: 'Rustic Soft Ball',
219
    sellDate: '2023-09-30',
220
    inStock: false,
221
    qty: 191,
222
    orderId: '67-7521441',
223
    country: 'Puerto Rico',
224
  },
225
  {
226
    companyName: 'Zboncak and Sons',
227
    productName: 'Awesome Wooden Hat',
228
    sellDate: '2023-03-18',
229
    inStock: false,
230
    qty: 208,
231
    orderId: '19-4264192',
232
    country: 'Bolivia',
233
  },
234
  {
235
    companyName: 'Rath LLC',
236
    productName: 'Rustic Soft Ball',
237
    sellDate: '2023-06-14',
238
    inStock: true,
239
    qty: 191,
240
    orderId: '78-5742060',
241
    country: 'Benin',
242
  },
243
  {
244
    companyName: 'Upton - Reichert',
245
    productName: 'Tasty Frozen Table',
246
    sellDate: '2023-02-27',
247
    inStock: false,
248
    qty: 45,
249
    orderId: '26-6191298',
250
    country: 'Tunisia',
251
  },
252
  {
253
    companyName: 'Carroll Group',
254
    productName: 'Rustic Soft Ball',
255
    sellDate: '2022-12-12',
256
    inStock: true,
257
    qty: 385,
258
    orderId: '13-7828353',
259
    country: 'Switzerland',
260
  },
261
  {
262
    companyName: 'Reichel Group',
263
    productName: 'Small Frozen Tuna',
264
    sellDate: '2022-12-12',
265
    inStock: true,
266
    qty: 117,
267
    orderId: '67-9643738',
268
    country: 'Mongolia',
269
  },
270
  {
271
    companyName: 'Kozey Inc',
272
    productName: 'Rustic Soft Ball',
273
    sellDate: '2023-03-24',
274
    inStock: false,
275
    qty: 335,
276
    orderId: '78-1331653',
277
    country: 'Angola',
278
  },
279
  {
280
    companyName: 'Brown LLC',
281
    productName: 'Small Rubber Shoes',
282
    sellDate: '2023-06-13',
283
    inStock: true,
284
    qty: 305,
285
    orderId: '63-2315723',
286
    country: 'Switzerland',
287
  },
288
  {
289
    companyName: 'Weber Inc',
290
    productName: 'Rustic Cotton Ball',
291
    sellDate: '2023-09-07',
292
    inStock: true,
293
    qty: 409,
294
    orderId: '53-6782557',
295
    country: 'Indonesia',
296
  },
297
  {
298
    companyName: 'OReilly LLC',
299
    productName: 'Tasty Frozen Table',
300
    sellDate: '2023-05-18',
301
    inStock: true,
302
    qty: 318,
303
    orderId: '91-7787675',
304
    country: 'Mayotte',
305
  },
306
  {
307
    companyName: 'Weber Inc',
308
    productName: 'Sleek Wooden Bacon',
309
    sellDate: '2023-04-20',
310
    inStock: false,
311
    qty: 234,
312
    orderId: '41-3560672',
313
    country: 'Switzerland',
314
  },
315
  {
316
    companyName: 'Hodkiewicz Inc',
317
    productName: 'Tasty Frozen Table',
318
    sellDate: '2023-10-19',
319
    inStock: true,
320
    qty: 136,
321
    orderId: '48-6028776',
322
    country: 'Peru',
323
  },
324
  {
325
    companyName: 'Lesch and Sons',
326
    productName: 'Rustic Cotton Ball',
327
    sellDate: '2023-09-29',
328
    inStock: false,
329
    qty: 187,
330
    orderId: '84-3770456',
331
    country: 'Central African Republic',
332
  },
333
  {
334
    companyName: 'Pouros - Brakus',
335
    productName: 'Small Frozen Tuna',
336
    sellDate: '2023-01-29',
337
    inStock: false,
338
    qty: 350,
339
    orderId: '08-4844950',
340
    country: 'Isle of Man',
341
  },
342
  {
343
    companyName: 'Batz - Rice',
344
    productName: 'Small Rubber Shoes',
345
    sellDate: '2023-11-06',
346
    inStock: false,
347
    qty: 252,
348
    orderId: '88-4899852',
349
    country: 'Burundi',
350
  },
351
  {
352
    companyName: 'Kub Inc',
353
    productName: 'Small Fresh Fish',
354
    sellDate: '2023-09-05',
355
    inStock: true,
356
    qty: 306,
357
    orderId: '06-5022461',
358
    country: 'Mauritius',
359
  },
360
  {
361
    companyName: 'Hills and Sons',
362
    productName: 'Small Frozen Tuna',
363
    sellDate: '2023-11-07',
364
    inStock: false,
365
    qty: 435,
366
    orderId: '99-5539911',
367
    country: 'Somalia',
368
  },
369
  {
370
    companyName: 'Shanahan - Boyle',
371
    productName: 'Small Frozen Tuna',
372
    sellDate: '2023-06-19',
373
    inStock: true,
374
    qty: 171,
375
    orderId: '82-8162453',
376
    country: 'Virgin Islands, U.S.',
377
  },
378
  {
379
    companyName: 'Luettgen Inc',
380
    productName: 'Awesome Wooden Hat',
381
    sellDate: '2023-09-30',
382
    inStock: false,
383
    qty: 6,
384
    orderId: '02-8118250',
385
    country: 'Colombia',
386
  },
387
  {
388
    companyName: 'Hegmann Inc',
389
    productName: 'Small Rubber Shoes',
390
    sellDate: '2023-02-16',
391
    inStock: true,
392
    qty: 278,
393
    orderId: '07-9773343',
394
    country: 'Central African Republic',
395
  },
396
  {
397
    companyName: 'Kub Inc',
398
    productName: 'Small Frozen Tuna',
399
    sellDate: '2023-08-08',
400
    inStock: false,
401
    qty: 264,
402
    orderId: '66-4470479',
403
    country: 'Norfolk Island',
404
  },
405
  {
406
    companyName: 'Kub Inc',
407
    productName: 'Tasty Frozen Table',
408
    sellDate: '2023-06-06',
409
    inStock: true,
410
    qty: 494,
411
    orderId: '13-1175339',
412
    country: 'Liechtenstein',
413
  },
414
  {
415
    companyName: 'Hahn - Welch',
416
    productName: 'Small Frozen Tuna',
417
    sellDate: '2023-06-12',
418
    inStock: false,
419
    qty: 485,
420
    orderId: '32-9127309',
421
    country: 'Bahrain',
422
  },
423
  {
424
    companyName: 'Nader - Fritsch',
425
    productName: 'Small Frozen Tuna',
426
    sellDate: '2023-04-08',
427
    inStock: true,
428
    qty: 332,
429
    orderId: '41-3774568',
430
    country: 'Montserrat',
431
  },
432
  {
433
    companyName: 'Crona and Sons',
434
    productName: 'Small Fresh Bacon',
435
    sellDate: '2023-06-21',
436
    inStock: true,
437
    qty: 104,
438
    orderId: '48-9995090',
439
    country: 'Syrian Arab Republic',
440
  },
441
  {
442
    companyName: 'Lind Group',
443
    productName: 'Rustic Cotton Ball',
444
    sellDate: '2023-08-17',
445
    inStock: false,
446
    qty: 51,
447
    orderId: '68-9599400',
448
    country: 'Czech Republic',
449
  },
450
  {
451
    companyName: 'Labadie LLC',
452
    productName: 'Small Fresh Bacon',
453
    sellDate: '2023-04-20',
454
    inStock: true,
455
    qty: 155,
456
    orderId: '52-4334332',
457
    country: 'Croatia',
458
  },
459
  {
460
    companyName: 'Doyle Group',
461
    productName: 'Sleek Wooden Bacon',
462
    sellDate: '2023-07-23',
463
    inStock: false,
464
    qty: 465,
465
    orderId: '63-8894526',
466
    country: 'Indonesia',
467
  },
468
];
469

470
const countries = data.reduce((acc, curr) => {
471
  if (acc.includes(curr.country)) {
472
    return acc;
473
  }
474

475
  return [...acc, curr.country];
476
}, []);
477

478
/* end:skip-in-preview */
479
// Handsontable options
480
const hotOptions = {
481
  data,
482
  height: 464,
483
  colWidths: [160, 165, 130, 120, 100, 110, 216],
484
  autoRowSize: true,
485
  colHeaders: ['Company name', 'Product name', 'Sell date', 'In stock', 'Qty', 'Order ID', 'Country'],
486
  dropdownMenu: true,
487
  hiddenColumns: {
488
    indicators: true,
489
  },
490
  multiColumnSorting: true,
491
  filters: true,
492
  rowHeaders: true,
493
  manualRowMove: true,
494
  licenseKey: 'non-commercial-and-evaluation',
495
};
496

497
const ExampleComponent = () => {
498
  const [toggleableOptions, setToggleableOptions] = useState({
499
    tabNavigation: true,
500
    navigableHeaders: true,
501
    renderAllRows: false,
502
    renderAllColumns: false,
503
    enterBeginsEditing: true,
504
    autoWrapRow: true,
505
    autoWrapCol: true,
506
    headerClassName: 'htLeft',
507
    enterMoves: { col: 0, row: 1 },
508
  });
509

510
  return (
511
    <div className="example-container">
512
      {/* DemoOptions component for changing Handsontable options */}
513
      <DemoOptions changeToggleOptions={setToggleableOptions} {...toggleableOptions} />
514

515
      <input className="placeholder-input" type="text" placeholder="Focusable text input" />
516

517
      {/* Handsontable component with dynamic options */}
518
      <HotTable
519
        // Handsontable needs to reload when changing virtualization
520
        // by changing the key, we force the component to reload
521
        key={String(toggleableOptions.renderAllRows)}
522
        {...hotOptions}
523
        // Pass in the options which can change for demo
524
        {...toggleableOptions}
525
      >
526
        {/* Define HotColumns for the data */}
527
        <HotColumn data="companyName" type="text" />
528
        <HotColumn data="productName" type="text" />
529
        <HotColumn
530
          data="sellDate"
531
          locale="en-GB"
532
          dateFormat={{ day: '2-digit', month: '2-digit', year: 'numeric' }}
533
          type="intl-date"
534
        />
535
        <HotColumn data="inStock" type="checkbox" className="htCenter" headerClassName="htCenter" />
536
        <HotColumn data="qty" type="numeric" headerClassName="htRight" />
537
        <HotColumn data="orderId" type="text" />
538
        <HotColumn data="country" type="dropdown" source={countries} />
539
      </HotTable>
540
      <input className="placeholder-input" type="text" placeholder="Focusable text input" />
541
    </div>
542
  );
543
};
544

545
// Demo Options allows you to change the Handsontable options
546
// This allows us to change the Handsontable settings from the UI, showcasing
547
// the flexibility of Handsontable in configuring according to your needs.
548
function DemoOptions({
549
  tabNavigation,
550
  navigableHeaders,
551
  renderAllRows,
552
  renderAllColumns,
553
  enterBeginsEditing,
554
  autoWrapRow,
555
  autoWrapCol,
556
  enterMoves,
557
  changeToggleOptions,
558
}) {
559
  // on checkbox change, update handsontable option
560
  const handleCheckboxChange = (checkboxName) => {
561
    switch (checkboxName) {
562
      case 'enable-tab-navigation':
563
        changeToggleOptions((existing) => ({
564
          ...existing,
565
          tabNavigation: !tabNavigation,
566
        }));
567

568
        break;
569
      case 'enable-header-navigation':
570
        changeToggleOptions((existing) => ({
571
          ...existing,
572
          navigableHeaders: !navigableHeaders,
573
        }));
574

575
        break;
576
      case 'enable-cell-virtualization':
577
        changeToggleOptions((existing) => ({
578
          ...existing,
579
          renderAllRows: !renderAllRows,
580
          renderAllColumns: !renderAllColumns,
581
        }));
582

583
        break;
584
      case 'enable-cell-enter-editing':
585
        changeToggleOptions((existing) => ({
586
          ...existing,
587
          enterBeginsEditing: !enterBeginsEditing,
588
        }));
589

590
        break;
591
      case 'enable-arrow-rl-first-last-column':
592
        changeToggleOptions((existing) => ({
593
          ...existing,
594
          autoWrapRow: !autoWrapRow,
595
        }));
596

597
        break;
598
      case 'enable-arrow-td-first-last-column':
599
        changeToggleOptions((existing) => ({
600
          ...existing,
601
          autoWrapCol: !autoWrapCol,
602
        }));
603

604
        break;
605
      case 'enable-enter-focus-editing':
606
        changeToggleOptions((existing) => ({
607
          ...existing,
608
          enterMoves: enterMoves.row !== 1 ? { col: 0, row: 1 } : { col: 0, row: 0 },
609
        }));
610

611
        break;
612
      default:
613
        break;
614
    }
615
  };
616

617
  return (
618
    <>
619
      <div className="checkbox-container">
620
          <div>
621
            <label className="option-label" htmlFor="enable-tab-navigation" id="tab-navigation-label">
622
              <input
623
                checked={tabNavigation}
624
                type="checkbox"
625
                id="enable-tab-navigation"
626
                name="enable-tab-navigation"
627
                aria-label="Enable navigation with the Tab key"
628
                onChange={() => handleCheckboxChange('enable-tab-navigation')}
629
              />
630
              Enable navigation with the Tab key
631
            </label>
632
            <a
633
              href="https://handsontable.com/docs/react-data-grid/api/options/#tabnavigation"
634
              target="_blank"
635
              className="external-link"
636
              rel="noopener noreferrer"
637
              aria-label="Learn more enabling/disabling tab navigation (opens in a new window)"
638
            >
639
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" className="icon outbound">
640
                <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z" />
641
                <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9" />
642
              </svg>
643
            </a>
644
          </div>
645
          <div>
646
            <label className="option-label" htmlFor="enable-header-navigation" id="header-navigation-label">
647
              <input
648
                checked={navigableHeaders}
649
                type="checkbox"
650
                id="enable-header-navigation"
651
                name="enable-header-navigation"
652
                aria-labelledby="header-navigation-label"
653
                onChange={() => handleCheckboxChange('enable-header-navigation')}
654
              />
655
              Enable navigation across headers
656
            </label>
657
            <a
658
              href="https://handsontable.com/docs/react-data-grid/api/options/#navigableheaders"
659
              target="_blank"
660
              className="external-link"
661
              rel="noopener noreferrer"
662
              aria-label="Learn more about enabling/disabling tab navigation across headers (opens in a new window)"
663
            >
664
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" className="icon outbound">
665
                <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z" />
666
                <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9" />
667
              </svg>
668
            </a>
669
          </div>
670
          <div>
671
            <label className="option-label" htmlFor="enable-cell-virtualization" id="cell-virtualization-label">
672
              <input
673
                checked={!renderAllRows}
674
                type="checkbox"
675
                id="enable-cell-virtualization"
676
                name="enable-cell-virtualization"
677
                aria-labelledby="cell-virtualization-label"
678
                onChange={() => handleCheckboxChange('enable-cell-virtualization')}
679
              />
680
              Enable cells virtualization
681
            </label>
682
            <a
683
              href="https://handsontable.com/docs/react-data-grid/api/options/#renderAllRows"
684
              target="_blank"
685
              className="external-link"
686
              rel="noopener noreferrer"
687
              aria-label="Learn more about row virtualization (opens in a new window)"
688
            >
689
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" className="icon outbound">
690
                <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z" />
691
                <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9" />
692
              </svg>
693
            </a>
694
          </div>
695
          <div>
696
            <label className="option-label" htmlFor="enable-cell-enter-editing" id="cell-enter-editing-label">
697
              <input
698
                checked={enterBeginsEditing}
699
                type="checkbox"
700
                id="enable-cell-enter-editing"
701
                name="enable-cell-enter-editing"
702
                aria-labelledby="cell-enter-editing-label"
703
                onChange={() => handleCheckboxChange('enable-cell-enter-editing')}
704
              />
705
              The Enter key begins cell editing
706
            </label>
707
            <a
708
              href="https://handsontable.com/docs/react-data-grid/api/options/#enterbeginsediting"
709
              target="_blank"
710
              className="external-link"
711
              rel="noopener noreferrer"
712
              aria-label="Learn more about Enter key cell editing (opens in a new window)"
713
            >
714
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" className="icon outbound">
715
                <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z" />
716
                <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9" />
717
              </svg>
718
            </a>
719
          </div>
720
          <div>
721
            <label className="option-label" htmlFor="enable-arrow-rl-first-last-column" id="arrow-rl-first-last-column-label">
722
              <input
723
                checked={autoWrapRow}
724
                type="checkbox"
725
                id="enable-arrow-rl-first-last-column"
726
                name="enableArrowFirstLastColumn"
727
                aria-labelledby="arrow-rl-first-last-column-label"
728
                onChange={() => handleCheckboxChange('enable-arrow-rl-first-last-column')}
729
              />
730
              The right/left arrow keys move the focus to the first/last column
731
            </label>
732
            <a
733
              href="https://handsontable.com/docs/react-data-grid/api/options/#autowrapcol"
734
              target="_blank"
735
              className="external-link"
736
              rel="noopener noreferrer"
737
              aria-label="Learn more about right/left arrow key behavior (opens in a new window)"
738
            >
739
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" className="icon outbound">
740
                <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z" />
741
                <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9" />
742
              </svg>
743
            </a>
744
          </div>
745
          <div>
746
            <label className="option-label" htmlFor="enable-arrow-td-first-last-column" id="arrow-td-first-last-column-label">
747
              <input
748
                checked={autoWrapCol}
749
                type="checkbox"
750
                id="enable-arrow-td-first-last-column"
751
                name="enable-arrow-td-first-last-column"
752
                aria-labelledby="arrow-td-first-last-column-label"
753
                onChange={() => handleCheckboxChange('enable-arrow-td-first-last-column')}
754
              />
755
              The up/down arrow keys move the focus to the first/last row
756
            </label>
757
            <a
758
              href="https://handsontable.com/docs/react-data-grid/api/options/#autowraprow"
759
              target="_blank"
760
              className="external-link"
761
              rel="noopener noreferrer"
762
              aria-label="Learn more about up/down arrow key behavior (opens in a new window)"
763
            >
764
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" className="icon outbound">
765
                <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z" />
766
                <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9" />
767
              </svg>
768
            </a>
769
          </div>
770
          <div>
771
            <label className="option-label" htmlFor="enable-enter-focus-editing" id="enter-focus-editing-label">
772
              <input
773
                checked={enterMoves.row !== 0}
774
                type="checkbox"
775
                id="enable-enter-focus-editing"
776
                name="enable-enter-focus-editing"
777
                aria-labelledby="enter-focus-editing-label"
778
                onChange={() => handleCheckboxChange('enable-enter-focus-editing')}
779
              />
780
              The Enter key moves the focus after cell edition
781
            </label>
782
            <a
783
              href="https://handsontable.com/docs/react-data-grid/api/options/#entermoves"
784
              target="_blank"
785
              className="external-link"
786
              rel="noopener noreferrer"
787
              aria-label="Learn more about Enter key focus behavior (opens in a new window)"
788
            >
789
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" className="icon outbound">
790
                <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z" />
791
                <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9" />
792
              </svg>
793
            </a>
794
          </div>
795
      </div>
796
    </>
797
  );
798
}
799

800
export default ExampleComponent;

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

5
registerAllModules();
6

7
interface Toggle {
8
  tabNavigation: boolean;
9
  navigableHeaders: boolean;
10
  renderAllRows: boolean;
11
  renderAllColumns: boolean;
12
  enterBeginsEditing: boolean;
13
  autoWrapRow: boolean;
14
  autoWrapCol: boolean;
15
  enterMoves: { col: number; row: number };
16
  changeToggleOptions: any;
17
}
18

19
interface Product {
20
  companyName: string;
21
  productName: string;
22
  sellDate: string;
23
  inStock: boolean;
24
  qty: number;
25
  orderId: string;
26
  country: string;
27
}
28

29
/* start:skip-in-preview */
461 collapsed lines
30
const data: Product[] = [
31
  {
32
    companyName: 'Hodkiewicz - Hintz',
33
    productName: 'Rustic Soft Ball',
34
    sellDate: '2023-07-05',
35
    inStock: false,
36
    qty: 82,
37
    orderId: '16-3974628',
38
    country: 'United Kingdom',
39
  },
40
  {
41
    companyName: 'Rath LLC',
42
    productName: 'Small Frozen Tuna',
43
    sellDate: '2023-05-31',
44
    inStock: false,
45
    qty: 459,
46
    orderId: '77-7839351',
47
    country: 'Costa Rica',
48
  },
49
  {
50
    companyName: 'Reichert LLC',
51
    productName: 'Rustic Soft Ball',
52
    sellDate: '2023-03-16',
53
    inStock: false,
54
    qty: 318,
55
    orderId: '75-6343150',
56
    country: 'United States of America',
57
  },
58
  {
59
    companyName: 'Kozey Inc',
60
    productName: 'Sleek Wooden Bacon',
61
    sellDate: '2023-04-24',
62
    inStock: true,
63
    qty: 177,
64
    orderId: '56-3608689',
65
    country: 'Pitcairn Islands',
66
  },
67
  {
68
    companyName: 'Nader - Fritsch',
69
    productName: 'Awesome Wooden Hat',
70
    sellDate: '2023-04-29',
71
    inStock: true,
72
    qty: 51,
73
    orderId: '58-1204318',
74
    country: 'Argentina',
75
  },
76
  {
77
    companyName: 'Gerhold - Rowe',
78
    productName: 'Tasty Frozen Table',
79
    sellDate: '2023-03-27',
80
    inStock: false,
81
    qty: 439,
82
    orderId: '62-6066132',
83
    country: 'Senegal',
84
  },
85
  {
86
    companyName: 'Rath LLC',
87
    productName: 'Awesome Wooden Hat',
88
    sellDate: '2022-11-24',
89
    inStock: false,
90
    qty: 493,
91
    orderId: '76-7785471',
92
    country: 'Cyprus',
93
  },
94
  {
95
    companyName: 'Kozey Inc',
96
    productName: 'Rustic Soft Ball',
97
    sellDate: '2023-08-11',
98
    inStock: false,
99
    qty: 225,
100
    orderId: '34-3551159',
101
    country: 'Saint Martin',
102
  },
103
  {
104
    companyName: 'Hodkiewicz - Hintz',
105
    productName: 'Awesome Wooden Hat',
106
    sellDate: '2023-02-07',
107
    inStock: false,
108
    qty: 261,
109
    orderId: '77-1112514',
110
    country: 'Chile',
111
  },
112
  {
113
    companyName: 'Hegmann Inc',
114
    productName: 'Tasty Frozen Table',
115
    sellDate: '2023-05-06',
116
    inStock: false,
117
    qty: 439,
118
    orderId: '12-3252385',
119
    country: 'Switzerland',
120
  },
121
  {
122
    companyName: 'Weber Inc',
123
    productName: 'Awesome Wooden Hat',
124
    sellDate: '2023-04-22',
125
    inStock: true,
126
    qty: 235,
127
    orderId: '71-7639998',
128
    country: 'Brazil',
129
  },
130
  {
131
    companyName: 'Jacobi - Kutch',
132
    productName: 'Sleek Wooden Bacon',
133
    sellDate: '2022-12-13',
134
    inStock: true,
135
    qty: 163,
136
    orderId: '68-1588829',
137
    country: 'Burkina Faso',
138
  },
139
  {
140
    companyName: 'Jenkins LLC',
141
    productName: 'Small Rubber Shoes',
142
    sellDate: '2023-03-26',
143
    inStock: true,
144
    qty: 8,
145
    orderId: '61-6324553',
146
    country: 'Virgin Islands, U.S.',
147
  },
148
  {
149
    companyName: 'Koepp and Sons',
150
    productName: 'Sleek Wooden Bacon',
151
    sellDate: '2023-05-04',
152
    inStock: true,
153
    qty: 355,
154
    orderId: '74-6985005',
155
    country: 'Mozambique',
156
  },
157
  {
158
    companyName: 'Doyle Group',
159
    productName: 'Awesome Wooden Hat',
160
    sellDate: '2023-08-01',
161
    inStock: false,
162
    qty: 186,
163
    orderId: '84-4370131',
164
    country: 'Cocos (Keeling) Islands',
165
  },
166
  {
167
    companyName: 'Rempel - Durgan',
168
    productName: 'Tasty Frozen Table',
169
    sellDate: '2023-09-30',
170
    inStock: false,
171
    qty: 284,
172
    orderId: '13-6461825',
173
    country: 'Monaco',
174
  },
175
  {
176
    companyName: 'Lesch - Jakubowski',
177
    productName: 'Small Fresh Bacon',
178
    sellDate: '2023-09-26',
179
    inStock: true,
180
    qty: 492,
181
    orderId: '13-9465439',
182
    country: 'Iran',
183
  },
184
  {
185
    companyName: 'Jacobi - Kutch',
186
    productName: 'Rustic Cotton Ball',
187
    sellDate: '2023-05-04',
188
    inStock: true,
189
    qty: 300,
190
    orderId: '76-5194058',
191
    country: 'Indonesia',
192
  },
193
  {
194
    companyName: 'Gerhold - Rowe',
195
    productName: 'Rustic Cotton Ball',
196
    sellDate: '2023-07-07',
197
    inStock: true,
198
    qty: 493,
199
    orderId: '61-8600792',
200
    country: 'Norfolk Island',
201
  },
202
  {
203
    companyName: 'Johnston - Wisozk',
204
    productName: 'Small Fresh Fish',
205
    sellDate: '2023-07-14',
206
    inStock: false,
207
    qty: 304,
208
    orderId: '10-6007287',
209
    country: 'Romania',
210
  },
211
  {
212
    companyName: 'Gutkowski Inc',
213
    productName: 'Small Fresh Bacon',
214
    sellDate: '2023-01-10',
215
    inStock: true,
216
    qty: 375,
217
    orderId: '25-1164132',
218
    country: 'Afghanistan',
219
  },
220
  {
221
    companyName: 'Koepp and Sons',
222
    productName: 'Small Fresh Fish',
223
    sellDate: '2023-03-30',
224
    inStock: false,
225
    qty: 365,
226
    orderId: '75-7975820',
227
    country: 'Germany',
228
  },
229
  {
230
    companyName: 'Zboncak and Sons',
231
    productName: 'Small Fresh Fish',
232
    sellDate: '2023-08-17',
233
    inStock: false,
234
    qty: 308,
235
    orderId: '59-6251875',
236
    country: 'Tajikistan',
237
  },
238
  {
239
    companyName: 'Mills Group',
240
    productName: 'Rustic Soft Ball',
241
    sellDate: '2023-09-30',
242
    inStock: false,
243
    qty: 191,
244
    orderId: '67-7521441',
245
    country: 'Puerto Rico',
246
  },
247
  {
248
    companyName: 'Zboncak and Sons',
249
    productName: 'Awesome Wooden Hat',
250
    sellDate: '2023-03-18',
251
    inStock: false,
252
    qty: 208,
253
    orderId: '19-4264192',
254
    country: 'Bolivia',
255
  },
256
  {
257
    companyName: 'Rath LLC',
258
    productName: 'Rustic Soft Ball',
259
    sellDate: '2023-06-14',
260
    inStock: true,
261
    qty: 191,
262
    orderId: '78-5742060',
263
    country: 'Benin',
264
  },
265
  {
266
    companyName: 'Upton - Reichert',
267
    productName: 'Tasty Frozen Table',
268
    sellDate: '2023-02-27',
269
    inStock: false,
270
    qty: 45,
271
    orderId: '26-6191298',
272
    country: 'Tunisia',
273
  },
274
  {
275
    companyName: 'Carroll Group',
276
    productName: 'Rustic Soft Ball',
277
    sellDate: '2022-12-12',
278
    inStock: true,
279
    qty: 385,
280
    orderId: '13-7828353',
281
    country: 'Switzerland',
282
  },
283
  {
284
    companyName: 'Reichel Group',
285
    productName: 'Small Frozen Tuna',
286
    sellDate: '2022-12-12',
287
    inStock: true,
288
    qty: 117,
289
    orderId: '67-9643738',
290
    country: 'Mongolia',
291
  },
292
  {
293
    companyName: 'Kozey Inc',
294
    productName: 'Rustic Soft Ball',
295
    sellDate: '2023-03-24',
296
    inStock: false,
297
    qty: 335,
298
    orderId: '78-1331653',
299
    country: 'Angola',
300
  },
301
  {
302
    companyName: 'Brown LLC',
303
    productName: 'Small Rubber Shoes',
304
    sellDate: '2023-06-13',
305
    inStock: true,
306
    qty: 305,
307
    orderId: '63-2315723',
308
    country: 'Switzerland',
309
  },
310
  {
311
    companyName: 'Weber Inc',
312
    productName: 'Rustic Cotton Ball',
313
    sellDate: '2023-09-07',
314
    inStock: true,
315
    qty: 409,
316
    orderId: '53-6782557',
317
    country: 'Indonesia',
318
  },
319
  {
320
    companyName: 'OReilly LLC',
321
    productName: 'Tasty Frozen Table',
322
    sellDate: '2023-05-18',
323
    inStock: true,
324
    qty: 318,
325
    orderId: '91-7787675',
326
    country: 'Mayotte',
327
  },
328
  {
329
    companyName: 'Weber Inc',
330
    productName: 'Sleek Wooden Bacon',
331
    sellDate: '2023-04-20',
332
    inStock: false,
333
    qty: 234,
334
    orderId: '41-3560672',
335
    country: 'Switzerland',
336
  },
337
  {
338
    companyName: 'Hodkiewicz Inc',
339
    productName: 'Tasty Frozen Table',
340
    sellDate: '2023-10-19',
341
    inStock: true,
342
    qty: 136,
343
    orderId: '48-6028776',
344
    country: 'Peru',
345
  },
346
  {
347
    companyName: 'Lesch and Sons',
348
    productName: 'Rustic Cotton Ball',
349
    sellDate: '2023-09-29',
350
    inStock: false,
351
    qty: 187,
352
    orderId: '84-3770456',
353
    country: 'Central African Republic',
354
  },
355
  {
356
    companyName: 'Pouros - Brakus',
357
    productName: 'Small Frozen Tuna',
358
    sellDate: '2023-01-29',
359
    inStock: false,
360
    qty: 350,
361
    orderId: '08-4844950',
362
    country: 'Isle of Man',
363
  },
364
  {
365
    companyName: 'Batz - Rice',
366
    productName: 'Small Rubber Shoes',
367
    sellDate: '2023-11-06',
368
    inStock: false,
369
    qty: 252,
370
    orderId: '88-4899852',
371
    country: 'Burundi',
372
  },
373
  {
374
    companyName: 'Kub Inc',
375
    productName: 'Small Fresh Fish',
376
    sellDate: '2023-09-05',
377
    inStock: true,
378
    qty: 306,
379
    orderId: '06-5022461',
380
    country: 'Mauritius',
381
  },
382
  {
383
    companyName: 'Hills and Sons',
384
    productName: 'Small Frozen Tuna',
385
    sellDate: '2023-11-07',
386
    inStock: false,
387
    qty: 435,
388
    orderId: '99-5539911',
389
    country: 'Somalia',
390
  },
391
  {
392
    companyName: 'Shanahan - Boyle',
393
    productName: 'Small Frozen Tuna',
394
    sellDate: '2023-06-19',
395
    inStock: true,
396
    qty: 171,
397
    orderId: '82-8162453',
398
    country: 'Virgin Islands, U.S.',
399
  },
400
  {
401
    companyName: 'Luettgen Inc',
402
    productName: 'Awesome Wooden Hat',
403
    sellDate: '2023-09-30',
404
    inStock: false,
405
    qty: 6,
406
    orderId: '02-8118250',
407
    country: 'Colombia',
408
  },
409
  {
410
    companyName: 'Hegmann Inc',
411
    productName: 'Small Rubber Shoes',
412
    sellDate: '2023-02-16',
413
    inStock: true,
414
    qty: 278,
415
    orderId: '07-9773343',
416
    country: 'Central African Republic',
417
  },
418
  {
419
    companyName: 'Kub Inc',
420
    productName: 'Small Frozen Tuna',
421
    sellDate: '2023-08-08',
422
    inStock: false,
423
    qty: 264,
424
    orderId: '66-4470479',
425
    country: 'Norfolk Island',
426
  },
427
  {
428
    companyName: 'Kub Inc',
429
    productName: 'Tasty Frozen Table',
430
    sellDate: '2023-06-06',
431
    inStock: true,
432
    qty: 494,
433
    orderId: '13-1175339',
434
    country: 'Liechtenstein',
435
  },
436
  {
437
    companyName: 'Hahn - Welch',
438
    productName: 'Small Frozen Tuna',
439
    sellDate: '2023-06-12',
440
    inStock: false,
441
    qty: 485,
442
    orderId: '32-9127309',
443
    country: 'Bahrain',
444
  },
445
  {
446
    companyName: 'Nader - Fritsch',
447
    productName: 'Small Frozen Tuna',
448
    sellDate: '2023-04-08',
449
    inStock: true,
450
    qty: 332,
451
    orderId: '41-3774568',
452
    country: 'Montserrat',
453
  },
454
  {
455
    companyName: 'Crona and Sons',
456
    productName: 'Small Fresh Bacon',
457
    sellDate: '2023-06-21',
458
    inStock: true,
459
    qty: 104,
460
    orderId: '48-9995090',
461
    country: 'Syrian Arab Republic',
462
  },
463
  {
464
    companyName: 'Lind Group',
465
    productName: 'Rustic Cotton Ball',
466
    sellDate: '2023-08-17',
467
    inStock: false,
468
    qty: 51,
469
    orderId: '68-9599400',
470
    country: 'Czech Republic',
471
  },
472
  {
473
    companyName: 'Labadie LLC',
474
    productName: 'Small Fresh Bacon',
475
    sellDate: '2023-04-20',
476
    inStock: true,
477
    qty: 155,
478
    orderId: '52-4334332',
479
    country: 'Croatia',
480
  },
481
  {
482
    companyName: 'Doyle Group',
483
    productName: 'Sleek Wooden Bacon',
484
    sellDate: '2023-07-23',
485
    inStock: false,
486
    qty: 465,
487
    orderId: '63-8894526',
488
    country: 'Indonesia',
489
  },
490
];
491

492
const countries = data.reduce<string[]>((acc, curr) => {
493
  if (acc.includes(curr.country)) {
494
    return acc;
495
  }
496

497
  return [...acc, curr.country];
498
}, []);
499

500
/* end:skip-in-preview */
501

502
// Handsontable options
503
const hotOptions = {
504
  data,
505
  height: 464,
506
  colWidths: [160, 165, 130, 120, 100, 110, 216],
507
  autoRowSize: true,
508
  colHeaders: ['Company name', 'Product name', 'Sell date', 'In stock', 'Qty', 'Order ID', 'Country'],
509
  dropdownMenu: true,
510
  hiddenColumns: {
511
    indicators: true,
512
  },
513
  multiColumnSorting: true,
514
  filters: true,
515
  rowHeaders: true,
516
  manualRowMove: true,
517
  licenseKey: 'non-commercial-and-evaluation',
518
};
519

520
const ExampleComponent = () => {
521
  const [toggleableOptions, setToggleableOptions] = useState<Omit<Toggle, 'changeToggleOptions'>>({
522
    tabNavigation: true,
523
    navigableHeaders: true,
524
    renderAllRows: false,
525
    renderAllColumns: false,
526
    enterBeginsEditing: true,
527
    autoWrapRow: true,
528
    autoWrapCol: true,
529
    headerClassName: 'htLeft',
530
    enterMoves: { col: 0, row: 1 },
531
  });
532

533
  return (
534
    <div className="example-container">
535
      {/* DemoOptions component for changing Handsontable options */}
536
      <DemoOptions changeToggleOptions={setToggleableOptions} {...toggleableOptions} />
537

538
      <input className="placeholder-input" type="text" placeholder="Focusable text input" />
539

540
      {/* Handsontable component with dynamic options */}
541
      <HotTable
542
        // Handsontable needs to reload when changing virtualization
543
        // by changing the key, we force the component to reload
544
        key={String(toggleableOptions.renderAllRows)}
545
        {...hotOptions}
546
        // Pass in the options which can change for demo
547
        {...toggleableOptions}
548
      >
549
        {/* Define HotColumns for the data */}
550
        <HotColumn data="companyName" type="text" />
551
        <HotColumn data="productName" type="text" />
552
        <HotColumn data="sellDate" locale="en-GB" dateFormat={{ day: '2-digit', month: '2-digit', year: 'numeric' }} type="intl-date" />
553
        <HotColumn data="inStock" type="checkbox" className="htCenter" headerClassName="htCenter" />
554
        <HotColumn data="qty" type="numeric" headerClassName="htRight" />
555
        <HotColumn data="orderId" type="text" />
556
        <HotColumn data="country" type="dropdown" source={countries} />
557
      </HotTable>
558
      <input className="placeholder-input" type="text" placeholder="Focusable text input" />
559
    </div>
560
  );
561
};
562

563
// Demo Options allows you to change the Handsontable options
564
// This allows us to change the Handsontable settings from the UI, showcasing
565
// the flexibility of Handsontable in configuring according to your needs.
566
function DemoOptions({
567
  tabNavigation,
568
  navigableHeaders,
569
  renderAllRows,
570
  renderAllColumns,
571
  enterBeginsEditing,
572
  autoWrapRow,
573
  autoWrapCol,
574
  enterMoves,
575
  changeToggleOptions,
576
}: Toggle) {
577
  // on checkbox change, update handsontable option
578
  const handleCheckboxChange = (checkboxName: string) => {
579
    switch (checkboxName) {
580
      case 'enable-tab-navigation':
581
        changeToggleOptions((existing: any) => ({
582
          ...existing,
583
          tabNavigation: !tabNavigation,
584
        }));
585

586
        break;
587
      case 'enable-header-navigation':
588
        changeToggleOptions((existing: any) => ({
589
          ...existing,
590
          navigableHeaders: !navigableHeaders,
591
        }));
592

593
        break;
594
      case 'enable-cell-virtualization':
595
        changeToggleOptions((existing: any) => ({
596
          ...existing,
597
          renderAllRows: !renderAllRows,
598
          renderAllColumns: !renderAllColumns,
599
        }));
600

601
        break;
602
      case 'enable-cell-enter-editing':
603
        changeToggleOptions((existing: any) => ({
604
          ...existing,
605
          enterBeginsEditing: !enterBeginsEditing,
606
        }));
607

608
        break;
609
      case 'enable-arrow-rl-first-last-column':
610
        changeToggleOptions((existing: any) => ({
611
          ...existing,
612
          autoWrapRow: !autoWrapRow,
613
        }));
614

615
        break;
616
      case 'enable-arrow-td-first-last-column':
617
        changeToggleOptions((existing: any) => ({
618
          ...existing,
619
          autoWrapCol: !autoWrapCol,
620
        }));
621

622
        break;
623
      case 'enable-enter-focus-editing':
624
        changeToggleOptions((existing: any) => ({
625
          ...existing,
626
          enterMoves: enterMoves.row !== 1 ? { col: 0, row: 1 } : { col: 0, row: 0 },
627
        }));
628

629
        break;
630
      default:
631
        break;
632
    }
633
  };
634

635
  return (
636
    <>
637
      <div className="checkbox-container">
638
          <div>
639
            <label className="option-label" htmlFor="enable-tab-navigation" id="tab-navigation-label">
640
              <input
641
                checked={tabNavigation}
642
                type="checkbox"
643
                id="enable-tab-navigation"
644
                name="enable-tab-navigation"
645
                aria-label="Enable navigation with the Tab key"
646
                onChange={() => handleCheckboxChange('enable-tab-navigation')}
647
              />
648
              Enable navigation with the Tab key
649
            </label>
650
            <a
651
              href="https://handsontable.com/docs/react-data-grid/api/options/#tabnavigation"
652
              target="_blank"
653
              className="external-link"
654
              rel="noopener noreferrer"
655
              aria-label="Learn more enabling/disabling tab navigation (opens in a new window)"
656
            >
657
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" className="icon outbound">
658
                <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z" />
659
                <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9" />
660
              </svg>
661
            </a>
662
          </div>
663
          <div>
664
            <label className="option-label" htmlFor="enable-header-navigation" id="header-navigation-label">
665
              <input
666
                checked={navigableHeaders}
667
                type="checkbox"
668
                id="enable-header-navigation"
669
                name="enable-header-navigation"
670
                aria-labelledby="header-navigation-label"
671
                onChange={() => handleCheckboxChange('enable-header-navigation')}
672
              />
673
              Enable navigation across headers
674
            </label>
675
            <a
676
              href="https://handsontable.com/docs/react-data-grid/api/options/#navigableheaders"
677
              target="_blank"
678
              className="external-link"
679
              rel="noopener noreferrer"
680
              aria-label="Learn more about enabling/disabling tab navigation across headers (opens in a new window)"
681
            >
682
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" className="icon outbound">
683
                <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z" />
684
                <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9" />
685
              </svg>
686
            </a>
687
          </div>
688
          <div>
689
            <label className="option-label" htmlFor="enable-cell-virtualization" id="cell-virtualization-label">
690
              <input
691
                checked={!renderAllRows}
692
                type="checkbox"
693
                id="enable-cell-virtualization"
694
                name="enable-cell-virtualization"
695
                aria-labelledby="cell-virtualization-label"
696
                onChange={() => handleCheckboxChange('enable-cell-virtualization')}
697
              />
698
              Enable cells virtualization
699
            </label>
700
            <a
701
              href="https://handsontable.com/docs/react-data-grid/api/options/#renderAllRows"
702
              target="_blank"
703
              className="external-link"
704
              rel="noopener noreferrer"
705
              aria-label="Learn more about row virtualization (opens in a new window)"
706
            >
707
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" className="icon outbound">
708
                <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z" />
709
                <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9" />
710
              </svg>
711
            </a>
712
          </div>
713
          <div>
714
            <label className="option-label" htmlFor="enable-cell-enter-editing" id="cell-enter-editing-label">
715
              <input
716
                checked={enterBeginsEditing}
717
                type="checkbox"
718
                id="enable-cell-enter-editing"
719
                name="enable-cell-enter-editing"
720
                aria-labelledby="cell-enter-editing-label"
721
                onChange={() => handleCheckboxChange('enable-cell-enter-editing')}
722
              />
723
              The Enter key begins cell editing
724
            </label>
725
            <a
726
              href="https://handsontable.com/docs/react-data-grid/api/options/#enterbeginsediting"
727
              target="_blank"
728
              className="external-link"
729
              rel="noopener noreferrer"
730
              aria-label="Learn more about Enter key cell editing (opens in a new window)"
731
            >
732
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" className="icon outbound">
733
                <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z" />
734
                <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9" />
735
              </svg>
736
            </a>
737
          </div>
738
          <div>
739
            <label className="option-label" htmlFor="enable-arrow-rl-first-last-column" id="arrow-rl-first-last-column-label">
740
              <input
741
                checked={autoWrapRow}
742
                type="checkbox"
743
                id="enable-arrow-rl-first-last-column"
744
                name="enableArrowFirstLastColumn"
745
                aria-labelledby="arrow-rl-first-last-column-label"
746
                onChange={() => handleCheckboxChange('enable-arrow-rl-first-last-column')}
747
              />
748
              The right/left arrow keys move the focus to the first/last column
749
            </label>
750
            <a
751
              href="https://handsontable.com/docs/react-data-grid/api/options/#autowrapcol"
752
              target="_blank"
753
              className="external-link"
754
              rel="noopener noreferrer"
755
              aria-label="Learn more about right/left arrow key behavior (opens in a new window)"
756
            >
757
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" className="icon outbound">
758
                <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z" />
759
                <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9" />
760
              </svg>
761
            </a>
762
          </div>
763
          <div>
764
            <label className="option-label" htmlFor="enable-arrow-td-first-last-column" id="arrow-td-first-last-column-label">
765
              <input
766
                checked={autoWrapCol}
767
                type="checkbox"
768
                id="enable-arrow-td-first-last-column"
769
                name="enable-arrow-td-first-last-column"
770
                aria-labelledby="arrow-td-first-last-column-label"
771
                onChange={() => handleCheckboxChange('enable-arrow-td-first-last-column')}
772
              />
773
              The up/down arrow keys move the focus to the first/last row
774
            </label>
775
            <a
776
              href="https://handsontable.com/docs/react-data-grid/api/options/#autowraprow"
777
              target="_blank"
778
              className="external-link"
779
              rel="noopener noreferrer"
780
              aria-label="Learn more about up/down arrow key behavior (opens in a new window)"
781
            >
782
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" className="icon outbound">
783
                <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z" />
784
                <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9" />
785
              </svg>
786
            </a>
787
          </div>
788
          <div>
789
            <label className="option-label" htmlFor="enable-enter-focus-editing" id="enter-focus-editing-label">
790
              <input
791
                checked={enterMoves.row !== 0}
792
                type="checkbox"
793
                id="enable-enter-focus-editing"
794
                name="enable-enter-focus-editing"
795
                aria-labelledby="enter-focus-editing-label"
796
                onChange={() => handleCheckboxChange('enable-enter-focus-editing')}
797
              />
798
              The Enter key moves the focus after cell edition
799
            </label>
800
            <a
801
              href="https://handsontable.com/docs/react-data-grid/api/options/#entermoves"
802
              target="_blank"
803
              className="external-link"
804
              rel="noopener noreferrer"
805
              aria-label="Learn more about Enter key focus behavior (opens in a new window)"
806
            >
807
              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" className="icon outbound">
808
                <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z" />
809
                <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9" />
810
              </svg>
811
            </a>
812
          </div>
813
      </div>
814
    </>
815
  );
816
}
817

818
export default ExampleComponent;

1
.checkbox-container {
2
  display: flex;
3
  flex-direction: column;
4
  gap: 0.5rem;
5
  margin: 0 -1rem 0 !important;
6
  padding: 0 1rem 0.75rem;
7
  border-bottom: 1px solid var(--sl-color-gray-5);
8
}
9

10
.checkbox-container > div {
11
  display: flex;
12
}
13

14
.checkbox-container > div > label {
15
  display: flex;
16
  align-items: center;
17
  gap: 0.4rem;
18
}
19

20
.external-link {
21
  margin-left: 0.5rem;
22
  position: relative;
23
  top: 2px;
24
  color: var(--sl-color-text);
25
}
26

27
.external-link:hover {
28
  color: var(--sl-color-accent);
29
}
30

31
.placeholder-input {
32
  max-width: 20rem;
33
  padding: 0.4rem 0.625rem;
34
  font-size: var(--sl-text-sm);
35
  line-height: 1.25rem;
36
  color: var(--sl-color-text);
37
  background: none;
38
  border: 1px solid var(--sl-color-gray-5);
39
  border-radius: 0;
40
  outline: none;
41
}
42

43
.placeholder-input::placeholder {
44
  color: var(--sl-color-gray-3);
45
}
46

47
.placeholder-input:focus {
48
  border-color: var(--sl-color-accent);
49
}
50

51
.option-label {
52
  color: var(--sl-color-text);
53
  font-size: var(--sl-text-sm);
54
}
55

56
/*
57
  We want the focus to be around input and label, in order to achieve this,
58
  we remove focus from the input and add it to the label (wrapper in this case)
59
  we then use the :focus-within pseudo class plus native focus styles
60
  https://css-tricks.com/copy-the-browsers-native-focus-styles/
61
*/
62
.option-label:focus-within {
63
  outline: 5px auto Highlight;
64
  outline: 5px auto -webkit-focus-ring-color;
65
}
66

67
.option-label > input:focus {
68
  outline: none;
69
}
70

71
.example-container {
72
  gap: 1rem;
73
  display: flex;
74
  flex-direction: column;
75
}

Disabling DOM virtualization for improved accessibility

By default, Handsontable uses DOM virtualization to display only the rows and columns that are currently visible on the screen, plus a few extra cells outside the visible area to ensure a seamless scrolling experience.

However, assistive technologies rely on the elements within the DOM appearing in the correct order. Otherwise, they require the use of additional ARIA attributes, such as row-colindex or aria-rowindex, to understand the grid’s structure and accurately announce (read) it to the user.

We already use ARIA attributes to describe data sorting, hidden columns or rows, and merged cells. Unfortunately, our tests have discovered scenarios where screen readers either announce incorrect indices or omit the ARIA attributes altogether. To address this issue, we recommend disabling DOM virtualization, which entails loading all grid elements into the browser. This action creates a complete Accessibility tree that can be easily parsed and interpreted by assistive technology.

1
<HotTable
2
  // disable column virtualization
3
  renderAllColumns={true}
4
  // disable row virtualization
5
  renderAllRows={true}
6
/>

High-contrast theme

The recommended minimum contrast ratio for text against images or backgrounds is 4.5:1. To achieve this level of contrast with Handsontable’s default theme, you can:

Override the grid’s CSS with your own styles.
Use third-party software, such as the High Contrast extension for Chrome, supported by Google.

Requirements for developers

When you customize Handsontable, it’s you who’s responsible for ensuring the accessibility of your solution. Especially when you create a custom cell type or a custom plugin, remember to make them accessible to everyone.

Our recommendations for custom development:

Test your code against WCAG 2.1 requirements frequently.
Use proper color contrast, font size, and semantic HTML.
If needed, implement additional WAI-ARIA attributes.
Avoid flashing or blinking content.
Test your customizations with real users who have different types of disabilities. If you don’t have access to real users, try Funkify, a disability simulator, which can help you look at your application from the perspective of users with different disabilities.

Maintaining accessibility

We make sure our data grid remains accessible by taking the following measures:

We check Handsontable’s accessibility score with a range of accessibility testing tools.
We use automated visual regression testing.
We manually test all of Handsontable’s features with the most popular screen readers.
We use automated unit and end-to-end tests.

Known limitations

When frozen rows, frozen columns, or both, are enabled, some screen readers may incorrectly read the total number of rows and columns.
When you select a cell that’s part of a frozen row, frozen column, or both, NVDA and JAWS might incorrectly announce that cell’s column header name.
Dynamic ARIA attributes are sometimes omitted by screen readers.
The aria-rowcount attribute is intentionally set to -1, as most screen readers either ignore or misinterpret it. This configuration ensures accuracy with screen readers such as VoiceOver. We plan to revise this approach once screen readers consistently handle the aria-rowcount attribute correctly.

API reference

For the list of options, methods, and Handsontable hooks related to accessibility, see the following API reference pages:

Configuration options

viewportColumnRenderingOffset

viewportRowRenderingOffset

What's new in Handsontable 14: Improvements to accessibility

Troubleshooting

Didn’t find what you need? Try this:

View related topics

Report an issue

Start a discussion

Contact our technical support