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 Cmd on Mac or Ctrl on Windows to select non-adjacent ranges of cells.
# Selecting 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 non-adjacent ranges of cells.
Possible values of
single- A single cell can be selected.
range- Multiple cells within a single range can be selected.
multiple- Multiple non-contiguous ranges of cells can be selected.
# Getting data from the selected ranges
# Modifying 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.
# Styling the selection area
The background color can be easily changed using CSS styles. The main, light blue background color is defined in the
For non-adjacent selection, multiple classes are making each level a bit darker. These classes are called
Unfortunately, there is no easy way to change the border color of the selection.
# Jumping across the grid's edges
When you use keyboard navigation, and you cross an edge of the grid, you can set cell selection to jump to the opposite edge.
# Jumping across vertical edges
To enable jumping across the left and right edges:
- Set the
autoWrapRowconfiguration option to
To jump across a vertical edge:
- When cell selection is on a row's first cell, press the left arrow key.
- When cell selection is on a row's last cell, press the right arrow key, or press TAB.
# Jumping across horizontal edges
To enable jumping across the top and bottom edges:
- Set the
autoWrapColconfiguration option to
To jump across a horizontal edge:
- When cell selection is on a column's first cell, press the up arrow key.
- When cell selection is on a column's last cell, press the down arrow key, or press ENTER.
# Related keyboard shortcuts
|Ctrl + A||Cmd + A||Select all cells and headers||✓||✓|
|Ctrl + Shift + ↑||Cmd + Shift + ↑||Extend the selection to the first cell of the current column**||✓||✓|
|Ctrl + Shift + ↓||Cmd + Shift + ↓||Extend the selection to the last cell of the current column**||✓||✓|
|Ctrl + Shift + ←||Cmd + Shift + ←||Extend the selection to the leftmost cell of the current row**||✓||✓|
|Ctrl + Shift + →||Cmd + Shift + →||Extend the selection to the rightmost cell of the current row**||✓||✓|
|Shift + Arrow keys||Shift + Arrow keys||Extend the selection by one cell||✓||✓|
|Shift + Home||Shift + Home||Extend the selection to the first non-frozen cell of the current row*||✓||✗|
|Shift + End||Shift + End||Extend the selection to the last non-frozen cell of the current row*||✗||✗|
|Shift + Page Up||Shift + Page Up||Extend the selection by one screen up||✓||✓|
|Shift + Page Down||Shift + Page Down||Extend the selection by one screen down||✓||✓|
|Ctrl + Enter||Cmd + 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.
# Related API reference
- Configuration options:
- Core methods: