handsontable 11.1.0 → 12.1.0

package/plugins/nestedHeaders/nestedHeaders.js

@@ -69,13 +69,13 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
+function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
 
 function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -85,7 +85,7 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -106,6 +106,8 @@ function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) {
 var PLUGIN_KEY = 'nestedHeaders';
 exports.PLUGIN_KEY = PLUGIN_KEY;
 var PLUGIN_PRIORITY = 280;
+/* eslint-disable jsdoc/require-description-complete-sentence */
+
 /**
  * @plugin NestedHeaders
  * @class NestedHeaders
@@ -166,7 +168,9 @@ var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
       value: null
     });
 
-    _defineProperty(_assertThisInitialized(_this), "ghostTable", new _ghostTable.default(_assertThisInitialized(_this)));
+    _defineProperty(_assertThisInitialized(_this), "ghostTable", new _ghostTable.default(_this.hot, function (row, column) {
+      return _this.getHeaderSettings(row, column);
+    }));
 
     _defineProperty(_assertThisInitialized(_this), "detectedOverlappedHeaders", false);
 
@@ -237,7 +241,10 @@ var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
       this.updatePlugin(); // @TODO: Workaround for broken plugin initialization abstraction.
     }
     /**
-     * Updates the plugin state. This method is executed when {@link Core#updateSettings} is invoked.
+     * 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)
      */
 
   }, {
@@ -287,10 +294,12 @@ var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
               _classPrivateFieldGet(_this3, _stateManager).triggerColumnModification(actionName, columnIndex);
             }
           });
+
+          _this3.ghostTable.buildWidthsMap();
         }));
       }
 
-      this.ghostTable.buildWidthsMapper();
+      this.ghostTable.setLayersCount(this.getLayersCount()).buildWidthsMap();
 
       _get(_getPrototypeOf(NestedHeaders.prototype), "updatePlugin", this).call(this);
     }
@@ -366,11 +375,11 @@ var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
         return;
       }
 
-      var wt = this.hot.view.wt;
+      var wt = this.hot.view._wt;
       var headerLevels = wt.getSetting('columnHeaders').length;
       var mainHeaders = wt.wtTable.THEAD;
       var topHeaders = wt.wtOverlays.topOverlay.clone.wtTable.THEAD;
