handsontable 0.0.0-next-010265d-20231005 → 0.0.0-next-9379dd1-20231020

package/plugins/hiddenRows/hiddenRows.mjs

@@ -13,7 +13,7 @@ import { rangeEach } from "../../helpers/number.mjs";
 import { arrayEach, arrayMap, arrayReduce } from "../../helpers/array.mjs";
 import { isObject } from "../../helpers/object.mjs";
 import { isUndefined } from "../../helpers/mixed.mjs";
-import { SEPARATOR } from "../contextMenu/predefinedItems.mjs";
+import { SEPARATOR } from "../contextMenu/predefinedItems/index.mjs";
 import Hooks from "../../pluginHooks.mjs";
 import hideRowItem from "./contextMenuItem/hideRow.mjs";
 import showRowItem from "./contextMenuItem/showRow.mjs";

package/plugins/manualColumnMove/manualColumnMove.js

@@ -387,7 +387,9 @@ class ManualColumnMove extends _base.BasePlugin {
     const priv = privatePool.get(this);
     const firstVisible = this.hot.view.getFirstFullyVisibleColumn();
     if (this.isFixedColumnsStart(priv.hoveredColumn) && firstVisible > 0) {
-      this.hot.scrollViewportTo(void 0, this.hot.columnIndexMapper.getNearestNotHiddenIndex(firstVisible - 1, -1));
+      this.hot.scrollViewportTo({
+        col: this.hot.columnIndexMapper.getNearestNotHiddenIndex(firstVisible - 1, -1)
+      });
     }
     const wtTable = this.hot.view._wt.wtTable;
     const scrollableElement = this.hot.view._wt.wtOverlays.scrollableElement;

package/plugins/manualColumnMove/manualColumnMove.mjs

@@ -381,7 +381,9 @@ export class ManualColumnMove extends BasePlugin {
     const priv = privatePool.get(this);
     const firstVisible = this.hot.view.getFirstFullyVisibleColumn();
     if (this.isFixedColumnsStart(priv.hoveredColumn) && firstVisible > 0) {
-      this.hot.scrollViewportTo(void 0, this.hot.columnIndexMapper.getNearestNotHiddenIndex(firstVisible - 1, -1));
+      this.hot.scrollViewportTo({
+        col: this.hot.columnIndexMapper.getNearestNotHiddenIndex(firstVisible - 1, -1)
+      });
     }
     const wtTable = this.hot.view._wt.wtTable;
     const scrollableElement = this.hot.view._wt.wtOverlays.scrollableElement;

package/plugins/mergeCells/mergeCells.js

@@ -188,9 +188,6 @@ class MergeCells extends _base.BasePlugin {
     this.addHook('afterDrawSelection', function () {
       return _this.onAfterDrawSelection(...arguments);
     });
-    this.addHook('beforeRemoveCellClassNames', function () {
-      return _this.onBeforeRemoveCellClassNames(...arguments);
-    });
     this.addHook('beforeUndoStackChange', (action, source) => {
       if (source === 'MergeCells') {
         return false;
@@ -575,8 +572,11 @@ class MergeCells extends _base.BasePlugin {
     gridContext.addShortcut({
       keys: [['Control', 'm']],
       callback: () => {
-        this.toggleMerge(this.hot.getSelectedRangeLast());
-        this.hot.render();
+        const range = this.hot.getSelectedRangeLast();
+        if (range && !range.isSingleHeader()) {
+          this.toggleMerge(range);
+          this.hot.render();
+        }
       },
       runOnlyIf: event => !event.altKey,
       // right ALT in some systems triggers ALT+CTRL
@@ -1199,16 +1199,5 @@ class MergeCells extends _base.BasePlugin {
     }
     return this.selectionCalculations.getSelectedMergedCellClassName(currentRow, currentColumn, cornersOfSelection, layerLevel);
   }
-
-  /**
-   * `beforeRemoveCellClassNames` hook callback. Used to remove additional class name from all cells in the table.
-   *
-   * @private
-   * @returns {string[]} An `Array` of `String`s. Each of these strings will act like class names to be removed from
-   *   all the cells in the table.
-   */
-  onBeforeRemoveCellClassNames() {
-    return this.selectionCalculations.getSelectedMergedCellClassNameToRemove();
-  }
 }
 exports.MergeCells = MergeCells;

package/plugins/mergeCells/mergeCells.mjs

@@ -182,9 +182,6 @@ export class MergeCells extends BasePlugin {
     this.addHook('afterDrawSelection', function () {
       return _this.onAfterDrawSelection(...arguments);
     });
-    this.addHook('beforeRemoveCellClassNames', function () {
-      return _this.onBeforeRemoveCellClassNames(...arguments);
-    });
     this.addHook('beforeUndoStackChange', (action, source) => {
       if (source === 'MergeCells') {
         return false;
@@ -569,8 +566,11 @@ export class MergeCells extends BasePlugin {
     gridContext.addShortcut({
       keys: [['Control', 'm']],
       callback: () => {
-        this.toggleMerge(this.hot.getSelectedRangeLast());
-        this.hot.render();
+        const range = this.hot.getSelectedRangeLast();
+        if (range && !range.isSingleHeader()) {
+          this.toggleMerge(range);
+          this.hot.render();
+        }
       },
       runOnlyIf: event => !event.altKey,
       // right ALT in some systems triggers ALT+CTRL
@@ -1193,15 +1193,4 @@ export class MergeCells extends BasePlugin {
     }
     return this.selectionCalculations.getSelectedMergedCellClassName(currentRow, currentColumn, cornersOfSelection, layerLevel);
   }
-
-  /**
-   * `beforeRemoveCellClassNames` hook callback. Used to remove additional class name from all cells in the table.
-   *
-   * @private
-   * @returns {string[]} An `Array` of `String`s. Each of these strings will act like class names to be removed from
-   *   all the cells in the table.
-   */
-  onBeforeRemoveCellClassNames() {
-    return this.selectionCalculations.getSelectedMergedCellClassNameToRemove();
-  }
 }

package/plugins/multiColumnSorting/multiColumnSorting.js

@@ -12,8 +12,8 @@ const PLUGIN_KEY = 'multiColumnSorting';
 exports.PLUGIN_KEY = PLUGIN_KEY;
 const PLUGIN_PRIORITY = 170;
 exports.PLUGIN_PRIORITY = PLUGIN_PRIORITY;
-const APPEND_COLUMN_CONFIG_STRATEGY = 'append';
 const CONFLICTED_PLUGIN_KEY = 'columnSorting';
+const SHORTCUTS_GROUP = PLUGIN_KEY;
 (0, _sortService.registerRootComparator)(PLUGIN_KEY, _rootComparator.rootComparator);
 
 /**
@@ -113,6 +113,41 @@ class MultiColumnSorting extends _columnSorting.ColumnSorting {
     super.disablePlugin();
   }
 
+  /**
+   * Register shortcuts responsible for toggling column sorting functionality.
+   *
+   * @private
+   */
+  registerShortcuts() {
+    super.registerShortcuts();
+    this.hot.getShortcutManager().getContext('grid').addShortcut({
+      keys: [['Shift', 'Enter']],
+      callback: () => {
+        const {
+          highlight
+        } = this.hot.getSelectedRangeLast();
+        if (highlight.row === -1 && highlight.col >= 0) {
+          this.sort(this.getNextSortConfig(highlight.col, _columnSorting.APPEND_COLUMN_CONFIG_STRATEGY));
+        }
+      },
+      runOnlyIf: () => {
+        var _this$hot$getSelected;
+        return (_this$hot$getSelected = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight.isHeader();
+      },
+      group: SHORTCUTS_GROUP
+    });
+  }
+
+  /**
+   * Unregister shortcuts responsible for toggling column sorting functionality.
+   *
+   * @private
+   */
+  unregisterShortcuts() {
+    super.unregisterShortcuts();
+    this.hot.getShortcutManager().getContext('grid').removeShortcutsByGroup(SHORTCUTS_GROUP);
+  }
+
   /**
    * Sorts the table by chosen columns and orders.
    *
@@ -262,7 +297,7 @@ class MultiColumnSorting extends _columnSorting.ColumnSorting {
       if (this.hot.getShortcutManager().isCtrlPressed()) {
         this.hot.deselectCell();
         this.hot.selectColumns(coords.col);
-        this.sort(this.getNextSortConfig(coords.col, APPEND_COLUMN_CONFIG_STRATEGY));
+        this.sort(this.getNextSortConfig(coords.col, _columnSorting.APPEND_COLUMN_CONFIG_STRATEGY));
       } else {
         this.sort(this.getColumnNextConfig(coords.col));
       }

package/plugins/multiColumnSorting/multiColumnSorting.mjs

@@ -1,4 +1,4 @@
-import { ColumnSorting } from "../columnSorting/index.mjs";
+import { APPEND_COLUMN_CONFIG_STRATEGY, ColumnSorting } from "../columnSorting/index.mjs";
 import { registerRootComparator } from "../columnSorting/sortService/index.mjs";
 import { wasHeaderClickedProperly } from "../columnSorting/utils.mjs";
 import { addClass, removeClass } from "../../helpers/dom/element.mjs";
@@ -7,8 +7,8 @@ import { warnAboutPluginsConflict } from "./utils.mjs";
 import { getClassesToAdd, getClassesToRemove } from "./domHelpers.mjs";
 export const PLUGIN_KEY = 'multiColumnSorting';
 export const PLUGIN_PRIORITY = 170;
-const APPEND_COLUMN_CONFIG_STRATEGY = 'append';
 const CONFLICTED_PLUGIN_KEY = 'columnSorting';
+const SHORTCUTS_GROUP = PLUGIN_KEY;
 registerRootComparator(PLUGIN_KEY, rootComparator);
 
 /**
@@ -108,6 +108,41 @@ export class MultiColumnSorting extends ColumnSorting {
     super.disablePlugin();
   }
 
+  /**
+   * Register shortcuts responsible for toggling column sorting functionality.
+   *
+   * @private
+   */
+  registerShortcuts() {
+    super.registerShortcuts();
+    this.hot.getShortcutManager().getContext('grid').addShortcut({
+      keys: [['Shift', 'Enter']],
+      callback: () => {
+        const {
+          highlight
+        } = this.hot.getSelectedRangeLast();
+        if (highlight.row === -1 && highlight.col >= 0) {
+          this.sort(this.getNextSortConfig(highlight.col, APPEND_COLUMN_CONFIG_STRATEGY));
+        }
+      },
+      runOnlyIf: () => {
+        var _this$hot$getSelected;
+        return (_this$hot$getSelected = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight.isHeader();
+      },
+      group: SHORTCUTS_GROUP
+    });
+  }
+
+  /**
+   * Unregister shortcuts responsible for toggling column sorting functionality.
+   *
+   * @private
+   */
+  unregisterShortcuts() {
+    super.unregisterShortcuts();
+    this.hot.getShortcutManager().getContext('grid').removeShortcutsByGroup(SHORTCUTS_GROUP);
+  }
+
   /**
    * Sorts the table by chosen columns and orders.
    *

package/plugins/nestedHeaders/nestedHeaders.js

@@ -5,8 +5,8 @@ exports.__esModule = true;
 require("core-js/modules/es.array.push.js");
 var _element = require("../../helpers/dom/element");
 var _number = require("../../helpers/number");
-var _event = require("../../helpers/dom/event");
 var _templateLiteralTag = require("../../helpers/templateLiteralTag");
+var _event = require("../../helpers/dom/event");
 var _console = require("../../helpers/console");
 var _selection = require("../../selection");
 var _base = require("../base");
@@ -75,13 +75,14 @@ const PLUGIN_PRIORITY = 280;
 exports.PLUGIN_PRIORITY = PLUGIN_PRIORITY;
 var _stateManager = /*#__PURE__*/new WeakMap();
 var _hidingIndexMapObserver = /*#__PURE__*/new WeakMap();
+var _focusInitialCoords = /*#__PURE__*/new WeakMap();
+var _isColumnsSelectionInProgress = /*#__PURE__*/new WeakMap();
 class NestedHeaders extends _base.BasePlugin {
   constructor() {
     super(...arguments);
     /**
      * The state manager for the nested headers.
      *
-     * @private
      * @type {StateManager}
      */
     _classPrivateFieldInitSpec(this, _stateManager, {
@@ -92,13 +93,30 @@ class NestedHeaders extends _base.BasePlugin {
      * The instance of the ChangesObservable class that allows track the changes that happens in the
      * column indexes.
      *
-     * @private
      * @type {ChangesObservable}
      */
     _classPrivateFieldInitSpec(this, _hidingIndexMapObserver, {
       writable: true,
       value: null
     });
+    /**
+     * Holds the coords that points to the place where the column selection starts.
+     *
+     * @type {number|null}
+     */
+    _classPrivateFieldInitSpec(this, _focusInitialCoords, {
+      writable: true,
+      value: null
+    });
+    /**
+     * Determines if there is performed the column selection.
+     *
+     * @type {boolean}
+     */
+    _classPrivateFieldInitSpec(this, _isColumnsSelectionInProgress, {
+      writable: true,
+      value: false
+    });
     /**
      * Custom helper for getting widths of the nested headers.
      *
@@ -158,6 +176,19 @@ class NestedHeaders extends _base.BasePlugin {
     this.addHook('beforeOnCellMouseOver', function () {
       return _this.onBeforeOnCellMouseOver(...arguments);
     });
+    this.addHook('beforeOnCellMouseUp', function () {
+      return _this.onBeforeOnCellMouseUp(...arguments);
+    });
+    this.addHook('beforeSelectionHighlightSet', function () {
+      return _this.onBeforeSelectionHighlightSet(...arguments);
+    });
+    this.addHook('modifyTransformStart', function () {
+      return _this.onModifyTransformStart(...arguments);
+    });
+    this.addHook('afterSelection', () => this.updateFocusHighlightPosition());
+    this.addHook('beforeViewportScrollHorizontally', function () {
+      return _this.onBeforeViewportScrollHorizontally(...arguments);
+    });
     this.addHook('afterGetColumnHeaderRenderers', array => this.onAfterGetColumnHeaderRenderers(array));
     this.addHook('modifyColWidth', function () {
       return _this.onModifyColWidth(...arguments);
@@ -171,9 +202,17 @@ class NestedHeaders extends _base.BasePlugin {
     this.addHook('beforeCopy', function () {
       return _this.onBeforeCopy(...arguments);
     });
+    this.addHook('beforeSelectColumns', function () {
+      return _this.onBeforeSelectColumns(...arguments);
+    });
     this.addHook('afterViewportColumnCalculatorOverride', function () {
       return _this.onAfterViewportColumnCalculatorOverride(...arguments);
     });
+    this.addHook('modifyFocusedElement', function () {
+      return _this.onModifyFocusedElement(...arguments);
+    });
+    this.hot.columnIndexMapper.addLocalHook('cacheUpdated', () => this.updateFocusHighlightPosition());
+    this.hot.rowIndexMapper.addLocalHook('cacheUpdated', () => this.updateFocusHighlightPosition());
     super.enablePlugin();
     this.updatePlugin(); // @TODO: Workaround for broken plugin initialization abstraction.
   }
@@ -389,6 +428,67 @@ class NestedHeaders extends _base.BasePlugin {
     return this.hot.getColHeader(visualColumnIndex, headerLevel);
   }
 
+  /**
+   * Updates the selection focus highlight position to point to the nested header root element (TH)
+   * even when the logical coordinates point in-between the header.
+   *
+   * @private
+   */
+  updateFocusHighlightPosition() {
+    var _this$hot;
+    const selection = (_this$hot = this.hot) === null || _this$hot === void 0 ? void 0 : _this$hot.getSelectedRangeLast();
+    if (!selection) {
+      return;
+    }
+    const {
+      highlight
+    } = selection;
+    const isNestedHeadersRange = highlight.isHeader() && highlight.col >= 0;
+    if (isNestedHeadersRange) {
+      const columnIndex = _classPrivateFieldGet(this, _stateManager).findLeftMostColumnIndex(highlight.row, highlight.col);
+      const focusHighlight = this.hot.selection.highlight.getFocus();
+
+      // Correct the highlight/focus selection to highlight the correct TH element
+      focusHighlight.visualCellRange.highlight.col = columnIndex;
+      focusHighlight.visualCellRange.from.col = columnIndex;
+      focusHighlight.visualCellRange.to.col = columnIndex;
+      focusHighlight.commit();
+    }
+  }
+
+  /**
+   * Allows to control to which column index the viewport will be scrolled. To ensure that the viewport
+   * is scrolled to the correct column for the nested header the most left and the most right visual column
+   * indexes are used.
+   *
+   * @private
+   * @param {number} visualColumn A visual column index to which the viewport will be scrolled.
+   * @returns {number}
+   */
+  onBeforeViewportScrollHorizontally(visualColumn) {
+    const selection = this.hot.getSelectedRangeLast();
+    if (!selection) {
+      return visualColumn;
+    }
+    const {
+      highlight
+    } = selection;
+    const isNestedHeadersRange = highlight.isHeader() && highlight.col >= 0;
+    if (!isNestedHeadersRange) {
+      return visualColumn;
+    }
+    const firstColumn = this.hot.view.getFirstFullyVisibleColumn();
+    const lastColumn = this.hot.view.getLastFullyVisibleColumn();
+    const mostLeftColumnIndex = _classPrivateFieldGet(this, _stateManager).findLeftMostColumnIndex(highlight.row, highlight.col);
+    const mostRightColumnIndex = _classPrivateFieldGet(this, _stateManager).findRightMostColumnIndex(highlight.row, highlight.col);
+
+    // do not scroll the viewport when the header is wider than the viewport
+    if (mostLeftColumnIndex < firstColumn && mostRightColumnIndex > lastColumn) {
+      return visualColumn;
+    }
+    return mostLeftColumnIndex < firstColumn ? mostLeftColumnIndex : mostRightColumnIndex;
+  }
+
   /**
    * Allows to control which header DOM element will be used to highlight.
    *
@@ -404,7 +504,6 @@ class NestedHeaders extends _base.BasePlugin {
       return visualColumn;
     }
     const {
-      classNames,
       columnCursor,
       selectionType,
       selectionWidth
@@ -419,8 +518,8 @@ class NestedHeaders extends _base.BasePlugin {
       }
     } else if (selectionType === _selection.ACTIVE_HEADER_TYPE) {
       if (colspan > selectionWidth - columnCursor || !isRoot) {
-        // Reset the class names array so the generated TH element won't be modified.
-        classNames.length = 0;
+        // Prevents adding any CSS class names to the TH element
+        return null;
       }
     }
     return visualColumn;
@@ -508,6 +607,8 @@ class NestedHeaders extends _base.BasePlugin {
     if (!headerNodeData) {
       return;
     }
+    _classPrivateFieldSet(this, _focusInitialCoords, coords.clone());
+    _classPrivateFieldSet(this, _isColumnsSelectionInProgress, true);
     const {
       selection
     } = this.hot;
@@ -573,14 +674,129 @@ class NestedHeaders extends _base.BasePlugin {
     controller.column = true;
     controller.cell = true;
     const columnsToSelect = [];
+    const headerLevel = (0, _number.clamp)(coords.row, -Infinity, -1);
     if (coords.col < from.col) {
-      columnsToSelect.push(bottomEndCoords.col, columnIndex);
+      columnsToSelect.push(bottomEndCoords.col, columnIndex, headerLevel);
     } else if (coords.col > from.col) {
-      columnsToSelect.push(topStartCoords.col, columnIndex + origColspan - 1);
+      columnsToSelect.push(topStartCoords.col, columnIndex + origColspan - 1, headerLevel);
     } else {
-      columnsToSelect.push(columnIndex, columnIndex + origColspan - 1);
+      columnsToSelect.push(columnIndex, columnIndex + origColspan - 1, headerLevel);
+    }
+    this.hot.selection.selectColumns(...columnsToSelect);
+  }
+
+  /**
+   * Switches internal flag about selection progress to `false`.
+   *
+   * @private
+   */
+  onBeforeOnCellMouseUp() {
+    _classPrivateFieldSet(this, _isColumnsSelectionInProgress, false);
+  }
+
+  /**
+   * The hook checks and ensures that the focus position that depends on the selected columns
+   * range is always positioned within the range.
+   *
+   * @private
+   */
+  onBeforeSelectionHighlightSet() {
+    const {
+      navigableHeaders
+    } = this.hot.getSettings();
+    if (!this.hot.view.isMouseDown() || !_classPrivateFieldGet(this, _isColumnsSelectionInProgress) || !navigableHeaders) {
+      return;
+    }
+    const selectedRange = this.hot.getSelectedRangeLast();
+    const columnStart = selectedRange.getTopStartCorner().col;
+    const columnEnd = selectedRange.getBottomEndCorner().col;
+    const {
+      columnIndex,
+      origColspan
+    } = _classPrivateFieldGet(this, _stateManager).getHeaderTreeNodeData(_classPrivateFieldGet(this, _focusInitialCoords).row, _classPrivateFieldGet(this, _focusInitialCoords).col);
+    selectedRange.setHighlight(_classPrivateFieldGet(this, _focusInitialCoords));
+    if (origColspan > selectedRange.getWidth() || columnIndex < columnStart || columnIndex + origColspan - 1 > columnEnd) {
+      const headerLevel = _classPrivateFieldGet(this, _stateManager).findTopMostEntireHeaderLevel((0, _number.clamp)(columnStart, columnIndex, columnIndex + origColspan - 1), (0, _number.clamp)(columnEnd, columnIndex, columnIndex + origColspan - 1));
+      selectedRange.highlight.row = headerLevel;
+      selectedRange.highlight.col = selectedRange.from.col;
+    }
+  }
+
+  /**
+   * `modifyTransformStart` hook is called every time the keyboard navigation is used.
+   *
+   * @private
+   * @param {object} delta The transformation delta.
+   */
+  onModifyTransformStart(delta) {
+    const {
+      highlight
+    } = this.hot.getSelectedRangeLast();
+    const nextCoords = this.hot._createCellCoords(highlight.row + delta.row, highlight.col + delta.col);
+    const isNestedHeadersRange = nextCoords.isHeader() && nextCoords.col >= 0;
+    if (!isNestedHeadersRange) {
+      return;
+    }
+    const visualColumnIndexStart = _classPrivateFieldGet(this, _stateManager).findLeftMostColumnIndex(nextCoords.row, nextCoords.col);
+    const visualColumnIndexEnd = _classPrivateFieldGet(this, _stateManager).findRightMostColumnIndex(nextCoords.row, nextCoords.col);
+    if (delta.col < 0) {
+      const nextColumn = highlight.col >= visualColumnIndexStart && highlight.col <= visualColumnIndexEnd ? visualColumnIndexStart - 1 : visualColumnIndexEnd;
+      const notHiddenColumnIndex = this.hot.columnIndexMapper.getNearestNotHiddenIndex(nextColumn, -1);
+      if (notHiddenColumnIndex === null) {
+        // There are no visible columns anymore, so move the selection out of the table edge. This will
+        // be processed by the selection Transformer class as a move selection to the previous row (if autoWrapRow is enabled).
+        delta.col = -this.hot.view.countRenderableColumnsInRange(0, highlight.col);
+      } else {
+        delta.col = -Math.max(this.hot.view.countRenderableColumnsInRange(notHiddenColumnIndex, highlight.col) - 1, 1);
+      }
+    } else if (delta.col > 0) {
+      const nextColumn = highlight.col >= visualColumnIndexStart && highlight.col <= visualColumnIndexEnd ? visualColumnIndexEnd + 1 : visualColumnIndexStart;
+      const notHiddenColumnIndex = this.hot.columnIndexMapper.getNearestNotHiddenIndex(nextColumn, 1);
+      if (notHiddenColumnIndex === null) {
+        // There are no visible columns anymore, so move the selection out of the table edge. This will
+        // be processed by the selection Transformer class as a move selection to the next row (if autoWrapRow is enabled).
+        delta.col = this.hot.view.countRenderableColumnsInRange(highlight.col, this.hot.countCols());
+      } else {
+        delta.col = Math.max(this.hot.view.countRenderableColumnsInRange(highlight.col, notHiddenColumnIndex) - 1, 1);
+      }
+    }
+  }
+
+  /**
+   * The hook observes the column selection from the Selection API and modifies the column range to
+   * ensure that the whole nested column will be covered.
+   *
+   * @private
+   * @param {CellCoords} from The coords object where the selection starts.
+   * @param {CellCoords} to The coords object where the selection ends.
+   */
+  onBeforeSelectColumns(from, to) {
+    const headerLevel = from.row;
+    const startNodeData = this._getHeaderTreeNodeDataByCoords({
+      row: headerLevel,
+      col: from.col
+    });
+    const endNodeData = this._getHeaderTreeNodeDataByCoords({
+      row: headerLevel,
+      col: to.col
+    });
+    if (to.col < from.col) {
+      // Column selection from right to left
+      if (startNodeData) {
+        from.col = startNodeData.columnIndex + startNodeData.origColspan - 1;
+      }
+      if (endNodeData) {
+        to.col = endNodeData.columnIndex;
+      }
+    } else if (to.col >= from.col) {
+      // Column selection from left to right or a single column selection
+      if (startNodeData) {
+        from.col = startNodeData.columnIndex;
+      }
+      if (endNodeData) {
+        to.col = endNodeData.columnIndex + endNodeData.origColspan - 1;
+      }
     }
-    this.hot.selectColumns(...columnsToSelect);
   }
 
   /**
@@ -665,6 +881,20 @@ class NestedHeaders extends _base.BasePlugin {
     return label;
   }
 
+  /**
+   * `modifyFocusedElement` hook callback.
+   *
+   * @private
+   * @param {number} row Row index.
+   * @param {number} column Column index.
+   * @returns {HTMLTableCellElement} The `TH` element to be focused.
+   */
+  onModifyFocusedElement(row, column) {
+    if (row < 0) {
+      return this.hot.getCell(row, _classPrivateFieldGet(this, _stateManager).findLeftMostColumnIndex(row, column), true);
+    }
+  }
+
   /**
    * Updates the plugin state after HoT initialization.
    *