Selection

Select a single cell, a range of adjacent cells, or multiple non-adjacent ranges of cells.

Use the selection API to control how users select cells — single cells, ranges, columns, or rows — and to read or set selections programmatically.

Overview

Selection enables you to select a single cell or ranges of cells within Handsontable. Once selected, you can retrieve data from the cell, edit the cell’s contents, or change the style of the cell.

Basic configuration

With this feature, you can select single cells or ranges of cells across a grid. Easily retrieve the coordinates of the selected cells to clear or change the cells’ content.

Use ⌘ on Mac or Ctrl on Windows to select non-adjacent ranges of cells.

Click a column header to select all cells in that column. Click a row header to select all cells in that row. Both require colHeaders or rowHeaders to be enabled.

Select ranges

There are different modes in which you can use this plugin. Choose between selecting a single cell, a range of adjacent cells, and multiple ranges of non-contiguous cells.

Possible values of selectionMode:

single - You can select a single cell.
range - You can select multiple cells within a single rangeselected.
multiple - Multiple non-contiguous ranges of cells can be selected.

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

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example1');
8
const hot = new Handsontable(container, {
9
  data: [
10
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
11
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],
12
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],
13
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],
14
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],
15
    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],
16
    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],
17
    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],
18
    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],
19
  ],
20
  width: 'auto',
21
  height: 'auto',
22
  colWidths: 100,
23
  rowHeaders: true,
24
  colHeaders: true,
25
  selectionMode: 'multiple',
26
  autoWrapRow: true,
27
  autoWrapCol: true,
28
  licenseKey: 'non-commercial-and-evaluation',
29
});
30

31
const dropdown = document.querySelector('#selectionDropdown');
32
const trigger = document.querySelector('#selectionTrigger');
33
const menu = document.querySelector('#selectionMenu');
34
const label = document.querySelector('#selectionLabel');
35

36
trigger.addEventListener('click', () => {
37
  const isOpen = !menu.hidden;
38

39
  menu.hidden = isOpen;
40
  trigger.setAttribute('aria-expanded', String(!isOpen));
41
});
42

43
menu.addEventListener('click', (e) => {
44
  const item = e.target.closest('li[data-value]');
45

46
  if (item) {
47
    label.textContent = item.textContent.trim();
48
    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));
49
    item.setAttribute('aria-selected', 'true');
50
    menu.hidden = true;
51
    trigger.setAttribute('aria-expanded', 'false');
52
    hot.updateSettings({ selectionMode: item.dataset.value });
53
  }
54
});
55

56
document.addEventListener('click', (e) => {
57
  if (!dropdown.contains(e.target)) {
58
    menu.hidden = true;
59
    trigger.setAttribute('aria-expanded', 'false');
60
  }
61
});
62

63
document.addEventListener('keydown', (e) => {
64
  if (e.key === 'Escape' && !menu.hidden) {
65
    menu.hidden = true;
66
    trigger.setAttribute('aria-expanded', 'false');
67
    trigger.focus();
68
  }
69
});

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

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example1')!;
8

9
const hot = new Handsontable(container, {
10
  data: [
11
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
12
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],
13
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],
14
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],
15
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],
16
    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],
17
    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],
18
    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],
19
    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],
20
  ],
21
  width: 'auto',
22
  height: 'auto',
23
  colWidths: 100,
24
  rowHeaders: true,
25
  colHeaders: true,
26
  selectionMode: 'multiple', // 'single', 'range' or 'multiple',
27
  autoWrapRow: true,
28
  autoWrapCol: true,
29
  licenseKey: 'non-commercial-and-evaluation',
30
});
31

32
const dropdown = document.querySelector('#selectionDropdown')!;
33
const trigger = document.querySelector('#selectionTrigger')! as HTMLButtonElement;
34
const menu = document.querySelector('#selectionMenu')! as HTMLUListElement;
35
const label = document.querySelector('#selectionLabel')!;
36

37
trigger.addEventListener('click', () => {
38
  const isOpen = !menu.hidden;
39

40
  menu.hidden = isOpen;
41
  trigger.setAttribute('aria-expanded', String(!isOpen));
42
});
43