-      var topLeftCornerHeaders = wt.wtOverlays.topLeftCornerOverlay ? wt.wtOverlays.topLeftCornerOverlay.clone.wtTable.THEAD : null;
+      var topLeftCornerHeaders = wt.wtOverlays.topInlineStartCornerOverlay ? wt.wtOverlays.topInlineStartCornerOverlay.clone.wtTable.THEAD : null;
 
       for (var i = 0; i < headerLevels; i++) {
         var masterLevel = mainHeaders.childNodes[i];
@@ -413,7 +422,8 @@ var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
     value: function headerRendererFactory(headerLevel) {
       var _this4 = this;
 
-      var fixedColumnsLeft = this.hot.view.wt.getSetting('fixedColumnsLeft');
+      var fixedColumnsStart = this.hot.view._wt.getSetting('fixedColumnsStart');
+
       return function (renderedColumnIndex, TH) {
         var _classPrivateFieldGet2;
 
@@ -441,12 +451,13 @@ var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
         if (isPlaceholder || isHidden) {
           (0, _element.addClass)(TH, 'hiddenHeader');
         } else if (colspan > 1) {
-          var _view$wt$wtOverlays$t, _view$wt$wtOverlays$l;
+          var _wtOverlays$topInline, _wtOverlays$inlineSta;
 
-          var isTopLeftOverlay = (_view$wt$wtOverlays$t = view.wt.wtOverlays.topLeftCornerOverlay) === null || _view$wt$wtOverlays$t === void 0 ? void 0 : _view$wt$wtOverlays$t.clone.wtTable.THEAD.contains(TH);
-          var isLeftOverlay = (_view$wt$wtOverlays$l = view.wt.wtOverlays.leftOverlay) === null || _view$wt$wtOverlays$l === void 0 ? void 0 : _view$wt$wtOverlays$l.clone.wtTable.THEAD.contains(TH); // Check if there is a fixed column enabled, if so then reduce colspan to fixed column width.
+          var wtOverlays = view._wt.wtOverlays;
+          var isTopInlineStartOverlay = (_wtOverlays$topInline = wtOverlays.topInlineStartCornerOverlay) === null || _wtOverlays$topInline === void 0 ? void 0 : _wtOverlays$topInline.clone.wtTable.THEAD.contains(TH);
+          var isInlineStartOverlay = (_wtOverlays$inlineSta = wtOverlays.inlineStartOverlay) === null || _wtOverlays$inlineSta === void 0 ? void 0 : _wtOverlays$inlineSta.clone.wtTable.THEAD.contains(TH); // Check if there is a fixed column enabled, if so then reduce colspan to fixed column width.
 
-          var correctedColspan = isTopLeftOverlay || isLeftOverlay ? Math.min(colspan, fixedColumnsLeft - renderedColumnIndex) : colspan;
+          var correctedColspan = isTopInlineStartOverlay || isInlineStartOverlay ? Math.min(colspan, fixedColumnsStart - renderedColumnIndex) : colspan;
 
           if (correctedColspan > 1) {
             TH.setAttribute('colspan', correctedColspan);
@@ -558,9 +569,9 @@ var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
 
       if (event.shiftKey && currentSelection) {
         if (coords.col < currentSelection.from.col) {
-          columnsToSelect.push(currentSelection.getTopRightCorner().col, columnIndex, coords.row);
+          columnsToSelect.push(currentSelection.getTopEndCorner().col, columnIndex, coords.row);
         } else if (coords.col > currentSelection.from.col) {
-          columnsToSelect.push(currentSelection.getTopLeftCorner().col, columnIndex + origColspan - 1, coords.row);
+          columnsToSelect.push(currentSelection.getTopStartCorner().col, columnIndex + origColspan - 1, coords.row);
         } else {
           columnsToSelect.push(columnIndex, columnIndex + origColspan - 1, coords.row);
         }
@@ -600,8 +611,8 @@ var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
       var columnIndex = headerNodeData.columnIndex,
           origColspan = headerNodeData.origColspan;
       var selectedRange = this.hot.getSelectedRangeLast();
-      var topLeftCoords = selectedRange.getTopLeftCorner();
-      var bottomRightCoords = selectedRange.getBottomRightCorner();
+      var topStartCoords = selectedRange.getTopStartCorner();
+      var bottomEndCoords = selectedRange.getBottomEndCorner();
       var from = selectedRange.from; // Block the Selection module in controlling how the columns and cells are selected.
       // From now on, the plugin is responsible for the selection.
 
@@ -610,9 +621,9 @@ var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
       var columnsToSelect = [];
 
       if (coords.col < from.col) {
-        columnsToSelect.push(bottomRightCoords.col, columnIndex);
+        columnsToSelect.push(bottomEndCoords.col, columnIndex);
       } else if (coords.col > from.col) {
-        columnsToSelect.push(topLeftCoords.col, columnIndex + origColspan - 1);
+        columnsToSelect.push(topStartCoords.col, columnIndex + origColspan - 1);
       } else {
         columnsToSelect.push(columnIndex, columnIndex + origColspan - 1);
       }
@@ -686,7 +697,7 @@ var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "onModifyColWidth",
     value: function onModifyColWidth(width, column) {
-      var cachedWidth = this.ghostTable.widthsCache[column];
+      var cachedWidth = this.ghostTable.getWidth(column);
       return width > cachedWidth ? width : cachedWidth;
     }
     /**

package/plugins/nestedHeaders/nestedHeaders.mjs

@@ -29,13 +29,13 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
+function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
 
 function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -45,7 +45,7 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -74,6 +74,8 @@ import StateManager from "./stateManager/index.mjs";
 import GhostTable from "./utils/ghostTable.mjs";
 export var PLUGIN_KEY = 'nestedHeaders';
 export var PLUGIN_PRIORITY = 280;
+/* eslint-disable jsdoc/require-description-complete-sentence */
+
 /**
  * @plugin NestedHeaders
  * @class NestedHeaders
@@ -132,7 +134,9 @@ export var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
       value: null
     });
 
-    _defineProperty(_assertThisInitialized(_this), "ghostTable", new GhostTable(_assertThisInitialized(_this)));
+    _defineProperty(_assertThisInitialized(_this), "ghostTable", new GhostTable(_this.hot, function (row, column) {
+      return _this.getHeaderSettings(row, column);
+    }));
 
     _defineProperty(_assertThisInitialized(_this), "detectedOverlappedHeaders", false);
 
@@ -203,7 +207,10 @@ export var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
       this.updatePlugin(); // @TODO: Workaround for broken plugin initialization abstraction.
     }
     /**
-     * Updates the plugin state. This method is executed when {@link Core#updateSettings} is invoked.
+     * 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)
      */
 
   }, {
@@ -253,10 +260,12 @@ export var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
               _classPrivateFieldGet(_this3, _stateManager).triggerColumnModification(actionName, columnIndex);
             }
           });
+
+          _this3.ghostTable.buildWidthsMap();
         }));
       }
 
