Tutorial: Selecting ranges

Selecting ranges

Basic configuration

With this feature, you can select single cells or ranges of cells across a spreadsheet. The coordinates of the selected cells can be easily retrieved to clear or change the cells' content.

This functionality is a part of Handsontable Core.

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 selectionMode:

  • 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 getSelected() or getSelectedRange() methods.

Modifying the selected cells

You may want to delete, format or otherwise change the selected cells. For instance, you can change value or add CSS classes to the all 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 .area class.

For non-contiguous selection, there are multiple classes making each level a bit darker. These classes are called area-1, area-2 etc.

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

Help us improve this page