44
menu.addEventListener('click', (e: MouseEvent) => {
45
  const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLLIElement | null;
46

47
  if (item) {
48
    label.textContent = item.textContent!.trim();
49
    menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));
50
    item.setAttribute('aria-selected', 'true');
51
    menu.hidden = true;
52
    trigger.setAttribute('aria-expanded', 'false');
53
    hot.updateSettings({ selectionMode: item.dataset.value } as Handsontable.GridSettings);
54
  }
55
});
56

57
document.addEventListener('click', (e: MouseEvent) => {
58
  if (!dropdown.contains(e.target as Node)) {
59
    menu.hidden = true;
60
    trigger.setAttribute('aria-expanded', 'false');
61
  }
62
});
63

64
document.addEventListener('keydown', (e: KeyboardEvent) => {
65
  if (e.key === 'Escape' && !menu.hidden) {
66
    menu.hidden = true;
67
    trigger.setAttribute('aria-expanded', 'false');
68
    trigger.focus();
69
  }
70
});

1
<div class="example-controls-container">
2
  <div class="controls">
3
    <div class="theme-dropdown" id="selectionDropdown">
4
      <button class="theme-dropdown-trigger" id="selectionTrigger" type="button" aria-haspopup="listbox" aria-expanded="false">
5
        <span id="selectionLabel">Multiple ranges selection</span>
6
        <svg class="theme-dropdown-chevron" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6l6 -6"/></svg>
7
      </button>
8
      <ul class="theme-dropdown-menu" id="selectionMenu" role="listbox" hidden>
9
        <li role="option" data-value="single">Single selection</li>
10
        <li role="option" data-value="range">Range selection</li>
11
        <li role="option" data-value="multiple" aria-selected="true">Multiple ranges selection</li>
12
      </ul>
13
    </div>
14
  </div>
15
</div>
16
<div id="example1"></div>

1
#example1 {
2
  z-index: 1;
3
  position: relative;
4
}

Get data from the selected ranges

To retrieve the selected cells as an array of arrays, you use the getSelected() or getSelectedRange() methods.

Here you will see the log

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

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example2');
8
const hot = new Handsontable(container, {
9
  data: [
10
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
11
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],
12
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],
13
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],
14
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],
15
    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],
16
    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],
17
    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],
18
    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],
19
  ],
20
  width: 'auto',
21
  height: 'auto',
22
  colWidths: 100,
23
  rowHeaders: true,
24
  colHeaders: true,
25
  outsideClickDeselects: false,
26
  selectionMode: 'multiple',
27
  autoWrapRow: true,
28
  autoWrapCol: true,
29
  licenseKey: 'non-commercial-and-evaluation',
30
});
31

32
const getButton = document.querySelector('#getButton');
33
const output = document.querySelector('#output');
34

35
getButton.addEventListener('click', () => {
36
  const selected = hot.getSelected() || [];
37
  let data = [];
38

39
  if (selected.length === 1) {
40
    data = hot.getData(...selected[0]);
41
  } else {
42
    for (let i = 0; i < selected.length; i += 1) {
43
      data.push(hot.getData(...selected[i]));
44
    }
45
  }
46

47
  output.innerText = JSON.stringify(data);
48
});

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

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example2')!;
8

9
const hot = new Handsontable(container, {
10
  data: [
11
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
12
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],
13
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],
14
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],
15
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],
16
    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],
17
    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],
18
    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],
19
    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],
20
  ],
21
  width: 'auto',
22
  height: 'auto',
23
  colWidths: 100,
24
  rowHeaders: true,
25
  colHeaders: true,
26
  outsideClickDeselects: false,
27
  selectionMode: 'multiple', // 'single', 'range' or 'multiple',
28
  autoWrapRow: true,
29
  autoWrapCol: true,
30
  licenseKey: 'non-commercial-and-evaluation',
31
});
32

33
const getButton = document.querySelector('#getButton')!;
34
const output = document.querySelector('#output')!;
35