-      this.ghostTable.buildWidthsMapper();
+      this.ghostTable.setLayersCount(this.getLayersCount()).buildWidthsMap();
 
       _get(_getPrototypeOf(NestedHeaders.prototype), "updatePlugin", this).call(this);
     }
@@ -332,11 +341,11 @@ export var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
         return;
       }
 
-      var wt = this.hot.view.wt;
+      var wt = this.hot.view._wt;
       var headerLevels = wt.getSetting('columnHeaders').length;
       var mainHeaders = wt.wtTable.THEAD;
       var topHeaders = wt.wtOverlays.topOverlay.clone.wtTable.THEAD;
-      var topLeftCornerHeaders = wt.wtOverlays.topLeftCornerOverlay ? wt.wtOverlays.topLeftCornerOverlay.clone.wtTable.THEAD : null;
+      var topLeftCornerHeaders = wt.wtOverlays.topInlineStartCornerOverlay ? wt.wtOverlays.topInlineStartCornerOverlay.clone.wtTable.THEAD : null;
 
       for (var i = 0; i < headerLevels; i++) {
         var masterLevel = mainHeaders.childNodes[i];
@@ -379,7 +388,8 @@ export var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
     value: function headerRendererFactory(headerLevel) {
       var _this4 = this;
 
-      var fixedColumnsLeft = this.hot.view.wt.getSetting('fixedColumnsLeft');
+      var fixedColumnsStart = this.hot.view._wt.getSetting('fixedColumnsStart');
+
       return function (renderedColumnIndex, TH) {
         var _classPrivateFieldGet2;
 
@@ -407,12 +417,13 @@ export var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
         if (isPlaceholder || isHidden) {
           addClass(TH, 'hiddenHeader');
         } else if (colspan > 1) {
-          var _view$wt$wtOverlays$t, _view$wt$wtOverlays$l;
+          var _wtOverlays$topInline, _wtOverlays$inlineSta;
 
-          var isTopLeftOverlay = (_view$wt$wtOverlays$t = view.wt.wtOverlays.topLeftCornerOverlay) === null || _view$wt$wtOverlays$t === void 0 ? void 0 : _view$wt$wtOverlays$t.clone.wtTable.THEAD.contains(TH);
-          var isLeftOverlay = (_view$wt$wtOverlays$l = view.wt.wtOverlays.leftOverlay) === null || _view$wt$wtOverlays$l === void 0 ? void 0 : _view$wt$wtOverlays$l.clone.wtTable.THEAD.contains(TH); // Check if there is a fixed column enabled, if so then reduce colspan to fixed column width.
+          var wtOverlays = view._wt.wtOverlays;
+          var isTopInlineStartOverlay = (_wtOverlays$topInline = wtOverlays.topInlineStartCornerOverlay) === null || _wtOverlays$topInline === void 0 ? void 0 : _wtOverlays$topInline.clone.wtTable.THEAD.contains(TH);
+          var isInlineStartOverlay = (_wtOverlays$inlineSta = wtOverlays.inlineStartOverlay) === null || _wtOverlays$inlineSta === void 0 ? void 0 : _wtOverlays$inlineSta.clone.wtTable.THEAD.contains(TH); // Check if there is a fixed column enabled, if so then reduce colspan to fixed column width.
 
-          var correctedColspan = isTopLeftOverlay || isLeftOverlay ? Math.min(colspan, fixedColumnsLeft - renderedColumnIndex) : colspan;
+          var correctedColspan = isTopInlineStartOverlay || isInlineStartOverlay ? Math.min(colspan, fixedColumnsStart - renderedColumnIndex) : colspan;
 
           if (correctedColspan > 1) {
             TH.setAttribute('colspan', correctedColspan);
@@ -524,9 +535,9 @@ export var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
 
       if (event.shiftKey && currentSelection) {
         if (coords.col < currentSelection.from.col) {
-          columnsToSelect.push(currentSelection.getTopRightCorner().col, columnIndex, coords.row);
+          columnsToSelect.push(currentSelection.getTopEndCorner().col, columnIndex, coords.row);
         } else if (coords.col > currentSelection.from.col) {
-          columnsToSelect.push(currentSelection.getTopLeftCorner().col, columnIndex + origColspan - 1, coords.row);
+          columnsToSelect.push(currentSelection.getTopStartCorner().col, columnIndex + origColspan - 1, coords.row);
         } else {
           columnsToSelect.push(columnIndex, columnIndex + origColspan - 1, coords.row);
         }
@@ -566,8 +577,8 @@ export var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
       var columnIndex = headerNodeData.columnIndex,
           origColspan = headerNodeData.origColspan;
       var selectedRange = this.hot.getSelectedRangeLast();
-      var topLeftCoords = selectedRange.getTopLeftCorner();
-      var bottomRightCoords = selectedRange.getBottomRightCorner();
+      var topStartCoords = selectedRange.getTopStartCorner();
+      var bottomEndCoords = selectedRange.getBottomEndCorner();
       var from = selectedRange.from; // Block the Selection module in controlling how the columns and cells are selected.
       // From now on, the plugin is responsible for the selection.
 
@@ -576,9 +587,9 @@ export var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
       var columnsToSelect = [];
 
       if (coords.col < from.col) {
-        columnsToSelect.push(bottomRightCoords.col, columnIndex);
+        columnsToSelect.push(bottomEndCoords.col, columnIndex);
       } else if (coords.col > from.col) {
-        columnsToSelect.push(topLeftCoords.col, columnIndex + origColspan - 1);
+        columnsToSelect.push(topStartCoords.col, columnIndex + origColspan - 1);
       } else {
         columnsToSelect.push(columnIndex, columnIndex + origColspan - 1);
       }
@@ -652,7 +663,7 @@ export var NestedHeaders = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "onModifyColWidth",
     value: function onModifyColWidth(width, column) {
-      var cachedWidth = this.ghostTable.widthsCache[column];
+      var cachedWidth = this.ghostTable.getWidth(column);
       return width > cachedWidth ? width : cachedWidth;
     }
     /**

package/plugins/nestedHeaders/stateManager/utils.js

@@ -9,15 +9,14 @@ exports.createPlaceholderHeaderSettings = createPlaceholderHeaderSettings;
  * @property {string} label The name/label of the column header.
  * @property {number} colspan Current calculated colspan value of the rendered column header element.
  * @property {number} origColspan Original colspan value, set once while parsing user-defined nested header settings.
- * @property {boolean} collapsible The flag determines whether the node is collapsible (can be collpased/expanded).
+ * @property {boolean} collapsible The flag determines whether the node is collapsible (can be collapsed/expanded).
  * @property {number[]} crossHiddenColumns The list of visual column indexes which indicates that the specified columns within
  *                                         the header settings are hidden.
  * @property {boolean} isCollapsed The flag determines whether the node is collapsed.
  * @property {boolean} isHidden The flag determines whether the column header at specified index is hidden. If true
  *                              the TH element will be rendered as hidden (display: none).
- * @property {boolean} isRoot The flag which determines whether the column header settings is accually not renderable. That kind
+ * @property {boolean} isRoot The flag which determines whether the column header settings is actually not renderable. That kind
  *                            of objects are generated after colspaned header to fill an array to correct size.
- *
  *                            For example for header with colspan = 8 the 7 blank objects are generated to fill the array settings
  *                            to length = 8.
  * @property {boolean} isPlaceholder The flag determines whether the column header at the specified index is non-renderable.
@@ -63,7 +62,7 @@ function createDefaultHeaderSettings() {
   };
 }
 /**
- * Creates the header settings placeholder object. Those settings tell the header renderers
+ * Creates the placeholder header settings object. Those settings tell the header renderers
  * that this TH element should not be rendered (the node will be overlapped by the previously
  * created node with colspan bigger than 1).
  *

package/plugins/nestedHeaders/stateManager/utils.mjs

@@ -3,15 +3,14 @@
  * @property {string} label The name/label of the column header.
  * @property {number} colspan Current calculated colspan value of the rendered column header element.
  * @property {number} origColspan Original colspan value, set once while parsing user-defined nested header settings.
- * @property {boolean} collapsible The flag determines whether the node is collapsible (can be collpased/expanded).
+ * @property {boolean} collapsible The flag determines whether the node is collapsible (can be collapsed/expanded).
  * @property {number[]} crossHiddenColumns The list of visual column indexes which indicates that the specified columns within
  *                                         the header settings are hidden.
  * @property {boolean} isCollapsed The flag determines whether the node is collapsed.
  * @property {boolean} isHidden The flag determines whether the column header at specified index is hidden. If true
  *                              the TH element will be rendered as hidden (display: none).
- * @property {boolean} isRoot The flag which determines whether the column header settings is accually not renderable. That kind
+ * @property {boolean} isRoot The flag which determines whether the column header settings is actually not renderable. That kind
  *                            of objects are generated after colspaned header to fill an array to correct size.
- *
  *                            For example for header with colspan = 8 the 7 blank objects are generated to fill the array settings
  *                            to length = 8.
  * @property {boolean} isPlaceholder The flag determines whether the column header at the specified index is non-renderable.
@@ -57,7 +56,7 @@ export function createDefaultHeaderSettings() {
   };
 }
 /**
- * Creates the header settings placeholder object. Those settings tell the header renderers
+ * Creates the placeholder header settings object. Those settings tell the header renderers
  * that this TH element should not be rendered (the node will be overlapped by the previously
  * created node with colspan bigger than 1).
  *

package/plugins/nestedHeaders/utils/ghostTable.js

@@ -5,66 +5,125 @@ exports.default = void 0;
 
 var _element = require("../../../helpers/dom/element");
 
-var _object = require("../../../helpers/object");
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 /**
+ * The class generates the nested headers structure in the DOM and reads the column width for
+ * each column. The hierarchy is built only for visible, non-hidden columns. Each time the
+ * column is shown or hidden, the structure is rebuilt, and the width of the columns in the
+ * map updated.
+ *
  * @private
  */
 var GhostTable = /*#__PURE__*/function () {
-  function GhostTable(plugin) {
+  /**
+   * Reference to the Handsontable instance.
+   *
+   * @private
+   * @type {Handsontable}
+   */
+
+  /**
+   * The function for retrieving the nested headers settings.
+   *
+   * @private
+   * @type {Function}
+   */
+
+  /**
+   * The value that holds information about the number of the nested header layers (header rows).
+   *
+   * @private
+   * @type {number}
+   */
+
+  /**
+   * Temporary element created to get minimal headers widths.
+   *
+   * @private
+   * @type {*}
+   */
+
+  /**
+   * PhysicalIndexToValueMap to keep and track of the columns' widths.
+   *
+   * @private
+   * @type {PhysicalIndexToValueMap}
+   */
+  function GhostTable(hot, nestedHeaderSettingsGetter) {
     _classCallCheck(this, GhostTable);
 
-    /**
-     * Reference to NestedHeaders plugin.
-     *
-     * @type {NestedHeaders}
-     */
-    this.nestedHeaders = plugin;
-    /**
-     * Temporary element created to get minimal headers widths.
-     *
-     * @type {*}
-     */
+    _defineProperty(this, "hot", void 0);
 
-    this.container = void 0;
-    /**
-     * Cached the headers widths.
-     *
-     * @type {Array}
-     */
+    _defineProperty(this, "nestedHeaderSettingsGetter", void 0);
 
-    this.widthsCache = [];
+    _defineProperty(this, "layersCount", 0);
+
+    _defineProperty(this, "container", void 0);
+
+    _defineProperty(this, "widthsMap", void 0);
+
+    this.hot = hot;
+    this.nestedHeaderSettingsGetter = nestedHeaderSettingsGetter;
+    this.widthsMap = this.hot.columnIndexMapper.createAndRegisterIndexMap('nestedHeaders.widthsMap', 'physicalIndexToValue');
   }
   /**
-   * Build cache of the headers widths.
+   * Sets the number of nested headers layers count.
    *
-   * @private
+   * @param {number} layersCount Total number of headers levels.
+   * @returns {GhostTable}
    */
 
 
   _createClass(GhostTable, [{
-    key: "buildWidthsMapper",
-    value: function buildWidthsMapper() {
-      this.container = this.nestedHeaders.hot.rootDocument.createElement('div');
-      this.buildGhostTable(this.container);
-      this.nestedHeaders.hot.rootElement.appendChild(this.container);
+    key: "setLayersCount",
+    value: function setLayersCount(layersCount) {
+      this.layersCount = layersCount;
+      return this;
+    }
+    /**
+     * Gets the column width based on the visual column index.
+     *
+     * @param {number} visualColumn Visual column index.
+     * @returns {number|null}
+     */
+
+  }, {
+    key: "getWidth",
+    value: function getWidth(visualColumn) {
+      return this.widthsMap.getValueAtIndex(this.hot.toPhysicalColumn(visualColumn));
+    }
+    /**
+     * Build cache of the headers widths.
+     */
+
+  }, {
+    key: "buildWidthsMap",
+    value: function buildWidthsMap() {
+      this.container = this.hot.rootDocument.createElement('div');
+      this.container.classList.add('handsontable', 'htGhostTable', 'htAutoSize');
+
+      this._buildGhostTable(this.container);
+
+      this.hot.rootDocument.body.appendChild(this.container);
       var columns = this.container.querySelectorAll('tr:last-of-type th');
       var maxColumns = columns.length;
-      this.widthsCache.length = 0;
+      this.widthsMap.clear();
 
-      for (var i = 0; i < maxColumns; i++) {
-        this.widthsCache.push(columns[i].offsetWidth);
+      for (var column = 0; column < maxColumns; column++) {
+        var visualColumnsIndex = this.hot.columnIndexMapper.getVisualFromRenderableIndex(column);
+        var physicalColumnIndex = this.hot.toPhysicalColumn(visualColumnsIndex);
+        this.widthsMap.setValueAtIndex(physicalColumnIndex, columns[column].offsetWidth);
       }
 
       this.container.parentNode.removeChild(this.container);
       this.container = null;
-      this.nestedHeaders.hot.render();
     }
     /**
      * Build temporary table for getting minimal columns widths.
@@ -74,63 +133,43 @@ var GhostTable = /*#__PURE__*/function () {
      */
 
   }, {
-    key: "buildGhostTable",
-    value: function buildGhostTable(container) {
-      var rootDocument = this.nestedHeaders.hot.rootDocument;
+    key: "_buildGhostTable",
+    value: function _buildGhostTable(container) {
+      var _this$hot = this.hot,
+          rootDocument = _this$hot.rootDocument,
+          columnIndexMapper = _this$hot.columnIndexMapper;
       var fragment = rootDocument.createDocumentFragment();
       var table = rootDocument.createElement('table');
-      var lastRowColspan = false;
-      var isDropdownEnabled = !!this.nestedHeaders.hot.getSettings().dropdownMenu;
-      var maxRows = this.nestedHeaders.getLayersCount();
-      var maxCols = this.nestedHeaders.hot.countCols();
-      var lastRowIndex = maxRows - 1;
+      var isDropdownEnabled = !!this.hot.getSettings().dropdownMenu;
+      var maxRenderedCols = columnIndexMapper.getRenderableIndexesLength();
 
-      for (var row = 0; row < maxRows; row++) {
+      for (var row = 0; row < this.layersCount; row++) {
         var tr = rootDocument.createElement('tr');
-        lastRowColspan = false;
 
-        for (var col = 0; col < maxCols; col++) {
-          var td = rootDocument.createElement('th');
-          var headerObj = (0, _object.clone)(this.nestedHeaders.getHeaderSettings(row, col));
+        for (var col = 0; col < maxRenderedCols; col++) {
+          var visualColumnsIndex = columnIndexMapper.getVisualFromRenderableIndex(col);
 
-          if (headerObj && !headerObj.isHidden) {
-            if (row === lastRowIndex) {
-              if (headerObj.colspan > 1) {
-                lastRowColspan = true;
-              }
+          if (visualColumnsIndex === null) {
+            visualColumnsIndex = col;
+          }
 
-              if (isDropdownEnabled) {
-                headerObj.label += '<button class="changeType"></button>';
-              }
-            }
+          var th = rootDocument.createElement('th');
+          var headerSettings = this.nestedHeaderSettingsGetter(row, visualColumnsIndex);
 
-            (0, _element.fastInnerHTML)(td, headerObj.label); // The guard here is needed because on IE11 an error is thrown if you
-            // try to assign an incorrect value to `td.colSpan` here.
+          if (headerSettings && (!headerSettings.isPlaceholder || headerSettings.isHidden)) {
+            var label = headerSettings.label;
 
-            if (headerObj.colspan !== undefined) {
-              td.colSpan = headerObj.colspan;
+            if (isDropdownEnabled) {
+              label += '<button class="changeType"></button>';
             }
 
-            tr.appendChild(td);
+            (0, _element.fastInnerHTML)(th, label);
+            th.colSpan = headerSettings.colspan;
+            tr.appendChild(th);
           }
         }
 
         table.appendChild(tr);
-      } // We have to be sure the last row contains only the single columns.
-
-
-      if (lastRowColspan) {
-        {
-          var _tr = rootDocument.createElement('tr');
-
-          for (var _col = 0; _col < maxCols; _col++) {
-            var _td = rootDocument.createElement('th');
-
-            _tr.appendChild(_td);
-          }
-
-          table.appendChild(_tr);
-        }
       }
 
       fragment.appendChild(table);
@@ -143,8 +182,8 @@ var GhostTable = /*#__PURE__*/function () {
   }, {
     key: "clear",
     value: function clear() {
+      this.widthsMap.clear();
       this.container = null;
-      this.widthsCache.length = 0;
     }
   }]);