handsontable 12.0.1 → 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; }
 
@@ -168,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);
 
@@ -292,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);
     }
@@ -693,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; }
 
@@ -134,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);
 
@@ -258,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);
     }
@@ -659,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

@@ -14,61 +14,116 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 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 () {
   /**
-   * Reference to NestedHeaders plugin.
+   * Reference to the Handsontable instance.
    *
-   * @type {NestedHeaders}
+   * @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 {*}
    */
 
   /**
-   * Cached the headers widths.
+   * PhysicalIndexToValueMap to keep and track of the columns' widths.
    *
-   * @type {Array}
+   * @private
+   * @type {PhysicalIndexToValueMap}
    */
-  function GhostTable(plugin) {
+  function GhostTable(hot, nestedHeaderSettingsGetter) {
     _classCallCheck(this, GhostTable);
 
-    _defineProperty(this, "nestedHeaders", void 0);
+    _defineProperty(this, "hot", void 0);
+
+    _defineProperty(this, "nestedHeaderSettingsGetter", void 0);
+
+    _defineProperty(this, "layersCount", 0);
 
     _defineProperty(this, "container", void 0);
 
-    _defineProperty(this, "widthsCache", []);
+    _defineProperty(this, "widthsMap", void 0);
 
-    this.nestedHeaders = plugin;
+    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.
@@ -78,36 +133,34 @@ 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++) {
+        for (var col = 0; col < maxRenderedCols; col++) {
+          var visualColumnsIndex = columnIndexMapper.getVisualFromRenderableIndex(col);
+
+          if (visualColumnsIndex === null) {
+            visualColumnsIndex = col;
+          }
+
           var th = rootDocument.createElement('th');
-          var headerSettings = this.nestedHeaders.getHeaderSettings(row, col);
+          var headerSettings = this.nestedHeaderSettingsGetter(row, visualColumnsIndex);
 
-          if (headerSettings && !headerSettings.isPlaceholder) {
+          if (headerSettings && (!headerSettings.isPlaceholder || headerSettings.isHidden)) {
             var label = headerSettings.label;
 
-            if (row === lastRowIndex) {
-              if (headerSettings.colspan > 1) {
-                lastRowColspan = true;
-              }
-
-              if (isDropdownEnabled) {
-                label += '<button class="changeType"></button>';
-              }
+            if (isDropdownEnabled) {
+              label += '<button class="changeType"></button>';
             }
 
             (0, _element.fastInnerHTML)(th, label);
@@ -117,21 +170,6 @@ var GhostTable = /*#__PURE__*/function () {
         }
 
         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);
@@ -144,8 +182,8 @@ var GhostTable = /*#__PURE__*/function () {
   }, {
     key: "clear",
     value: function clear() {
+      this.widthsMap.clear();
       this.container = null;
-      this.widthsCache.length = 0;
     }
   }]);
 

package/plugins/nestedHeaders/utils/ghostTable.mjs

@@ -8,62 +8,117 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import { fastInnerHTML } from "../../../helpers/dom/element.mjs";
 /**
+ * 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 () {
   /**
-   * Reference to NestedHeaders plugin.
+   * Reference to the Handsontable instance.
    *
-   * @type {NestedHeaders}
+   * @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 {*}
    */
 
   /**
-   * Cached the headers widths.
+   * PhysicalIndexToValueMap to keep and track of the columns' widths.
    *
-   * @type {Array}
+   * @private
+   * @type {PhysicalIndexToValueMap}
    */
-  function GhostTable(plugin) {
+  function GhostTable(hot, nestedHeaderSettingsGetter) {
     _classCallCheck(this, GhostTable);
 
-    _defineProperty(this, "nestedHeaders", void 0);
+    _defineProperty(this, "hot", void 0);
+
+    _defineProperty(this, "nestedHeaderSettingsGetter", void 0);
+
+    _defineProperty(this, "layersCount", 0);
 
     _defineProperty(this, "container", void 0);
 
-    _defineProperty(this, "widthsCache", []);
+    _defineProperty(this, "widthsMap", void 0);
 
-    this.nestedHeaders = plugin;
+    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.
@@ -73,36 +128,34 @@ 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++) {
+        for (var col = 0; col < maxRenderedCols; col++) {
+          var visualColumnsIndex = columnIndexMapper.getVisualFromRenderableIndex(col);
+
+          if (visualColumnsIndex === null) {
+            visualColumnsIndex = col;
+          }
+
           var th = rootDocument.createElement('th');
-          var headerSettings = this.nestedHeaders.getHeaderSettings(row, col);
+          var headerSettings = this.nestedHeaderSettingsGetter(row, visualColumnsIndex);
 
-          if (headerSettings && !headerSettings.isPlaceholder) {
+          if (headerSettings && (!headerSettings.isPlaceholder || headerSettings.isHidden)) {
             var label = headerSettings.label;
 
-            if (row === lastRowIndex) {
-              if (headerSettings.colspan > 1) {
-                lastRowColspan = true;
-              }
-
-              if (isDropdownEnabled) {
-                label += '<button class="changeType"></button>';
-              }
+            if (isDropdownEnabled) {
+              label += '<button class="changeType"></button>';
             }
 
             fastInnerHTML(th, label);
@@ -112,21 +165,6 @@ var GhostTable = /*#__PURE__*/function () {
         }
 
         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);
@@ -139,8 +177,8 @@ var GhostTable = /*#__PURE__*/function () {
   }, {
     key: "clear",
     value: function clear() {
+      this.widthsMap.clear();
       this.container = null;
-      this.widthsCache.length = 0;
     }
   }]);
 

package/plugins/nestedRows/nestedRows.js

@@ -85,13 +85,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); }; }
 
@@ -101,7 +101,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); }
 
 var PLUGIN_KEY = 'nestedRows';
 exports.PLUGIN_KEY = PLUGIN_KEY;