handsontable 11.0.0 → 12.0.0

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

@@ -18,6 +18,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+import "core-js/modules/es.function.name.js";
 import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/es.array.includes.js";
@@ -29,111 +30,153 @@ import "core-js/modules/es.symbol.iterator.js";
 import "core-js/modules/es.array.iterator.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.function.name.js";
 import "core-js/modules/es.regexp.exec.js";
 
 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); return Constructor; }
+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; }
 
-import { hasClass, index, offset, removeClass, removeTextNodes, overlayContainsElement, closest, outerWidth, innerHeight, isVisible as _isVisible } from "./../../../helpers/dom/element.mjs";
-import { isFunction } from "./../../../helpers/function.mjs";
-import CellCoords from "./cell/coords.mjs";
+import { hasClass, index, offset, removeClass, removeTextNodes, overlayContainsElement, closest, outerHeight, outerWidth, innerHeight, isVisible as _isVisible } from "../../../helpers/dom/element.mjs";
+import { isFunction } from "../../../helpers/function.mjs";
 import ColumnFilter from "./filter/column.mjs";
 import RowFilter from "./filter/row.mjs";
 import { Renderer } from "./renderer/index.mjs";
 import ColumnUtils from "./utils/column.mjs";
 import RowUtils from "./utils/row.mjs";
