Hello guys.
I am trying to implement a functionality which seemed quite trivial to me at the first glance, however, after trying to implement it, i’ve faced with some obstacles which i am not able to solve after reading multiple issues at github and the docs.
Story: when i hover over a table cell, i want to add a classname to all of the column’s rows i am hovering over. It was quite simple to implement with the normal cells (using afterOnCellMouseOver, afterOnCellMouseOut hooks), however, directly applying a class to a column header is not working (it seems to me that the hnTable is erasing all the styles/classes on the headers after the initial render of the table since after logging the TD immediately after i add a class to it, i can see the classname in the console).
So…Is there a direct way to apply a class/style to a specific col header given that i have the row-col coordinates?
Here is the code for applying class name to cells of a particular col on hower…the same approach not working to the header…
const afterOnCellMouseOver: Handsontable.GridSettings["afterOnCellMouseOver"] = (...args) => {
const localHotInstance = hotInstance;
if (!localHotInstance) return;
const { col } = args[1];
const rowCount = localHotInstance.countRows();
for (let row = 0; row < rowCount; row++) {
const cell = localHotInstance.getCell(row, col);
if (!cell) continue;
cell.classList.add(HN_TABLE_HOVERED_CELL_CLASS_NAME);
}
if (settings.value.afterOnCellMouseOver) {
settings.value.afterOnCellMouseOver(...args);
}
};
const afterOnCellMouseOut: Handsontable.GridSettings["afterOnCellMouseOut"] = (...args) => {
const localHotInstance = hotInstance;
if (!localHotInstance) return;
const { col } = args[1];
const rowCount = localHotInstance.countRows();
for (let row = 0; row < rowCount; row++) {
const cell = localHotInstance.getCell(row, col);
if (!cell) continue;
cell.classList.remove(HN_TABLE_HOVERED_CELL_CLASS_NAME);
}
if (settings.value.afterOnCellMouseOut) {
settings.value.afterOnCellMouseOut(...args);
}
};
Appreciate the help!