Edit a selection of cells

Tags: #<Tag:0x00007fee36aef200>

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 = {};
    }
  });

Hi @harrison

I can see that you already implemented batching, but did you also check other tips that might help with the overall performance? You can find them here:

In many cases using them might improve the performance greatly.

do you mean like this?

https://jsfiddle.net/8otg3qk7/

This demo doesn’t do any editing of selected cells based on inputting a value i.e typing 22 and pressing enter and expecting the entire selection to update to 22

I did try suspending rendering and resuming etc but it made little difference

Hi @harrison

If that’s not helping the other option that generally is helping with the performance is to set fixed width and height of the table and columns + rows. That prevents constant recalculations of the whole table with each operation.