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.
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.
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.
const container = document.querySelector('#example1');const selectOption = document.querySelector('#selectOption');const hot =newHandsontable(container,{data: Handsontable.helper.createSpreadsheetData(10,10),width:'auto',height:'auto',colWidths:100,rowHeights:23,rowHeaders:true,colHeaders:true,selectionMode:'multiple',// 'single', 'range' or 'multiple',licenseKey:'non-commercial-and-evaluation'});
selectOption.addEventListener('change',event=>{const value = event.target.value;const first = value.split(' ')[0].toLowerCase();
hot.updateSettings({selectionMode: first
});});
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.
By default, the cell selection "jumps" to the other end of the row or column during navigating across the grid using the arrow keys.
Select any cell in the first row and press ARROW UP to jump to the last cell in the current column. The same thing happens when you are in first column and press ARROW LEFT - the selection jumps to the last column.
This behavior can be disabled by setting autoWrapCol: false and autoWrapRow: false.