-import { isOverlayTypeOf } from "./overlay/registerer.mjs";
-import { CLONE_TOP, CLONE_BOTTOM, CLONE_LEFT, CLONE_TOP_LEFT_CORNER, CLONE_BOTTOM_LEFT_CORNER } from "./overlay/constants.mjs";
+import { CLONE_TOP, CLONE_BOTTOM, CLONE_INLINE_START, CLONE_TOP_INLINE_START_CORNER, CLONE_BOTTOM_INLINE_START_CORNER } from "./overlay/index.mjs";
 /**
- *
+ * @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);
 
-    this.hasTableWidth = true;
+    _defineProperty(this, "hasTableWidth", true);
+
+    _defineProperty(this, "isTableVisible", false);
+
+    _defineProperty(this, "tableOffset", 0);
+
+    _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;
-    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;
+    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 RowUtils(this.dataAccessObject, this.wtSettings); // TODO refactoring, It can be passed through IOC.
+
+    this.columnUtils = new ColumnUtils(this.dataAccessObject, this.wtSettings); // TODO refactoring, It can be passed through IOC.
 
-    this.rowUtils = new RowUtils(this.wot);
-    this.columnUtils = new ColumnUtils(this.wot);
     this.tableRenderer = new 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.
@@ -144,7 +187,8 @@ var Table = /*#__PURE__*/function () {
   _createClass(Table, [{
     key: "is",
     value: function is(overlayTypeName) {
-      return isOverlayTypeOf(this.wot.cloneOverlay, overlayTypeName);
+      // todo refactoring: eliminate all protected and private usages
+      return this.name === overlayTypeName;
     }
     /**
      *
@@ -153,7 +197,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) {
@@ -174,10 +218,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.
@@ -191,7 +231,7 @@ var Table = /*#__PURE__*/function () {
       var spreader;
 
       if (!parent || parent.nodeType !== Node.ELEMENT_NODE || !hasClass(parent, 'wtHolder')) {
-        spreader = this.wot.rootDocument.createElement('div');
+        spreader = this.domBindings.rootDocument.createElement('div');
         spreader.className = 'wtSpreader';
 
         if (parent) {
@@ -217,7 +257,7 @@ var Table = /*#__PURE__*/function () {
       var hider;
 
       if (!parent || parent.nodeType !== Node.ELEMENT_NODE || !hasClass(parent, 'wtHolder')) {
-        hider = this.wot.rootDocument.createElement('div');
+        hider = this.domBindings.rootDocument.createElement('div');
         hider.className = 'wtHider';
 
         if (parent) {
@@ -243,7 +283,7 @@ var Table = /*#__PURE__*/function () {
       var holder;
 
       if (!parent || parent.nodeType !== Node.ELEMENT_NODE || !hasClass(parent, 'wtHolder')) {
-        holder = this.wot.rootDocument.createElement('div');
+        holder = this.domBindings.rootDocument.createElement('div');
         holder.style.position = 'relative';
         holder.className = 'wtHolder';
 
@@ -254,6 +294,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);
@@ -273,14 +314,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;
@@ -289,10 +331,10 @@ var Table = /*#__PURE__*/function () {
         this.holderOffset = 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;
@@ -301,7 +343,7 @@ var Table = /*#__PURE__*/function () {
       }
 
       if (this.isMaster) {
-        syncScroll = wtOverlays.prepareOverlays();
+        syncScroll = wtOverlays.updateStateOfRendering();
       }
 
       if (runFastDraw) {
@@ -317,7 +359,7 @@ var Table = /*#__PURE__*/function () {
         if (this.isMaster) {
           this.tableOffset = offset(this.TABLE);
         } else {
-          this.tableOffset = this.wot.cloneSource.wtTable.tableOffset;
+          this.tableOffset = this.dataAccessObject.parentTableOffset;
         }
 
         var startRow = totalRows > 0 ? this.getFirstRenderedRow() : 0;
@@ -327,16 +369,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(CLONE_BOTTOM) || this.is(CLONE_BOTTOM_LEFT_CORNER)) {
+          if (this.is(CLONE_BOTTOM) || this.is(CLONE_BOTTOM_INLINE_START_CORNER)) {
             // do NOT render headers on the bottom or bottom-left corner overlay
             this.tableRenderer.setHeaderContentRenderers(rowHeaders, []);
           }
@@ -346,8 +389,8 @@ 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();
           }
 
@@ -358,9 +401,9 @@ var Table = /*#__PURE__*/function () {
           }
 
           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 = outerWidth(this.hider);
             var tableWidth = outerWidth(this.TABLE);
 
@@ -370,16 +413,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);
+            this.wtSettings.getSetting('onDraw', true);
           } else if (this.is(CLONE_BOTTOM)) {
-            this.wot.cloneSource.wtOverlays.adjustElementsSize();
+            this.dataAccessObject.cloneSource.wtOverlays.adjustElementsSize();
           }
         }
       }
@@ -391,19 +434,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();
@@ -416,7 +459,7 @@ var Table = /*#__PURE__*/function () {
         wtOverlays.syncScrollWithMaster();
       }
 
-      wot.drawn = true;
+      this.dataAccessObject.drawn = true;
       return this;
     }
     /**
@@ -426,18 +469,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 */
@@ -447,19 +490,19 @@ var Table = /*#__PURE__*/function () {
         currentHeaderHeight = 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
         }
       }
     }
@@ -470,10 +513,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]) {
@@ -493,20 +536,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(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;
           }
         }
       }
@@ -533,13 +577,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) {
@@ -572,7 +617,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++) {
@@ -589,7 +634,7 @@ var Table = /*#__PURE__*/function () {
       }
 
       for (var _i3 = 0; _i3 < len; _i3++) {
-        highlights[_i3].draw(wot, fastDraw);
+        highlights[_i3].draw(this.facadeGetter(), fastDraw);
       }
     }
     /**
@@ -617,7 +662,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);
@@ -713,7 +758,7 @@ var Table = /*#__PURE__*/function () {
         return;
       }
 
-      var rowHeadersCount = this.wot.getSetting('rowHeaders').length;
+      var rowHeadersCount = this.wtSettings.getSetting('rowHeaders').length;
 
       if (level >= rowHeadersCount) {
         return;
@@ -737,7 +782,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)];
@@ -775,12 +820,12 @@ var Table = /*#__PURE__*/function () {
       var row = index(TR);
       var col = cellElement.cellIndex;
 
-      if (overlayContainsElement(CLONE_TOP_LEFT_CORNER, cellElement, this.wtRootElement) || overlayContainsElement(CLONE_TOP, cellElement, this.wtRootElement)) {
+      if (overlayContainsElement(CLONE_TOP_INLINE_START_CORNER, cellElement, this.wtRootElement) || overlayContainsElement(CLONE_TOP, cellElement, this.wtRootElement)) {
         if (CONTAINER.nodeName === 'THEAD') {
           row -= CONTAINER.childNodes.length;
         }
-      } else if (overlayContainsElement(CLONE_BOTTOM_LEFT_CORNER, cellElement, this.wtRootElement) || overlayContainsElement(CLONE_BOTTOM, cellElement, this.wtRootElement)) {
-        var totalRows = this.wot.getSetting('totalRows');
+      } else if (overlayContainsElement(CLONE_BOTTOM_INLINE_START_CORNER, cellElement, this.wtRootElement) || overlayContainsElement(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);
@@ -788,13 +833,13 @@ var Table = /*#__PURE__*/function () {
         row = this.rowFilter.renderedToSource(row);
       }
 
-      if (overlayContainsElement(CLONE_TOP_LEFT_CORNER, cellElement, this.wtRootElement) || overlayContainsElement(CLONE_LEFT, cellElement, this.wtRootElement) || overlayContainsElement(CLONE_BOTTOM_LEFT_CORNER, cellElement, this.wtRootElement)) {
+      if (overlayContainsElement(CLONE_TOP_INLINE_START_CORNER, cellElement, this.wtRootElement) || overlayContainsElement(CLONE_INLINE_START, cellElement, this.wtRootElement) || overlayContainsElement(CLONE_BOTTOM_INLINE_START_CORNER, cellElement, this.wtRootElement)) {
         col = this.columnFilter.offsettedTH(col);
       } else {
         col = this.columnFilter.visibleRowHeadedColumnToSourceColumn(col);
       }
 
-      return new CellCoords(row, col);
+      return this.wot.createCellCoords(row, col);
     }
     /**
      * Check if any of the rendered rows is higher than expected, and if so, cache them.
@@ -803,12 +848,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 = innerHeight(this.TBODY) - 1;
       var previousRowHeight;
       var rowInnerHeight;
@@ -816,7 +861,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;
       }
@@ -834,9 +879,9 @@ var Table = /*#__PURE__*/function () {
           rowInnerHeight = 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;
         }
       }
     }
@@ -864,7 +909,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;
     }
@@ -882,7 +927,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;
     }
@@ -980,7 +1025,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    |
      *           +----+----+----║┄ ┄ +------+------+
@@ -1027,7 +1072,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    |
      *           +----+----+----║┄ ┄ +------+------+
@@ -1084,12 +1129,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.
@@ -1145,6 +1190,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 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 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 = 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 = 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'.
@@ -1193,7 +1290,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) {