handsontable 11.1.0 → 12.1.0

package/3rdparty/walkontable/src/table.js

@@ -12,13 +12,13 @@ require("core-js/modules/web.dom-collections.iterator.js");
 
 require("core-js/modules/es.array.slice.js");
 
-require("core-js/modules/es.function.name.js");
-
 require("core-js/modules/es.regexp.exec.js");
 
 exports.__esModule = true;
 exports.default = void 0;
 
+require("core-js/modules/es.function.name.js");
+
 require("core-js/modules/es.array.from.js");
 
 require("core-js/modules/es.string.iterator.js");
@@ -29,11 +29,9 @@ require("core-js/modules/es.object.to-string.js");
 
 require("core-js/modules/web.dom-collections.for-each.js");
 
-var _element = require("./../../../helpers/dom/element");
-
-var _function = require("./../../../helpers/function");
+var _element = require("../../../helpers/dom/element");
 
-var _coords = _interopRequireDefault(require("./cell/coords"));
+var _function = require("../../../helpers/function");
 
 var _column = _interopRequireDefault(require("./filter/column"));
 
@@ -45,9 +43,7 @@ var _column2 = _interopRequireDefault(require("./utils/column"));
 
 var _row2 = _interopRequireDefault(require("./utils/row"));
 
-var _registerer = require("./overlay/registerer");
-
-var _constants = require("./overlay/constants");
+var _overlay = require("./overlay");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -77,91 +73,136 @@ 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 _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; }
+
 /**
- *
+ * @todo These mixes are never added to the class Table, however their members are used here.
+ * @todo Continue: Potentially it works only, because some of these mixes are added to every inherited class.
+ * @todo Refactoring, move code from `if(this.isMaster)` into MasterTable, and others like that.
+ * @mixes stickyColumnsStart
+ * @mixes stickyRowsBottom
+ * @mixes stickyRowsTop
+ * @mixes calculatedRows
+ * @mixes calculatedColumns
+ * @abstract
  */
 var Table = /*#__PURE__*/function () {
   /**
-   * @param {Walkontable} wotInstance The Walkontable instance.
-   * @param {HTMLTableElement} table An element to the Walkontable generated table is injected.
+   * The walkontable settings.
+   *
+   * @protected
+   * @type {Settings}
+   */
+
+  /**
+   * Indicates if the table has height bigger than 0px.
+   *
+   * @type {boolean}
+   */
+
+  /**
+   * Indicates if the table has width bigger than 0px.
+   *
+   * @type {boolean}
+   */
+
+  /**
+   * Indicates if the table is visible. By visible, it means that the holder
+   * element has CSS 'display' property different than 'none'.
+   *
+   * @type {boolean}
+   */
+
+  /**
+   *
+   * @abstract
+   * @param {TableDao} dataAccessObject The data access object.
+   * @param {FacadeGetter} facadeGetter Function which return proper facade.
+   * @param {DomBindings} domBindings Bindings into DOM.
+   * @param {Settings} wtSettings The Walkontable settings.
+   * @param {'master'|CLONE_TYPES_ENUM} name Overlay name.
    */
-  function Table(wotInstance, table) {
+  function Table(dataAccessObject, facadeGetter, domBindings, wtSettings, name) {
     var _this = this;
 
     _classCallCheck(this, Table);
 
-    /**
-     * Indicates if this instance is of type `MasterTable` (i.e. It is NOT an overlay).
-     *
-     * @type {boolean}
-     */
-    this.isMaster = !wotInstance.cloneOverlay; // "instanceof" operator isn't used, because it caused a circular reference in Webpack
+    _defineProperty(this, "wtSettings", null);
 
-    this.wot = wotInstance; // legacy support
+    _defineProperty(this, "domBindings", void 0);
 
-    this.instance = this.wot;
-    this.TABLE = table;
-    this.TBODY = null;
-    this.THEAD = null;
-    this.COLGROUP = null;
-    this.tableOffset = 0;
-    this.holderOffset = 0;
-    /**
-     * Indicates if the table has height bigger than 0px.
-     *
-     * @type {boolean}
-     */
+    _defineProperty(this, "TBODY", null);
 
-    this.hasTableHeight = true;
-    /**
-     * Indicates if the table has width bigger than 0px.
-     *
-     * @type {boolean}
-     */
+    _defineProperty(this, "THEAD", null);
+
+    _defineProperty(this, "COLGROUP", null);
+
+    _defineProperty(this, "hasTableHeight", true);
+
+    _defineProperty(this, "hasTableWidth", true);
+
+    _defineProperty(this, "isTableVisible", false);
+
+    _defineProperty(this, "tableOffset", 0);
 
-    this.hasTableWidth = true;
+    _defineProperty(this, "holderOffset", 0);
+
+    this.domBindings = domBindings;
     /**
-     * Indicates if the table is visible. By visible, it means that the holder
-     * element has CSS 'display' property different than 'none'.
+     * Indicates if this instance is of type `MasterTable` (i.e. It is NOT an overlay).
      *
      * @type {boolean}
      */
 
-    this.isTableVisible = false;
-    (0, _element.removeTextNodes)(this.TABLE);
+    this.isMaster = name === 'master';
+    this.name = name;
+    this.dataAccessObject = dataAccessObject;
+    this.facadeGetter = facadeGetter;
+    this.wtSettings = wtSettings; // legacy support
+
+    this.instance = this.dataAccessObject.wot; // TODO refactoring: it might be removed here, and provides legacy support through facade.
+
+    this.wot = this.dataAccessObject.wot;
+    this.TABLE = domBindings.rootTable;
+    (0, _element.removeTextNodes)(this.TABLE); // TODO refactoring, to recognize the legitimacy of moving them into domBidings
+
     this.spreader = this.createSpreader(this.TABLE);
     this.hider = this.createHider(this.spreader);
     this.holder = this.createHolder(this.hider);
     this.wtRootElement = this.holder.parentNode;
 
     if (this.isMaster) {
-      this.alignOverlaysWithTrimmingContainer();
+      this.alignOverlaysWithTrimmingContainer(); // todo wow, It calls method from child class (MasterTable).
     }
 
     this.fixTableDomTree();
-    this.rowFilter = null;
-    this.columnFilter = null;
+    this.rowFilter = null; // TODO refactoring, eliminate all (re)creations of this object, then updates state when needed.
+
+    this.columnFilter = null; // TODO refactoring, eliminate all (re)creations of this object, then updates state when needed.
+
     this.correctHeaderWidth = false;
-    var origRowHeaderWidth = this.wot.wtSettings.settings.rowHeaderWidth; // Fix for jumping row headers (https://github.com/handsontable/handsontable/issues/3850)
+    var origRowHeaderWidth = this.wtSettings.getSettingPure('rowHeaderWidth'); // Fix for jumping row headers (https://github.com/handsontable/handsontable/issues/3850)
 
-    this.wot.wtSettings.settings.rowHeaderWidth = function () {
+    this.wtSettings.update('rowHeaderWidth', function () {
       return _this._modifyRowHeaderWidth(origRowHeaderWidth);
-    };
+    });
+    this.rowUtils = new _row2.default(this.dataAccessObject, this.wtSettings); // TODO refactoring, It can be passed through IOC.
+
+    this.columnUtils = new _column2.default(this.dataAccessObject, this.wtSettings); // TODO refactoring, It can be passed through IOC.
 
-    this.rowUtils = new _row2.default(this.wot);
-    this.columnUtils = new _column2.default(this.wot);
     this.tableRenderer = new _renderer.Renderer({
+      // TODO refactoring, It can be passed through IOC.
       TABLE: this.TABLE,
       THEAD: this.THEAD,
       COLGROUP: this.COLGROUP,
       TBODY: this.TBODY,
       rowUtils: this.rowUtils,
       columnUtils: this.columnUtils,
-      cellRenderer: this.wot.wtSettings.settings.cellRenderer
+      cellRenderer: this.wtSettings.getSettingPure('cellRenderer')
     });
   }
   /**
-   * Returns a boolean that is true if this intance of Table represents a specific overlay, identified by the overlay name.
+   * Returns a boolean that is true if this Table represents a specific overlay, identified by the overlay name.
    * For MasterTable, it returns false.
    *
    * @param {string} overlayTypeName The overlay type.
@@ -172,7 +213,8 @@ var Table = /*#__PURE__*/function () {
   _createClass(Table, [{
     key: "is",
     value: function is(overlayTypeName) {
-      return (0, _registerer.isOverlayTypeOf)(this.wot.cloneOverlay, overlayTypeName);
+      // todo refactoring: eliminate all protected and private usages
+      return this.name === overlayTypeName;
     }
     /**
      *
@@ -181,7 +223,7 @@ var Table = /*#__PURE__*/function () {
   }, {
     key: "fixTableDomTree",
     value: function fixTableDomTree() {
-      var rootDocument = this.wot.rootDocument;
+      var rootDocument = this.domBindings.rootDocument;
       this.TBODY = this.TABLE.querySelector('tbody');
 
       if (!this.TBODY) {
@@ -202,10 +244,6 @@ var Table = /*#__PURE__*/function () {
         this.COLGROUP = rootDocument.createElement('colgroup');
         this.TABLE.insertBefore(this.COLGROUP, this.THEAD);
       }
-
-      if (this.wot.getSetting('columnHeaders').length && !this.THEAD.childNodes.length) {
-        this.THEAD.appendChild(rootDocument.createElement('TR'));
-      }
     }
     /**
      * @param {HTMLTableElement} table An element to process.
@@ -219,7 +257,7 @@ var Table = /*#__PURE__*/function () {
       var spreader;
 
       if (!parent || parent.nodeType !== Node.ELEMENT_NODE || !(0, _element.hasClass)(parent, 'wtHolder')) {
-        spreader = this.wot.rootDocument.createElement('div');
+        spreader = this.domBindings.rootDocument.createElement('div');
         spreader.className = 'wtSpreader';
 
         if (parent) {
@@ -245,7 +283,7 @@ var Table = /*#__PURE__*/function () {
       var hider;
 
       if (!parent || parent.nodeType !== Node.ELEMENT_NODE || !(0, _element.hasClass)(parent, 'wtHolder')) {
-        hider = this.wot.rootDocument.createElement('div');
+        hider = this.domBindings.rootDocument.createElement('div');
         hider.className = 'wtHider';
 
         if (parent) {
@@ -271,7 +309,7 @@ var Table = /*#__PURE__*/function () {
       var holder;
 
       if (!parent || parent.nodeType !== Node.ELEMENT_NODE || !(0, _element.hasClass)(parent, 'wtHolder')) {
-        holder = this.wot.rootDocument.createElement('div');
+        holder = this.domBindings.rootDocument.createElement('div');
         holder.style.position = 'relative';
         holder.className = 'wtHolder';
 
@@ -282,6 +320,7 @@ var Table = /*#__PURE__*/function () {
 
         if (this.isMaster) {
           holder.parentNode.className += 'ht_master handsontable';
+          holder.parentNode.setAttribute('dir', this.wtSettings.getSettingPure('rtlMode') ? 'rtl' : 'ltr');
         }
 
         holder.appendChild(hider);
@@ -301,14 +340,15 @@ var Table = /*#__PURE__*/function () {
     key: "draw",
     value: function draw() {
       var fastDraw = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var wot = this.wot;
-      var wtOverlays = wot.wtOverlays,
-          wtViewport = wot.wtViewport;
-      var totalRows = wot.getSetting('totalRows');
-      var totalColumns = wot.getSetting('totalColumns');
-      var rowHeaders = wot.getSetting('rowHeaders');
+      var wtSettings = this.wtSettings;
+      var _this$dataAccessObjec = this.dataAccessObject,
+          wtOverlays = _this$dataAccessObjec.wtOverlays,
+          wtViewport = _this$dataAccessObjec.wtViewport;
+      var totalRows = wtSettings.getSetting('totalRows');
+      var totalColumns = wtSettings.getSetting('totalColumns');
+      var rowHeaders = wtSettings.getSetting('rowHeaders');
       var rowHeadersCount = rowHeaders.length;
-      var columnHeaders = wot.getSetting('columnHeaders');
+      var columnHeaders = wtSettings.getSetting('columnHeaders');
       var columnHeadersCount = columnHeaders.length;
       var syncScroll = false;
       var runFastDraw = fastDraw;
@@ -317,10 +357,10 @@ var Table = /*#__PURE__*/function () {
         this.holderOffset = (0, _element.offset)(this.holder);
         runFastDraw = wtViewport.createRenderCalculators(runFastDraw);
 
-        if (rowHeadersCount && !wot.getSetting('fixedColumnsLeft')) {
-          var leftScrollPos = wtOverlays.leftOverlay.getScrollPosition();
+        if (rowHeadersCount && !wtSettings.getSetting('fixedColumnsStart')) {
+          var leftScrollPos = wtOverlays.inlineStartOverlay.getScrollPosition();
           var previousState = this.correctHeaderWidth;
-          this.correctHeaderWidth = leftScrollPos > 0;
+          this.correctHeaderWidth = leftScrollPos !== 0;
 
           if (previousState !== this.correctHeaderWidth) {
             runFastDraw = false;
@@ -329,7 +369,7 @@ var Table = /*#__PURE__*/function () {
       }
 
       if (this.isMaster) {
-        syncScroll = wtOverlays.prepareOverlays();
+        syncScroll = wtOverlays.updateStateOfRendering();
       }
 
       if (runFastDraw) {
@@ -345,7 +385,7 @@ var Table = /*#__PURE__*/function () {
         if (this.isMaster) {
           this.tableOffset = (0, _element.offset)(this.TABLE);
         } else {
-          this.tableOffset = this.wot.cloneSource.wtTable.tableOffset;
+          this.tableOffset = this.dataAccessObject.parentTableOffset;
         }
 
         var startRow = totalRows > 0 ? this.getFirstRenderedRow() : 0;
@@ -355,16 +395,17 @@ var Table = /*#__PURE__*/function () {
         var performRedraw = true; // Only master table rendering can be skipped
 
         if (this.isMaster) {
-          this.alignOverlaysWithTrimmingContainer();
+          this.alignOverlaysWithTrimmingContainer(); // todo It calls method from child class (MasterTable).
+
           var skipRender = {};
-          this.wot.getSetting('beforeDraw', true, skipRender);
+          this.wtSettings.getSetting('beforeDraw', true, skipRender);
           performRedraw = skipRender.skipRender !== true;
         }
 
         if (performRedraw) {
           this.tableRenderer.setHeaderContentRenderers(rowHeaders, columnHeaders);
 
-          if (this.is(_constants.CLONE_BOTTOM) || this.is(_constants.CLONE_BOTTOM_LEFT_CORNER)) {
+          if (this.is(_overlay.CLONE_BOTTOM) || this.is(_overlay.CLONE_BOTTOM_INLINE_START_CORNER)) {
             // do NOT render headers on the bottom or bottom-left corner overlay
             this.tableRenderer.setHeaderContentRenderers(rowHeaders, []);
           }
@@ -374,21 +415,21 @@ var Table = /*#__PURE__*/function () {
           var workspaceWidth;
 
           if (this.isMaster) {
-            workspaceWidth = this.wot.wtViewport.getWorkspaceWidth();
-            this.wot.wtViewport.containerWidth = null;
+            workspaceWidth = this.dataAccessObject.workspaceWidth;
+            this.dataAccessObject.wtViewport.containerWidth = null;
             this.markOversizedColumnHeaders();
           }
 
           this.adjustColumnHeaderHeights();
 
-          if (this.isMaster || this.is(_constants.CLONE_BOTTOM)) {
+          if (this.isMaster || this.is(_overlay.CLONE_BOTTOM)) {
             this.markOversizedRows();
           }
 
           if (this.isMaster) {
-            this.wot.wtViewport.createVisibleCalculators();
-            this.wot.wtOverlays.refresh(false);
-            this.wot.wtOverlays.applyToDOM();
+            this.dataAccessObject.wtViewport.createVisibleCalculators();
+            this.dataAccessObject.wtOverlays.refresh(false);
+            this.dataAccessObject.wtOverlays.applyToDOM();
             var hiderWidth = (0, _element.outerWidth)(this.hider);
             var tableWidth = (0, _element.outerWidth)(this.TABLE);
 
@@ -398,16 +439,16 @@ var Table = /*#__PURE__*/function () {
               this.tableRenderer.renderer.colGroup.render();
             }
 
-            if (workspaceWidth !== this.wot.wtViewport.getWorkspaceWidth()) {
+            if (workspaceWidth !== this.dataAccessObject.wtViewport.getWorkspaceWidth()) {
               // workspace width changed though to shown/hidden vertical scrollbar. Let's reapply stretching
-              this.wot.wtViewport.containerWidth = null;
+              this.dataAccessObject.wtViewport.containerWidth = null;
               this.columnUtils.calculateWidths();
               this.tableRenderer.renderer.colGroup.render();
             }
 
-            this.wot.getSetting('onDraw', true);
-          } else if (this.is(_constants.CLONE_BOTTOM)) {
-            this.wot.cloneSource.wtOverlays.adjustElementsSize();
+            this.wtSettings.getSetting('onDraw', true);
+          } else if (this.is(_overlay.CLONE_BOTTOM)) {
+            this.dataAccessObject.cloneSource.wtOverlays.adjustElementsSize();
           }
         }
       }
@@ -419,19 +460,19 @@ var Table = /*#__PURE__*/function () {
           positionChanged = wtOverlays.bottomOverlay.resetFixedPosition() || positionChanged;
         }
 
-        positionChanged = wtOverlays.leftOverlay.resetFixedPosition() || positionChanged;
+        positionChanged = wtOverlays.inlineStartOverlay.resetFixedPosition() || positionChanged;
 
-        if (wtOverlays.topLeftCornerOverlay) {
-          wtOverlays.topLeftCornerOverlay.resetFixedPosition();
+        if (wtOverlays.topInlineStartCornerOverlay) {
+          wtOverlays.topInlineStartCornerOverlay.resetFixedPosition();
         }
 
-        if (wtOverlays.bottomLeftCornerOverlay && wtOverlays.bottomLeftCornerOverlay.clone) {
-          wtOverlays.bottomLeftCornerOverlay.resetFixedPosition();
+        if (wtOverlays.bottomInlineStartCornerOverlay && wtOverlays.bottomInlineStartCornerOverlay.clone) {
+          wtOverlays.bottomInlineStartCornerOverlay.resetFixedPosition();
         }
 
         if (positionChanged) {
           // It refreshes the cells borders caused by a 1px shift (introduced by overlays which add or
-          // remove `innerBorderTop` and `innerBorderLeft` CSS classes to the DOM element. This happens
+          // remove `innerBorderTop` and `innerBorderInlineStart` CSS classes to the DOM element. This happens
           // when there is a switch between rendering from 0 to N rows/columns and vice versa).
           wtOverlays.refreshAll();
           wtOverlays.adjustElementsSize();
@@ -444,7 +485,7 @@ var Table = /*#__PURE__*/function () {
         wtOverlays.syncScrollWithMaster();
       }
 
-      wot.drawn = true;
+      this.dataAccessObject.drawn = true;
       return this;
     }
     /**
@@ -454,18 +495,18 @@ var Table = /*#__PURE__*/function () {
   }, {
     key: "markIfOversizedColumnHeader",
     value: function markIfOversizedColumnHeader(col) {
-      var sourceColIndex = this.wot.wtTable.columnFilter.renderedToSource(col);
-      var level = this.wot.getSetting('columnHeaders').length;
-      var defaultRowHeight = this.wot.wtSettings.settings.defaultRowHeight;
+      var sourceColIndex = this.columnFilter.renderedToSource(col);
+      var level = this.wtSettings.getSetting('columnHeaders').length;
+      var defaultRowHeight = this.wtSettings.getSetting('defaultRowHeight');
       var previousColHeaderHeight;
       var currentHeader;
       var currentHeaderHeight;
-      var columnHeaderHeightSetting = this.wot.getSetting('columnHeaderHeight') || [];
+      var columnHeaderHeightSetting = this.wtSettings.getSetting('columnHeaderHeight') || [];
 
       while (level) {
         level -= 1;
-        previousColHeaderHeight = this.wot.wtTable.getColumnHeaderHeight(level);
-        currentHeader = this.wot.wtTable.getColumnHeader(sourceColIndex, level);
+        previousColHeaderHeight = this.getColumnHeaderHeight(level);
+        currentHeader = this.getColumnHeader(sourceColIndex, level);
 
         if (!currentHeader) {
           /* eslint-disable no-continue */
@@ -475,19 +516,19 @@ var Table = /*#__PURE__*/function () {
         currentHeaderHeight = (0, _element.innerHeight)(currentHeader);
 
         if (!previousColHeaderHeight && defaultRowHeight < currentHeaderHeight || previousColHeaderHeight < currentHeaderHeight) {
-          this.wot.wtViewport.oversizedColumnHeaders[level] = currentHeaderHeight;
+          this.dataAccessObject.wtViewport.oversizedColumnHeaders[level] = currentHeaderHeight;
         }
 
         if (Array.isArray(columnHeaderHeightSetting)) {
           if (columnHeaderHeightSetting[level] !== null && columnHeaderHeightSetting[level] !== void 0) {
-            this.wot.wtViewport.oversizedColumnHeaders[level] = columnHeaderHeightSetting[level];
+            this.dataAccessObject.wtViewport.oversizedColumnHeaders[level] = columnHeaderHeightSetting[level];
           }
         } else if (!isNaN(columnHeaderHeightSetting)) {
-          this.wot.wtViewport.oversizedColumnHeaders[level] = columnHeaderHeightSetting;
+          this.dataAccessObject.wtViewport.oversizedColumnHeaders[level] = columnHeaderHeightSetting;
         }
 
-        if (this.wot.wtViewport.oversizedColumnHeaders[level] < (columnHeaderHeightSetting[level] || columnHeaderHeightSetting)) {
-          this.wot.wtViewport.oversizedColumnHeaders[level] = columnHeaderHeightSetting[level] || columnHeaderHeightSetting; // eslint-disable-line max-len
+        if (this.dataAccessObject.wtViewport.oversizedColumnHeaders[level] < (columnHeaderHeightSetting[level] || columnHeaderHeightSetting)) {
+          this.dataAccessObject.wtViewport.oversizedColumnHeaders[level] = columnHeaderHeightSetting[level] || columnHeaderHeightSetting; // eslint-disable-line max-len
         }
       }
     }
@@ -498,10 +539,10 @@ var Table = /*#__PURE__*/function () {
   }, {
     key: "adjustColumnHeaderHeights",
     value: function adjustColumnHeaderHeights() {
-      var wot = this.wot;
-      var children = wot.wtTable.THEAD.childNodes;
-      var oversizedColumnHeaders = wot.wtViewport.oversizedColumnHeaders;
-      var columnHeaders = wot.getSetting('columnHeaders');
+      var wtSettings = this.wtSettings;
+      var children = this.THEAD.childNodes;
+      var oversizedColumnHeaders = this.dataAccessObject.wtViewport.oversizedColumnHeaders;
+      var columnHeaders = wtSettings.getSetting('columnHeaders');
 
       for (var i = 0, len = columnHeaders.length; i < len; i++) {
         if (oversizedColumnHeaders[i]) {
@@ -521,20 +562,21 @@ var Table = /*#__PURE__*/function () {
   }, {
     key: "resetOversizedRows",
     value: function resetOversizedRows() {
-      var wot = this.wot;
+      var wtSettings = this.wtSettings;
+      var wtViewport = this.dataAccessObject.wtViewport;
 
-      if (!this.isMaster && !this.is(_constants.CLONE_BOTTOM)) {
+      if (!this.isMaster && !this.is(_overlay.CLONE_BOTTOM)) {
         return;
       }
 
-      if (!wot.getSetting('externalRowCalculator')) {
+      if (!wtSettings.getSetting('externalRowCalculator')) {
         var rowsToRender = this.getRenderedRowsCount(); // Reset the oversized row cache for rendered rows
 
         for (var visibleRowIndex = 0; visibleRowIndex < rowsToRender; visibleRowIndex++) {
           var sourceRow = this.rowFilter.renderedToSource(visibleRowIndex);
 
-          if (wot.wtViewport.oversizedRows && wot.wtViewport.oversizedRows[sourceRow]) {
-            wot.wtViewport.oversizedRows[sourceRow] = void 0;
+          if (wtViewport.oversizedRows && wtViewport.oversizedRows[sourceRow]) {
+            wtViewport.oversizedRows[sourceRow] = void 0;
           }
         }
       }
@@ -561,13 +603,14 @@ var Table = /*#__PURE__*/function () {
   }, {
     key: "refreshSelections",
     value: function refreshSelections(fastDraw) {
-      var wot = this.wot;
+      var wtSettings = this.wtSettings;
+      var selections = this.dataAccessObject.selections;
 
-      if (!wot.selections) {
+      if (!selections) {
         return;
       }
 
-      var highlights = Array.from(wot.selections);
+      var highlights = Array.from(selections);
       var len = highlights.length;
 
       if (fastDraw) {
@@ -600,7 +643,7 @@ var Table = /*#__PURE__*/function () {
           }
         }
 
-        var additionalClassesToRemove = wot.getSetting('onBeforeRemoveCellClassNames');
+        var additionalClassesToRemove = wtSettings.getSetting('onBeforeRemoveCellClassNames');
 
         if (Array.isArray(additionalClassesToRemove)) {
           for (var _i = 0; _i < additionalClassesToRemove.length; _i++) {
@@ -617,7 +660,7 @@ var Table = /*#__PURE__*/function () {
       }
 
       for (var _i3 = 0; _i3 < len; _i3++) {
-        highlights[_i3].draw(wot, fastDraw);
+        highlights[_i3].draw(this.facadeGetter(), fastDraw);
       }
     }
     /**
@@ -645,7 +688,7 @@ var Table = /*#__PURE__*/function () {
     value: function getCell(coords) {
       var row = coords.row;
       var column = coords.col;
-      var hookResult = this.wot.getSetting('onModifyGetCellCoords', row, column);
+      var hookResult = this.wtSettings.getSetting('onModifyGetCellCoords', row, column);
 
       if (hookResult && Array.isArray(hookResult)) {
         var _hookResult = _slicedToArray(hookResult, 2);
@@ -741,7 +784,7 @@ var Table = /*#__PURE__*/function () {
         return;
       }
 
-      var rowHeadersCount = this.wot.getSetting('rowHeaders').length;
+      var rowHeadersCount = this.wtSettings.getSetting('rowHeaders').length;
 
       if (level >= rowHeadersCount) {
         return;
@@ -765,7 +808,7 @@ var Table = /*#__PURE__*/function () {
       }
 
       var THs = [];
-      var rowHeadersCount = this.wot.getSetting('rowHeaders').length;
+      var rowHeadersCount = this.wtSettings.getSetting('rowHeaders').length;
 
       for (var renderedRowIndex = 0; renderedRowIndex < rowHeadersCount; renderedRowIndex++) {
         var TR = this.TBODY.childNodes[this.rowFilter.sourceToRendered(row)];
@@ -803,12 +846,12 @@ var Table = /*#__PURE__*/function () {
       var row = (0, _element.index)(TR);
       var col = cellElement.cellIndex;
 
-      if ((0, _element.overlayContainsElement)(_constants.CLONE_TOP_LEFT_CORNER, cellElement, this.wtRootElement) || (0, _element.overlayContainsElement)(_constants.CLONE_TOP, cellElement, this.wtRootElement)) {
+      if ((0, _element.overlayContainsElement)(_overlay.CLONE_TOP_INLINE_START_CORNER, cellElement, this.wtRootElement) || (0, _element.overlayContainsElement)(_overlay.CLONE_TOP, cellElement, this.wtRootElement)) {
         if (CONTAINER.nodeName === 'THEAD') {
           row -= CONTAINER.childNodes.length;
         }
-      } else if ((0, _element.overlayContainsElement)(_constants.CLONE_BOTTOM_LEFT_CORNER, cellElement, this.wtRootElement) || (0, _element.overlayContainsElement)(_constants.CLONE_BOTTOM, cellElement, this.wtRootElement)) {
-        var totalRows = this.wot.getSetting('totalRows');
+      } else if ((0, _element.overlayContainsElement)(_overlay.CLONE_BOTTOM_INLINE_START_CORNER, cellElement, this.wtRootElement) || (0, _element.overlayContainsElement)(_overlay.CLONE_BOTTOM, cellElement, this.wtRootElement)) {
+        var totalRows = this.wtSettings.getSetting('totalRows');
         row = totalRows - CONTAINER.childNodes.length + row;
       } else if (CONTAINER === this.THEAD) {
         row = this.rowFilter.visibleColHeadedRowToSourceRow(row);
@@ -816,13 +859,13 @@ var Table = /*#__PURE__*/function () {
         row = this.rowFilter.renderedToSource(row);
       }
 
-      if ((0, _element.overlayContainsElement)(_constants.CLONE_TOP_LEFT_CORNER, cellElement, this.wtRootElement) || (0, _element.overlayContainsElement)(_constants.CLONE_LEFT, cellElement, this.wtRootElement) || (0, _element.overlayContainsElement)(_constants.CLONE_BOTTOM_LEFT_CORNER, cellElement, this.wtRootElement)) {
+      if ((0, _element.overlayContainsElement)(_overlay.CLONE_TOP_INLINE_START_CORNER, cellElement, this.wtRootElement) || (0, _element.overlayContainsElement)(_overlay.CLONE_INLINE_START, cellElement, this.wtRootElement) || (0, _element.overlayContainsElement)(_overlay.CLONE_BOTTOM_INLINE_START_CORNER, cellElement, this.wtRootElement)) {
         col = this.columnFilter.offsettedTH(col);
       } else {
         col = this.columnFilter.visibleRowHeadedColumnToSourceColumn(col);
       }
 
-      return new _coords.default(row, col);
+      return this.wot.createCellCoords(row, col);
     }
     /**
      * Check if any of the rendered rows is higher than expected, and if so, cache them.
@@ -831,12 +874,12 @@ var Table = /*#__PURE__*/function () {
   }, {
     key: "markOversizedRows",
     value: function markOversizedRows() {
-      if (this.wot.getSetting('externalRowCalculator')) {
+      if (this.wtSettings.getSetting('externalRowCalculator')) {
         return;
       }
 
       var rowCount = this.TBODY.childNodes.length;
-      var expectedTableHeight = rowCount * this.wot.wtSettings.settings.defaultRowHeight;
+      var expectedTableHeight = rowCount * this.wtSettings.getSetting('defaultRowHeight');
       var actualTableHeight = (0, _element.innerHeight)(this.TBODY) - 1;
       var previousRowHeight;
       var rowInnerHeight;
@@ -844,7 +887,7 @@ var Table = /*#__PURE__*/function () {
       var currentTr;
       var rowHeader;
 
-      if (expectedTableHeight === actualTableHeight && !this.wot.getSetting('fixedRowsBottom')) {
+      if (expectedTableHeight === actualTableHeight && !this.wtSettings.getSetting('fixedRowsBottom')) {
         // If the actual table height equals rowCount * default single row height, no row is oversized -> no need to iterate over them
         return;
       }
@@ -862,9 +905,9 @@ var Table = /*#__PURE__*/function () {
           rowInnerHeight = (0, _element.innerHeight)(currentTr) - 1;
         }
 
-        if (!previousRowHeight && this.wot.wtSettings.settings.defaultRowHeight < rowInnerHeight || previousRowHeight < rowInnerHeight) {
+        if (!previousRowHeight && this.wtSettings.getSetting('defaultRowHeight') < rowInnerHeight || previousRowHeight < rowInnerHeight) {
           rowInnerHeight += 1;
-          this.wot.wtViewport.oversizedRows[sourceRowIndex] = rowInnerHeight;
+          this.dataAccessObject.wtViewport.oversizedRows[sourceRowIndex] = rowInnerHeight;
         }
       }
     }
@@ -892,7 +935,7 @@ var Table = /*#__PURE__*/function () {
         return false;
       }
 
-      var rowHeaders = this.wot.getSetting('rowHeaders');
+      var rowHeaders = this.wtSettings.getSetting('rowHeaders');
       var rowHeadersCount = rowHeaders.length;
       return Math.abs(column) <= rowHeadersCount;
     }
@@ -910,7 +953,7 @@ var Table = /*#__PURE__*/function () {
         return false;
       }
 
-      var columnHeaders = this.wot.getSetting('columnHeaders');
+      var columnHeaders = this.wtSettings.getSetting('columnHeaders');
       var columnHeadersCount = columnHeaders.length;
       return Math.abs(row) <= columnHeadersCount;
     }
@@ -1008,7 +1051,7 @@ var Table = /*#__PURE__*/function () {
      *
      * Negative column index is used to check the rows' headers.
      *
-     *                            For fixedColumnsLeft: 1 the master overlay
+     *                            For fixedColumnsStart: 1 the master overlay
      *                            do not render this first columns.
      *  Headers    -3   -2   -1    |
      *           +----+----+----║┄ ┄ +------+------+
@@ -1055,7 +1098,7 @@ var Table = /*#__PURE__*/function () {
      * it is not possible to render headers partially. The "after" index can not be
      * lower than -1.
      *
-     *                            For fixedColumnsLeft: 1 the master overlay
+     *                            For fixedColumnsStart: 1 the master overlay
      *                            do not render this first columns.
      *  Headers    -3   -2   -1    |
      *           +----+----+----║┄ ┄ +------+------+
@@ -1112,12 +1155,12 @@ var Table = /*#__PURE__*/function () {
   }, {
     key: "allRowsInViewport",
     value: function allRowsInViewport() {
-      return this.wot.getSetting('totalRows') === this.getVisibleRowsCount();
+      return this.wtSettings.getSetting('totalRows') === this.getVisibleRowsCount();
     }
   }, {
     key: "allColumnsInViewport",
     value: function allColumnsInViewport() {
-      return this.wot.getSetting('totalColumns') === this.getVisibleColumnsCount();
+      return this.wtSettings.getSetting('totalColumns') === this.getVisibleColumnsCount();
     }
     /**
      * Checks if any of the row's cells content exceeds its initial height, and if so, returns the oversized height.
@@ -1173,6 +1216,58 @@ var Table = /*#__PURE__*/function () {
     value: function hasDefinedSize() {
       return this.hasTableHeight && this.hasTableWidth;
     }
+    /**
+     * Gets table's width. The returned width is the width of the rendered cells that fit in the
+     * current viewport. The value may change depends on the viewport position (scroll position).
+     *
+     * @returns {number}
+     */
+
+  }, {
+    key: "getWidth",
+    value: function getWidth() {
+      return (0, _element.outerWidth)(this.TABLE);
+    }
+    /**
+     * Gets table's height. The returned height is the height of the rendered cells that fit in the
+     * current viewport. The value may change depends on the viewport position (scroll position).
+     *
+     * @returns {number}
+     */
+
+  }, {
+    key: "getHeight",
+    value: function getHeight() {
+      return (0, _element.outerHeight)(this.TABLE);
+    }
+    /**
+     * Gets table's total width. The returned width is the width of all rendered cells (including headers)
+     * that can be displayed in the table.
+     *
+     * @returns {number}
+     */
+
+  }, {
+    key: "getTotalWidth",
+    value: function getTotalWidth() {
+      var width = (0, _element.outerWidth)(this.hider); // when the overlay's table does not have any cells the hider returns 0, get then width from the table element
+
+      return width !== 0 ? width : this.getWidth();
+    }
+    /**
+     * Gets table's total height. The returned height is the height of all rendered cells (including headers)
+     * that can be displayed in the table.
+     *
+     * @returns {number}
+     */
+
+  }, {
+    key: "getTotalHeight",
+    value: function getTotalHeight() {
+      var height = (0, _element.outerHeight)(this.hider); // when the overlay's table does not have any cells the hider returns 0, get then height from the table element
+
+      return height !== 0 ? height : this.getHeight();
+    }
     /**
      * Checks if the table is visible. It returns `true` when the holder element (or its parents)
      * has CSS 'display' property different than 'none'.
@@ -1221,7 +1316,7 @@ var Table = /*#__PURE__*/function () {
       var rowHeaderWidth = width;
 
       if (typeof width !== 'number') {
-        rowHeaderWidth = this.wot.getSetting('defaultColumnWidth');
+        rowHeaderWidth = this.wtSettings.getSetting('defaultColumnWidth');
       }
 
       if (this.correctHeaderWidth) {