handsontable 13.1.0-next-e1a7d2c-20230831 → 14.0.0-next-d97b156-20231027

package/plugins/nestedHeaders/nestedHeaders.mjs

@@ -11,9 +11,9 @@ function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classEx
 function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
 function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
 import { addClass, removeClass } from "../../helpers/dom/element.mjs";
-import { isNumeric } from "../../helpers/number.mjs";
-import { isLeftClick, isRightClick } from "../../helpers/dom/event.mjs";
+import { isNumeric, clamp } from "../../helpers/number.mjs";
 import { toSingleLine } from "../../helpers/templateLiteralTag.mjs";
+import { isLeftClick, isRightClick } from "../../helpers/dom/event.mjs";
 import { warn } from "../../helpers/console.mjs";
 import { ACTIVE_HEADER_TYPE, HEADER_TYPE } from "../../selection/index.mjs";
 import { BasePlugin } from "../base/index.mjs";
@@ -69,13 +69,14 @@ export const PLUGIN_PRIORITY = 280;
  */
 var _stateManager = /*#__PURE__*/new WeakMap();
 var _hidingIndexMapObserver = /*#__PURE__*/new WeakMap();
+var _focusInitialCoords = /*#__PURE__*/new WeakMap();
+var _isColumnsSelectionInProgress = /*#__PURE__*/new WeakMap();
 export class NestedHeaders extends BasePlugin {
   constructor() {
     super(...arguments);
     /**
      * The state manager for the nested headers.
      *
-     * @private
      * @type {StateManager}
      */
     _classPrivateFieldInitSpec(this, _stateManager, {
@@ -86,13 +87,30 @@ export class NestedHeaders extends 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.
      *
@@ -152,6 +170,19 @@ export class NestedHeaders extends 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);
@@ -165,9 +196,17 @@ export class NestedHeaders extends 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.
   }
@@ -383,6 +422,67 @@ export class NestedHeaders extends 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.
    *
@@ -398,7 +498,6 @@ export class NestedHeaders extends BasePlugin {
       return visualColumn;
     }
     const {
-      classNames,
       columnCursor,
       selectionType,
       selectionWidth
@@ -413,8 +512,8 @@ export class NestedHeaders extends BasePlugin {
       }
     } else if (selectionType === 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;
@@ -426,45 +525,44 @@ export class NestedHeaders extends BasePlugin {
    * of the column.
    *
    * @private
-   * @param {Array[]} data An array of arrays which contains data to copied.
-   * @param {object[]} copyableRanges An array of objects with ranges of the visual indexes (`startRow`, `startCol`, `endRow`, `endCol`)
-   *                                  which will copied.
-   * @param {{ columnHeadersCount: number }} copiedHeadersCount An object with keys that holds information with
-   *                                                            the number of copied headers.
+   * @param {object} clipboardData Information about already performed copy action.
+   * @param {Function} clipboardData.removeRow Remove row from the copied/pasted dataset.
+   * @param {Function} clipboardData.removeColumn Remove column from the copied/pasted dataset.
+   * @param {Function} clipboardData.insertAtRow Insert values at row index.
+   * @param {Function} clipboardData.insertAtColumn Insert values at column index.
+   * @param {Function} clipboardData.setCellAt Change headers or cells in the copied/pasted dataset.
+   * @param {Function} clipboardData.getCellAt Get headers or cells from the copied/pasted dataset.
+   * @param {Function} clipboardData.getData Gets copied data stored as array of arrays.
+   * @param {Function} clipboardData.getMetaInfo Gets grid settings for copied data.
+   * @param {Function} clipboardData.getRanges Returns ranges related to copied part of Handsontable.
    */
-  onBeforeCopy(data, copyableRanges, _ref2) {
-    let {
-      columnHeadersCount
-    } = _ref2;
-    if (columnHeadersCount === 0) {
-      return;
-    }
-    for (let rangeIndex = 0; rangeIndex < copyableRanges.length; rangeIndex++) {
+  onBeforeCopy(clipboardData) {
+    const copyableRanges = clipboardData.getRanges();
+    for (let rangeIndex = 0; rangeIndex < copyableRanges.length; rangeIndex += 1) {
       const {
         startRow,
         startCol,
         endRow,
         endCol
       } = copyableRanges[rangeIndex];
-      const rowsCount = endRow - startRow + 1;
       const columnsCount = startCol - endCol + 1;
 
       // do not process dataset ranges and column headers where only one column is copied
       if (startRow >= 0 || columnsCount === 1) {
         break;
       }
-      for (let column = startCol; column <= endCol; column++) {
-        for (let row = startRow; row <= endRow; row++) {
-          var _classPrivateFieldGet4;
-          const zeroBasedColumnHeaderLevel = rowsCount + row;
+      for (let column = startCol; column <= endCol; column += 1) {
+        for (let row = startRow; row <= endRow; row += 1) {
+          var _classPrivateFieldGet4, _classPrivateFieldGet5;
           const zeroBasedColumnIndex = column - startCol;
           if (zeroBasedColumnIndex === 0) {
             continue; // eslint-disable-line no-continue
           }
 
           const isRoot = (_classPrivateFieldGet4 = _classPrivateFieldGet(this, _stateManager).getHeaderTreeNodeData(row, column)) === null || _classPrivateFieldGet4 === void 0 ? void 0 : _classPrivateFieldGet4.isRoot;
-          if (isRoot === false) {
-            data[zeroBasedColumnHeaderLevel][zeroBasedColumnIndex] = '';
+          const collapsible = (_classPrivateFieldGet5 = _classPrivateFieldGet(this, _stateManager).getHeaderTreeNodeData(row, column)) === null || _classPrivateFieldGet5 === void 0 ? void 0 : _classPrivateFieldGet5.collapsible;
+          if (collapsible === true && isRoot === false) {
+            clipboardData.setCellAt(row, zeroBasedColumnIndex, '');
           }
         }
       }
@@ -502,6 +600,8 @@ export class NestedHeaders extends BasePlugin {
     if (!headerNodeData) {
       return;
     }
+    _classPrivateFieldSet(this, _focusInitialCoords, coords.clone());
+    _classPrivateFieldSet(this, _isColumnsSelectionInProgress, true);
     const {
       selection
     } = this.hot;
@@ -567,14 +667,129 @@ export class NestedHeaders extends BasePlugin {
     controller.column = true;
     controller.cell = true;
     const columnsToSelect = [];
+    const headerLevel = 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(clamp(columnStart, columnIndex, columnIndex + origColspan - 1), 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);
   }
 
   /**
@@ -650,15 +865,29 @@ export class NestedHeaders extends BasePlugin {
    * @returns {string} Returns the column header value to update.
    */
   onModifyColumnHeaderValue(value, visualColumnIndex, headerLevel) {
-    var _classPrivateFieldGet5;
+    var _classPrivateFieldGet6;
     const {
       label
-    } = (_classPrivateFieldGet5 = _classPrivateFieldGet(this, _stateManager).getHeaderTreeNodeData(headerLevel, visualColumnIndex)) !== null && _classPrivateFieldGet5 !== void 0 ? _classPrivateFieldGet5 : {
+    } = (_classPrivateFieldGet6 = _classPrivateFieldGet(this, _stateManager).getHeaderTreeNodeData(headerLevel, visualColumnIndex)) !== null && _classPrivateFieldGet6 !== void 0 ? _classPrivateFieldGet6 : {
       label: ''
     };
     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.
    *

package/plugins/nestedHeaders/stateManager/index.js

@@ -8,6 +8,7 @@ var _sourceSettings2 = _interopRequireDefault(require("./sourceSettings"));
 var _headersTree2 = _interopRequireDefault(require("./headersTree"));
 var _nodeModifiers = require("./nodeModifiers");
 var _matrixGenerator = require("./matrixGenerator");
+var _tree = require("../../../utils/dataStructures/tree");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
@@ -317,6 +318,23 @@ class StateManager {
    * @returns {object|null}
    */
   getHeaderTreeNodeData(headerLevel, columnIndex) {
+    const node = this.getHeaderTreeNode(headerLevel, columnIndex);
+    if (!node) {
+      return null;
+    }
+    return {
+      ...node.data
+    };
+  }
+
+  /**
+   * Gets tree node that is connected to the column header.
+   *
+   * @param {number} headerLevel Header level (there is support for negative and positive values).
+   * @param {number} columnIndex A visual column index.
+   * @returns {TreeNode|null}
+   */
+  getHeaderTreeNode(headerLevel, columnIndex) {
     if (headerLevel < 0) {
       headerLevel = this.rowCoordsToLevel(headerLevel);
     }
@@ -327,9 +345,53 @@ class StateManager {
     if (!node) {
       return null;
     }
-    return {
-      ...node.data
-    };
+    return node;
+  }
+
+  /**
+   * Finds the most top header level of the column header that is rendered entirely within
+   * the passed visual columns range. If multiple columns headers are found within the range the
+   * most top header level value will be returned.
+   *
+   * @param {number} columnIndexFrom A visual column index.
+   * @param {number} [columnIndexTo] A visual column index.
+   * @returns {number} Returns a header level in format -1 to -N.
+   */
+  findTopMostEntireHeaderLevel(columnIndexFrom) {
+    var _headerLevel;
+    let columnIndexTo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : columnIndexFrom;
+    const columnsWidth = columnIndexTo - columnIndexFrom + 1;
+    let atLeastOneRootFound = false;
+    let headerLevel = null;
+    for (let columnIndex = columnIndexFrom; columnIndex <= columnIndexTo; columnIndex++) {
+      const rootNode = _classPrivateFieldGet(this, _headersTree).getRootByColumn(columnIndex);
+      if (!rootNode) {
+        break;
+      }
+      atLeastOneRootFound = true;
+
+      // eslint-disable-next-line
+      rootNode.walkDown(node => {
+        const {
+          columnIndex: nodeColumnIndex,
+          headerLevel: nodeHeaderLevel,
+          origColspan,
+          isHidden
+        } = node.data;
+        if (isHidden) {
+          return;
+        }
+
+        // if the header fits entirely within the columns range get and save the node header level
+        if (origColspan <= columnsWidth && nodeColumnIndex >= columnIndexFrom && nodeColumnIndex + origColspan - 1 <= columnIndexTo && (headerLevel === null || nodeHeaderLevel < headerLevel)) {
+          headerLevel = nodeHeaderLevel;
+        }
+      }, _tree.TRAVERSAL_DF_PRE);
+    }
+    if (atLeastOneRootFound && headerLevel === null) {
+      return -1;
+    }
+    return this.levelToRowCoords((_headerLevel = headerLevel) !== null && _headerLevel !== void 0 ? _headerLevel : 0);
   }
 
   /**
@@ -367,6 +429,43 @@ class StateManager {
     return stepBackColumn;
   }
 
+  /**
+   * The method is helpful in cases where the column index targets in-between currently
+   * collapsed column. In that case, the method returns the right-most column index
+   * where the nested header ends.
+   *
+   * @param {number} headerLevel Header level (there is support for negative and positive values).
+   * @param {number} columnIndex A visual column index.
+   * @returns {number}
+   */
+  findRightMostColumnIndex(headerLevel, columnIndex) {
+    var _this$getHeaderSettin3;
+    const {
+      isRoot,
+      origColspan
+    } = (_this$getHeaderSettin3 = this.getHeaderSettings(headerLevel, columnIndex)) !== null && _this$getHeaderSettin3 !== void 0 ? _this$getHeaderSettin3 : {
+      isRoot: true,
+      origColspan: 1
+    };
+    if (isRoot) {
+      return columnIndex + origColspan - 1;
+    }
+    let stepForthColumn = columnIndex + 1;
+    while (stepForthColumn < this.getColumnsCount()) {
+      var _this$getHeaderSettin4;
+      const {
+        isRoot: isRootNode
+      } = (_this$getHeaderSettin4 = this.getHeaderSettings(headerLevel, stepForthColumn)) !== null && _this$getHeaderSettin4 !== void 0 ? _this$getHeaderSettin4 : {
+        isRoot: true
+      };
+      if (isRootNode) {
+        break;
+      }
+      stepForthColumn += 1;
+    }
+    return stepForthColumn - 1;
+  }
+
   /**
    * Gets a total number of headers levels.
    *

package/plugins/nestedHeaders/stateManager/index.mjs

@@ -12,6 +12,7 @@ import SourceSettings from "./sourceSettings.mjs";
 import HeadersTree from "./headersTree.mjs";
 import { triggerNodeModification } from "./nodeModifiers/index.mjs";
 import { generateMatrix } from "./matrixGenerator.mjs";
+import { TRAVERSAL_DF_PRE } from "../../../utils/dataStructures/tree.mjs";
 /**
  * The state manager is a source of truth for nested headers configuration.
  * The state generation process is divided into three stages.
@@ -313,6 +314,23 @@ export default class StateManager {
    * @returns {object|null}
    */
   getHeaderTreeNodeData(headerLevel, columnIndex) {
+    const node = this.getHeaderTreeNode(headerLevel, columnIndex);
+    if (!node) {
+      return null;
+    }
+    return {
+      ...node.data
+    };
+  }
+
+  /**
+   * Gets tree node that is connected to the column header.
+   *
+   * @param {number} headerLevel Header level (there is support for negative and positive values).
+   * @param {number} columnIndex A visual column index.
+   * @returns {TreeNode|null}
+   */
+  getHeaderTreeNode(headerLevel, columnIndex) {
     if (headerLevel < 0) {
       headerLevel = this.rowCoordsToLevel(headerLevel);
     }
@@ -323,9 +341,53 @@ export default class StateManager {
     if (!node) {
       return null;
     }
-    return {
-      ...node.data
-    };
+    return node;
+  }
+
+  /**
+   * Finds the most top header level of the column header that is rendered entirely within
+   * the passed visual columns range. If multiple columns headers are found within the range the
+   * most top header level value will be returned.
+   *
+   * @param {number} columnIndexFrom A visual column index.
+   * @param {number} [columnIndexTo] A visual column index.
+   * @returns {number} Returns a header level in format -1 to -N.
+   */
+  findTopMostEntireHeaderLevel(columnIndexFrom) {
+    var _headerLevel;
+    let columnIndexTo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : columnIndexFrom;
+    const columnsWidth = columnIndexTo - columnIndexFrom + 1;
+    let atLeastOneRootFound = false;
+    let headerLevel = null;
+    for (let columnIndex = columnIndexFrom; columnIndex <= columnIndexTo; columnIndex++) {
+      const rootNode = _classPrivateFieldGet(this, _headersTree).getRootByColumn(columnIndex);
+      if (!rootNode) {
+        break;
+      }
+      atLeastOneRootFound = true;
+
+      // eslint-disable-next-line
+      rootNode.walkDown(node => {
+        const {
+          columnIndex: nodeColumnIndex,
+          headerLevel: nodeHeaderLevel,
+          origColspan,
+          isHidden
+        } = node.data;
+        if (isHidden) {
+          return;
+        }
+
+        // if the header fits entirely within the columns range get and save the node header level
+        if (origColspan <= columnsWidth && nodeColumnIndex >= columnIndexFrom && nodeColumnIndex + origColspan - 1 <= columnIndexTo && (headerLevel === null || nodeHeaderLevel < headerLevel)) {
+          headerLevel = nodeHeaderLevel;
+        }
+      }, TRAVERSAL_DF_PRE);
+    }
+    if (atLeastOneRootFound && headerLevel === null) {
+      return -1;
+    }
+    return this.levelToRowCoords((_headerLevel = headerLevel) !== null && _headerLevel !== void 0 ? _headerLevel : 0);
   }
 
   /**
@@ -363,6 +425,43 @@ export default class StateManager {
     return stepBackColumn;
   }
 
+  /**
+   * The method is helpful in cases where the column index targets in-between currently
+   * collapsed column. In that case, the method returns the right-most column index
+   * where the nested header ends.
+   *
+   * @param {number} headerLevel Header level (there is support for negative and positive values).
+   * @param {number} columnIndex A visual column index.
+   * @returns {number}
+   */
+  findRightMostColumnIndex(headerLevel, columnIndex) {
+    var _this$getHeaderSettin3;
+    const {
+      isRoot,
+      origColspan
+    } = (_this$getHeaderSettin3 = this.getHeaderSettings(headerLevel, columnIndex)) !== null && _this$getHeaderSettin3 !== void 0 ? _this$getHeaderSettin3 : {
+      isRoot: true,
+      origColspan: 1
+    };
+    if (isRoot) {
+      return columnIndex + origColspan - 1;
+    }
+    let stepForthColumn = columnIndex + 1;
+    while (stepForthColumn < this.getColumnsCount()) {
+      var _this$getHeaderSettin4;
+      const {
+        isRoot: isRootNode
+      } = (_this$getHeaderSettin4 = this.getHeaderSettings(headerLevel, stepForthColumn)) !== null && _this$getHeaderSettin4 !== void 0 ? _this$getHeaderSettin4 : {
+        isRoot: true
+      };
+      if (isRootNode) {
+        break;
+      }
+      stepForthColumn += 1;
+    }
+    return stepForthColumn - 1;
+  }
+
   /**
    * Gets a total number of headers levels.
    *