36
getButton.addEventListener('click', () => {
37
  const selected = hot.getSelected() || [];
38
  let data: Handsontable.CellValue[] = [];
39

40
  if (selected.length === 1) {
41
    data = hot.getData(...selected[0]!);
42
  } else {
43
    for (let i = 0; i < selected.length; i += 1) {
44
      data.push(hot.getData(...selected[i]!));
45
    }
46
  }
47

48
  (output as HTMLElement).innerText = JSON.stringify(data);
49
});

1
<div class="example-controls-container">
2
  <div class="controls">
3
    <button id="getButton">Get data</button>
4
  </div>
5
  <output class="console" id="output">Here you will see the log</output>
6
</div>
7
<div id="example2"></div>

Modify the selected cells

You may want to delete, format, or otherwise change the selected cells. For example, you can change a value or add CSS classes to the selected cells using the demo below.

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

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example3');
8
const hot = new Handsontable(container, {
9
  data: [
10
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
11
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],
12
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],
13
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],
14
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],
15
    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],
16
    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],
17
    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],
18
    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],
19
  ],
20
  width: 'auto',
21
  height: 'auto',
22
  colWidths: 100,
23
  rowHeaders: true,
24
  colHeaders: true,
25
  outsideClickDeselects: false,
26
  selectionMode: 'multiple',
27
  autoWrapRow: true,
28
  autoWrapCol: true,
29
  licenseKey: 'non-commercial-and-evaluation',
30
});
31

32
const button = document.querySelector('#set-data-action');
33

34
button.addEventListener('click', () => {
35
  const selected = hot.getSelected() || [];
36

37
  hot.suspendRender();
38

39
  for (let index = 0; index < selected.length; index += 1) {
40
    const [row1, column1, row2, column2] = selected[index];
41
    const startRow = Math.max(Math.min(row1, row2), 0);
42
    const endRow = Math.max(row1, row2);
43
    const startCol = Math.max(Math.min(column1, column2), 0);
44
    const endCol = Math.max(column1, column2);
45

46
    for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {
47
      for (let columnIndex = startCol; columnIndex <= endCol; columnIndex += 1) {
48
        hot.setDataAtCell(rowIndex, columnIndex, 'data changed');
49
        hot.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');
50
      }
51
    }
52
  }
53

54
  hot.render();
55
  hot.resumeRender();
56
});

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

4
// Register all Handsontable's modules.
5
registerAllModules();
6

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

9
const hot = new Handsontable(container, {
10
  data: [
11
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
12
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],
13
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],
14
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],
15
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],
16
    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],
17
    ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],
18
    ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],
19
    ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],
20
  ],
21
  width: 'auto',
22
  height: 'auto',
23
  colWidths: 100,
24
  rowHeaders: true,
25
  colHeaders: true,
26
  outsideClickDeselects: false,
27
  selectionMode: 'multiple', // 'single', 'range' or 'multiple',
28
  autoWrapRow: true,
29
  autoWrapCol: true,
30
  licenseKey: 'non-commercial-and-evaluation',
31
});
32

33
const button = document.querySelector('#set-data-action')!;
34

35
button.addEventListener('click', () => {
36
  const selected = hot.getSelected() || [];
37

38
  hot.suspendRender();
39

40
  for (let index = 0; index < selected.length; index += 1) {
41
    const [row1, column1, row2, column2] = selected[index]!;
42
    const startRow = Math.max(Math.min(row1, row2), 0);
43
    const endRow = Math.max(row1, row2);
44
    const startCol = Math.max(Math.min(column1, column2), 0);
45
    const endCol = Math.max(column1, column2);
46

47
    for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {
48
      for (let columnIndex = startCol; columnIndex <= endCol; columnIndex += 1) {
49
        hot.setDataAtCell(rowIndex, columnIndex, 'data changed');
50
        hot.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');
51
      }
52
    }
53
  }
54

55
  hot.render();
56
  hot.resumeRender();
57
});

1
<div class="example-controls-container">
2
  <div class="controls">
