Prevent Handsontable cells from being selected on column header click - handsontable

Question

In a Handsontable, when a column header is clicked, all cells of that column are selected. Is the a way to prevent this from happening ?
I don't think there's such an option in the documentation. I didn't find where the events are registered on the DOM within the source code of the Handsontable library itself either.
Any hint would be appreciated. Thanks.

Answer 1

It is possible to stop the event from propagating using the beforeOnCellMouseDown hook, which prevents the cells of the header column that was clicked to be selected:
/**
* #param {MouseEvent} event
* #param {WalkontableCellCoords} coords
* #param {Element} element
*/
var handleHotBeforeOnCellMouseDown = function(event, coords, element) {
if (coords.row < 0) {
event.stopImmediatePropagation();
}
};
Handsontable.hooks.add('beforeOnCellMouseDown',
handleHotBeforeOnCellMouseDown, handsontable);
A very special thanks to Gustavo for his help!

Answer 2

I don't think it's possible to prevent that behavior. I haven't found any clue neither in the documentation nor quickly inspecting the source code.
However, you could deselect the selected cells right after they have been selected. Binding a function to handle the cell click event would do the trick. You could do that either by registering the callback when instantiating your handsontable:
$('#my_handsontable').handsontable({
...
afterOnCellMouseDown: function(event, coords){
// 'coords.row < 0' because we only want to handle clicks on the header row
if (coords.row < 0){
$('#my_handsontable').handsontable('deselectCell');
}
},
...
});
Or by means of a hook:
Handsontable.hooks.add('afterOnCellMouseDown', function(event, coords){
if (coords.row < 0){
$('#my_handsontable').handsontable('deselectCell');
}
});
Alternatively, you could edit handsontable source code and comment the piece of code in walkontableConfig that does select the whole column when a header cell is clicked:
var walkontableConfig = {
...
onCellMouseDown: function (event, coords, TD, wt) {
...
// if (coords.row < 0) {
// instance.selectCell(0, coords.col, instance.countRows() - 1, coords.col);
// instance.selection.setSelectedHeaders(false, true);
// }
...
},
...
};

Answer 3

Yes, There is an trick or we can say option to prevent selecting cell on header click. "Just set selectionMode to single single."
Try below code:
document.addEventListener("DOMContentLoaded", function() {
var example1 = document.getElementById('example1');
var selectOption = document.getElementById('selectOption');
var settings1 = {
data: Handsontable.helper.createSpreadsheetData(10, 10),
width: 700,
height: 272,
colWidths: 75,
rowHeights: 20,
rowHeaders: true,
colHeaders: true,
selectionMode: 'single', // 'single', 'range' or 'multiple',
};
var hot1 = new Handsontable(example1, settings1);
});