Use keys to skip empty cells

Getting help Questions
1

Hi there,

I have a rather large table with a lot of columns which is filled rather sparse. So in every row there are a lot of blank cells. By default, I can use the arrow keys to get to the next cell. Is there a possibility to use, e.g. Ctrl + ArrowKey, to get to the next non-empty cell?
And if so, what would be the “cleanest” way of doing it?

thanks a lot for the help.

2

Good day Stephan,

I recommend using the afterDocumentKeyDown hook.

You’d need to register two keys (previous CTRL/CMD and current ←/↑/→/↓).
The hook returns only the event itself, but you can refer to the event’s keyCode to create the statement.
After receiving a signal that the key combination is the one to move the selection, you can use the selectCell() method and the getSelected() method to receive selected cell coordinates.

If you’d have any difficulties feel free to share the progress and I’ll do my best to help.

3

Hi Aleksandra,

I finally found some time to implement it. Your recommendations helped a lot!
If anybody is interested, this is my current solution:

private handledKeys = ['ArrowLeft', 'ArrowRight'];

onBeforeKeyDown = (event) => {
  if (this.hot.getSelected() && event['ctrlKey'] && this.handledKeys.includes(event['key'])) {
    event.stopImmediatePropagation();
  }
}

onAfterDocumentKeyDown = (event) => {
  if (this.hot.getSelected() && event['ctrlKey'] && this.handledKeys.includes(event['key'])) {
    let row = this.hot.getSelected()[0][0];
    let column = this.hot.getSelected()[0][1];
    const totalCols = this.hot.countCols();
    const right = (event['key'] === 'ArrowRight');
    const left = (event['key'] === 'ArrowLeft');
    if (right || left) {
      const incr = right ? 1 : -1;
      do {
        column = this.mod(column + incr, totalCols);
      } while(this.emptyOrNoWidth(row, column));
      this.hot.selectCell(row, column);
    }
  }
};

...
hotSettings.afterDocumentKeyDown = this.onAfterDocumentKeyDown;
hotSettings.beforeKeyDown = this.onBeforeKeyDown;
...

private emptyOrNoWidth(row:number, col:number):boolean {
  return this.hot.getColWidth(col) < 1 || !this.hot.getDataAtCell(row, col);
}

public static mod(n:number, m:number):number {
  return ((n % m) + m) % m;
}
1 Like
4

well done @stephan.boehme !