3
    <button id="set-data-action">Click to modify the selected cells</button>
4
  </div>
5
</div>
6
<div id="example3"></div>

1
.c-red {
2
  color: red;
3
}

Style the selection area

You can change the background color of selected cells using CSS. The base selection color is defined in the .area class.

When using multiple non-adjacent selections (Cmd/Ctrl + click), each additional selection layer receives a numbered class: area-1 for the second layer, area-2 for the third, and so on. Each class is cumulative — a cell in the second layer has both area and area-1.

The example below customizes the color of each selection layer using these CSS classes.

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

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example4');
8

9
new Handsontable(container, {
10
  data: [
11
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
12
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],
13
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],
14
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],
15
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],
16
    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],
17
  ],
18
  width: 'auto',
19
  height: 'auto',
20
  colWidths: 100,
21
  rowHeaders: true,
22
  colHeaders: true,
23
  outsideClickDeselects: false,
24
  selectionMode: 'multiple',
25
  autoWrapRow: true,
26
  autoWrapCol: true,
27
  licenseKey: 'non-commercial-and-evaluation',
28
});

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

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example4')!;
8

9
new Handsontable(container, {
10
  data: [
11
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
12
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],
13
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],
14
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],
15
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],
16
    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],
17
  ],
18
  width: 'auto',
19
  height: 'auto',
20
  colWidths: 100,
21
  rowHeaders: true,
22
  colHeaders: true,
23
  outsideClickDeselects: false,
24
  selectionMode: 'multiple',
25
  autoWrapRow: true,
26
  autoWrapCol: true,
27
  licenseKey: 'non-commercial-and-evaluation',
28
});

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

1
/* First selection layer — applied to every selected cell */
2
#example4 td.area {
3
  background-color: rgba(75, 137, 255, 0.2);
4
}
5

6
/* Second non-adjacent selection layer (Ctrl/Cmd + click) */
7
#example4 td.area.area-1 {
8
  background-color: rgba(75, 137, 255, 0.4);
9
}
10

11
/* Third non-adjacent selection layer */
12
#example4 td.area.area-2 {
13
  background-color: rgba(75, 137, 255, 0.6);
14
}

Unfortunately, there is no easy way to change the border color of the selection.

Select cells programmatically

Use selectCell() to select a single cell or a range of cells from code. Pass the start and end row/column indices to define a range. Use deselectCell() to clear the selection.

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

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example5');
8
const hot = new Handsontable(container, {
9
  data: [
10
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],
11
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],
12
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],
13
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],
14
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],
15
    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6'],
16
  ],
17
  width: 'auto',
18
  height: 'auto',
19
  colWidths: 100,
20
  rowHeaders: true,
21
  colHeaders: true,
22
  outsideClickDeselects: false,
23
  autoWrapRow: true,
24
  autoWrapCol: true,
25
  licenseKey: 'non-commercial-and-evaluation',
26
});
27

28
document.querySelector('#select-cell').addEventListener('click', () => {
29
  // Select a single cell: row 1, col 1 (B2)
30
  hot.selectCell(1, 1);
31
});
32
document.querySelector('#select-range').addEventListener('click', () => {
33
  // Select a range: row 1, col 1 to row 3, col 3 (B2:D4)
34
  hot.selectCell(1, 1, 3, 3);
35
});
36
document.querySelector('#deselect').addEventListener('click', () => {
37
  hot.deselectCell();
38
});

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

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example5')!;
8
const hot = new Handsontable(container, {
9
  data: [
10
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],
11
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],
12
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],
13
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],
14
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],
15
    ['A6', 'B6', 'C6', 'D6', 'E6', 'F6'],
16
  ],
17
  width: 'auto',
18
  height: 'auto',
19
  colWidths: 100,
20
  rowHeaders: true,
21
  colHeaders: true,
22
  outsideClickDeselects: false,
23
  autoWrapRow: true,
24
  autoWrapCol: true,
25
  licenseKey: 'non-commercial-and-evaluation',
26
});
27

