Accessibility

Added in Handsontable 14.0.0

Handsontable supports keyboard navigation, screen readers, and ARIA roles. Use these steps to configure accessible behavior for your users.

Handsontable targets WCAG 2.2 Level A and AA. The accessibility conformance report states how far the grid conforms today, per success criterion.

Overview

Accessibility features of Handsontable include:

Keyboard navigation that lets you use the grid without a mouse.
Support for screen readers, tested with VoiceOver (macOS and iOS) and NVDA (Windows).
Flexible API to configure keyboard shortcuts and navigation methods.
A published accessibility conformance report, version 1.1 (March 2026), with the result per success criterion and the known gaps.

Standards built on WCAG

Most local standards and regulations build on the Web Content Accessibility Guidelines (WCAG). Handsontable targets WCAG 2.2 Level A and AA. The accessibility conformance report, version 1.1 (March 2026), states, for each success criterion, the conformance level or that it was not evaluated, and lists the known gaps. The standards that build on WCAG include:

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, letting you 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.

To control arrow-key wrapping at grid boundaries, use autoWrapRow and autoWrapCol. autoWrapRow wraps focus to the adjacent row when you move right or left past a row edge. autoWrapCol wraps focus to the adjacent column when you move up or down past a column edge.

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`+`↓`	`⇧`+`⌥`+`↓`	Open a column menu	Any cell
`Ctrl`+`Enter`	`⌘`+`Enter`	Open a column menu	Column header
`Enter`	`Enter`	Sort data	Column header
`Alt`+`A`	`⌥`+`A`	Clear filters	Any cell
`Ctrl`+`Space`	`⌃`+`Space`*	Select a column	Any cell
`Shift`+`Space`	`⇧`+`Space`	Select a row	Any cell
`Ctrl`+`Shift`+`\` `Shift`+`F10`	`⌘`+`⇧`+`\` `⇧`+`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.

For filter-menu-specific navigation details, including Tab traversal and hover behavior, see Column filter.

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.

Handsontable is tested with the screen readers below. The list is the tested matrix of the accessibility conformance report; it changes only when an audit or an automated run adds to it.

VoiceOver on macOS 15.3.2: external audit (Kinaole, December 2025 to January 2026).
VoiceOver on iOS 18.3: external audit (Kinaole, December 2025 to January 2026); manual check once per major release.
NVDA 2025.3 on Windows 11: external audit (Kinaole, December 2025 to January 2026).

Browsers in the last audit: Chrome 141 and Firefox 143.

VoiceOver on iOS was part of the last audit. Mobile screen readers are checked by hand once per major release.

Screen-reader checks are manual today. The automated nightly runs with NVDA and VoiceOver that are being set up join this list when they run.

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

507
      <input className="placeholder-input" type="text" placeholder="Focusable text input"/>
508

509
      {/* Handsontable component with dynamic options */}
510
      <HotTable
511
    // Handsontable needs to reload when changing virtualization
512
    // by changing the key, we force the component to reload
513
    key={String(toggleableOptions.renderAllRows)} {...hotOptions}
514
    // Pass in the options which can change for demo
515
    {...toggleableOptions}>
516
        {/* Define HotColumns for the data */}
517
        <HotColumn data="companyName" type="text"/>
518
        <HotColumn data="productName" type="text"/>
519
        <HotColumn data="sellDate" locale="en-GB" dateFormat={{ day: '2-digit', month: '2-digit', year: 'numeric' }} type="intl-date"/>
520
        <HotColumn data="inStock" type="checkbox" className="htCenter" headerClassName="htCenter"/>
521
        <HotColumn data="qty" type="numeric" headerClassName="htRight"/>
522
        <HotColumn data="orderId" type="text"/>
523
        <HotColumn data="country" type="dropdown" source={countries}/>
524
      </HotTable>
525
      <input className="placeholder-input" type="text" placeholder="Focusable text input"/>
526
    </div>);
527
};
528
// Demo Options allows you to change the Handsontable options
529
// This allows us to change the Handsontable settings from the UI, showcasing
530
// the flexibility of Handsontable in configuring according to your needs.
531
function DemoOptions({ tabNavigation, navigableHeaders, renderAllRows, renderAllColumns, enterBeginsEditing, autoWrapRow, autoWrapCol, enterMoves, changeToggleOptions, }) {
532
    // on checkbox change, update handsontable option
533
    const handleCheckboxChange = (checkboxName) => {
534
        switch (checkboxName) {
535
            case 'enable-tab-navigation':
536
                changeToggleOptions((existing) => ({
537
                    ...existing,
538
                    tabNavigation: !tabNavigation,
539
                }));
540
                break;
541
            case 'enable-header-navigation':
542
                changeToggleOptions((existing) => ({
543
                    ...existing,
544
                    navigableHeaders: !navigableHeaders,
545
                }));
546
                break;
547
            case 'enable-cell-virtualization':
548
                changeToggleOptions((existing) => ({
549
                    ...existing,
550
                    renderAllRows: !renderAllRows,
551
                    renderAllColumns: !renderAllColumns,
552
                }));
553
                break;
554
            case 'enable-cell-enter-editing':
555
                changeToggleOptions((existing) => ({
556
                    ...existing,
557
                    enterBeginsEditing: !enterBeginsEditing,
558
                }));
559
                break;
560
            case 'enable-arrow-rl-first-last-column':
561
                changeToggleOptions((existing) => ({
562
                    ...existing,
563
                    autoWrapRow: !autoWrapRow,
564
                }));
565
                break;
566
            case 'enable-arrow-td-first-last-column':
567
                changeToggleOptions((existing) => ({
568
                    ...existing,
569
                    autoWrapCol: !autoWrapCol,
570
                }));
571
                break;
572
            case 'enable-enter-focus-editing':
573
                changeToggleOptions((existing) => ({
574
                    ...existing,
575
                    enterMoves: enterMoves.row !== 1 ? { col: 0, row: 1 } : { col: 0, row: 0 },
576
                }));
577
                break;
578
            default:
579
                break;
580
        }
581
    };
582
    return (<>
583
      <div className="checkbox-container">
584
          <div>
585
            <label className="option-label" htmlFor="enable-tab-navigation" id="tab-navigation-label">
586
              <input checked={tabNavigation} type="checkbox" id="enable-tab-navigation" name="enable-tab-navigation" aria-label="Enable navigation with the Tab key" onChange={() => handleCheckboxChange('enable-tab-navigation')}/>
587
              Enable navigation with the Tab key
588
            </label>
589
            <a href="https://handsontable.com/docs/react-data-grid/api/options/#tabnavigation" target="_blank" className="external-link" rel="noopener noreferrer" aria-label="Learn more enabling/disabling tab navigation (opens in a new window)">
590
              <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">
591
                <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"/>
592
                <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"/>
593
              </svg>
594
            </a>
595
          </div>
596
          <div>
597
            <label className="option-label" htmlFor="enable-header-navigation" id="header-navigation-label">
598
              <input checked={navigableHeaders} type="checkbox" id="enable-header-navigation" name="enable-header-navigation" aria-labelledby="header-navigation-label" onChange={() => handleCheckboxChange('enable-header-navigation')}/>
599
              Enable navigation across headers
600
            </label>
601
            <a href="https://handsontable.com/docs/react-data-grid/api/options/#navigableheaders" target="_blank" className="external-link" rel="noopener noreferrer" aria-label="Learn more about enabling/disabling tab navigation across headers (opens in a new window)">
602
              <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">
603
                <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"/>
604
                <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"/>
605
              </svg>
606
            </a>
607
          </div>
608
          <div>
609
            <label className="option-label" htmlFor="enable-cell-virtualization" id="cell-virtualization-label">
610
              <input checked={!renderAllRows} type="checkbox" id="enable-cell-virtualization" name="enable-cell-virtualization" aria-labelledby="cell-virtualization-label" onChange={() => handleCheckboxChange('enable-cell-virtualization')}/>
611
              Enable cells virtualization
612
            </label>
613
            <a href="https://handsontable.com/docs/react-data-grid/api/options/#renderAllRows" target="_blank" className="external-link" rel="noopener noreferrer" aria-label="Learn more about row virtualization (opens in a new window)">
614
              <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">
615
                <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"/>
616
                <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"/>
617
              </svg>
618
            </a>
619
          </div>
620
          <div>
621
            <label className="option-label" htmlFor="enable-cell-enter-editing" id="cell-enter-editing-label">
622
              <input checked={enterBeginsEditing} type="checkbox" id="enable-cell-enter-editing" name="enable-cell-enter-editing" aria-labelledby="cell-enter-editing-label" onChange={() => handleCheckboxChange('enable-cell-enter-editing')}/>
623
              The Enter key begins cell editing
624
            </label>
625
            <a href="https://handsontable.com/docs/react-data-grid/api/options/#enterbeginsediting" target="_blank" className="external-link" rel="noopener noreferrer" aria-label="Learn more about Enter key cell editing (opens in a new window)">
626
              <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">
627
                <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"/>
628
                <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"/>
629
              </svg>
630
            </a>
631
          </div>
632
          <div>
633
            <label className="option-label" htmlFor="enable-arrow-rl-first-last-column" id="arrow-rl-first-last-column-label">
634
              <input checked={autoWrapRow} type="checkbox" id="enable-arrow-rl-first-last-column" name="enableArrowFirstLastColumn" aria-labelledby="arrow-rl-first-last-column-label" onChange={() => handleCheckboxChange('enable-arrow-rl-first-last-column')}/>
635
              The right/left arrow keys wrap focus to the adjacent row
636
            </label>
637
            <a href="https://handsontable.com/docs/react-data-grid/api/options/#autowraprow" target="_blank" className="external-link" rel="noopener noreferrer" aria-label="Learn more about right/left arrow key behavior (opens in a new window)">
638
              <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">
639
                <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"/>
640
                <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"/>
641
              </svg>
642
            </a>
643
          </div>
644
          <div>
645
            <label className="option-label" htmlFor="enable-arrow-td-first-last-column" id="arrow-td-first-last-column-label">
646
              <input checked={autoWrapCol} type="checkbox" id="enable-arrow-td-first-last-column" name="enable-arrow-td-first-last-column" aria-labelledby="arrow-td-first-last-column-label" onChange={() => handleCheckboxChange('enable-arrow-td-first-last-column')}/>
647
              The up/down arrow keys wrap focus to the adjacent column
648
            </label>
649
            <a href="https://handsontable.com/docs/react-data-grid/api/options/#autowrapcol" target="_blank" className="external-link" rel="noopener noreferrer" aria-label="Learn more about up/down arrow key behavior (opens in a new window)">
650
              <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">
651
                <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"/>
652
                <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"/>
653
              </svg>
654
            </a>
655
          </div>
656
          <div>
657
            <label className="option-label" htmlFor="enable-enter-focus-editing" id="enter-focus-editing-label">
658
              <input checked={enterMoves.row !== 0} type="checkbox" id="enable-enter-focus-editing" name="enable-enter-focus-editing" aria-labelledby="enter-focus-editing-label" onChange={() => handleCheckboxChange('enable-enter-focus-editing')}/>
659
              The Enter key moves the focus after cell edition
660
            </label>
661
            <a href="https://handsontable.com/docs/react-data-grid/api/options/#entermoves" target="_blank" className="external-link" rel="noopener noreferrer" aria-label="Learn more about Enter key focus behavior (opens in a new window)">
662
              <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">
663
                <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"/>
664
                <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"/>
665
              </svg>
666
            </a>
667
          </div>
668
      </div>
669
    </>);
670
}
671
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 wrap focus to the adjacent row
749
            </label>
