handsontable 17.1.0 → 18.0.0-rc2

package/plugins/nestedHeaders/nestedHeaders.mjs

@@ -56,59 +56,40 @@ import { warn } from '../../helpers/console.mjs';
 import { ACTIVE_HEADER_TYPE, HEADER_TYPE } from '../../selection/index.mjs';
 import { BasePlugin } from '../base/index.mjs';
 import StateManager from './stateManager/index.mjs';
+import { createColumnVisibilityAdapter } from './stateManager/columnVisibility.mjs';
 import GhostTable from './utils/ghostTable.mjs';
 import { resolveRowspanNavigationContextRow } from './utils/navigation.mjs';
 export const PLUGIN_KEY = 'nestedHeaders';
 export const PLUGIN_PRIORITY = 280;
 var /**
-   * The state manager for the nested headers.
-   *
-   * @type {StateManager}
+   * Manages the state tree of nested header spans and their visibility.
    */ _stateManager = /*#__PURE__*/ new WeakMap(), /**
-   * The instance of the ChangesObservable class that allows track the changes that happens in the
-   * column indexes.
-   *
-   * @type {ChangesObservable}
-   */ _hidingIndexMapObserver = /*#__PURE__*/ new WeakMap(), /**
-   * Holds the coords that points to the place where the column selection starts.
-   *
-   * @type {number|null}
+   * Handler bound to columnIndexMapper's cacheUpdated local hook. Keeps header colspan state
+   * in sync with the current hiding map whenever visibility or column order changes.
+   */ _onColumnIndexMapperCacheUpdated = /*#__PURE__*/ new WeakMap(), /**
+   * Stores the initial focus coordinates before a column header click initiates a range selection.
    */ _focusInitialCoords = /*#__PURE__*/ new WeakMap(), /**
-   * Determines if there is performed the column selection.
-   *
-   * @type {boolean}
+   * Indicates whether a column selection drag triggered by a nested header click is currently in progress.
    */ _isColumnsSelectionInProgress = /*#__PURE__*/ new WeakMap(), /**
    * Keeps the last highlight position made by column selection. The coords are necessary to scroll
    * the viewport to the correct position when the nested header is clicked when the `navigableHeaders`
    * option is disabled.
-   *
-   * @type {CellCoords | null}
    */ _recentlyHighlightCoords = /*#__PURE__*/ new WeakMap(), /**
    * Stores the header row level used as context for horizontal navigation when entering
    * and leaving rowspanned headers.
-   *
-   * @type {number|null}
    */ _rowspanHeaderNavigationContextRow = /*#__PURE__*/ new WeakMap(), /**
    * Stores the expected next highlight coordinates after keyboard navigation. If the next
    * keyboard move starts from different coordinates, the horizontal navigation context
    * is considered stale and should be reset.
-   *
-   * @type {{row: number, col: number}|null}
    */ _expectedNextKeyboardHighlightCoords = /*#__PURE__*/ new WeakMap(), /**
    * Determines if the widths map should be updated.
-   *
-   * @type {boolean}
    */ _updateWidthsMap = /*#__PURE__*/ new WeakMap(), /**
    * Determines if the current nested headers state contains headers with `rowspan`.
-   *
-   * @type {boolean}
    */ _hasRowspanHeaders = /*#__PURE__*/ new WeakMap(), /**
-   * 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.
-   *
-   * The method uses arrow function to keep the reference to the class method. Necessary for
-   * the `removeLocalHook` method of the row and column index mapper.
-   */ _updateFocusHighlightPosition = /*#__PURE__*/ new WeakMap(), /**
+   * Applies colspan attribute and related CSS classes to a header cell.
+   */ _applyColspan = /*#__PURE__*/ new WeakSet(), /**
+   * Applies rowspan attribute and related CSS classes to a header cell.
+   */ _applyRowspan = /*#__PURE__*/ new WeakSet(), _updateFocusHighlightPosition = /*#__PURE__*/ new WeakMap(), /**
    * Finds the first visible header row for the passed coordinates. If the passed coordinates point
    * to a rowspan placeholder, the method traverses up through header levels to find the header cell
    * that visually represents that placeholder.
@@ -146,25 +127,11 @@ var /**
    * the cell on the left of the table. If `'end'`, viewport is scrolled to show the cell on the right of
    * the table. When `'auto'`, the viewport is scrolled only when the column is outside of the viewport.
    * @returns {number}
-   */ _onBeforeViewportScrollHorizontally = /*#__PURE__*/ new WeakSet(), /**
-   * Allows to control which header DOM element will be used to highlight.
-   *
-   * @param {number} visualColumn A visual column index of the highlighted row header.
-   * @param {number} headerLevel A row header level that is currently highlighted.
-   * @param {object} highlightMeta An object with meta data that describes the highlight state.
-   * @returns {number}
-   */ _onBeforeHighlightingColumnHeader = /*#__PURE__*/ new WeakSet(), /**
-   * Listens the `beforeCopy` hook that allows processing the copied column headers so that the
-   * merged column headers do not propagate the value for each column but only once at the beginning
-   * 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.
-   */ _onBeforeCopy = /*#__PURE__*/ new WeakSet(), /**
+   */ _onBeforeViewportScrollHorizontally = /*#__PURE__*/ new WeakMap(), /**
+   * Adjusts the column highlight start index and width to align with the nested header spanning configuration.
+   */ _onBeforeHighlightingColumnHeader = /*#__PURE__*/ new WeakMap(), /**
+   * Enriches copied data with nested column header labels when column headers are included in the copy range.
+   */ _onBeforeCopy = /*#__PURE__*/ new WeakMap(), /**
    * Allows blocking the column selection that is controlled by the core Selection module.
    *
    * @param {MouseEvent} event Mouse event.
@@ -172,82 +139,65 @@ var /**
    * @param {CellCoords} TD The table cell or header element.
    * @param {object} controller An object with properties `row`, `column` and `cell`. Each property contains
    *                            a boolean value that allows or disallows changing the selection for that particular area.
-   */ _onBeforeOnCellMouseDown = /*#__PURE__*/ new WeakSet(), /**
-   * Allows to control how the column selection based on the coordinates and the nested headers is made.
-   *
-   * @param {MouseEvent} event Mouse event.
-   * @param {CellCoords} coords Cell coords object containing the visual coordinates of the clicked cell.
-   */ _onAfterOnCellMouseDown = /*#__PURE__*/ new WeakSet(), /**
-   * Makes the header-selection properly select the nested headers.
-   *
-   * @param {MouseEvent} event Mouse event.
-   * @param {CellCoords} coords Cell coords object containing the visual coordinates of the clicked cell.
-   * @param {HTMLElement} TD The cell element.
-   * @param {object} controller An object with properties `row`, `column` and `cell`. Each property contains
-   *                            a boolean value that allows or disallows changing the selection for that particular area.
-   */ _onBeforeOnCellMouseOver = /*#__PURE__*/ new WeakSet(), /**
-   * Switches internal flag about selection progress to `false`.
-   */ _onBeforeOnCellMouseUp = /*#__PURE__*/ new WeakSet(), /**
-   * The hook checks and ensures that the focus position that depends on the selected columns
-   * range is always positioned within the range.
-   */ _onBeforeSelectionHighlightSet = /*#__PURE__*/ new WeakSet(), /**
-   * `modifyTransformStart` hook is called every time the keyboard navigation is used.
-   *
-   * @param {object} delta The transformation delta.
-   */ _onModifyTransformStart = /*#__PURE__*/ new WeakSet(), /**
-   * 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.
-   *
-   * @param {CellCoords} from The coords object where the selection starts.
-   * @param {CellCoords} to The coords object where the selection ends.
-   * @param {CellCoords} highlight The coords object where the focus is.
-   */ _onBeforeSelectColumns = /*#__PURE__*/ new WeakSet(), /**
-   * `afterGetColumnHeader` hook callback - prepares the header structure.
-   *
-   * @param {Array} renderersArray Array of renderers.
-   */ _onAfterGetColumnHeaderRenderers = /*#__PURE__*/ new WeakSet(), /**
-   * Make the renderer render the first nested column in its entirety.
-   *
-   * @param {object} calc Viewport column calculator.
-   */ _onAfterViewportColumnCalculatorOverride = /*#__PURE__*/ new WeakSet(), /**
+   */ _onBeforeOnCellMouseDown = /*#__PURE__*/ new WeakMap(), /**
+   * Initiates a column selection when a nested header cell is clicked, selecting all columns covered by the header span.
+   */ _onAfterOnCellMouseDown = /*#__PURE__*/ new WeakMap(), /**
+   * Extends the column selection range when the pointer moves over a nested header cell during a drag selection.
+   */ _onBeforeOnCellMouseOver = /*#__PURE__*/ new WeakMap(), /**
+   * Clears the in-progress column selection flag when the pointer button is released.
+   */ _onBeforeOnCellMouseUp = /*#__PURE__*/ new WeakMap(), /**
+   * Adjusts the selection highlight position when navigable headers are enabled and a multi-column header is selected.
+   */ _onBeforeSelectionHighlightSet = /*#__PURE__*/ new WeakMap(), /**
+   * Corrects the keyboard navigation delta when traversing across rowspanned nested header cells.
+   */ _onModifyTransformStart = /*#__PURE__*/ new WeakMap(), /**
+   * Expands the column selection range to fully include the header spans at the start and end columns.
+   */ _onBeforeSelectColumns = /*#__PURE__*/ new WeakMap(), /**
+   * Replaces the default column header renderer array with layer-specific renderers generated by this plugin.
+   */ _onAfterGetColumnHeaderRenderers = /*#__PURE__*/ new WeakMap(), /**
+   * Extends the viewport start column to include any header spans that begin outside the calculated viewport boundary.
+   */ _onAfterViewportColumnCalculatorOverride = /*#__PURE__*/ new WeakMap(), /**
    * `modifyColWidth` hook callback - returns width from cache, when is greater than incoming from hook.
    *
-   * @param {number} width Width from hook.
-   * @param {number} column Visual index of an column.
-   * @returns {number}
-   */ _onModifyColWidth = /*#__PURE__*/ new WeakSet(), /**
+   * When `autoColumnSize` is explicitly disabled, the user opts out of auto-sizing
+   * columns based on content; the plugin respects user-provided widths and does
+   * not override them with the ghost-table-measured header label width.
+   */ _onModifyColWidth = /*#__PURE__*/ new WeakMap(), /**
    * Equalizes all nested column header layers' heights when rowspans are used.
-   *
-   * @returns {number[]|undefined}
-   */ _onModifyColumnHeaderHeight = /*#__PURE__*/ new WeakSet(), /**
+   */ _onModifyColumnHeaderHeight = /*#__PURE__*/ new WeakMap(), /**
    * Listens the `modifyColumnHeaderValue` hook that overwrites the column headers values based on
    * the internal state and settings of the plugin.
    *
-   * @param {string} value The column header value.
-   * @param {number} visualColumnIndex The visual column index.
-   * @param {number} headerLevel The index of header level. The header level accepts positive (0 to N)
-   *                             and negative (-1 to -N) values. For positive values, 0 points to the
-   *                             top most header, and for negative direction, -1 points to the most bottom
-   *                             header (the header closest to the cells).
-   * @returns {string} Returns the column header value to update.
-   */ _onModifyColumnHeaderValue = /*#__PURE__*/ new WeakSet(), /**
-   * `modifyFocusedElement` hook callback.
-   *
-   * @param {number} row Row index.
-   * @param {number} column Column index.
-   * @returns {HTMLTableCellElement} The `TH` element to be focused.
-   */ _onModifyFocusedElement = /*#__PURE__*/ new WeakSet(), /**
+   * @param value The column header value.
+   * @param visualColumnIndex The visual column index.
+   * @param headerLevel The index of header level. The header level accepts positive (0 to N)
+   *                    and negative (-1 to -N) values. For positive values, 0 points to the
+   *                    top most header, and for negative direction, -1 points to the most bottom
+   *                    header (the header closest to the cells).
+   */ _onModifyColumnHeaderValue = /*#__PURE__*/ new WeakMap(), /**
+   * Returns the leftmost DOM cell element within the nested header span at the given row and column when in a header row.
+   */ _onModifyFocusedElement = /*#__PURE__*/ new WeakMap(), /**
    * Updates the plugin state after HoT initialization.
-   */ _onInit = /*#__PURE__*/ new WeakSet(), /**
-   * Updates the plugin state after new dataset load.
+   */ // @TODO: Workaround for broken plugin initialization abstraction.
+_onInit = /*#__PURE__*/ new WeakMap(), /**
+   * Re-initializes the plugin state after new data is loaded, unless this is the initial data load.
+   */ _onAfterLoadData = /*#__PURE__*/ new WeakMap(), /**
+   * Extends the nested headers structure when columns are inserted into the dataset, keeping the
+   * header tree aligned with the grid body. Headers spanning the insertion point are widened; a
+   * column inserted at a header boundary becomes a standalone header.
    *
-   * @param {Array[]} sourceData Array of arrays or array of objects containing data.
-   * @param {boolean} initialLoad Flag that determines whether the data has been loaded
-   *                              during the initialization.
-   */ _onAfterLoadData = /*#__PURE__*/ new WeakSet(), /**
+   * @param {number} visualColumnIndex A visual column index at which the columns were inserted.
+   * @param {number} amount The number of inserted columns.
+   */ _onAfterCreateCol = /*#__PURE__*/ new WeakMap(), /**
+   * Shrinks the nested headers structure when columns are removed from the dataset, keeping the
+   * header tree aligned with the grid body. Headers overlapping the removed range are shortened,
+   * re-anchored, or dropped when they lose all of their columns.
+   *
+   * @param {number} visualColumnIndex A visual column index from which the columns were removed.
+   * @param {number} amount The number of removed columns.
+   */ _onAfterRemoveCol = /*#__PURE__*/ new WeakMap(), /**
    * Builds the widths map before the view is rendered.
-   */ _onBeforeViewRender = /*#__PURE__*/ new WeakSet();
-/* eslint-disable jsdoc/require-description-complete-sentence */ /**
+   */ _onBeforeViewRender = /*#__PURE__*/ new WeakMap();
+/**
  * @plugin NestedHeaders
  * @class NestedHeaders
  *
@@ -321,21 +271,23 @@ var /**
  * ```
  * :::
  */ export class NestedHeaders extends BasePlugin {
-    static get PLUGIN_KEY() {
+    /**
+   * Returns the plugin key used to identify this plugin in Handsontable settings.
+   */ static get PLUGIN_KEY() {
         return PLUGIN_KEY;
     }
-    static get PLUGIN_PRIORITY() {
+    /**
+   * Returns the priority order used to determine the order in which plugins are initialized.
+   */ static get PLUGIN_PRIORITY() {
         return PLUGIN_PRIORITY;
     }
     /**
-   * Check if plugin is enabled.
-   *
-   * @returns {boolean}
+   * Returns whether the plugin is enabled based on the presence of the `nestedHeaders` settings key.
    */ isEnabled() {
         return !!this.hot.getSettings()[PLUGIN_KEY];
     }
     /**
-   * Enables the plugin functionality for this Handsontable instance.
+   * Enables the plugin by registering all required hooks and initializing the header state.
    */ enablePlugin() {
         if (this.enabled) {
             return;
@@ -345,37 +297,39 @@ var /**
             warn(toSingleLine`Your Nested Headers plugin configuration is invalid. The settings has to be\x20
                         passed as an array of arrays e.q. [['A1', { label: 'A2', colspan: 2 }]]`);
         }
-        this.addHook('init', ()=>_class_private_method_get(this, _onInit, onInit).call(this));
-        this.addHook('afterLoadData', (...args)=>_class_private_method_get(this, _onAfterLoadData, onAfterLoadData).call(this, ...args));
-        this.addHook('beforeOnCellMouseDown', (...args)=>_class_private_method_get(this, _onBeforeOnCellMouseDown, onBeforeOnCellMouseDown).call(this, ...args));
-        this.addHook('afterOnCellMouseDown', (...args)=>_class_private_method_get(this, _onAfterOnCellMouseDown, onAfterOnCellMouseDown).call(this, ...args));
-        this.addHook('beforeOnCellMouseOver', (...args)=>_class_private_method_get(this, _onBeforeOnCellMouseOver, onBeforeOnCellMouseOver).call(this, ...args));
-        this.addHook('beforeOnCellMouseUp', (...args)=>_class_private_method_get(this, _onBeforeOnCellMouseUp, onBeforeOnCellMouseUp).call(this, ...args));
-        this.addHook('beforeSelectionHighlightSet', (...args)=>_class_private_method_get(this, _onBeforeSelectionHighlightSet, onBeforeSelectionHighlightSet).call(this, ...args));
-        this.addHook('modifyTransformStart', (...args)=>_class_private_method_get(this, _onModifyTransformStart, onModifyTransformStart).call(this, ...args));
-        this.addHook('afterSelection', ()=>_class_private_field_get(this, _updateFocusHighlightPosition).call(this));
-        this.addHook('afterSelectionFocusSet', ()=>_class_private_field_get(this, _updateFocusHighlightPosition).call(this));
-        this.addHook('beforeViewportScrollHorizontally', (...args)=>_class_private_method_get(this, _onBeforeViewportScrollHorizontally, onBeforeViewportScrollHorizontally).call(this, ...args));
-        this.addHook('afterGetColumnHeaderRenderers', (array)=>_class_private_method_get(this, _onAfterGetColumnHeaderRenderers, onAfterGetColumnHeaderRenderers).call(this, array));
-        this.addHook('modifyColWidth', (...args)=>_class_private_method_get(this, _onModifyColWidth, onModifyColWidth).call(this, ...args));
-        this.addHook('modifyColumnHeaderHeight', (...args)=>_class_private_method_get(this, _onModifyColumnHeaderHeight, onModifyColumnHeaderHeight).call(this, ...args));
-        this.addHook('modifyColumnHeaderValue', (...args)=>_class_private_method_get(this, _onModifyColumnHeaderValue, onModifyColumnHeaderValue).call(this, ...args));
-        this.addHook('beforeHighlightingColumnHeader', (...args)=>_class_private_method_get(this, _onBeforeHighlightingColumnHeader, onBeforeHighlightingColumnHeader).call(this, ...args));
-        this.addHook('beforeCopy', (...args)=>_class_private_method_get(this, _onBeforeCopy, onBeforeCopy).call(this, ...args));
-        this.addHook('beforeSelectColumns', (...args)=>_class_private_method_get(this, _onBeforeSelectColumns, onBeforeSelectColumns).call(this, ...args));
-        this.addHook('beforeViewRender', ()=>_class_private_method_get(this, _onBeforeViewRender, onBeforeViewRender).call(this));
-        this.addHook('afterViewportColumnCalculatorOverride', (...args)=>_class_private_method_get(this, _onAfterViewportColumnCalculatorOverride, onAfterViewportColumnCalculatorOverride).call(this, ...args));
-        this.addHook('modifyFocusedElement', (...args)=>_class_private_method_get(this, _onModifyFocusedElement, onModifyFocusedElement).call(this, ...args));
+        this.addHook('init', _class_private_field_get(this, _onInit));
+        this.addHook('afterLoadData', _class_private_field_get(this, _onAfterLoadData));
+        this.addHook('afterCreateCol', _class_private_field_get(this, _onAfterCreateCol));
+        this.addHook('afterRemoveCol', _class_private_field_get(this, _onAfterRemoveCol));
+        this.addHook('beforeOnCellMouseDown', _class_private_field_get(this, _onBeforeOnCellMouseDown));
+        this.addHook('afterOnCellMouseDown', _class_private_field_get(this, _onAfterOnCellMouseDown));
+        this.addHook('beforeOnCellMouseOver', _class_private_field_get(this, _onBeforeOnCellMouseOver));
+        this.addHook('beforeOnCellMouseUp', _class_private_field_get(this, _onBeforeOnCellMouseUp));
+        this.addHook('beforeSelectionHighlightSet', _class_private_field_get(this, _onBeforeSelectionHighlightSet));
+        this.addHook('modifyTransformStart', _class_private_field_get(this, _onModifyTransformStart));
+        this.addHook('afterSelection', _class_private_field_get(this, _updateFocusHighlightPosition));
+        this.addHook('afterSelectionFocusSet', _class_private_field_get(this, _updateFocusHighlightPosition));
+        this.addHook('beforeViewportScrollHorizontally', _class_private_field_get(this, _onBeforeViewportScrollHorizontally));
+        this.addHook('afterGetColumnHeaderRenderers', _class_private_field_get(this, _onAfterGetColumnHeaderRenderers));
+        this.addHook('modifyColWidth', _class_private_field_get(this, _onModifyColWidth));
+        this.addHook('modifyColumnHeaderHeight', _class_private_field_get(this, _onModifyColumnHeaderHeight));
+        this.addHook('modifyColumnHeaderValue', _class_private_field_get(this, _onModifyColumnHeaderValue));
+        this.addHook('beforeHighlightingColumnHeader', _class_private_field_get(this, _onBeforeHighlightingColumnHeader));
+        this.addHook('beforeCopy', _class_private_field_get(this, _onBeforeCopy));
+        this.addHook('beforeSelectColumns', _class_private_field_get(this, _onBeforeSelectColumns));
+        this.addHook('beforeViewRender', _class_private_field_get(this, _onBeforeViewRender));
+        this.addHook('afterViewportColumnCalculatorOverride', _class_private_field_get(this, _onAfterViewportColumnCalculatorOverride));
+        this.addHook('modifyFocusedElement', _class_private_field_get(this, _onModifyFocusedElement));
+        // Sync the header tree's hidden state from the hiding map *before* the focus highlight is
+        // repositioned, so #updateFocusHighlightPosition reads up-to-date colspan / isHidden values.
+        this.hot.columnIndexMapper.addLocalHook('cacheUpdated', _class_private_field_get(this, _onColumnIndexMapperCacheUpdated));
         this.hot.columnIndexMapper.addLocalHook('cacheUpdated', _class_private_field_get(this, _updateFocusHighlightPosition));
         this.hot.rowIndexMapper.addLocalHook('cacheUpdated', _class_private_field_get(this, _updateFocusHighlightPosition));
         super.enablePlugin();
-        this.updatePlugin(); // @TODO: Workaround for broken plugin initialization abstraction.
+        this.updatePlugin();
     }
     /**
-   * Updates the plugin's state.
-   *
-   * This method is executed when [`updateSettings()`](@/api/core.md#updatesettings) is invoked with any of the following configuration options:
-   *  - [`nestedHeaders`](@/api/options.md#nestedheaders)
+   * Updates the plugin state when Handsontable settings change, rebuilding the header tree and refreshing column widths.
    */ updatePlugin() {
         if (!this.hot.view) {
             return;
@@ -398,75 +352,45 @@ var /**
                         is currently not supported.`);
         }
         if (this.enabled) {
-            // This line covers the case when a developer uses the external hiding maps to manipulate
-            // the columns' visibility. The tree state built from the settings - which is always built
-            // as if all the columns are visible, needs to be modified to be in sync with a dataset.
-            this.hot.columnIndexMapper.hidingMapsCollection.getMergedValues().forEach((isColumnHidden, physicalColumnIndex)=>{
-                const actionName = isColumnHidden === true ? 'hide-column' : 'show-column';
-                _class_private_field_get(this, _stateManager).triggerColumnModification(actionName, physicalColumnIndex);
-            });
-        }
-        if (!_class_private_field_get(this, _hidingIndexMapObserver) && this.enabled) {
-            _class_private_field_set(this, _hidingIndexMapObserver, this.hot.columnIndexMapper.createChangesObserver('hiding').subscribe((changes)=>{
-                changes.forEach(({ op, index: columnIndex, newValue })=>{
-                    if (op === 'replace') {
-                        const actionName = newValue === true ? 'hide-column' : 'show-column';
-                        _class_private_field_get(this, _stateManager).triggerColumnModification(actionName, columnIndex);
-                    }
-                });
-                this.ghostTable.buildWidthsMap();
-            }));
+            // Derive tree colspan / isHidden state from the current hiding map. This covers columns
+            // that were already hidden before the plugin initialised (e.g. HiddenColumns configured
+            // together with nestedHeaders). Future changes are handled by #onColumnIndexMapperCacheUpdated.
+            _class_private_field_get(this, _stateManager).syncVisibility(createColumnVisibilityAdapter(this.hot));
         }
         _class_private_field_set(this, _updateWidthsMap, true);
         super.updatePlugin();
     }
     /**
-   * Disables the plugin functionality for this Handsontable instance.
+   * Disables the plugin by removing all registered hooks, clearing header state, and resetting visual indicators.
    */ disablePlugin() {
         this.hot.rowIndexMapper.removeLocalHook('cacheUpdated', _class_private_field_get(this, _updateFocusHighlightPosition));
         this.hot.columnIndexMapper.removeLocalHook('cacheUpdated', _class_private_field_get(this, _updateFocusHighlightPosition));
+        this.hot.columnIndexMapper.removeLocalHook('cacheUpdated', _class_private_field_get(this, _onColumnIndexMapperCacheUpdated));
         this.clearColspans();
         _class_private_field_get(this, _stateManager).clear();
         _class_private_field_set(this, _rowspanHeaderNavigationContextRow, null);
         _class_private_field_set(this, _expectedNextKeyboardHighlightCoords, null);
         removeClass(this.hot.rootElement, 'htHasRowspanHeaders');
-        _class_private_field_get(this, _hidingIndexMapObserver).unsubscribe();
-        _class_private_field_set(this, _hidingIndexMapObserver, null);
         this.ghostTable.clear();
         super.disablePlugin();
     }
     /**
-   * Returns an instance of the internal state manager of the plugin.
-   *
-   * @private
-   * @returns {StateManager}
+   * Returns the internal state manager that tracks the nested header spans and their layout configuration.
    */ getStateManager() {
         return _class_private_field_get(this, _stateManager);
     }
     /**
-   * Gets a total number of headers levels.
-   *
-   * @private
-   * @returns {number}
+   * Returns the number of nested header rows currently configured in the plugin.
    */ getLayersCount() {
         return _class_private_field_get(this, _stateManager).getLayersCount();
     }
     /**
-   * Gets column settings for a specified header. The returned object contains
-   * information about the header label, its colspan length, or if it is hidden
-   * in the header renderers.
-   *
-   * @private
-   * @param {number} headerLevel Header level (0 = most distant to the table).
-   * @param {number} columnIndex A visual column index.
-   * @returns {object}
+   * Returns the header settings node for the specified header level and column index.
    */ getHeaderSettings(headerLevel, columnIndex) {
         return _class_private_field_get(this, _stateManager).getHeaderSettings(headerLevel, columnIndex);
     }
     /**
-   * Clear the colspans remaining after plugin usage.
-   *
-   * @private
+   * Removes all colspan and rowspan attributes from the rendered header cells in all overlays.
    */ clearColspans() {
         if (!this.hot.view) {
             return;
@@ -474,8 +398,11 @@ var /**
         const { _wt: wt } = this.hot.view;
         const headerLevels = wt.getSetting('columnHeaders').length;
         const mainHeaders = wt.wtTable.THEAD;
-        const topHeaders = wt.wtOverlays.topOverlay.clone.wtTable.THEAD;
-        const topLeftCornerHeaders = wt.wtOverlays.topInlineStartCornerOverlay ? wt.wtOverlays.topInlineStartCornerOverlay.clone.wtTable.THEAD : null;
+        const topHeaders = wt.wtOverlays.topOverlay.clone?.wtTable.THEAD;
+        const topLeftCornerHeaders = wt.wtOverlays.topInlineStartCornerOverlay?.clone?.wtTable.THEAD ?? null;
+        if (!mainHeaders || !topHeaders) {
+            return;
+        }
         for(let i = 0; i < headerLevels; i++){
             const masterLevel = mainHeaders.childNodes[i];
             if (!masterLevel) {
@@ -484,37 +411,34 @@ var /**
             const topLevel = topHeaders.childNodes[i];
             const topLeftCornerLevel = topLeftCornerHeaders ? topLeftCornerHeaders.childNodes[i] : null;
             for(let j = 0, masterNodes = masterLevel.childNodes.length; j < masterNodes; j++){
-                masterLevel.childNodes[j].removeAttribute('colspan');
-                masterLevel.childNodes[j].removeAttribute('rowspan');
-                masterLevel.childNodes[j].style.display = '';
-                removeClass(masterLevel.childNodes[j], 'hiddenHeader');
+                const masterChild = masterLevel.childNodes[j];
+                masterChild.removeAttribute('colspan');
+                masterChild.removeAttribute('rowspan');
+                masterChild.style.display = '';
+                removeClass(masterChild, 'hiddenHeader');
                 if (topLevel && topLevel.childNodes[j]) {
-                    topLevel.childNodes[j].removeAttribute('colspan');
-                    topLevel.childNodes[j].removeAttribute('rowspan');
-                    topLevel.childNodes[j].style.display = '';
-                    removeClass(topLevel.childNodes[j], 'hiddenHeader');
+                    const topChild = topLevel.childNodes[j];
+                    topChild.removeAttribute('colspan');
+                    topChild.removeAttribute('rowspan');
+                    topChild.style.display = '';
+                    removeClass(topChild, 'hiddenHeader');
                 }
                 if (topLeftCornerHeaders && topLeftCornerLevel && topLeftCornerLevel.childNodes[j]) {
-                    topLeftCornerLevel.childNodes[j].removeAttribute('colspan');
-                    topLeftCornerLevel.childNodes[j].removeAttribute('rowspan');
-                    topLeftCornerLevel.childNodes[j].style.display = '';
-                    removeClass(topLeftCornerLevel.childNodes[j], 'hiddenHeader');
+                    const cornerChild = topLeftCornerLevel.childNodes[j];
+                    cornerChild.removeAttribute('colspan');
+                    cornerChild.removeAttribute('rowspan');
+                    cornerChild.style.display = '';
+                    removeClass(cornerChild, 'hiddenHeader');
                 }
             }
         }
     }
     /**
-   * Generates the appropriate header renderer for a header row.
-   *
-   * @private
-   * @param {number} headerLevel The index of header level counting from the top (positive
-   *                             values counting from 0 to N).
-   * @returns {Function}
-   * @fires Hooks#afterGetColHeader
+   * Creates and returns a header renderer function for the specified header layer level.
    */ headerRendererFactory(headerLevel) {
         const fixedColumnsStart = this.hot.view._wt.getSetting('fixedColumnsStart');
         return (renderedColumnIndex, TH)=>{
-            const { columnIndexMapper, view } = this.hot;
+            const { columnIndexMapper } = this.hot;
             let visualColumnIndex = columnIndexMapper.getVisualFromRenderableIndex(renderedColumnIndex);
             if (visualColumnIndex === null) {
                 visualColumnIndex = renderedColumnIndex;
@@ -526,57 +450,40 @@ var /**
             removeClass(TH, 'hiddenHeaderText');
             removeClass(TH, 'htRowspanHeader');
             removeClass(TH, 'htRowspanBottomLevel');
-            const { colspan, rowspan, isHidden, isPlaceholder, isRowspanPlaceholder, headerClassNames } = _class_private_field_get(this, _stateManager).getHeaderSettings(headerLevel, visualColumnIndex) ?? {
-                label: ''
-            };
+            const rendererHeaderSettings = _class_private_field_get(this, _stateManager).getHeaderSettings(headerLevel, visualColumnIndex) ?? {};
+            const { colspan, rowspan, isHidden, isPlaceholder, isRowspanPlaceholder, headerClassNames } = rendererHeaderSettings;
             if (isRowspanPlaceholder) {
                 addClass(TH, 'hiddenHeader');
                 TH.style.display = 'none';
             } else if (isPlaceholder || isHidden) {
                 addClass(TH, 'hiddenHeader');
             } else {
-                if (colspan > 1) {
-                    const { wtOverlays } = view._wt;
-                    const isTopInlineStartOverlay = wtOverlays.topInlineStartCornerOverlay?.clone.wtTable.THEAD.contains(TH);
-                    const isInlineStartOverlay = wtOverlays.inlineStartOverlay?.clone.wtTable.THEAD.contains(TH);
-                    const isTopOverlay = wtOverlays.topOverlay?.clone.wtTable.THEAD.contains(TH);
-                    if (isTopOverlay && visualColumnIndex < fixedColumnsStart) {
-                        addClass(TH, 'hiddenHeaderText');
-                    }
-                    const correctedColspan = isTopInlineStartOverlay || isInlineStartOverlay ? Math.min(colspan, fixedColumnsStart - renderedColumnIndex) : colspan;
-                    if (correctedColspan > 1) {
-                        TH.setAttribute('colspan', correctedColspan);
-                    }
-                }
-                if (rowspan > 1) {
-                    const isBottomMostRowspanHeader = headerLevel + rowspan === this.getLayersCount();
-                    addClass(TH, 'htRowspanHeader');
-                    if (isBottomMostRowspanHeader) {
-                        addClass(TH, 'htRowspanBottomLevel');
-                    }
-                    TH.setAttribute('rowspan', rowspan);
-                }
+                _class_private_method_get(this, _applyColspan, applyColspan).call(this, TH, colspan, visualColumnIndex, renderedColumnIndex, fixedColumnsStart);
+                _class_private_method_get(this, _applyRowspan, applyRowspan).call(this, TH, rowspan, headerLevel);
+            }
+            this.hot.view.appendColHeader(visualColumnIndex, TH, (colIndex, level)=>this.getColumnHeaderValue(colIndex, level), headerLevel);
+            // The hidden-column indicator added by HiddenColumns must appear only on the header closest
+            // to the cells (the one whose bottom edge reaches the last header row). Upper-level headers -
+            // group parents, or single-column headers stacked above - would point at an internal or
+            // duplicated boundary, so strip the indicator from every header that does not touch the cells.
+            const reachesCells = headerLevel + (rowspan ?? 1) === this.getLayersCount();
+            if (!reachesCells) {
+                removeClass(TH, [
+                    'beforeHiddenColumn',
+                    'afterHiddenColumn'
+                ]);
             }
-            this.hot.view.appendColHeader(visualColumnIndex, TH, (...args)=>this.getColumnHeaderValue(...args), headerLevel);
             if (!isPlaceholder && !isHidden && !isRowspanPlaceholder) {
                 const innerHeaderDiv = TH.querySelector('div.relative');
                 if (innerHeaderDiv && headerClassNames && headerClassNames.length > 0) {
-                    removeClass(innerHeaderDiv, this.hot.getColumnMeta(visualColumnIndex).headerClassName);
+                    removeClass(innerHeaderDiv, this.hot.getColumnMeta(visualColumnIndex).headerClassName ?? []);
                     addClass(innerHeaderDiv, headerClassNames);
                 }
             }
         };
     }
     /**
-   * Returns the column header value for specified column and header level index.
-   *
-   * @private
-   * @param {number} visualColumnIndex Visual column index.
-   * @param {number} headerLevel The index of header level. The header level accepts positive (0 to N)
-   *                             and negative (-1 to -N) values. For positive values, 0 points to the
-   *                             top most header, and for negative direction, -1 points to the most bottom
-   *                             header (the header closest to the cells).
-   * @returns {string} Returns the column header value to update.
+   * Returns the display value for a nested header cell at the given visual column index and header level.
    */ getColumnHeaderValue(visualColumnIndex, headerLevel) {
         const { isHidden, isPlaceholder, isRowspanPlaceholder } = _class_private_field_get(this, _stateManager).getHeaderSettings(headerLevel, visualColumnIndex) ?? {};
         if (isPlaceholder || isHidden || isRowspanPlaceholder) {
@@ -587,20 +494,12 @@ var /**
     /**
    * Destroys the plugin instance.
    */ destroy() {
-        _class_private_field_set(this, _stateManager, null);
+        _class_private_field_get(this, _stateManager).clear();
         removeClass(this.hot.rootElement, 'htHasRowspanHeaders');
-        if (_class_private_field_get(this, _hidingIndexMapObserver) !== null) {
-            _class_private_field_get(this, _hidingIndexMapObserver).unsubscribe();
-            _class_private_field_set(this, _hidingIndexMapObserver, null);
-        }
         super.destroy();
     }
     /**
-   * Gets the tree data that belongs to the column headers pointed by the passed coordinates.
-   *
-   * @private
-   * @param {CellCoords} coords The CellCoords instance.
-   * @returns {object|undefined}
+   * Returns the header tree node data for the given coordinates, or undefined if the coordinates do not point to a header cell.
    */ _getHeaderTreeNodeDataByCoords(coords) {
         if (coords.row >= 0 || coords.col < 0) {
             return;
@@ -608,10 +507,10 @@ var /**
         return _class_private_field_get(this, _stateManager).getHeaderTreeNodeData(coords.row, coords.col);
     }
     constructor(...args){
-        super(...args), _class_private_method_init(this, _findRenderableHeaderRow), _class_private_method_init(this, _getRootHeaderRowspan), _class_private_method_init(this, _isNavigableHeaderCell), _class_private_method_init(this, _findNearestNavigableHeaderColumn), _class_private_method_init(this, _onBeforeViewportScrollHorizontally), _class_private_method_init(this, _onBeforeHighlightingColumnHeader), _class_private_method_init(this, _onBeforeCopy), _class_private_method_init(this, _onBeforeOnCellMouseDown), _class_private_method_init(this, _onAfterOnCellMouseDown), _class_private_method_init(this, _onBeforeOnCellMouseOver), _class_private_method_init(this, _onBeforeOnCellMouseUp), _class_private_method_init(this, _onBeforeSelectionHighlightSet), _class_private_method_init(this, _onModifyTransformStart), _class_private_method_init(this, _onBeforeSelectColumns), _class_private_method_init(this, _onAfterGetColumnHeaderRenderers), _class_private_method_init(this, _onAfterViewportColumnCalculatorOverride), _class_private_method_init(this, _onModifyColWidth), _class_private_method_init(this, _onModifyColumnHeaderHeight), _class_private_method_init(this, _onModifyColumnHeaderValue), _class_private_method_init(this, _onModifyFocusedElement), _class_private_method_init(this, _onInit), _class_private_method_init(this, _onAfterLoadData), _class_private_method_init(this, _onBeforeViewRender), _class_private_field_init(this, _stateManager, {
+        super(...args), _class_private_method_init(this, _applyColspan), _class_private_method_init(this, _applyRowspan), _class_private_method_init(this, _findRenderableHeaderRow), _class_private_method_init(this, _getRootHeaderRowspan), _class_private_method_init(this, _isNavigableHeaderCell), _class_private_method_init(this, _findNearestNavigableHeaderColumn), _class_private_field_init(this, _stateManager, {
             writable: true,
             value: void 0
-        }), _class_private_field_init(this, _hidingIndexMapObserver, {
+        }), _class_private_field_init(this, _onColumnIndexMapperCacheUpdated, {
             writable: true,
             value: void 0
         }), _class_private_field_init(this, _focusInitialCoords, {
@@ -635,14 +534,90 @@ var /**
         }), _class_private_field_init(this, _hasRowspanHeaders, {
             writable: true,
             value: void 0
-        }), _class_private_field_init(this, _updateFocusHighlightPosition, {
+        }), /**
+   * Updates the focus highlight position in the selection model to reflect the current nested header layout.
+   */ _class_private_field_init(this, _updateFocusHighlightPosition, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onBeforeViewportScrollHorizontally, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onBeforeHighlightingColumnHeader, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onBeforeCopy, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onBeforeOnCellMouseDown, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterOnCellMouseDown, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onBeforeOnCellMouseOver, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onBeforeOnCellMouseUp, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onBeforeSelectionHighlightSet, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onModifyTransformStart, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onBeforeSelectColumns, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterGetColumnHeaderRenderers, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterViewportColumnCalculatorOverride, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onModifyColWidth, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onModifyColumnHeaderHeight, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onModifyColumnHeaderValue, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onModifyFocusedElement, {
             writable: true,
             value: void 0
-        }), _class_private_field_set(this, _stateManager, new StateManager()), _class_private_field_set(this, _hidingIndexMapObserver, null), _class_private_field_set(this, _focusInitialCoords, null), _class_private_field_set(this, _isColumnsSelectionInProgress, false), _class_private_field_set(this, _recentlyHighlightCoords, null), _class_private_field_set(this, _rowspanHeaderNavigationContextRow, null), _class_private_field_set(this, _expectedNextKeyboardHighlightCoords, null), _class_private_field_set(this, _updateWidthsMap, false), /**
+        }), _class_private_field_init(this, _onInit, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterLoadData, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterCreateCol, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterRemoveCol, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onBeforeViewRender, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_set(this, _stateManager, new StateManager()), _class_private_field_set(this, _onColumnIndexMapperCacheUpdated, ({ hiddenIndexesChanged })=>{
+            if (!this.enabled) {
+                return;
+            }
+            // syncVisibility must run on every cache update (including a pure column move) so the tree's
+            // colspan / isHidden stay aligned with the current visual<->physical mapping (DEV-1717).
+            _class_private_field_get(this, _stateManager).syncVisibility(createColumnVisibilityAdapter(this.hot));
+            // Rebuilding the ghost table to re-measure widths is expensive (it builds and measures a
+            // detached DOM table). Only column visibility changes can alter the measured widths, so skip
+            // the rebuild on pure sequence changes (e.g. manualColumnMove) - the widths map is keyed by
+            // physical column and a move does not change them.
+            if (hiddenIndexesChanged) {
+                this.ghostTable.buildWidthsMap();
+            }
+        }), _class_private_field_set(this, _focusInitialCoords, null), _class_private_field_set(this, _isColumnsSelectionInProgress, false), _class_private_field_set(this, _recentlyHighlightCoords, null), _class_private_field_set(this, _rowspanHeaderNavigationContextRow, null), _class_private_field_set(this, _expectedNextKeyboardHighlightCoords, null), _class_private_field_set(this, _updateWidthsMap, false), /**
    * Custom helper for getting widths of the nested headers.
-   *
-   * @private
-   * @type {GhostTable}
    */ // @TODO This should be changed after refactor handsontable/utils/ghostTable.
         this.ghostTable = new GhostTable({
             hot: this.hot,
@@ -650,16 +625,14 @@ var /**
         }), /**
    * The flag which determines that the nested header settings contains overlapping headers
    * configuration.
-   *
-   * @type {boolean}
    */ this.detectedOverlappedHeaders = false, _class_private_field_set(this, _hasRowspanHeaders, false), _class_private_field_set(this, _updateFocusHighlightPosition, ()=>{
             const selection = this.hot?.getSelectedRangeActive();
             if (!selection) {
                 return;
             }
             const { highlight } = selection;
-            const isNestedHeadersRange = highlight.isHeader() && highlight.col >= 0;
-            if (isNestedHeadersRange) {
+            const isNestedHeadersRange = highlight.row !== null && highlight.col !== null && highlight.isHeader() && highlight.col >= 0;
+            if (isNestedHeadersRange && highlight.row !== null && highlight.col !== null) {
                 const { isRowspanPlaceholder } = _class_private_field_get(this, _stateManager).getHeaderSettings(highlight.row, highlight.col) ?? {};
                 const normalizedHighlightRow = isRowspanPlaceholder ? _class_private_method_get(this, _findRenderableHeaderRow, findRenderableHeaderRow).call(this, highlight.row, highlight.col) : highlight.row;
                 const columnIndex = _class_private_field_get(this, _stateManager).findLeftMostColumnIndex(normalizedHighlightRow, highlight.col);
@@ -677,9 +650,463 @@ var /**
                 focusVisualCellRange.to.col = columnIndex;
                 focusHighlight.commit();
             }
+        }), _class_private_field_set(this, _onBeforeViewportScrollHorizontally, (visualColumn, snapping)=>{
+            const selection = this.hot.getSelectedRangeActive();
+            if (!selection) {
+                return visualColumn;
+            }
+            const { highlight } = selection;
+            const { navigableHeaders } = this.hot.getSettings();
+            const isSelectedByColumnHeader = this.hot.selection.isSelectedByColumnHeader();
+            const highlightRow = navigableHeaders ? highlight.row : _class_private_field_get(this, _recentlyHighlightCoords)?.row;
+            const highlightColumn = isSelectedByColumnHeader ? visualColumn : highlight.col;
+            const isNestedHeadersRange = highlightRow !== null && highlightRow !== undefined && highlightColumn !== null && highlightColumn !== undefined && highlightRow < 0 && highlightColumn >= 0;
+            _class_private_field_set(this, _recentlyHighlightCoords, null);
+            if (!isNestedHeadersRange || highlightRow === null || highlightRow === undefined || highlightColumn === null || highlightColumn === undefined) {
+                return visualColumn;
+            }
+            const firstVisibleColumn = this.hot.getFirstFullyVisibleColumn();
+            const lastVisibleColumn = this.hot.getLastFullyVisibleColumn();
+            const viewportWidth = lastVisibleColumn - firstVisibleColumn + 1;
+            const mostLeftColumnIndex = _class_private_field_get(this, _stateManager).findLeftMostColumnIndex(highlightRow, highlightColumn);
+            const mostRightColumnIndex = _class_private_field_get(this, _stateManager).findRightMostColumnIndex(highlightRow, highlightColumn);
+            const headerWidth = mostRightColumnIndex - mostLeftColumnIndex + 1;
+            if (mostLeftColumnIndex < firstVisibleColumn && mostRightColumnIndex > lastVisibleColumn) {
+                return mostLeftColumnIndex;
+            }
+            if (isSelectedByColumnHeader) {
+                let scrollColumnIndex = null;
+                if (mostLeftColumnIndex >= firstVisibleColumn && mostRightColumnIndex > lastVisibleColumn) {
+                    if (headerWidth > viewportWidth) {
+                        snapping.value = 'start';
+                        scrollColumnIndex = mostLeftColumnIndex;
+                    } else {
+                        snapping.value = 'end';
+                        scrollColumnIndex = mostRightColumnIndex;
+                    }
+                } else if (mostLeftColumnIndex < firstVisibleColumn && mostRightColumnIndex <= lastVisibleColumn) {
+                    if (headerWidth > viewportWidth) {
+                        snapping.value = 'end';
+                        scrollColumnIndex = mostRightColumnIndex;
+                    } else {
+                        snapping.value = 'start';
+                        scrollColumnIndex = mostLeftColumnIndex;
+                    }
+                }
+                return scrollColumnIndex;
+            }
+            return mostLeftColumnIndex <= firstVisibleColumn ? mostLeftColumnIndex : mostRightColumnIndex;
+        }), _class_private_field_set(this, _onBeforeHighlightingColumnHeader, (visualColumn, headerLevel, highlightMeta)=>{
+            const headerNodeData = _class_private_field_get(this, _stateManager).getHeaderTreeNodeData(headerLevel, visualColumn);
+            if (!headerNodeData) {
+                return visualColumn;
+            }
+            const { columnCursor, selectionType, selectionWidth } = highlightMeta;
+            const { isRoot, colspan = 1 } = _class_private_field_get(this, _stateManager).getHeaderSettings(headerLevel, visualColumn) ?? {};
+            if (selectionType === HEADER_TYPE) {
+                if (!isRoot) {
+                    return headerNodeData.columnIndex;
+                }
+            } else if (selectionType === ACTIVE_HEADER_TYPE) {
+                if (colspan > selectionWidth - columnCursor || !isRoot) {
+                    return null;
+                }
+            }
+            return visualColumn;
+        }), _class_private_field_set(this, _onBeforeCopy, (data, copyableRanges, { columnHeadersCount })=>{
+            if (columnHeadersCount === 0) {
+                return;
+            }
+            for(let rangeIndex = 0; rangeIndex < copyableRanges.length; rangeIndex++){
+                const { startRow, startCol, endRow, endCol } = copyableRanges[rangeIndex];
+                const rowsCount = endRow - startRow + 1;
+                const columnsCount = startCol - endCol + 1;
+                if (startRow >= 0 || columnsCount === 1) {
+                    break;
+                }
+                for(let column = startCol; column <= endCol; column++){
+                    for(let row = startRow; row <= endRow; row++){
+                        const zeroBasedColumnHeaderLevel = rowsCount + row;
+                        const zeroBasedColumnIndex = column - startCol;
+                        if (zeroBasedColumnIndex === 0) {
+                            continue; // eslint-disable-line no-continue
+                        }
+                        const isRoot = _class_private_field_get(this, _stateManager).getHeaderTreeNodeData(row, column)?.isRoot;
+                        if (isRoot === false) {
+                            data[zeroBasedColumnHeaderLevel][zeroBasedColumnIndex] = '';
+                        }
+                    }
+                }
+            }
+        }), _class_private_field_set(this, _onBeforeOnCellMouseDown, (event, coords, TD, controller)=>{
+            _class_private_field_set(this, _rowspanHeaderNavigationContextRow, null);
+            _class_private_field_set(this, _expectedNextKeyboardHighlightCoords, null);
+            const headerNodeData = this._getHeaderTreeNodeDataByCoords(coords);
+            if (headerNodeData) {
+                controller.column = true;
+            }
+        }), _class_private_field_set(this, _onAfterOnCellMouseDown, (event, coords)=>{
+            if (coords.row === null || coords.col === null) {
+                return;
+            }
+            const narrowedCoords = {
+                row: coords.row,
+                col: coords.col
+            };
+            const headerNodeData = this._getHeaderTreeNodeDataByCoords(narrowedCoords);
+            if (!headerNodeData) {
+                return;
+            }
+            _class_private_field_set(this, _focusInitialCoords, {
+                row: coords.row,
+                col: coords.col,
+                clone: ()=>coords.clone()
+            });
+            _class_private_field_set(this, _isColumnsSelectionInProgress, true);
+            const { selection } = this.hot;
+            const currentSelection = selection.isSelected() ? selection.getSelectedRange().current() : null;
+            let columnsToSelect = null;
+            const { columnIndex, origColspan } = headerNodeData;
+            const allowRightClickSelection = !selection.inInSelection(coords);
+            if (event.shiftKey && currentSelection) {
+                if ((coords.col ?? 0) < (currentSelection.from.col ?? 0)) {
+                    columnsToSelect = [
+                        currentSelection.getTopEndCorner().col ?? 0,
+                        columnIndex,
+                        coords.row ?? 0
+                    ];
+                } else if ((coords.col ?? 0) > (currentSelection.from.col ?? 0)) {
+                    columnsToSelect = [
+                        currentSelection.getTopStartCorner().col ?? 0,
+                        columnIndex + origColspan - 1,
+                        coords.row ?? 0
+                    ];
+                } else {
+                    columnsToSelect = [
+                        columnIndex,
+                        columnIndex + origColspan - 1,
+                        coords.row ?? 0
+                    ];
+                }
+            } else if (isLeftClick(event) || isRightClick(event) && allowRightClickSelection || isTouchEvent(event)) {
+                columnsToSelect = [
+                    columnIndex,
+                    columnIndex + origColspan - 1,
+                    coords.row
+                ];
+            }
+            if (columnsToSelect !== null) {
+                selection.selectColumns(...columnsToSelect);
+            }
+        }), _class_private_field_set(this, _onBeforeOnCellMouseOver, (event, coords, TD, controller)=>{
+            if (!this.hot.view.isMouseDown() || controller.column) {
+                return;
+            }
+            const headerNodeData = this._getHeaderTreeNodeDataByCoords(coords);
+            if (!headerNodeData) {
+                return;
+            }
+            const { columnIndex, origColspan } = headerNodeData;
+            const selectedRange = this.hot.getSelectedRangeActive();
+            if (!selectedRange) {
+                return;
+            }
+            const topStartCoords = selectedRange.getTopStartCorner();
+            const bottomEndCoords = selectedRange.getBottomEndCorner();
+            const { from } = selectedRange;
+            controller.column = true;
+            controller.cell = true;
+            const headerLevel = clamp(coords.row ?? 0, -Infinity, -1);
+            let columnsToSelect;
+            if ((coords.col ?? 0) < (from.col ?? 0)) {
+                columnsToSelect = [
+                    bottomEndCoords.col ?? 0,
+                    columnIndex,
+                    headerLevel
+                ];
+            } else if ((coords.col ?? 0) > (from.col ?? 0)) {
+                columnsToSelect = [
+                    topStartCoords.col ?? 0,
+                    columnIndex + origColspan - 1,
+                    headerLevel
+                ];
+            } else {
+                columnsToSelect = [
+                    columnIndex,
+                    columnIndex + origColspan - 1,
+                    headerLevel
+                ];
+            }
+            this.hot.selection.selectColumns(...columnsToSelect);
+        }), _class_private_field_set(this, _onBeforeOnCellMouseUp, ()=>{
+            _class_private_field_set(this, _isColumnsSelectionInProgress, false);
+        }), _class_private_field_set(this, _onBeforeSelectionHighlightSet, ()=>{
+            const { navigableHeaders } = this.hot.getSettings();
+            if (!this.hot.view.isMouseDown() || !_class_private_field_get(this, _isColumnsSelectionInProgress) || !navigableHeaders) {
+                return;
+            }
+            const selectedRange = this.hot.getSelectedRangeLast();
+            if (!selectedRange) {
+                return;
+            }
+            const columnStart = selectedRange.getTopStartCorner().col;
+            const columnEnd = selectedRange.getBottomEndCorner().col;
+            const headerNodeData = _class_private_field_get(this, _stateManager).getHeaderTreeNodeData(_class_private_field_get(this, _focusInitialCoords).row, _class_private_field_get(this, _focusInitialCoords).col);
+            if (!headerNodeData) {
+                return;
+            }
+            const { columnIndex, origColspan } = headerNodeData;
+            selectedRange.setHighlight(_class_private_field_get(this, _focusInitialCoords));
+            if (columnStart !== null && columnEnd !== null && (origColspan > selectedRange.getWidth() || columnIndex < columnStart || columnIndex + origColspan - 1 > columnEnd)) {
+                const headerLevel = _class_private_field_get(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;
+            }
+        }), _class_private_field_set(this, _onModifyTransformStart, (delta)=>{
+            const activeRange = this.hot.getSelectedRangeActive();
+            if (!activeRange) {
+                return;
+            }
+            const { highlight } = activeRange;
+            const { row: expectedRow, col: expectedColumn } = _class_private_field_get(this, _expectedNextKeyboardHighlightCoords) ?? {};
+            if (Number.isInteger(expectedRow) && Number.isInteger(expectedColumn)) {
+                if (highlight.row !== expectedRow || highlight.col !== expectedColumn) {
+                    _class_private_field_set(this, _rowspanHeaderNavigationContextRow, null);
+                }
+            }
+            const highlightRow = highlight.row ?? 0;
+            const highlightCol = highlight.col ?? 0;
+            const initialDeltaRow = delta.row;
+            const initialDeltaColumn = delta.col;
+            let targetColumn = highlightCol + delta.col;
+            let targetRow = highlightRow + delta.row;
+            if (delta.row !== 0 && targetColumn >= 0) {
+                const rowDirection = Math.sign(delta.row);
+                const lowestHeaderRow = -1;
+                const highestHeaderRow = -this.getLayersCount();
+                let adjustedNextRow = targetRow;
+                while(adjustedNextRow <= lowestHeaderRow && adjustedNextRow >= highestHeaderRow){
+                    const { isRowspanPlaceholder } = _class_private_field_get(this, _stateManager).getHeaderSettings(adjustedNextRow, targetColumn) ?? {};
+                    if (!isRowspanPlaceholder) {
+                        break;
+                    }
+                    adjustedNextRow += rowDirection;
+                }
+                delta.row = adjustedNextRow - highlightRow;
+                targetRow = adjustedNextRow;
+            }
+            if (initialDeltaRow === 0 && initialDeltaColumn !== 0 && highlightRow < 0) {
+                if (_class_private_field_get(this, _rowspanHeaderNavigationContextRow) !== null) {
+                    const contextTargetColumn = _class_private_method_get(this, _findNearestNavigableHeaderColumn, findNearestNavigableHeaderColumn).call(this, _class_private_field_get(this, _rowspanHeaderNavigationContextRow), targetColumn, Math.sign(initialDeltaColumn));
+                    if (contextTargetColumn !== null) {
+                        targetColumn = contextTargetColumn;
+                        targetRow = _class_private_field_get(this, _rowspanHeaderNavigationContextRow);
+                    }
+                }
+                if (targetColumn < 0 && initialDeltaColumn < 0 && _class_private_field_get(this, _rowspanHeaderNavigationContextRow) !== null) {
+                    targetRow = _class_private_field_get(this, _rowspanHeaderNavigationContextRow);
+                }
+                const currentHeaderStartColumn = _class_private_field_get(this, _stateManager).findLeftMostColumnIndex(highlightRow, highlightCol);
+                const currentHeaderEndColumn = _class_private_field_get(this, _stateManager).findRightMostColumnIndex(highlightRow, highlightCol);
+                const { isRowspanPlaceholder: isTargetRowspanPlaceholder } = _class_private_field_get(this, _stateManager).getHeaderSettings(targetRow, targetColumn) ?? {};
+                const isTargetInsideCurrentHeader = targetRow === highlightRow && targetColumn >= currentHeaderStartColumn && targetColumn <= currentHeaderEndColumn;
+                const shouldKeepLogicalRowForRowspan = targetRow === highlightRow && isTargetRowspanPlaceholder && initialDeltaColumn > 0 && highlightRow < -1;
+                if (!isTargetInsideCurrentHeader && !shouldKeepLogicalRowForRowspan) {
+                    targetRow = _class_private_method_get(this, _findRenderableHeaderRow, findRenderableHeaderRow).call(this, targetRow, targetColumn);
+                }
+                delta.row = targetRow - highlightRow;
+                const targetHeaderRowspan = _class_private_method_get(this, _getRootHeaderRowspan, getRootHeaderRowspan).call(this, targetRow, targetColumn);
+                if (targetHeaderRowspan > 1 && !Number.isInteger(_class_private_field_get(this, _rowspanHeaderNavigationContextRow))) {
+                    _class_private_field_set(this, _rowspanHeaderNavigationContextRow, resolveRowspanNavigationContextRow(highlightRow, targetColumn, -this.getLayersCount(), (headerRow, visualColumn)=>{
+                        const settings = _class_private_field_get(this, _stateManager).getHeaderSettings(headerRow, visualColumn);
+                        return settings ? {
+                            ...settings,
+                            isRowspanPlaceholder: settings.isRowspanPlaceholder ?? false
+                        } : null;
+                    }));
+                }
+            }
+            const nextCoords = this.hot._createCellCoords(targetRow, targetColumn);
+            const isNestedHeadersRange = nextCoords.isHeader() && (nextCoords.col ?? -1) >= 0;
+            if (!isNestedHeadersRange || initialDeltaRow !== 0) {
+                _class_private_field_set(this, _rowspanHeaderNavigationContextRow, null);
+            }
+            if (isNestedHeadersRange && highlight.row !== null && highlight.col !== null && nextCoords.row !== null && nextCoords.col !== null) {
+                const { isRowspanPlaceholder: isCurrentHeaderRowspanPlaceholderForBounds } = _class_private_field_get(this, _stateManager).getHeaderSettings(highlight.row, highlight.col) ?? {};
+                const { isRowspanPlaceholder: isNextHeaderRowspanPlaceholderForBounds } = _class_private_field_get(this, _stateManager).getHeaderSettings(nextCoords.row, nextCoords.col) ?? {};
+                let visualColumnIndexStart = _class_private_field_get(this, _stateManager).findLeftMostColumnIndex(nextCoords.row, nextCoords.col);
+                let visualColumnIndexEnd = _class_private_field_get(this, _stateManager).findRightMostColumnIndex(nextCoords.row, nextCoords.col);
+                if (isNextHeaderRowspanPlaceholderForBounds) {
+                    const renderableNextHeaderRow = _class_private_method_get(this, _findRenderableHeaderRow, findRenderableHeaderRow).call(this, nextCoords.row, nextCoords.col);
+                    visualColumnIndexStart = _class_private_field_get(this, _stateManager).findLeftMostColumnIndex(renderableNextHeaderRow, nextCoords.col);
+                    visualColumnIndexEnd = _class_private_field_get(this, _stateManager).findRightMostColumnIndex(renderableNextHeaderRow, nextCoords.col);
+                }
+                if (isCurrentHeaderRowspanPlaceholderForBounds) {
+                    const renderableCurrentHeaderRow = _class_private_method_get(this, _findRenderableHeaderRow, findRenderableHeaderRow).call(this, highlight.row, highlight.col);
+                    visualColumnIndexStart = _class_private_field_get(this, _stateManager).findLeftMostColumnIndex(renderableCurrentHeaderRow, highlight.col);
+                    visualColumnIndexEnd = _class_private_field_get(this, _stateManager).findRightMostColumnIndex(renderableCurrentHeaderRow, highlight.col);
+                    if (initialDeltaColumn < 0) {
+                        visualColumnIndexStart = Math.max(visualColumnIndexStart, Math.min(highlight.col, nextCoords.col));
+                    } else if (initialDeltaColumn > 0) {
+                        visualColumnIndexEnd = Math.min(visualColumnIndexEnd, Math.max(highlight.col, 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());
+                        if (isCurrentHeaderRowspanPlaceholderForBounds) {
+                            delta.col += 1;
+                            if (highlight.row < -1) {
+                                delta.row = 1;
+                                delta.col = -(highlight.col + 1);
+                            }
+                        }
+                    } else {
+                        delta.col = Math.max(this.hot.view.countRenderableColumnsInRange(highlight.col, notHiddenColumnIndex) - 1, 1);
+                    }
+                }
+            }
+            _class_private_field_set(this, _expectedNextKeyboardHighlightCoords, {
+                row: highlightRow + delta.row,
+                col: highlightCol + delta.col
+            });
+        }), _class_private_field_set(this, _onBeforeSelectColumns, (from, to, highlight)=>{
+            const headerLevel = from.row;
+            const startNodeData = this._getHeaderTreeNodeDataByCoords({
+                row: headerLevel,
+                col: from.col
+            });
+            const endNodeData = this._getHeaderTreeNodeDataByCoords({
+                row: headerLevel,
+                col: to.col
+            });
+            _class_private_field_set(this, _recentlyHighlightCoords, highlight.clone());
+            if (to.col < from.col) {
+                if (startNodeData) {
+                    from.col = startNodeData.columnIndex + startNodeData.origColspan - 1;
+                }
+                if (endNodeData) {
+                    to.col = endNodeData.columnIndex;
+                }
+            } else if (to.col >= from.col) {
+                if (startNodeData) {
+                    from.col = startNodeData.columnIndex;
+                }
+                if (endNodeData) {
+                    to.col = endNodeData.columnIndex + endNodeData.origColspan - 1;
+                }
+            }
+        }), _class_private_field_set(this, _onAfterGetColumnHeaderRenderers, (renderersArray)=>{
+            if (_class_private_field_get(this, _stateManager).getLayersCount() > 0) {
+                renderersArray.length = 0;
+                for(let headerLayer = 0; headerLayer < _class_private_field_get(this, _stateManager).getLayersCount(); headerLayer++){
+                    renderersArray.push(this.headerRendererFactory(headerLayer));
+                }
+            }
+        }), _class_private_field_set(this, _onAfterViewportColumnCalculatorOverride, (calc)=>{
+            const headerLayersCount = _class_private_field_get(this, _stateManager).getLayersCount();
+            let newStartColumn = calc.startColumn;
+            let nonRenderable = !!headerLayersCount;
+            for(let headerLayer = 0; headerLayer < headerLayersCount; headerLayer++){
+                const startColumn = _class_private_field_get(this, _stateManager).findLeftMostColumnIndex(headerLayer, calc.startColumn);
+                const renderedStartColumn = this.hot.columnIndexMapper.getRenderableFromVisualIndex(startColumn);
+                if (startColumn >= 0) {
+                    nonRenderable = false;
+                }
+                if (isNumeric(renderedStartColumn) && renderedStartColumn !== null && renderedStartColumn < calc.startColumn) {
+                    newStartColumn = renderedStartColumn;
+                    break;
+                }
+            }
+            calc.startColumn = nonRenderable ? _class_private_field_get(this, _stateManager).getHeaderTreeNodeData(0, newStartColumn)?.columnIndex ?? newStartColumn : newStartColumn;
+        }), _class_private_field_set(this, _onModifyColWidth, (width, column)=>{
+            if (this.hot.getSettings().autoColumnSize === false) {
+                return width;
+            }
+            const cachedWidth = this.ghostTable.getWidth(column) ?? 0;
+            return width > cachedWidth ? width : cachedWidth;
+        }), _class_private_field_set(this, _onModifyColumnHeaderHeight, ()=>{
+            if (!_class_private_field_get(this, _hasRowspanHeaders)) {
+                return;
+            }
+            const computedStyle = this.hot.rootWindow.getComputedStyle(this.hot.rootElement);
+            const cellVerticalPadding = Number.parseFloat(computedStyle.getPropertyValue('--ht-cell-vertical-padding'));
+            const lineHeight = Number.parseFloat(computedStyle.getPropertyValue('--ht-line-height'));
+            const baseHeaderHeight = Math.round(cellVerticalPadding * 2 + lineHeight + 1);
+            if (!Number.isFinite(baseHeaderHeight)) {
+                return;
+            }
+            return new Array(this.getLayersCount()).fill(baseHeaderHeight);
+        }), _class_private_field_set(this, _onModifyColumnHeaderValue, (value, visualColumnIndex, headerLevel)=>{
+            const { label } = _class_private_field_get(this, _stateManager).getHeaderTreeNodeData(headerLevel, visualColumnIndex) ?? {
+                label: ''
+            };
+            return label;
+        }), _class_private_field_set(this, _onModifyFocusedElement, (row, column)=>{
+            if (row < 0) {
+                return this.hot.getCell(row, _class_private_field_get(this, _stateManager).findLeftMostColumnIndex(row, column), true) ?? undefined;
+            }
+        }), _class_private_field_set(this, _onInit, ()=>{
+            this.updatePlugin();
+        }), _class_private_field_set(this, _onAfterLoadData, (sourceData, initialLoad)=>{
+            if (!initialLoad) {
+                this.updatePlugin();
+            }
+        }), _class_private_field_set(this, _onAfterCreateCol, (visualColumnIndex, amount)=>{
+            _class_private_field_get(this, _stateManager).insertColumns(visualColumnIndex, amount);
+            _class_private_field_set(this, _updateWidthsMap, true);
+        }), _class_private_field_set(this, _onAfterRemoveCol, (visualColumnIndex, amount)=>{
+            _class_private_field_get(this, _stateManager).removeColumns(visualColumnIndex, amount);
+            _class_private_field_set(this, _updateWidthsMap, true);
+        }), _class_private_field_set(this, _onBeforeViewRender, ()=>{
+            if (_class_private_field_get(this, _updateWidthsMap)) {
+                this.ghostTable.setLayersCount(this.getLayersCount()).buildWidthsMap();
+                _class_private_field_set(this, _updateWidthsMap, false);
+            }
         });
     }
 }
+function applyColspan(TH, colspan, visualColumnIndex, renderedColumnIndex, fixedColumnsStart) {
+    if (colspan === undefined || colspan <= 1) {
+        return;
+    }
+    const { wtOverlays } = this.hot.view._wt;
+    const isTopInlineStartOverlay = wtOverlays.topInlineStartCornerOverlay?.clone?.wtTable.THEAD?.contains(TH);
+    const isInlineStartOverlay = wtOverlays.inlineStartOverlay?.clone?.wtTable.THEAD?.contains(TH);
+    const isTopOverlay = wtOverlays.topOverlay?.clone?.wtTable.THEAD?.contains(TH);
+    if (isTopOverlay && visualColumnIndex < fixedColumnsStart) {
+        addClass(TH, 'hiddenHeaderText');
+    }
+    const correctedColspan = isTopInlineStartOverlay || isInlineStartOverlay ? Math.min(colspan, fixedColumnsStart - renderedColumnIndex) : colspan;
+    if (correctedColspan > 1) {
+        TH.setAttribute('colspan', String(correctedColspan));
+    }
+}
+function applyRowspan(TH, rowspan, headerLevel) {
+    if (rowspan === undefined || rowspan <= 1) {
+        return;
+    }
+    const isBottomMostRowspanHeader = headerLevel + rowspan === this.getLayersCount();
+    addClass(TH, 'htRowspanHeader');
+    if (isBottomMostRowspanHeader) {
+        addClass(TH, 'htRowspanBottomLevel');
+    }
+    TH.setAttribute('rowspan', String(rowspan));
+}
 function findRenderableHeaderRow(headerRow, visualColumnIndex) {
     const highestHeaderRow = -this.getLayersCount();
     for(let row = headerRow; row >= highestHeaderRow; row--){
@@ -720,396 +1147,3 @@ function findNearestNavigableHeaderColumn(headerRow, visualColumnIndex, directio
     }
     return null;
 }
-function onBeforeViewportScrollHorizontally(visualColumn, snapping) {
-    const selection = this.hot.getSelectedRangeActive();
-    if (!selection) {
-        return visualColumn;
-    }
-    const { highlight } = selection;
-    const { navigableHeaders } = this.hot.getSettings();
-    const isSelectedByColumnHeader = this.hot.selection.isSelectedByColumnHeader();
-    const highlightRow = navigableHeaders ? highlight.row : _class_private_field_get(this, _recentlyHighlightCoords)?.row;
-    const highlightColumn = isSelectedByColumnHeader ? visualColumn : highlight.col;
-    const isNestedHeadersRange = highlightRow < 0 && highlightColumn >= 0;
-    _class_private_field_set(this, _recentlyHighlightCoords, null);
-    if (!isNestedHeadersRange) {
-        return visualColumn;
-    }
-    const firstVisibleColumn = this.hot.getFirstFullyVisibleColumn();
-    const lastVisibleColumn = this.hot.getLastFullyVisibleColumn();
-    const viewportWidth = lastVisibleColumn - firstVisibleColumn + 1;
-    const mostLeftColumnIndex = _class_private_field_get(this, _stateManager).findLeftMostColumnIndex(highlightRow, highlightColumn);
-    const mostRightColumnIndex = _class_private_field_get(this, _stateManager).findRightMostColumnIndex(highlightRow, highlightColumn);
-    const headerWidth = mostRightColumnIndex - mostLeftColumnIndex + 1;
-    // scroll the viewport always to the left when the header is wider than the viewport
-    if (mostLeftColumnIndex < firstVisibleColumn && mostRightColumnIndex > lastVisibleColumn) {
-        return mostLeftColumnIndex;
-    }
-    if (isSelectedByColumnHeader) {
-        let scrollColumnIndex = null;
-        if (mostLeftColumnIndex >= firstVisibleColumn && mostRightColumnIndex > lastVisibleColumn) {
-            if (headerWidth > viewportWidth) {
-                snapping.value = 'start';
-                scrollColumnIndex = mostLeftColumnIndex;
-            } else {
-                snapping.value = 'end';
-                scrollColumnIndex = mostRightColumnIndex;
-            }
-        } else if (mostLeftColumnIndex < firstVisibleColumn && mostRightColumnIndex <= lastVisibleColumn) {
-            if (headerWidth > viewportWidth) {
-                snapping.value = 'end';
-                scrollColumnIndex = mostRightColumnIndex;
-            } else {
-                snapping.value = 'start';
-                scrollColumnIndex = mostLeftColumnIndex;
-            }
-        }
-        return scrollColumnIndex;
-    }
-    return mostLeftColumnIndex <= firstVisibleColumn ? mostLeftColumnIndex : mostRightColumnIndex;
-}
-function onBeforeHighlightingColumnHeader(visualColumn, headerLevel, highlightMeta) {
-    const headerNodeData = _class_private_field_get(this, _stateManager).getHeaderTreeNodeData(headerLevel, visualColumn);
-    if (!headerNodeData) {
-        return visualColumn;
-    }
-    const { columnCursor, selectionType, selectionWidth } = highlightMeta;
-    const { isRoot, colspan } = _class_private_field_get(this, _stateManager).getHeaderSettings(headerLevel, visualColumn);
-    if (selectionType === HEADER_TYPE) {
-        if (!isRoot) {
-            return headerNodeData.columnIndex;
-        }
-    } else if (selectionType === ACTIVE_HEADER_TYPE) {
-        if (colspan > selectionWidth - columnCursor || !isRoot) {
-            // Prevents adding any CSS class names to the TH element
-            return null;
-        }
-    }
-    return visualColumn;
-}
-function onBeforeCopy(data, copyableRanges, { columnHeadersCount }) {
-    if (columnHeadersCount === 0) {
-        return;
-    }
-    for(let rangeIndex = 0; rangeIndex < copyableRanges.length; rangeIndex++){
-        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++){
-                const zeroBasedColumnHeaderLevel = rowsCount + row;
-                const zeroBasedColumnIndex = column - startCol;
-                if (zeroBasedColumnIndex === 0) {
-                    continue; // eslint-disable-line no-continue
-                }
-                const isRoot = _class_private_field_get(this, _stateManager).getHeaderTreeNodeData(row, column)?.isRoot;
-                if (isRoot === false) {
-                    data[zeroBasedColumnHeaderLevel][zeroBasedColumnIndex] = '';
-                }
-            }
-        }
-    }
-}
-function onBeforeOnCellMouseDown(event, coords, TD, controller) {
-    _class_private_field_set(this, _rowspanHeaderNavigationContextRow, null);
-    _class_private_field_set(this, _expectedNextKeyboardHighlightCoords, null);
-    const headerNodeData = this._getHeaderTreeNodeDataByCoords(coords);
-    if (headerNodeData) {
-        // Block the Selection module in controlling how the columns are selected. Pass the
-        // responsibility of the column selection to this plugin (see "onAfterOnCellMouseDown" hook).
-        controller.column = true;
-    }
-}
-function onAfterOnCellMouseDown(event, coords) {
-    const headerNodeData = this._getHeaderTreeNodeDataByCoords(coords);
-    if (!headerNodeData) {
-        return;
-    }
-    _class_private_field_set(this, _focusInitialCoords, coords.clone());
-    _class_private_field_set(this, _isColumnsSelectionInProgress, true);
-    const { selection } = this.hot;
-    const currentSelection = selection.isSelected() ? selection.getSelectedRange().current() : null;
-    const columnsToSelect = [];
-    const { columnIndex, origColspan } = headerNodeData;
-    // The Selection module doesn't allow it to extend its behavior easily. That's why here we need
-    // to re-implement the "click" and "shift" behavior. As a workaround, the logic for the nested
-    // headers must implement a similar logic as in the original Selection handler
-    // (see src/selection/mouseEventHandler.js).
-    const allowRightClickSelection = !selection.inInSelection(coords);
-    if (event.shiftKey && currentSelection) {
-        if (coords.col < currentSelection.from.col) {
-            columnsToSelect.push(currentSelection.getTopEndCorner().col, columnIndex, coords.row);
-        } else if (coords.col > currentSelection.from.col) {
-            columnsToSelect.push(currentSelection.getTopStartCorner().col, columnIndex + origColspan - 1, coords.row);
-        } else {
-            columnsToSelect.push(columnIndex, columnIndex + origColspan - 1, coords.row);
-        }
-    } else if (isLeftClick(event) || isRightClick(event) && allowRightClickSelection || isTouchEvent(event)) {
-        columnsToSelect.push(columnIndex, columnIndex + origColspan - 1, coords.row);
-    }
-    // The plugin takes control of how the columns are selected.
-    selection.selectColumns(...columnsToSelect);
-}
-function onBeforeOnCellMouseOver(event, coords, TD, controller) {
-    if (!this.hot.view.isMouseDown() || controller.column) {
-        return;
-    }
-    const headerNodeData = this._getHeaderTreeNodeDataByCoords(coords);
-    if (!headerNodeData) {
-        return;
-    }
-    const { columnIndex, origColspan } = headerNodeData;
-    const selectedRange = this.hot.getSelectedRangeActive();
-    const topStartCoords = selectedRange.getTopStartCorner();
-    const bottomEndCoords = selectedRange.getBottomEndCorner();
-    const { from } = selectedRange;
-    // Block the Selection module in controlling how the columns and cells are selected.
-    // From now on, the plugin is responsible for the selection.
-    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, headerLevel);
-    } else if (coords.col > from.col) {
-        columnsToSelect.push(topStartCoords.col, columnIndex + origColspan - 1, headerLevel);
-    } else {
-        columnsToSelect.push(columnIndex, columnIndex + origColspan - 1, headerLevel);
-    }
-    this.hot.selection.selectColumns(...columnsToSelect);
-}
-function onBeforeOnCellMouseUp() {
-    _class_private_field_set(this, _isColumnsSelectionInProgress, false);
-}
-function onBeforeSelectionHighlightSet() {
-    const { navigableHeaders } = this.hot.getSettings();
-    if (!this.hot.view.isMouseDown() || !_class_private_field_get(this, _isColumnsSelectionInProgress) || !navigableHeaders) {
-        return;
-    }
-    const selectedRange = this.hot.getSelectedRangeLast();
-    const columnStart = selectedRange.getTopStartCorner().col;
-    const columnEnd = selectedRange.getBottomEndCorner().col;
-    const { columnIndex, origColspan } = _class_private_field_get(this, _stateManager).getHeaderTreeNodeData(_class_private_field_get(this, _focusInitialCoords).row, _class_private_field_get(this, _focusInitialCoords).col);
-    selectedRange.setHighlight(_class_private_field_get(this, _focusInitialCoords));
-    if (origColspan > selectedRange.getWidth() || columnIndex < columnStart || columnIndex + origColspan - 1 > columnEnd) {
-        const headerLevel = _class_private_field_get(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;
-    }
-}
-function onModifyTransformStart(delta) {
-    const { highlight } = this.hot.getSelectedRangeActive();
-    const { row: expectedRow, col: expectedColumn } = _class_private_field_get(this, _expectedNextKeyboardHighlightCoords) ?? {};
-    if (Number.isInteger(expectedRow) && Number.isInteger(expectedColumn)) {
-        if (highlight.row !== expectedRow || highlight.col !== expectedColumn) {
-            _class_private_field_set(this, _rowspanHeaderNavigationContextRow, null);
-        }
-    }
-    const initialDeltaRow = delta.row;
-    const initialDeltaColumn = delta.col;
-    let targetColumn = highlight.col + delta.col;
-    let targetRow = highlight.row + delta.row;
-    if (delta.row !== 0 && targetColumn >= 0) {
-        const rowDirection = Math.sign(delta.row);
-        const lowestHeaderRow = -1;
-        const highestHeaderRow = -this.getLayersCount();
-        let adjustedNextRow = targetRow;
-        while(adjustedNextRow <= lowestHeaderRow && adjustedNextRow >= highestHeaderRow){
-            const { isRowspanPlaceholder } = _class_private_field_get(this, _stateManager).getHeaderSettings(adjustedNextRow, targetColumn) ?? {};
-            if (!isRowspanPlaceholder) {
-                break;
-            }
-            adjustedNextRow += rowDirection;
-        }
-        delta.row = adjustedNextRow - highlight.row;
-        targetRow = adjustedNextRow;
-    }
-    if (initialDeltaRow === 0 && initialDeltaColumn !== 0 && highlight.row < 0) {
-        if (Number.isInteger(_class_private_field_get(this, _rowspanHeaderNavigationContextRow))) {
-            const contextTargetColumn = _class_private_method_get(this, _findNearestNavigableHeaderColumn, findNearestNavigableHeaderColumn).call(this, _class_private_field_get(this, _rowspanHeaderNavigationContextRow), targetColumn, Math.sign(initialDeltaColumn));
-            if (contextTargetColumn !== null) {
-                targetColumn = contextTargetColumn;
-                targetRow = _class_private_field_get(this, _rowspanHeaderNavigationContextRow);
-            }
-        }
-        if (targetColumn < 0 && initialDeltaColumn < 0 && Number.isInteger(_class_private_field_get(this, _rowspanHeaderNavigationContextRow))) {
-            targetRow = _class_private_field_get(this, _rowspanHeaderNavigationContextRow);
-        }
-        const currentHeaderStartColumn = _class_private_field_get(this, _stateManager).findLeftMostColumnIndex(highlight.row, highlight.col);
-        const currentHeaderEndColumn = _class_private_field_get(this, _stateManager).findRightMostColumnIndex(highlight.row, highlight.col);
-        const { isRowspanPlaceholder: isTargetRowspanPlaceholder } = _class_private_field_get(this, _stateManager).getHeaderSettings(targetRow, targetColumn) ?? {};
-        const isTargetInsideCurrentHeader = targetRow === highlight.row && targetColumn >= currentHeaderStartColumn && targetColumn <= currentHeaderEndColumn;
-        const shouldKeepLogicalRowForRowspan = targetRow === highlight.row && isTargetRowspanPlaceholder && initialDeltaColumn > 0 && highlight.row < -1;
-        if (!isTargetInsideCurrentHeader && !shouldKeepLogicalRowForRowspan) {
-            targetRow = _class_private_method_get(this, _findRenderableHeaderRow, findRenderableHeaderRow).call(this, targetRow, targetColumn);
-        }
-        delta.row = targetRow - highlight.row;
-        const targetHeaderRowspan = _class_private_method_get(this, _getRootHeaderRowspan, getRootHeaderRowspan).call(this, targetRow, targetColumn);
-        if (targetHeaderRowspan > 1 && !Number.isInteger(_class_private_field_get(this, _rowspanHeaderNavigationContextRow))) {
-            _class_private_field_set(this, _rowspanHeaderNavigationContextRow, resolveRowspanNavigationContextRow(highlight.row, targetColumn, -this.getLayersCount(), (headerRow, visualColumn)=>_class_private_field_get(this, _stateManager).getHeaderSettings(headerRow, visualColumn)));
-        }
-    }
-    const nextCoords = this.hot._createCellCoords(targetRow, targetColumn);
-    const isNestedHeadersRange = nextCoords.isHeader() && nextCoords.col >= 0;
-    if (!isNestedHeadersRange || initialDeltaRow !== 0) {
-        _class_private_field_set(this, _rowspanHeaderNavigationContextRow, null);
-    }
-    if (isNestedHeadersRange) {
-        const { isRowspanPlaceholder: isCurrentHeaderRowspanPlaceholderForBounds } = _class_private_field_get(this, _stateManager).getHeaderSettings(highlight.row, highlight.col) ?? {};
-        const { isRowspanPlaceholder: isNextHeaderRowspanPlaceholderForBounds } = _class_private_field_get(this, _stateManager).getHeaderSettings(nextCoords.row, nextCoords.col) ?? {};
-        let visualColumnIndexStart = _class_private_field_get(this, _stateManager).findLeftMostColumnIndex(nextCoords.row, nextCoords.col);
-        let visualColumnIndexEnd = _class_private_field_get(this, _stateManager).findRightMostColumnIndex(nextCoords.row, nextCoords.col);
-        if (isNextHeaderRowspanPlaceholderForBounds) {
-            const renderableNextHeaderRow = _class_private_method_get(this, _findRenderableHeaderRow, findRenderableHeaderRow).call(this, nextCoords.row, nextCoords.col);
-            visualColumnIndexStart = _class_private_field_get(this, _stateManager).findLeftMostColumnIndex(renderableNextHeaderRow, nextCoords.col);
-            visualColumnIndexEnd = _class_private_field_get(this, _stateManager).findRightMostColumnIndex(renderableNextHeaderRow, nextCoords.col);
-        }
-        if (isCurrentHeaderRowspanPlaceholderForBounds) {
-            const renderableCurrentHeaderRow = _class_private_method_get(this, _findRenderableHeaderRow, findRenderableHeaderRow).call(this, highlight.row, highlight.col);
-            visualColumnIndexStart = _class_private_field_get(this, _stateManager).findLeftMostColumnIndex(renderableCurrentHeaderRow, highlight.col);
-            visualColumnIndexEnd = _class_private_field_get(this, _stateManager).findRightMostColumnIndex(renderableCurrentHeaderRow, highlight.col);
-            if (initialDeltaColumn < 0) {
-                visualColumnIndexStart = Math.max(visualColumnIndexStart, Math.min(highlight.col, nextCoords.col));
-            } else if (initialDeltaColumn > 0) {
-                visualColumnIndexEnd = Math.min(visualColumnIndexEnd, Math.max(highlight.col, 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());
-                if (isCurrentHeaderRowspanPlaceholderForBounds) {
-                    delta.col += 1;
-                    if (highlight.row < -1) {
-                        delta.row = 1;
-                        delta.col = -(highlight.col + 1);
-                    }
-                }
-            } else {
-                delta.col = Math.max(this.hot.view.countRenderableColumnsInRange(highlight.col, notHiddenColumnIndex) - 1, 1);
-            }
-        }
-    }
-    _class_private_field_set(this, _expectedNextKeyboardHighlightCoords, {
-        row: highlight.row + delta.row,
-        col: highlight.col + delta.col
-    });
-}
-function onBeforeSelectColumns(from, to, highlight) {
-    const headerLevel = from.row;
-    const startNodeData = this._getHeaderTreeNodeDataByCoords({
-        row: headerLevel,
-        col: from.col
-    });
-    const endNodeData = this._getHeaderTreeNodeDataByCoords({
-        row: headerLevel,
-        col: to.col
-    });
-    _class_private_field_set(this, _recentlyHighlightCoords, highlight.clone());
-    if (to.col < from.col) {
-        if (startNodeData) {
-            from.col = startNodeData.columnIndex + startNodeData.origColspan - 1;
-        }
-        if (endNodeData) {
-            to.col = endNodeData.columnIndex;
-        }
-    } else if (to.col >= from.col) {
-        if (startNodeData) {
-            from.col = startNodeData.columnIndex;
-        }
-        if (endNodeData) {
-            to.col = endNodeData.columnIndex + endNodeData.origColspan - 1;
-        }
-    }
-}
-function onAfterGetColumnHeaderRenderers(renderersArray) {
-    if (_class_private_field_get(this, _stateManager).getLayersCount() > 0) {
-        renderersArray.length = 0;
-        for(let headerLayer = 0; headerLayer < _class_private_field_get(this, _stateManager).getLayersCount(); headerLayer++){
-            renderersArray.push(this.headerRendererFactory(headerLayer));
-        }
-    }
-}
-function onAfterViewportColumnCalculatorOverride(calc) {
-    const headerLayersCount = _class_private_field_get(this, _stateManager).getLayersCount();
-    let newStartColumn = calc.startColumn;
-    let nonRenderable = !!headerLayersCount;
-    for(let headerLayer = 0; headerLayer < headerLayersCount; headerLayer++){
-        const startColumn = _class_private_field_get(this, _stateManager).findLeftMostColumnIndex(headerLayer, calc.startColumn);
-        const renderedStartColumn = this.hot.columnIndexMapper.getRenderableFromVisualIndex(startColumn);
-        // If any of the headers for that column index is rendered, all of them should be rendered properly, see
-        // comment below.
-        if (startColumn >= 0) {
-            nonRenderable = false;
-        }
-        // `renderedStartColumn` can be `null` if the leftmost columns are hidden. In that case -> ignore that header
-        // level, as it should be handled by the "parent" header
-        if (isNumeric(renderedStartColumn) && renderedStartColumn < calc.startColumn) {
-            newStartColumn = renderedStartColumn;
-            break;
-        }
-    }
-    // If no headers for the provided column index are renderable, start rendering from the beginning of the upmost
-    // header for that position.
-    calc.startColumn = nonRenderable ? _class_private_field_get(this, _stateManager).getHeaderTreeNodeData(0, newStartColumn).columnIndex : newStartColumn;
-}
-function onModifyColWidth(width, column) {
-    const cachedWidth = this.ghostTable.getWidth(column);
-    return width > cachedWidth ? width : cachedWidth;
-}
-function onModifyColumnHeaderHeight() {
-    if (!_class_private_field_get(this, _hasRowspanHeaders)) {
-        return;
-    }
-    const computedStyle = this.hot.rootWindow.getComputedStyle(this.hot.rootElement);
-    const cellVerticalPadding = Number.parseFloat(computedStyle.getPropertyValue('--ht-cell-vertical-padding'));
-    const lineHeight = Number.parseFloat(computedStyle.getPropertyValue('--ht-line-height'));
-    const baseHeaderHeight = Math.round(cellVerticalPadding * 2 + lineHeight + 1);
-    if (!Number.isFinite(baseHeaderHeight)) {
-        return;
-    }
-    return new Array(this.getLayersCount()).fill(baseHeaderHeight);
-}
-function onModifyColumnHeaderValue(value, visualColumnIndex, headerLevel) {
-    const { label } = _class_private_field_get(this, _stateManager).getHeaderTreeNodeData(headerLevel, visualColumnIndex) ?? {
-        label: ''
-    };
-    return label;
-}
-function onModifyFocusedElement(row, column) {
-    if (row < 0) {
-        return this.hot.getCell(row, _class_private_field_get(this, _stateManager).findLeftMostColumnIndex(row, column), true);
-    }
-}
-function onInit() {
-    // @TODO: Workaround for broken plugin initialization abstraction.
-    this.updatePlugin();
-}
-function onAfterLoadData(sourceData, initialLoad) {
-    if (!initialLoad) {
-        this.updatePlugin();
-    }
-}
-function onBeforeViewRender() {
-    if (_class_private_field_get(this, _updateWidthsMap)) {
-        this.ghostTable.setLayersCount(this.getLayersCount()).buildWidthsMap();
-        _class_private_field_set(this, _updateWidthsMap, false);
-    }
-}