28
document.querySelector('#select-cell')!.addEventListener('click', () => {
29
  // Select a single cell: row 1, col 1 (B2)
30
  hot.selectCell(1, 1);
31
});
32

33
document.querySelector('#select-range')!.addEventListener('click', () => {
34
  // Select a range: row 1, col 1 to row 3, col 3 (B2:D4)
35
  hot.selectCell(1, 1, 3, 3);
36
});
37

38
document.querySelector('#deselect')!.addEventListener('click', () => {
39
  hot.deselectCell();
40
});

1
<div class="example-controls-container">
2
  <div class="controls">
3
    <button id="select-cell">Select cell B2</button>
4
    <button id="select-range">Select range B2:D4</button>
5
    <button id="deselect">Deselect</button>
6
  </div>
7
</div>
8
<div id="example5"></div>

Jump across the grid’s edges

When you use keyboard navigation to cross an edge of the grid, you can set cell selection to jump to the opposite edge.

Jump across vertical edges

To enable jumping across the left and right edges:

Set the autoWrapRow configuration option to true.

To jump across a vertical edge:

When cell selection is on a row’s first cell, press ←.
When cell selection is on a row’s last cell, press →, or press Tab.

Jump across horizontal edges

To enable jumping across the top and bottom edges:

Set the autoWrapCol configuration option to true.

To jump across a horizontal edge:

When cell selection is on a column’s first cell, press ↑.
When cell selection is on a column’s last cell, press ↓, or press Enter.

Windows	macOS	Action	Excel	Sheets
`Ctrl`+`A`	`⌘`+`A`	Select all cells	✓	✓
`Ctrl`+`Shift`+`Space`	`⌘`+`⇧`+`Space`	Select all cells and headers	✓	✓
`Ctrl`+`Space`	`⌃`+`Space`	Select the entire column	✓	✓
`Shift`+`Space`	`⇧`+`Space`	Select the entire row	✓	✓
`Ctrl`+`Shift`+`↑`	`⌘`+`⇧`+`↑`	Extend the selection to the first cell of the current column^**	✓	✓
`Ctrl`+`Shift`+`↓`	`⌘`+`⇧`+`↓`	Extend the selection to the last cell of the current column^**	✓	✓
`Ctrl`+`Shift`+`←`	`⌘`+`⇧`+`←`	Extend the selection to the leftmost cell of the current row^**	✓	✓
`Ctrl`+`Shift`+`→`	`⌘`+`⇧`+`→`	Extend the selection to the rightmost cell of the current row^**	✓	✓
`Shift` + Arrow keys	`⇧` + Arrow keys	Extend the selection by one cell	✓	✓
`Shift`+`Home`	`⇧`+`Home`	Extend the selection to the first non-frozen cell of the current row^*	✓	✗
`Shift`+`End`	`⇧`+`End`	Extend the selection to the last non-frozen cell of the current row^*	✗	✗
`Shift`+`Page Up`	`⇧`+`Page Up`	Extend the selection by one screen up	✓	✓
`Shift`+`Page Down`	`⇧`+`Page Down`	Extend the selection by one screen down	✓	✓
`Ctrl`+`Enter`	`⌘`+`Enter`	Fill the selected range of cells with the value of the active cell	✗	✓
`Delete`	`Delete`	Clear the contents of the selected cells	✓	✓
`Backspace`	`Backspace`	Clear the contents of the selected cells	✓	✓

^* This action depends on your layout direction.
^** In case of multiple selection layers, only the last selection layer gets extended.

Configuration options

autoWrapCol

autoWrapRow

fragmentSelection

disableVisualSelection

dragToScroll

selectionMode

outsideClickDeselects

Core methods

getSelectedRangeLast()

Hooks

afterModifyTransformEnd

afterModifyTransformStart

afterSelection

afterSelectionByProp

afterSelectionEnd

afterSelectionEndByProp

modifyTransformStart

Plugins

DragToScroll

Result

Users can select cells using the configured mode — single cell, range, or multiple ranges. Programmatic selections take effect immediately and fire the relevant selection hooks.