750
            <a
751
              href="https://handsontable.com/docs/react-data-grid/api/options/#autowraprow"
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 wrap focus to the adjacent column
774
            </label>
775
            <a
776
              href="https://handsontable.com/docs/react-data-grid/api/options/#autowrapcol"
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, #e0e0e0);
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, #333333);
25
}
26

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

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

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

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

51
.option-label {
52
  color: var(--sl-color-text, #333333);
53
  font-size: var(--sl-text-sm, 0.875rem);
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
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
76
}

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.

Handsontable describes hidden columns or rows, merged cells, and the sort order of a column (aria-sort) with ARIA attributes. Screen readers do not always read them: a change of the sort order is not announced, and in some scenarios a screen reader announces incorrect indices or omits the attributes. See Known limitations. 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 the WCAG 2.2 Level A and AA success criteria 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

Handsontable keeps the grid accessible with the following measures:

An automated axe-core scan with the WCAG 2.2 Level A and AA rule tags runs in CI on every change to the grid, on the three built-in themes, and reports every new finding.
Keyboard-only end-to-end tests cover the keyboard path of the grid’s controls, and every change to a control adds one that also checks its accessible name.
The accessibility conformance report states the result per success criterion. Version 1.2 of this report is in preparation: every Level A and AA criterion judged, the evaluated product version stated, and the international edition of the VPAT template.
Screen-reader testing with the matrix listed under Support for screen readers.

Known limitations

The accessibility conformance report lists the ones that carry a reference and a success criterion; the rest come from Handsontable’s own testing.

Sorting state changes are not announced to screen readers (WCAG 4.1.3; ref. #2375 in the report).
A range selection is not announced; only the focused cell is (WCAG 4.1.2, 4.1.3; ref. #2343 in the report).
Nested column headers are not announced reliably (WCAG 4.1.2; ref. #2373 in the report).
There is no option to give the grid an accessible description (WCAG 1.3.1; ref. #3044 in the report).
A cell that shows a formula result is not distinguished from a typed value (WCAG 4.1.2, 4.1.3; ref. #3046 in the report).
The position of an empty cell is not announced (WCAG 4.1.3; ref. #2441 in the report).
The audited version’s date picker (Pikaday) was not announced properly. Since 18.0.0 the built-in date cell type uses the browser’s native date input, which the audit did not cover; a custom Pikaday editor keeps the gap (WCAG 4.1.2).
The loading icon (an SVG) is not hidden from screen readers (WCAG 1.1.1).
The dialog’s default accessible name is the word “Dialog”; pass a11y.ariaLabel in the dialog settings to name it after its content (WCAG 4.1.2).
Menu separators are exposed as interactive menu items (WCAG 1.3.1, 4.1.2).
The checkboxes in the filter menu are labeled “Checked” or “Unchecked” instead of with the value they stand for (WCAG 1.3.1, 4.1.2).
The summary row and some icons of the Horizon theme fail the contrast ratio (WCAG 1.4.3, 1.4.11).
With frozen rows, frozen columns, or both, some screen readers read the total number of rows and columns incorrectly.
When you select a cell in a frozen row or column, NVDA might announce the wrong column header name.
Screen readers sometimes omit ARIA attributes that change dynamically.
The aria-rowcount attribute is set to -1 on purpose, because most screen readers ignore or misread it; this keeps VoiceOver accurate. Handsontable revisits this when screen readers handle the attribute consistently.

Result

Your grid now supports keyboard navigation and carries ARIA attributes on its interactive elements. Screen readers announce the focused cell and the menus; the sort order and a range selection are not announced yet (see Known limitations).

API reference

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

Configuration options

viewportColumnRenderingOffset

viewportRowRenderingOffset

Handsontable 15.3.0: CSV sanitization, accessibility updates, and 30+ fixes

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

Microsoft and Excel are registered trademarks of Microsoft Corporation. Google Sheets is a trademark of Google LLC.