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-contiguous 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 ranges of non-contiguous 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
To retrieve the selected cells as an array of arrays, you should use the
# 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-contiguous 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.