handsontable 12.1.2 → 12.2.0

package/tableView.mjs

@@ -1,29 +1,16 @@
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 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; }
-
 import "core-js/modules/es.array.iterator.js";
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.string.iterator.js";
@@ -45,18 +32,17 @@ import Walkontable from "./3rdparty/walkontable/src/index.mjs";
 import { handleMouseEvent } from "./selection/mouseEventHandler.mjs";
 import { isRootInstance } from "./utils/rootInstance.mjs";
 var privatePool = new WeakMap();
+
 /**
  * @class TableView
  * @private
  */
-
 var TableView = /*#__PURE__*/function () {
   /**
    * @param {Hanstontable} instance Instance of {@link Handsontable}.
    */
   function TableView(instance) {
     _classCallCheck(this, TableView);
-
     /**
      * Instance of {@link Handsontable}.
      *
@@ -70,7 +56,6 @@ var TableView = /*#__PURE__*/function () {
      * @private
      * @type {EventManager}
      */
-
     this.eventManager = new EventManager(instance);
     /**
      * Current Handsontable's GridSettings object.
@@ -78,7 +63,6 @@ var TableView = /*#__PURE__*/function () {
      * @private
      * @type {GridSettings}
      */
-
     this.settings = instance.getSettings();
     /**
      * Main <THEAD> element.
@@ -86,7 +70,6 @@ var TableView = /*#__PURE__*/function () {
      * @private
      * @type {HTMLTableSectionElement}
      */
-
     this.THEAD = void 0;
     /**
      * Main <TBODY> element.
@@ -94,7 +77,6 @@ var TableView = /*#__PURE__*/function () {
      * @private
      * @type {HTMLTableSectionElement}
      */
-
     this.TBODY = void 0;
     /**
      * Main Walkontable instance.
@@ -102,7 +84,6 @@ var TableView = /*#__PURE__*/function () {
      * @private
      * @type {Walkontable}
      */
-
     this._wt = void 0;
     /**
      * Main Walkontable instance.
@@ -110,7 +91,6 @@ var TableView = /*#__PURE__*/function () {
      * @private
      * @type {Walkontable}
      */
-
     this.activeWt = void 0;
     /**
      * The flag determines if the `adjustElementsSize` method call was made during
@@ -120,7 +100,6 @@ var TableView = /*#__PURE__*/function () {
      * @private
      * @type {boolean}
      */
-
     this.postponedAdjustElementsSize = false;
     privatePool.set(this, {
       /**
@@ -130,13 +109,11 @@ var TableView = /*#__PURE__*/function () {
        * @type {boolean}
        */
       selectionMouseDown: false,
-
       /**
        * @private
        * @type {boolean}
        */
       mouseDown: void 0,
-
       /**
        * Main <TABLE> element.
        *
@@ -144,14 +121,12 @@ var TableView = /*#__PURE__*/function () {
        * @type {HTMLTableElement}
        */
       table: void 0,
-
       /**
        * Cached width of the rootElement.
        *
        * @type {number}
        */
       lastWidth: 0,
-
       /**
        * Cached height of the rootElement.
        *
@@ -163,46 +138,42 @@ var TableView = /*#__PURE__*/function () {
     this.registerEvents();
     this.initializeWalkontable();
   }
+
   /**
    * Renders WalkontableUI.
    */
-
-
   _createClass(TableView, [{
     key: "render",
     value: function render() {
       if (!this.instance.isRenderSuspended()) {
         this.instance.runHooks('beforeRender', this.instance.forceFullRender);
-
         if (this.postponedAdjustElementsSize) {
           this.postponedAdjustElementsSize = false;
           this.adjustElementsSize(true);
         }
-
         this._wt.draw(!this.instance.forceFullRender);
-
         this.instance.runHooks('afterRender', this.instance.forceFullRender);
         this.instance.forceFullRender = false;
         this.instance.renderCall = false;
       }
     }
+
     /**
      * Adjust overlays elements size and master table size.
      *
      * @param {boolean} [force=false] When `true`, it adjust the DOM nodes sizes for all overlays.
      */
-
   }, {
     key: "adjustElementsSize",
     value: function adjustElementsSize() {
       var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-
       if (this.instance.isRenderSuspended()) {
         this.postponedAdjustElementsSize = true;
       } else {
         this._wt.wtOverlays.adjustElementsSize(force);
       }
     }
+
     /**
      * Returns td object given coordinates.
      *
@@ -210,19 +181,17 @@ var TableView = /*#__PURE__*/function () {
      * @param {boolean} topmost Indicates whether the cell should be calculated from the topmost.
      * @returns {HTMLTableCellElement|null}
      */
-
   }, {
     key: "getCellAtCoords",
     value: function getCellAtCoords(coords, topmost) {
       var td = this._wt.getCell(coords, topmost);
-
       if (td < 0) {
         // there was an exit code (cell is out of bounds)
         return null;
       }
-
       return td;
     }
+
     /**
      * Scroll viewport to a cell.
      *
@@ -233,12 +202,12 @@ var TableView = /*#__PURE__*/function () {
      * @param {boolean} [snapToLeft] If `true`, viewport is scrolled to show the cell on the left side of the table.
      * @returns {boolean}
      */
-
   }, {
     key: "scrollViewport",
     value: function scrollViewport(coords, snapToTop, snapToRight, snapToBottom, snapToLeft) {
       return this._wt.scrollViewport(coords, snapToTop, snapToRight, snapToBottom, snapToLeft);
     }
+
     /**
      * Scroll viewport to a column.
      *
@@ -247,12 +216,12 @@ var TableView = /*#__PURE__*/function () {
      * @param {boolean} [snapToLeft] If `true`, viewport is scrolled to show the cell on the left side of the table.
      * @returns {boolean}
      */
-
   }, {
     key: "scrollViewportHorizontally",
     value: function scrollViewportHorizontally(column, snapToRight, snapToLeft) {
       return this._wt.scrollViewportHorizontally(column, snapToRight, snapToLeft);
     }
+
     /**
      * Scroll viewport to a row.
      *
@@ -261,27 +230,25 @@ var TableView = /*#__PURE__*/function () {
      * @param {boolean} [snapToBottom] If `true`, viewport is scrolled to show the cell on the bottom side of the table.
      * @returns {boolean}
      */
-
   }, {
     key: "scrollViewportVertically",
     value: function scrollViewportVertically(row, snapToTop, snapToBottom) {
       return this._wt.scrollViewportVertically(row, snapToTop, snapToBottom);
     }
+
     /**
      * Prepares DOMElements and adds correct className to the root element.
      *
      * @private
      */
-
   }, {
     key: "createElements",
     value: function createElements() {
       var priv = privatePool.get(this);
       var _this$instance = this.instance,
-          rootElement = _this$instance.rootElement,
-          rootDocument = _this$instance.rootDocument;
+        rootElement = _this$instance.rootElement,
+        rootDocument = _this$instance.rootDocument;
       var originalStyle = rootElement.getAttribute('style');
-
       if (originalStyle) {
         rootElement.setAttribute('data-originalstyle', originalStyle); // needed to retrieve original style in jsFiddle link generator in HT examples. may be removed in future versions
       }
@@ -289,11 +256,9 @@ var TableView = /*#__PURE__*/function () {
       addClass(rootElement, 'handsontable');
       priv.table = rootDocument.createElement('TABLE');
       addClass(priv.table, 'htCore');
-
       if (this.instance.getSettings().tableClassName) {
         addClass(priv.table, this.instance.getSettings().tableClassName);
       }
-
       this.THEAD = rootDocument.createElement('THEAD');
       priv.table.appendChild(this.THEAD);
       this.TBODY = rootDocument.createElement('TBODY');
@@ -301,26 +266,24 @@ var TableView = /*#__PURE__*/function () {
       this.instance.table = priv.table;
       this.instance.container.insertBefore(priv.table, this.instance.container.firstChild);
     }
+
     /**
      * Attaches necessary listeners.
      *
      * @private
      */
-
   }, {
     key: "registerEvents",
     value: function registerEvents() {
       var _this = this;
-
       var priv = privatePool.get(this);
       var _this$instance2 = this.instance,
-          rootElement = _this$instance2.rootElement,
-          rootDocument = _this$instance2.rootDocument,
-          selection = _this$instance2.selection;
+        rootElement = _this$instance2.rootElement,
+        rootDocument = _this$instance2.rootDocument,
+        selection = _this$instance2.selection;
       var documentElement = rootDocument.documentElement;
       this.eventManager.addEventListener(rootElement, 'mousedown', function (event) {
         priv.selectionMouseDown = true;
-
         if (!_this.isTextSelectionAllowed(event.target)) {
           var rootWindow = _this.instance.rootWindow;
           clearTextSelection(rootWindow);
@@ -328,6 +291,7 @@ var TableView = /*#__PURE__*/function () {
           rootWindow.focus(); // make sure that window that contains HOT is active. Important when HOT is in iframe.
         }
       });
+
       this.eventManager.addEventListener(rootElement, 'mouseup', function () {
         priv.selectionMouseDown = false;
       });
@@ -337,7 +301,6 @@ var TableView = /*#__PURE__*/function () {
           if (_this.settings.fragmentSelection) {
             clearTextSelection(_this.instance.rootWindow);
           }
-
           event.preventDefault();
         }
       });
@@ -352,9 +315,7 @@ var TableView = /*#__PURE__*/function () {
           // is left mouse button
           selection.finish();
         }
-
         priv.mouseDown = false;
-
         if (isOutsideInput(rootDocument.activeElement) || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !rootElement.contains(event.target) && !isRightClick(event)) {
           _this.instance.unlisten();
         }
@@ -369,7 +330,6 @@ var TableView = /*#__PURE__*/function () {
         if (selection.isInProgress()) {
           selection.finish();
         }
-
         priv.mouseDown = false;
       });
       this.eventManager.addEventListener(documentElement, 'mousedown', function (event) {
@@ -377,17 +337,14 @@ var TableView = /*#__PURE__*/function () {
         var eventX = event.x || event.clientX;
         var eventY = event.y || event.clientY;
         var next = event.target;
-
         if (priv.mouseDown || !rootElement || !_this.instance.view) {
           return; // it must have been started in a cell
-        } // immediate click on "holder" means click on the right side of vertical scrollbar
-
+        }
 
+        // immediate click on "holder" means click on the right side of vertical scrollbar
         var holder = _this.instance.view._wt.wtTable.holder;
-
         if (next === holder) {
           var scrollbarWidth = getScrollbarWidth(rootDocument);
-
           if (rootDocument.elementFromPoint(eventX + scrollbarWidth, eventY) !== holder || rootDocument.elementFromPoint(eventX, eventY + scrollbarWidth) !== holder) {
             return;
           }
@@ -396,24 +353,21 @@ var TableView = /*#__PURE__*/function () {
             if (next === null) {
               if (event.isTargetWebComponent) {
                 break;
-              } // click on something that was a row but now is detached (possibly because your click triggered a rerender)
-
+              }
 
+              // click on something that was a row but now is detached (possibly because your click triggered a rerender)
               return;
             }
-
             if (next === rootElement) {
               // click inside container
               return;
             }
-
             next = next.parentNode;
           }
-        } // function did not return until here, we have an outside click!
-
+        }
 
+        // function did not return until here, we have an outside click!
         var outsideClickDeselects = typeof _this.settings.outsideClickDeselects === 'function' ? _this.settings.outsideClickDeselects(originalTarget) : _this.settings.outsideClickDeselects;
-
         if (outsideClickDeselects) {
           _this.instance.deselectCell();
         } else {
@@ -423,30 +377,29 @@ var TableView = /*#__PURE__*/function () {
       this.eventManager.addEventListener(priv.table, 'selectstart', function (event) {
         if (_this.settings.fragmentSelection || isInput(event.target)) {
           return;
-        } // https://github.com/handsontable/handsontable/issues/160
+        }
+        // https://github.com/handsontable/handsontable/issues/160
         // Prevent text from being selected when performing drag down.
-
-
         event.preventDefault();
       });
     }
+
     /**
      * Translate renderable cell coordinates to visual coordinates.
      *
      * @param {CellCoords} coords The cell coordinates.
      * @returns {CellCoords}
      */
-
   }, {
     key: "translateFromRenderableToVisualCoords",
     value: function translateFromRenderableToVisualCoords(_ref) {
       var _this$instance3;
-
       var row = _ref.row,
-          col = _ref.col;
+        col = _ref.col;
       // TODO: To consider an idea to reusing the CellCoords instance instead creating new one.
       return (_this$instance3 = this.instance)._createCellCoords.apply(_this$instance3, _toConsumableArray(this.translateFromRenderableToVisualIndex(row, col)));
     }
+
     /**
      * Translate renderable row and column indexes to visual row and column indexes.
      *
@@ -454,7 +407,6 @@ var TableView = /*#__PURE__*/function () {
      * @param {number} renderableColumn Renderable columnIndex.
      * @returns {number[]}
      */
-
   }, {
     key: "translateFromRenderableToVisualIndex",
     value: function translateFromRenderableToVisualIndex(renderableRow, renderableColumn) {
@@ -462,17 +414,15 @@ var TableView = /*#__PURE__*/function () {
       // We perform translation for indexes (without headers).
       var visualRow = renderableRow >= 0 ? this.instance.rowIndexMapper.getVisualFromRenderableIndex(renderableRow) : renderableRow;
       var visualColumn = renderableColumn >= 0 ? this.instance.columnIndexMapper.getVisualFromRenderableIndex(renderableColumn) : renderableColumn;
-
       if (visualRow === null) {
         visualRow = renderableRow;
       }
-
       if (visualColumn === null) {
         visualColumn = renderableColumn;
       }
-
       return [visualRow, visualColumn];
     }
+
     /**
      * Returns the number of renderable indexes.
      *
@@ -482,42 +432,42 @@ var TableView = /*#__PURE__*/function () {
      *
      * @returns {number|*}
      */
-
   }, {
     key: "countRenderableIndexes",
     value: function countRenderableIndexes(indexMapper, maxElements) {
-      var consideredElements = Math.min(indexMapper.getNotTrimmedIndexesLength(), maxElements); // Don't take hidden indexes into account. We are looking just for renderable indexes.
-
-      var firstNotHiddenIndex = indexMapper.getNearestNotHiddenIndex(consideredElements - 1, -1); // There are no renderable indexes.
+      var consideredElements = Math.min(indexMapper.getNotTrimmedIndexesLength(), maxElements);
+      // Don't take hidden indexes into account. We are looking just for renderable indexes.
+      var firstNotHiddenIndex = indexMapper.getNearestNotHiddenIndex(consideredElements - 1, -1);
 
+      // There are no renderable indexes.
       if (firstNotHiddenIndex === null) {
         return 0;
       }
-
       return indexMapper.getRenderableFromVisualIndex(firstNotHiddenIndex) + 1;
     }
+
     /**
      * Returns the number of renderable columns.
      *
      * @returns {number}
      */
-
   }, {
     key: "countRenderableColumns",
     value: function countRenderableColumns() {
       return this.countRenderableIndexes(this.instance.columnIndexMapper, this.settings.maxCols);
     }
+
     /**
      * Returns the number of renderable rows.
      *
      * @returns {number}
      */
-
   }, {
     key: "countRenderableRows",
     value: function countRenderableRows() {
       return this.countRenderableIndexes(this.instance.rowIndexMapper, this.settings.maxRows);
     }
+
     /**
      * Returns number of not hidden row indexes counting from the passed starting index.
      * The counting direction can be controlled by `incrementBy` argument.
@@ -526,12 +476,12 @@ var TableView = /*#__PURE__*/function () {
      * @param {number} incrementBy If `-1` then counting is backwards or forward when `1`.
      * @returns {number}
      */
-
   }, {
     key: "countNotHiddenRowIndexes",
     value: function countNotHiddenRowIndexes(visualIndex, incrementBy) {
       return this.countNotHiddenIndexes(visualIndex, incrementBy, this.instance.rowIndexMapper, this.countRenderableRows());
     }
+
     /**
      * Returns number of not hidden column indexes counting from the passed starting index.
      * The counting direction can be controlled by `incrementBy` argument.
@@ -540,12 +490,12 @@ var TableView = /*#__PURE__*/function () {
      * @param {number} incrementBy If `-1` then counting is backwards or forward when `1`.
      * @returns {number}
      */
-
   }, {
     key: "countNotHiddenColumnIndexes",
     value: function countNotHiddenColumnIndexes(visualIndex, incrementBy) {
       return this.countNotHiddenIndexes(visualIndex, incrementBy, this.instance.columnIndexMapper, this.countRenderableColumns());
     }
+
     /**
      * Returns number of not hidden indexes counting from the passed starting index.
      * The counting direction can be controlled by `incrementBy` argument.
@@ -556,39 +506,33 @@ var TableView = /*#__PURE__*/function () {
      * @param {number} renderableIndexesCount Total count of renderable indexes for specific axis.
      * @returns {number}
      */
-
   }, {
     key: "countNotHiddenIndexes",
     value: function countNotHiddenIndexes(visualIndex, incrementBy, indexMapper, renderableIndexesCount) {
       if (isNaN(visualIndex) || visualIndex < 0) {
         return 0;
       }
-
       var firstVisibleIndex = indexMapper.getNearestNotHiddenIndex(visualIndex, incrementBy);
       var renderableIndex = indexMapper.getRenderableFromVisualIndex(firstVisibleIndex);
-
       if (!Number.isInteger(renderableIndex)) {
         return 0;
       }
-
       var notHiddenIndexes = 0;
-
       if (incrementBy < 0) {
         // Zero-based numbering for renderable indexes corresponds to a number of not hidden indexes.
         notHiddenIndexes = renderableIndex + 1;
       } else if (incrementBy > 0) {
         notHiddenIndexes = renderableIndexesCount - renderableIndex;
       }
-
       return notHiddenIndexes;
     }
+
     /**
      * The function returns the number of not hidden column indexes that fit between the first and
      * last fixed column in the left (or right in RTL mode) overlay.
      *
      * @returns {number}
      */
-
   }, {
     key: "countNotHiddenFixedColumnsStart",
     value: function countNotHiddenFixedColumnsStart() {
@@ -596,13 +540,13 @@ var TableView = /*#__PURE__*/function () {
       var visualFixedColumnsStart = Math.min(parseInt(this.settings.fixedColumnsStart, 10), countCols) - 1;
       return this.countNotHiddenColumnIndexes(visualFixedColumnsStart, -1);
     }
+
     /**
      * The function returns the number of not hidden row indexes that fit between the first and
      * last fixed row in the top overlay.
      *
      * @returns {number}
      */
-
   }, {
     key: "countNotHiddenFixedRowsTop",
     value: function countNotHiddenFixedRowsTop() {
@@ -610,13 +554,13 @@ var TableView = /*#__PURE__*/function () {
       var visualFixedRowsTop = Math.min(parseInt(this.settings.fixedRowsTop, 10), countRows) - 1;
       return this.countNotHiddenRowIndexes(visualFixedRowsTop, -1);
     }
+
     /**
      * The function returns the number of not hidden row indexes that fit between the first and
      * last fixed row in the bottom overlay.
      *
      * @returns {number}
      */
-
   }, {
     key: "countNotHiddenFixedRowsBottom",
     value: function countNotHiddenFixedRowsBottom() {
@@ -624,13 +568,13 @@ var TableView = /*#__PURE__*/function () {
       var visualFixedRowsBottom = Math.max(countRows - parseInt(this.settings.fixedRowsBottom, 10), 0);
       return this.countNotHiddenRowIndexes(visualFixedRowsBottom, 1);
     }
+
     /**
      * Checks if at least one cell than belongs to the main table is not covered by the top, left or
      * bottom overlay.
      *
      * @returns {boolean}
      */
-
   }, {
     key: "isMainTableNotFullyCoveredByOverlays",
     value: function isMainTableNotFullyCoveredByOverlays() {
@@ -638,17 +582,16 @@ var TableView = /*#__PURE__*/function () {
       var fixedAllColumns = this.countNotHiddenFixedColumnsStart();
       return this.instance.countRenderedRows() > fixedAllRows && this.instance.countRenderedCols() > fixedAllColumns;
     }
+
     /**
      * Defines default configuration and initializes WalkOnTable instance.
      *
      * @private
      */
-
   }, {
     key: "initializeWalkontable",
     value: function initializeWalkontable() {
       var _this2 = this;
-
       var priv = privatePool.get(this);
       var walkontableConfig = {
         rtlMode: this.instance.isRtl(),
@@ -668,7 +611,6 @@ var TableView = /*#__PURE__*/function () {
         },
         data: function data(renderableRow, renderableColumn) {
           var _this2$instance;
-
           return (_this2$instance = _this2.instance).getDataAtCell.apply(_this2$instance, _toConsumableArray(_this2.translateFromRenderableToVisualIndex(renderableRow, renderableColumn)));
         },
         totalRows: function totalRows() {
@@ -707,84 +649,65 @@ var TableView = /*#__PURE__*/function () {
         renderAllRows: this.settings.renderAllRows,
         rowHeaders: function rowHeaders() {
           var headerRenderers = [];
-
           if (_this2.instance.hasRowHeaders()) {
             headerRenderers.push(function (renderableRowIndex, TH) {
               // TODO: Some helper may be needed.
               // We perform translation for row indexes (without row headers).
               var visualRowIndex = renderableRowIndex >= 0 ? _this2.instance.rowIndexMapper.getVisualFromRenderableIndex(renderableRowIndex) : renderableRowIndex;
-
               _this2.appendRowHeader(visualRowIndex, TH);
             });
           }
-
           _this2.instance.runHooks('afterGetRowHeaderRenderers', headerRenderers);
-
           return headerRenderers;
         },
         columnHeaders: function columnHeaders() {
           var headerRenderers = [];
-
           if (_this2.instance.hasColHeaders()) {
             headerRenderers.push(function (renderedColumnIndex, TH) {
               // TODO: Some helper may be needed.
               // We perform translation for columns indexes (without column headers).
               var visualColumnsIndex = renderedColumnIndex >= 0 ? _this2.instance.columnIndexMapper.getVisualFromRenderableIndex(renderedColumnIndex) : renderedColumnIndex;
-
               _this2.appendColHeader(visualColumnsIndex, TH);
             });
           }
-
           _this2.instance.runHooks('afterGetColumnHeaderRenderers', headerRenderers);
-
           return headerRenderers;
         },
         columnWidth: function columnWidth(renderedColumnIndex) {
-          var visualIndex = _this2.instance.columnIndexMapper.getVisualFromRenderableIndex(renderedColumnIndex); // It's not a bug that we can't find visual index for some handled by method indexes. The function is called also
+          var visualIndex = _this2.instance.columnIndexMapper.getVisualFromRenderableIndex(renderedColumnIndex);
+
+          // It's not a bug that we can't find visual index for some handled by method indexes. The function is called also
           // for indexes that are not displayed (indexes that are beyond the grid's boundaries), i.e. when `fixedColumnsStart` > `startCols` (wrong config?) or
           // scrolling and dataset is empty (scroll should handle that?).
-
-
           return _this2.instance.getColWidth(visualIndex === null ? renderedColumnIndex : visualIndex);
         },
         rowHeight: function rowHeight(renderedRowIndex) {
           var visualIndex = _this2.instance.rowIndexMapper.getVisualFromRenderableIndex(renderedRowIndex);
-
           return _this2.instance.getRowHeight(visualIndex === null ? renderedRowIndex : visualIndex);
         },
         cellRenderer: function cellRenderer(renderedRowIndex, renderedColumnIndex, TD) {
           var _this2$translateFromR = _this2.translateFromRenderableToVisualIndex(renderedRowIndex, renderedColumnIndex),
-              _this2$translateFromR2 = _slicedToArray(_this2$translateFromR, 2),
-              visualRowIndex = _this2$translateFromR2[0],
-              visualColumnIndex = _this2$translateFromR2[1]; // Coords may be modified. For example, by the `MergeCells` plugin. It should affect cell value and cell meta.
-
+            _this2$translateFromR2 = _slicedToArray(_this2$translateFromR, 2),
+            visualRowIndex = _this2$translateFromR2[0],
+            visualColumnIndex = _this2$translateFromR2[1];
 
+          // Coords may be modified. For example, by the `MergeCells` plugin. It should affect cell value and cell meta.
           var modifiedCellCoords = _this2.instance.runHooks('modifyGetCellCoords', visualRowIndex, visualColumnIndex);
-
           var visualRowToCheck = visualRowIndex;
           var visualColumnToCheck = visualColumnIndex;
-
           if (Array.isArray(modifiedCellCoords)) {
             var _modifiedCellCoords = _slicedToArray(modifiedCellCoords, 2);
-
             visualRowToCheck = _modifiedCellCoords[0];
             visualColumnToCheck = _modifiedCellCoords[1];
           }
-
           var cellProperties = _this2.instance.getCellMeta(visualRowToCheck, visualColumnToCheck);
-
           var prop = _this2.instance.colToProp(visualColumnToCheck);
-
           var value = _this2.instance.getDataAtRowProp(visualRowToCheck, prop);
-
           if (_this2.instance.hasHook('beforeValueRender')) {
             value = _this2.instance.runHooks('beforeValueRender', value, cellProperties);
           }
-
           _this2.instance.runHooks('beforeRenderer', TD, visualRowIndex, visualColumnIndex, prop, value, cellProperties);
-
           _this2.instance.getCellRenderer(cellProperties)(_this2.instance, TD, visualRowIndex, visualColumnIndex, prop, value, cellProperties);
-
           _this2.instance.runHooks('afterRenderer', TD, visualRowIndex, visualColumnIndex, prop, value, cellProperties);
         },
         selections: this.instance.selection.highlight,
@@ -795,29 +718,22 @@ var TableView = /*#__PURE__*/function () {
           if (!_this2.instance || _this2.instance.isDestroyed) {
             return;
           }
-
           _this2.instance.refreshDimensions();
         },
         onCellMouseDown: function onCellMouseDown(event, coords, TD, wt) {
           var visualCoords = _this2.translateFromRenderableToVisualCoords(coords);
-
           var controller = {
             row: false,
             column: false,
             cell: false
           };
-
           _this2.instance.listen();
-
           _this2.activeWt = wt;
           priv.mouseDown = true;
-
           _this2.instance.runHooks('beforeOnCellMouseDown', event, visualCoords, TD, controller);
-
           if (isImmediatePropagationStopped(event)) {
             return;
           }
-
           handleMouseEvent(event, {
             coords: visualCoords,
             selection: _this2.instance.selection,
@@ -826,62 +742,45 @@ var TableView = /*#__PURE__*/function () {
               return _this2.instance._createCellCoords(row, column);
             }
           });
-
           _this2.instance.runHooks('afterOnCellMouseDown', event, visualCoords, TD);
-
           _this2.activeWt = _this2._wt;
         },
         onCellContextMenu: function onCellContextMenu(event, coords, TD, wt) {
           var visualCoords = _this2.translateFromRenderableToVisualCoords(coords);
-
           _this2.activeWt = wt;
           priv.mouseDown = false;
-
           if (_this2.instance.selection.isInProgress()) {
             _this2.instance.selection.finish();
           }
-
           _this2.instance.runHooks('beforeOnCellContextMenu', event, visualCoords, TD);
-
           if (isImmediatePropagationStopped(event)) {
             return;
           }
-
           _this2.instance.runHooks('afterOnCellContextMenu', event, visualCoords, TD);
-
           _this2.activeWt = _this2._wt;
         },
         onCellMouseOut: function onCellMouseOut(event, coords, TD, wt) {
           var visualCoords = _this2.translateFromRenderableToVisualCoords(coords);
-
           _this2.activeWt = wt;
-
           _this2.instance.runHooks('beforeOnCellMouseOut', event, visualCoords, TD);
-
           if (isImmediatePropagationStopped(event)) {
             return;
           }
-
           _this2.instance.runHooks('afterOnCellMouseOut', event, visualCoords, TD);
-
           _this2.activeWt = _this2._wt;
         },
         onCellMouseOver: function onCellMouseOver(event, coords, TD, wt) {
           var visualCoords = _this2.translateFromRenderableToVisualCoords(coords);
-
           var controller = {
             row: false,
             column: false,
             cell: false
           };
           _this2.activeWt = wt;
-
           _this2.instance.runHooks('beforeOnCellMouseOver', event, visualCoords, TD, controller);
-
           if (isImmediatePropagationStopped(event)) {
             return;
           }
-
           if (priv.mouseDown) {
             handleMouseEvent(event, {
               coords: visualCoords,
@@ -892,38 +791,30 @@ var TableView = /*#__PURE__*/function () {
               }
             });
           }
-
           _this2.instance.runHooks('afterOnCellMouseOver', event, visualCoords, TD);
-
           _this2.activeWt = _this2._wt;
         },
         onCellMouseUp: function onCellMouseUp(event, coords, TD, wt) {
           var visualCoords = _this2.translateFromRenderableToVisualCoords(coords);
-
           _this2.activeWt = wt;
+          _this2.instance.runHooks('beforeOnCellMouseUp', event, visualCoords, TD);
 
-          _this2.instance.runHooks('beforeOnCellMouseUp', event, visualCoords, TD); // TODO: The second condition check is a workaround. Callback corresponding the method `updateSettings`
+          // TODO: The second condition check is a workaround. Callback corresponding the method `updateSettings`
           // disable plugin and enable it again. Disabling plugin closes the menu. Thus, calling the
           // `updateSettings` in a body of any callback executed right after some context-menu action
           // breaks the table (#7231).
-
-
           if (isImmediatePropagationStopped(event) || _this2.instance.isDestroyed) {
             return;
           }
-
           _this2.instance.runHooks('afterOnCellMouseUp', event, visualCoords, TD);
-
           _this2.activeWt = _this2._wt;
         },
         onCellCornerMouseDown: function onCellCornerMouseDown(event) {
           event.preventDefault();
-
           _this2.instance.runHooks('afterOnCellCornerMouseDown', event);
         },
         onCellCornerDblClick: function onCellCornerDblClick(event) {
           event.preventDefault();
-
           _this2.instance.runHooks('afterOnCellCornerDblClick', event);
         },
         beforeDraw: function beforeDraw(force, skipRender) {
@@ -944,31 +835,23 @@ var TableView = /*#__PURE__*/function () {
         onBeforeHighlightingRowHeader: function onBeforeHighlightingRowHeader(renderableRow, headerLevel, highlightMeta) {
           var rowMapper = _this2.instance.rowIndexMapper;
           var visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
-
           var newVisualRow = _this2.instance.runHooks('beforeHighlightingRowHeader', visualRow, headerLevel, highlightMeta);
-
           return rowMapper.getRenderableFromVisualIndex(rowMapper.getNearestNotHiddenIndex(newVisualRow, 1));
         },
         onBeforeHighlightingColumnHeader: function onBeforeHighlightingColumnHeader(renderableColumn, headerLevel, highlightMeta) {
           var columnMapper = _this2.instance.columnIndexMapper;
           var visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
-
           var newVisualColumn = _this2.instance.runHooks('beforeHighlightingColumnHeader', visualColumn, headerLevel, highlightMeta);
-
           return columnMapper.getRenderableFromVisualIndex(columnMapper.getNearestNotHiddenIndex(newVisualColumn, 1));
         },
         onAfterDrawSelection: function onAfterDrawSelection(currentRow, currentColumn, layerLevel) {
           var cornersOfSelection;
-
           var _this2$translateFromR3 = _this2.translateFromRenderableToVisualIndex(currentRow, currentColumn),
-              _this2$translateFromR4 = _slicedToArray(_this2$translateFromR3, 2),
-              visualRowIndex = _this2$translateFromR4[0],
-              visualColumnIndex = _this2$translateFromR4[1];
-
+            _this2$translateFromR4 = _slicedToArray(_this2$translateFromR3, 2),
+            visualRowIndex = _this2$translateFromR4[0],
+            visualColumnIndex = _this2$translateFromR4[1];
           var selectedRange = _this2.instance.selection.getSelectedRange();
-
           var selectionRangeSize = selectedRange.size();
-
           if (selectionRangeSize > 0) {
             // Selection layers are stored from the "oldest" to the "newest". We should calculate the offset.
             // Please look at the `SelectedRange` class and it's method for getting selection's layer for more information.
@@ -976,16 +859,14 @@ var TableView = /*#__PURE__*/function () {
             var selectionForLayer = selectedRange.peekByIndex(selectionOffset);
             cornersOfSelection = [selectionForLayer.from.row, selectionForLayer.from.col, selectionForLayer.to.row, selectionForLayer.to.col];
           }
-
           return _this2.instance.runHooks('afterDrawSelection', visualRowIndex, visualColumnIndex, cornersOfSelection, layerLevel);
         },
         onBeforeDrawBorders: function onBeforeDrawBorders(corners, borderClassName) {
           var _corners = _slicedToArray(corners, 4),
-              startRenderableRow = _corners[0],
-              startRenderableColumn = _corners[1],
-              endRenderableRow = _corners[2],
-              endRenderableColumn = _corners[3];
-
+            startRenderableRow = _corners[0],
+            startRenderableColumn = _corners[1],
+            endRenderableRow = _corners[2],
+            endRenderableColumn = _corners[3];
           var visualCorners = [_this2.instance.rowIndexMapper.getVisualFromRenderableIndex(startRenderableRow), _this2.instance.columnIndexMapper.getVisualFromRenderableIndex(startRenderableColumn), _this2.instance.rowIndexMapper.getVisualFromRenderableIndex(endRenderableRow), _this2.instance.columnIndexMapper.getVisualFromRenderableIndex(endRenderableColumn)];
           return _this2.instance.runHooks('beforeDrawBorders', visualCorners, borderClassName);
         },
@@ -997,7 +878,6 @@ var TableView = /*#__PURE__*/function () {
         },
         onBeforeStretchingColumnWidth: function onBeforeStretchingColumnWidth(stretchedWidth, renderedColumnIndex) {
           var visualColumnIndex = _this2.instance.columnIndexMapper.getVisualFromRenderableIndex(renderedColumnIndex);
-
           return _this2.instance.runHooks('beforeStretchingColumnWidth', stretchedWidth, visualColumnIndex);
         },
         onModifyRowHeaderWidth: function onModifyRowHeaderWidth(rowHeaderWidth) {
@@ -1005,37 +885,32 @@ var TableView = /*#__PURE__*/function () {
         },
         onModifyGetCellCoords: function onModifyGetCellCoords(renderableRowIndex, renderableColumnIndex, topmost) {
           var rowMapper = _this2.instance.rowIndexMapper;
-          var columnMapper = _this2.instance.columnIndexMapper; // Callback handle also headers. We shouldn't translate them.
+          var columnMapper = _this2.instance.columnIndexMapper;
 
+          // Callback handle also headers. We shouldn't translate them.
           var visualColumnIndex = renderableColumnIndex >= 0 ? columnMapper.getVisualFromRenderableIndex(renderableColumnIndex) : renderableColumnIndex;
           var visualRowIndex = renderableRowIndex >= 0 ? rowMapper.getVisualFromRenderableIndex(renderableRowIndex) : renderableRowIndex;
-
           var visualIndexes = _this2.instance.runHooks('modifyGetCellCoords', visualRowIndex, visualColumnIndex, topmost);
-
           if (Array.isArray(visualIndexes)) {
             var _visualIndexes = _slicedToArray(visualIndexes, 4),
-                visualRowFrom = _visualIndexes[0],
-                visualColumnFrom = _visualIndexes[1],
-                visualRowTo = _visualIndexes[2],
-                visualColumnTo = _visualIndexes[3]; // Result of the hook is handled by the Walkontable (renderable indexes).
-
+              visualRowFrom = _visualIndexes[0],
+              visualColumnFrom = _visualIndexes[1],
+              visualRowTo = _visualIndexes[2],
+              visualColumnTo = _visualIndexes[3];
 
+            // Result of the hook is handled by the Walkontable (renderable indexes).
             return [visualRowFrom >= 0 ? rowMapper.getRenderableFromVisualIndex(rowMapper.getNearestNotHiddenIndex(visualRowFrom, 1)) : visualRowFrom, visualColumnFrom >= 0 ? columnMapper.getRenderableFromVisualIndex(columnMapper.getNearestNotHiddenIndex(visualColumnFrom, 1)) : visualColumnFrom, visualRowTo >= 0 ? rowMapper.getRenderableFromVisualIndex(rowMapper.getNearestNotHiddenIndex(visualRowTo, -1)) : visualRowTo, visualColumnTo >= 0 ? columnMapper.getRenderableFromVisualIndex(columnMapper.getNearestNotHiddenIndex(visualColumnTo, -1)) : visualColumnTo];
           }
         },
         viewportRowCalculatorOverride: function viewportRowCalculatorOverride(calc) {
           var viewportOffset = _this2.settings.viewportRowRenderingOffset;
-
           if (viewportOffset === 'auto' && _this2.settings.fixedRowsTop) {
             viewportOffset = 10;
           }
-
           if (viewportOffset > 0 || viewportOffset === 'auto') {
             var renderableRows = _this2.countRenderableRows();
-
             var firstRenderedRow = calc.startRow;
             var lastRenderedRow = calc.endRow;
-
             if (typeof viewportOffset === 'number') {
               calc.startRow = Math.max(firstRenderedRow - viewportOffset, 0);
               calc.endRow = Math.min(lastRenderedRow + viewportOffset, renderableRows - 1);
@@ -1045,34 +920,27 @@ var TableView = /*#__PURE__*/function () {
               calc.endRow = Math.min(lastRenderedRow + offset, renderableRows - 1);
             }
           }
-
           _this2.instance.runHooks('afterViewportRowCalculatorOverride', calc);
         },
         viewportColumnCalculatorOverride: function viewportColumnCalculatorOverride(calc) {
           var viewportOffset = _this2.settings.viewportColumnRenderingOffset;
-
           if (viewportOffset === 'auto' && _this2.settings.fixedColumnsStart) {
             viewportOffset = 10;
           }
-
           if (viewportOffset > 0 || viewportOffset === 'auto') {
             var renderableColumns = _this2.countRenderableColumns();
-
             var firstRenderedColumn = calc.startColumn;
             var lastRenderedColumn = calc.endColumn;
-
             if (typeof viewportOffset === 'number') {
               calc.startColumn = Math.max(firstRenderedColumn - viewportOffset, 0);
               calc.endColumn = Math.min(lastRenderedColumn + viewportOffset, renderableColumns - 1);
             }
-
             if (viewportOffset === 'auto') {
               var offset = Math.ceil(lastRenderedColumn / renderableColumns * 6);
               calc.startColumn = Math.max(firstRenderedColumn - offset, 0);
               calc.endColumn = Math.min(lastRenderedColumn + offset, renderableColumns - 1);
             }
           }
-
           _this2.instance.runHooks('afterViewportColumnCalculatorOverride', calc);
         },
         rowHeaderWidth: function rowHeaderWidth() {
@@ -1080,19 +948,17 @@ var TableView = /*#__PURE__*/function () {
         },
         columnHeaderHeight: function columnHeaderHeight() {
           var columnHeaderHeight = _this2.instance.runHooks('modifyColumnHeaderHeight');
-
           return _this2.settings.columnHeaderHeight || columnHeaderHeight;
         }
       };
       this.instance.runHooks('beforeInitWalkontable', walkontableConfig);
       this._wt = new Walkontable(walkontableConfig);
       this.activeWt = this._wt;
-      var spreader = this._wt.wtTable.spreader; // We have to cache width and height after Walkontable initialization.
-
+      var spreader = this._wt.wtTable.spreader;
+      // We have to cache width and height after Walkontable initialization.
       var _this$instance$rootEl = this.instance.rootElement.getBoundingClientRect(),
-          width = _this$instance$rootEl.width,
-          height = _this$instance$rootEl.height;
-
+        width = _this$instance$rootEl.width,
+        height = _this$instance$rootEl.height;
       this.setLastSize(width, height);
       this.eventManager.addEventListener(spreader, 'mousedown', function (event) {
         // right mouse button exactly on spreader means right click on the right hand side of vertical scrollbar
@@ -1110,12 +976,12 @@ var TableView = /*#__PURE__*/function () {
         if (_this2.settings.observeDOMVisibility) {
           if (_this2._wt.drawInterrupted) {
             _this2.instance.forceFullRender = true;
-
             _this2.render();
           }
         }
       });
     }
+
     /**
      * Checks if it's possible to create text selection in element.
      *
@@ -1123,69 +989,63 @@ var TableView = /*#__PURE__*/function () {
      * @param {HTMLElement} el The element to check.
      * @returns {boolean}
      */
-
   }, {
     key: "isTextSelectionAllowed",
     value: function isTextSelectionAllowed(el) {
       if (isInput(el)) {
         return true;
       }
-
       var isChildOfTableBody = isChildOf(el, this.instance.view._wt.wtTable.spreader);
-
       if (this.settings.fragmentSelection === true && isChildOfTableBody) {
         return true;
       }
-
       if (this.settings.fragmentSelection === 'cell' && this.isSelectedOnlyCell() && isChildOfTableBody) {
         return true;
       }
-
       if (!this.settings.fragmentSelection && this.isCellEdited() && this.isSelectedOnlyCell()) {
         return true;
       }
-
       return false;
     }
+
     /**
      * Checks if user's been called mousedown.
      *
      * @private
      * @returns {boolean}
      */
-
   }, {
     key: "isMouseDown",
     value: function isMouseDown() {
       return privatePool.get(this).mouseDown;
     }
+
     /**
      * Check if selected only one cell.
      *
      * @private
      * @returns {boolean}
      */
-
   }, {
     key: "isSelectedOnlyCell",
     value: function isSelectedOnlyCell() {
       var _this$instance$getSel, _this$instance$getSel2;
-
       return (_this$instance$getSel = (_this$instance$getSel2 = this.instance.getSelectedRangeLast()) === null || _this$instance$getSel2 === void 0 ? void 0 : _this$instance$getSel2.isSingle()) !== null && _this$instance$getSel !== void 0 ? _this$instance$getSel : false;
     }
+
     /**
      * Checks if active cell is editing.
      *
      * @private
      * @returns {boolean}
      */
-
   }, {
     key: "isCellEdited",
     value: function isCellEdited() {
       var activeEditor = this.instance.getActiveEditor();
       return activeEditor && activeEditor.isOpened();
     }
+
     /**
      * `beforeDraw` callback.
      *
@@ -1195,7 +1055,6 @@ var TableView = /*#__PURE__*/function () {
      * @param {object} skipRender Object with `skipRender` property, if it is set to `true ` the next rendering
      *                            cycle will be skipped.
      */
-
   }, {
     key: "beforeRender",
     value: function beforeRender(force, skipRender) {
@@ -1204,6 +1063,7 @@ var TableView = /*#__PURE__*/function () {
         this.instance.runHooks('beforeViewRender', this.instance.forceFullRender, skipRender);
       }
     }
+
     /**
      * `afterRender` callback.
      *
@@ -1211,7 +1071,6 @@ var TableView = /*#__PURE__*/function () {
      * @param {boolean} force If `true` rendering was triggered by a change of settings or data or `false` if
      *                        rendering was triggered by scrolling or moving selection.
      */
-
   }, {
     key: "afterRender",
     value: function afterRender(force) {
@@ -1220,6 +1079,7 @@ var TableView = /*#__PURE__*/function () {
         this.instance.runHooks('afterViewRender', this.instance.forceFullRender);
       }
     }
+
     /**
      * Append row header to a TH element.
      *
@@ -1227,24 +1087,21 @@ var TableView = /*#__PURE__*/function () {
      * @param {number} visualRowIndex The visual row index.
      * @param {HTMLTableHeaderCellElement} TH The table header element.
      */
-
   }, {
     key: "appendRowHeader",
     value: function appendRowHeader(visualRowIndex, TH) {
       if (TH.firstChild) {
         var container = TH.firstChild;
-
         if (!hasClass(container, 'relative')) {
           empty(TH);
           this.appendRowHeader(visualRowIndex, TH);
           return;
         }
-
         this.updateCellHeader(container.querySelector('.rowHeader'), visualRowIndex, this.instance.getRowHeader);
       } else {
         var _this$instance4 = this.instance,
-            rootDocument = _this$instance4.rootDocument,
-            getRowHeader = _this$instance4.getRowHeader;
+          rootDocument = _this$instance4.rootDocument,
+          getRowHeader = _this$instance4.getRowHeader;
         var div = rootDocument.createElement('div');
         var span = rootDocument.createElement('span');
         div.className = 'relative';
@@ -1253,28 +1110,31 @@ var TableView = /*#__PURE__*/function () {
         div.appendChild(span);
         TH.appendChild(div);
       }
-
       this.instance.runHooks('afterGetRowHeader', visualRowIndex, TH);
     }
+
     /**
      * Append column header to a TH element.
      *
      * @private
      * @param {number} visualColumnIndex Visual column index.
-     * @param {HTMLTableHeaderCellElement} TH The table header element.
+     * @param {HTMLTableCellElement} TH The table header element.
+     * @param {Function} label The function that returns the header label.
+     * @param {number} [headerLevel=0] The index of header level counting from the top (positive
+     *                                 values counting from 0 to N).
      */
-
   }, {
     key: "appendColHeader",
     value: function appendColHeader(visualColumnIndex, TH) {
+      var label = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.instance.getColHeader;
+      var headerLevel = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
       if (TH.firstChild) {
         var container = TH.firstChild;
-
         if (hasClass(container, 'relative')) {
-          this.updateCellHeader(container.querySelector('.colHeader'), visualColumnIndex, this.instance.getColHeader);
+          this.updateCellHeader(container.querySelector('.colHeader'), visualColumnIndex, label);
         } else {
           empty(TH);
-          this.appendColHeader(visualColumnIndex, TH);
+          this.appendColHeader(visualColumnIndex, TH, headerLevel);
         }
       } else {
         var rootDocument = this.instance.rootDocument;
@@ -1282,13 +1142,13 @@ var TableView = /*#__PURE__*/function () {
         var span = rootDocument.createElement('span');
         div.className = 'relative';
         span.className = 'colHeader';
-        this.updateCellHeader(span, visualColumnIndex, this.instance.getColHeader);
+        this.updateCellHeader(span, visualColumnIndex, label);
         div.appendChild(span);
         TH.appendChild(div);
       }
-
-      this.instance.runHooks('afterGetColHeader', visualColumnIndex, TH);
+      this.instance.runHooks('afterGetColHeader', visualColumnIndex, TH, headerLevel);
     }
+
     /**
      * Updates header cell content.
      *
@@ -1297,15 +1157,13 @@ var TableView = /*#__PURE__*/function () {
      * @param {number} index Row index or column index.
      * @param {Function} content Function which should be returns content for this cell.
      */
-
   }, {
     key: "updateCellHeader",
     value: function updateCellHeader(element, index, content) {
       var renderedIndex = index;
+      var parentOverlay = this._wt.wtOverlays.getParentOverlay(element) || this._wt;
 
-      var parentOverlay = this._wt.wtOverlays.getParentOverlay(element) || this._wt; // prevent wrong calculations from SampleGenerator
-
-
+      // prevent wrong calculations from SampleGenerator
       if (element.parentNode) {
         if (hasClass(element, 'colHeader')) {
           renderedIndex = parentOverlay.wtTable.columnFilter.sourceToRendered(index);
@@ -1313,7 +1171,6 @@ var TableView = /*#__PURE__*/function () {
           renderedIndex = parentOverlay.wtTable.rowFilter.sourceToRendered(index);
         }
       }
-
       if (renderedIndex > -1) {
         fastInnerHTML(element, content(index));
       } else {
@@ -1322,6 +1179,7 @@ var TableView = /*#__PURE__*/function () {
         addClass(element, 'cornerHeader');
       }
     }
+
     /**
      * Given a element's left (or right in RTL mode) position relative to the viewport, returns maximum
      * element width until the right (or left) edge of the viewport (before scrollbar).
@@ -1330,15 +1188,14 @@ var TableView = /*#__PURE__*/function () {
      * @param {number} inlineOffset The left (or right in RTL mode) offset.
      * @returns {number}
      */
-
   }, {
     key: "maximumVisibleElementWidth",
     value: function maximumVisibleElementWidth(inlineOffset) {
       var workspaceWidth = this._wt.wtViewport.getWorkspaceWidth();
-
       var maxWidth = workspaceWidth - inlineOffset;
       return maxWidth > 0 ? maxWidth : 0;
     }
+
     /**
      * Given a element's top position relative to the viewport, returns maximum element height until the bottom
      * edge of the viewport (before scrollbar).
@@ -1347,22 +1204,20 @@ var TableView = /*#__PURE__*/function () {
      * @param {number} topOffset The top offset.
      * @returns {number}
      */
-
   }, {
     key: "maximumVisibleElementHeight",
     value: function maximumVisibleElementHeight(topOffset) {
       var workspaceHeight = this._wt.wtViewport.getWorkspaceHeight();
-
       var maxHeight = workspaceHeight - topOffset;
       return maxHeight > 0 ? maxHeight : 0;
     }
+
     /**
      * Sets new dimensions of the container.
      *
      * @param {number} width The table width.
      * @param {number} height The table height.
      */
-
   }, {
     key: "setLastSize",
     value: function setLastSize(width, height) {
@@ -1371,12 +1226,12 @@ var TableView = /*#__PURE__*/function () {
       priv.lastWidth = _ref2[0];
       priv.lastHeight = _ref2[1];
     }
+
     /**
      * Returns cached dimensions.
      *
      * @returns {object}
      */
-
   }, {
     key: "getLastSize",
     value: function getLastSize() {
@@ -1386,66 +1241,63 @@ var TableView = /*#__PURE__*/function () {
         height: priv.lastHeight
       };
     }
+
     /**
      * Returns the first fully visible row in the table viewport.
      *
      * @returns {number}
      */
-
   }, {
     key: "getFirstFullyVisibleRow",
     value: function getFirstFullyVisibleRow() {
       return this.instance.rowIndexMapper.getVisualFromRenderableIndex(this.instance.view._wt.wtScroll.getFirstVisibleRow());
     }
+
     /**
      * Returns the last fully visible row in the table viewport.
      *
      * @returns {number}
      */
-
   }, {
     key: "getLastFullyVisibleRow",
     value: function getLastFullyVisibleRow() {
       return this.instance.rowIndexMapper.getVisualFromRenderableIndex(this.instance.view._wt.wtScroll.getLastVisibleRow());
     }
+
     /**
      * Returns the first fully visible column in the table viewport.
      *
      * @returns {number}
      */
-
   }, {
     key: "getFirstFullyVisibleColumn",
     value: function getFirstFullyVisibleColumn() {
       return this.instance.columnIndexMapper.getVisualFromRenderableIndex(this.instance.view._wt.wtScroll.getFirstVisibleColumn());
     }
+
     /**
      * Returns the last fully visible column in the table viewport.
      *
      * @returns {number}
      */
-
   }, {
     key: "getLastFullyVisibleColumn",
     value: function getLastFullyVisibleColumn() {
       return this.instance.columnIndexMapper.getVisualFromRenderableIndex(this.instance.view._wt.wtScroll.getLastVisibleColumn());
     }
+
     /**
      * Destroys internal WalkOnTable's instance. Detaches all of the bonded listeners.
      *
      * @private
      */
-
   }, {
     key: "destroy",
     value: function destroy() {
       this._wt.destroy();
-
       this.eventManager.destroy();
     }
   }]);
-
   return TableView;
 }();
-
 export default TableView;