I cannot find a suitable example, of editing a selection of cells after a user has inputted a value into the first cell of the selection.
Basically all I want is that user selects some cells > begins typing a value > presses enter > all selected cells update to the new value - Undo/Redo Plugin support as well
This code that I adapted from the react demo in the documentation does work, but its really slow on performance.
let pendingChanges = {};
hotInstance2.addHook('beforeKeyDown', (event) => {
// Check if the key that was pressed is the Enter key
if (event.keyCode === 13) {
const selected = hotInstance2.getSelected() || [];
const value = event.target.value;
for (let index = 0; index < selected.length; index += 1) {
const [row1, column1, row2, column2] = selected[index];
const startRow = Math.max(Math.min(row1, row2), 0);
const endRow = Math.max(row1, row2);
const startCol = Math.max(Math.min(column1, column2), 0);
const endCol = Math.max(column1, column2);
for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {
for (let columnIndex = startCol; columnIndex <= endCol; columnIndex += 1) {
if (!pendingChanges[rowIndex]) {
pendingChanges[rowIndex] = {};
}
pendingChanges[rowIndex][columnIndex] = value;
}
}
}
}
});
hotInstance2.addHook('afterChange', (changes, source) => {
if (source === 'edit') {
const changesToApply = [];
for (const row in pendingChanges) {
for (const column in pendingChanges[row]) {
changesToApply.push([row, column, pendingChanges[row][column]]);
}
}
hotInstance2.batchUpdate(() => {
hotInstance2.setDataAtCell(changesToApply);
});
pendingChanges = {};
}
});