JavaScript Data Grid Selection

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

      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 .area class.

        For non-adjacent selection, multiple classes are 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 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:

        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:

        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.
        Windows macOS Action Excel Sheets
        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.