handsontable 0.0.0-next-dd5893f-20240918 → 0.0.0-next-fad35d5-20240924

package/plugins/mergeCells/cellsCollection.mjs

@@ -15,7 +15,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
 import MergedCellCoords from "./cellCoords.mjs";
-import { rangeEach } from "../../helpers/number.mjs";
+import { rangeEach, clamp } from "../../helpers/number.mjs";
 import { warn } from "../../helpers/console.mjs";
 import { arrayEach } from "../../helpers/array.mjs";
 import { toSingleLine } from "../../helpers/templateLiteralTag.mjs";
@@ -298,9 +298,21 @@ class MergedCellsCollection {
    */
   isFirstRenderableMergedCell(row, column) {
     const mergeParent = this.get(row, column);
-
-    // Return if row and column indexes are within merge area and if they are first rendered indexes within the area.
-    return mergeParent && this.hot.rowIndexMapper.getNearestNotHiddenIndex(mergeParent.row, 1) === row && this.hot.columnIndexMapper.getNearestNotHiddenIndex(mergeParent.col, 1) === column;
+    if (!mergeParent) {
+      return false;
+    }
+    const {
+      row: mergeRow,
+      col: mergeColumn,
+      rowspan,
+      colspan
+    } = mergeParent;
+    const overlayName = this.hot.view.getActiveOverlayName();
+    const firstRenderedRow = ['top', 'top_inline_start_corner'].includes(overlayName) ? 0 : this.hot.getFirstRenderedVisibleRow();
+    const firstRenderedColumn = ['inline_start', 'top_inline_start_corner', 'bottom_inline_start_corner'].includes(overlayName) ? 0 : this.hot.getFirstRenderedVisibleColumn();
+    const mergeCellsTopRow = clamp(firstRenderedRow, mergeRow, mergeRow + rowspan - 1);
+    const mergeCellsStartColumn = clamp(firstRenderedColumn, mergeColumn, mergeColumn + colspan - 1);
+    return this.hot.rowIndexMapper.getNearestNotHiddenIndex(mergeCellsTopRow, 1) === row && this.hot.columnIndexMapper.getNearestNotHiddenIndex(mergeCellsStartColumn, 1) === column;
   }
 
   /**

package/plugins/mergeCells/mergeCells.d.ts

@@ -2,14 +2,18 @@ import Core from '../../core';
 import { BasePlugin } from '../base';
 import CellRange from '../../3rdparty/walkontable/src/cell/range';
 
-export interface DetailedSettings {
+export interface MergeCellsSettings {
   row: number;
   col: number;
   rowspan: number;
   colspan: number;
 }
+export interface DetailedSettings {
+  virtualized: boolean;
+  cells: MergeCellsSettings[];
+}
 
-export type Settings = boolean | DetailedSettings[];
+export type Settings = boolean | MergeCellsSettings[] | DetailedSettings;
 
 export class MergeCells extends BasePlugin {
   constructor(hotInstance: Core);

package/plugins/mergeCells/mergeCells.js

@@ -11,7 +11,7 @@ require("core-js/modules/esnext.set.is-superset-of.v2.js");
 require("core-js/modules/esnext.set.symmetric-difference.v2.js");
 require("core-js/modules/esnext.set.union.v2.js");
 var _base = require("../base");
-var _pluginHooks = _interopRequireDefault(require("../../pluginHooks"));
+var _hooks = require("../../core/hooks");
 var _cellsCollection = _interopRequireDefault(require("./cellsCollection"));
 var _cellCoords = _interopRequireDefault(require("./cellCoords"));
 var _autofill = _interopRequireDefault(require("./calculations/autofill"));
@@ -35,10 +35,10 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
 function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
-_pluginHooks.default.getSingleton().register('beforeMergeCells');
-_pluginHooks.default.getSingleton().register('afterMergeCells');
-_pluginHooks.default.getSingleton().register('beforeUnmergeCells');
-_pluginHooks.default.getSingleton().register('afterUnmergeCells');
+_hooks.Hooks.getSingleton().register('beforeMergeCells');
+_hooks.Hooks.getSingleton().register('afterMergeCells');
+_hooks.Hooks.getSingleton().register('beforeUnmergeCells');
+_hooks.Hooks.getSingleton().register('afterUnmergeCells');
 const PLUGIN_KEY = exports.PLUGIN_KEY = 'mergeCells';
 const PLUGIN_PRIORITY = exports.PLUGIN_PRIORITY = 150;
 const SHORTCUTS_GROUP = PLUGIN_KEY;
@@ -153,6 +153,13 @@ class MergeCells extends _base.BasePlugin {
   static get PLUGIN_PRIORITY() {
     return PLUGIN_PRIORITY;
   }
+  static get DEFAULT_SETTINGS() {
+    return {
+      [_base.defaultMainSettingSymbol]: 'cells',
+      virtualized: false,
+      cells: []
+    };
+  }
   /**
    * Checks if the plugin is enabled in the handsontable settings. This method is executed in {@link Hooks#beforeInit}
    * hook and if it returns `true` then the {@link MergeCells#enablePlugin} method is called.
@@ -240,102 +247,108 @@ class MergeCells extends _base.BasePlugin {
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onModifyGetCellCoords).call(_this, ...args);
     });
-    this.addHook('afterIsMultipleSelection', function () {
+    this.addHook('modifyGetCoordsElement', function () {
       for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
         args[_key12] = arguments[_key12];
       }
+      return _assertClassBrand(_MergeCells_brand, _this, _onModifyGetCellCoords).call(_this, ...args);
+    });
+    this.addHook('afterIsMultipleSelection', function () {
+      for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
+        args[_key13] = arguments[_key13];
+      }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterIsMultipleSelection).call(_this, ...args);
     });
     this.addHook('afterRenderer', function () {
       return _classPrivateFieldGet(_cellRenderer, _this).after(...arguments);
     });
     this.addHook('afterContextMenuDefaultOptions', function () {
-      for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
-        args[_key13] = arguments[_key13];
+      for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
+        args[_key14] = arguments[_key14];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _addMergeActionsToContextMenu).call(_this, ...args);
     });
     this.addHook('afterGetCellMeta', function () {
-      for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
-        args[_key14] = arguments[_key14];
+      for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
+        args[_key15] = arguments[_key15];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterGetCellMeta).call(_this, ...args);
     });
     this.addHook('afterViewportRowCalculatorOverride', function () {
-      for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
-        args[_key15] = arguments[_key15];
+      for (var _len16 = arguments.length, args = new Array(_len16), _key16 = 0; _key16 < _len16; _key16++) {
+        args[_key16] = arguments[_key16];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterViewportRowCalculatorOverride).call(_this, ...args);
     });
     this.addHook('afterViewportColumnCalculatorOverride', function () {
-      for (var _len16 = arguments.length, args = new Array(_len16), _key16 = 0; _key16 < _len16; _key16++) {
-        args[_key16] = arguments[_key16];
+      for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
+        args[_key17] = arguments[_key17];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterViewportColumnCalculatorOverride).call(_this, ...args);
     });
     this.addHook('modifyAutofillRange', function () {
-      for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
-        args[_key17] = arguments[_key17];
+      for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
+        args[_key18] = arguments[_key18];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onModifyAutofillRange).call(_this, ...args);
     });
     this.addHook('afterCreateCol', function () {
-      for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
-        args[_key18] = arguments[_key18];
+      for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
+        args[_key19] = arguments[_key19];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterCreateCol).call(_this, ...args);
     });
     this.addHook('afterRemoveCol', function () {
-      for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
-        args[_key19] = arguments[_key19];
+      for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
+        args[_key20] = arguments[_key20];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterRemoveCol).call(_this, ...args);
     });
     this.addHook('afterCreateRow', function () {
-      for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
-        args[_key20] = arguments[_key20];
+      for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
+        args[_key21] = arguments[_key21];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterCreateRow).call(_this, ...args);
     });
     this.addHook('afterRemoveRow', function () {
-      for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
-        args[_key21] = arguments[_key21];
+      for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
+        args[_key22] = arguments[_key22];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterRemoveRow).call(_this, ...args);
     });
     this.addHook('afterChange', function () {
-      for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
-        args[_key22] = arguments[_key22];
+      for (var _len23 = arguments.length, args = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
+        args[_key23] = arguments[_key23];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterChange).call(_this, ...args);
     });
     this.addHook('beforeDrawBorders', function () {
-      for (var _len23 = arguments.length, args = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
-        args[_key23] = arguments[_key23];
+      for (var _len24 = arguments.length, args = new Array(_len24), _key24 = 0; _key24 < _len24; _key24++) {
+        args[_key24] = arguments[_key24];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onBeforeDrawAreaBorders).call(_this, ...args);
     });
     this.addHook('afterDrawSelection', function () {
-      for (var _len24 = arguments.length, args = new Array(_len24), _key24 = 0; _key24 < _len24; _key24++) {
-        args[_key24] = arguments[_key24];
+      for (var _len25 = arguments.length, args = new Array(_len25), _key25 = 0; _key25 < _len25; _key25++) {
+        args[_key25] = arguments[_key25];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterDrawSelection).call(_this, ...args);
     });
     this.addHook('beforeRemoveCellClassNames', function () {
-      for (var _len25 = arguments.length, args = new Array(_len25), _key25 = 0; _key25 < _len25; _key25++) {
-        args[_key25] = arguments[_key25];
+      for (var _len26 = arguments.length, args = new Array(_len26), _key26 = 0; _key26 < _len26; _key26++) {
+        args[_key26] = arguments[_key26];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onBeforeRemoveCellClassNames).call(_this, ...args);
     });
     this.addHook('beforeBeginEditing', function () {
-      for (var _len26 = arguments.length, args = new Array(_len26), _key26 = 0; _key26 < _len26; _key26++) {
-        args[_key26] = arguments[_key26];
+      for (var _len27 = arguments.length, args = new Array(_len27), _key27 = 0; _key27 < _len27; _key27++) {
+        args[_key27] = arguments[_key27];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onBeforeBeginEditing).call(_this, ...args);
     });
     this.addHook('modifyRowHeightByOverlayName', function () {
-      for (var _len27 = arguments.length, args = new Array(_len27), _key27 = 0; _key27 < _len27; _key27++) {
-        args[_key27] = arguments[_key27];
+      for (var _len28 = arguments.length, args = new Array(_len28), _key28 = 0; _key28 < _len28; _key28++) {
+        args[_key28] = arguments[_key28];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onModifyRowHeightByOverlayName).call(_this, ...args);
     });
@@ -366,10 +379,9 @@ class MergeCells extends _base.BasePlugin {
    *  - [`mergeCells`](@/api/options.md#mergecells)
    */
   updatePlugin() {
-    const settings = this.hot.getSettings()[PLUGIN_KEY];
     this.disablePlugin();
     this.enablePlugin();
-    this.generateFromSettings(settings);
+    this.generateFromSettings();
     super.updatePlugin();
   }
 
@@ -454,13 +466,9 @@ class MergeCells extends _base.BasePlugin {
    * Generates the merged cells from the settings provided to the plugin.
    *
    * @private
-   * @param {Array|boolean} settings The settings provided to the plugin.
    */
-  generateFromSettings(settings) {
-    if (!Array.isArray(settings)) {
-      return;
-    }
-    const validSettings = settings.filter(mergeCellInfo => this.validateSetting(mergeCellInfo));
+  generateFromSettings() {
+    const validSettings = this.getSetting('cells').filter(mergeCellInfo => this.validateSetting(mergeCellInfo));
     const nonOverlappingSettings = this.mergedCellsCollection.filterOverlappingMergeCells(validSettings);
     const populatedNulls = [];
     nonOverlappingSettings.forEach(mergeCellInfo => {
@@ -903,7 +911,7 @@ class MergeCells extends _base.BasePlugin {
 }
 exports.MergeCells = MergeCells;
 function _onAfterInit() {
-  this.generateFromSettings(this.hot.getSettings()[PLUGIN_KEY]);
+  this.generateFromSettings();
   this.hot.render();
 }
 function _onAfterIsMultipleSelection(isMultiple) {
@@ -1097,13 +1105,16 @@ function _onBeforeSelectionHighlightSet() {
   }
 }
 /**
- * `modifyGetCellCoords` hook callback. Swaps the `getCell` coords with the merged parent coords.
+ * The `modifyGetCellCoords` hook callback allows forwarding all `getCell` calls that point in-between the merged cells
+ * to the root element of the cell.
  *
  * @param {number} row Row index.
  * @param {number} column Visual column index.
+ * @param {boolean} topmost Indicates if the requested element belongs to the topmost layer (any overlay) or not.
+ * @param {string} [source] String that identifies how this coords change will be processed.
  * @returns {Array|undefined} Visual coordinates of the merge.
  */
-function _onModifyGetCellCoords(row, column) {
+function _onModifyGetCellCoords(row, column, topmost, source) {
   if (row < 0 || column < 0) {
     return;
   }
@@ -1117,11 +1128,17 @@ function _onModifyGetCellCoords(row, column) {
     colspan,
     rowspan
   } = mergeParent;
-  return [
-  // Most top-left merged cell coords.
-  mergeRow, mergeColumn,
-  // Most bottom-right merged cell coords.
-  mergeRow + rowspan - 1, mergeColumn + colspan - 1];
+  const topStartRow = mergeRow;
+  const topStartColumn = mergeColumn;
+  const bottomEndRow = mergeRow + rowspan - 1;
+  const bottomEndColumn = mergeColumn + colspan - 1;
+  if (source === 'render' && this.getSetting('virtualized')) {
+    const overlayName = this.hot.view.getActiveOverlayName();
+    const firstRenderedRow = ['top', 'top_inline_start_corner'].includes(overlayName) ? 0 : this.hot.getFirstRenderedVisibleRow();
+    const firstRenderedColumn = ['inline_start', 'top_inline_start_corner', 'bottom_inline_start_corner'].includes(overlayName) ? 0 : this.hot.getFirstRenderedVisibleColumn();
+    return [(0, _number.clamp)(firstRenderedRow, topStartRow, bottomEndRow), (0, _number.clamp)(firstRenderedColumn, topStartColumn, bottomEndColumn), (0, _number.clamp)(this.hot.getLastRenderedVisibleRow(), topStartRow, bottomEndRow), (0, _number.clamp)(this.hot.getLastRenderedVisibleColumn(), topStartColumn, bottomEndColumn)];
+  }
+  return [topStartRow, topStartColumn, bottomEndRow, bottomEndColumn];
 }
 /**
  * `afterContextMenuDefaultOptions` hook callback.
@@ -1257,11 +1274,17 @@ function _onAfterGetCellMeta(row, col, cellProperties) {
  * @param {object} calc The row calculator object.
  */
 function _onAfterViewportRowCalculatorOverride(calc) {
+  if (this.getSetting('virtualized')) {
+    return;
+  }
   const nrOfColumns = this.hot.countCols();
   this.modifyViewportRowStart(calc, nrOfColumns);
   this.modifyViewportRowEnd(calc, nrOfColumns);
 }
 function _onAfterViewportColumnCalculatorOverride(calc) {
+  if (this.getSetting('virtualized')) {
+    return;
+  }
   const nrOfRows = this.hot.countRows();
   this.modifyViewportColumnStart(calc, nrOfRows);
   this.modifyViewportColumnEnd(calc, nrOfRows);
@@ -1420,8 +1443,8 @@ function _onModifyRowHeightByOverlayName(height, row, overlayType) {
   let firstColumn;
   let lastColumn;
   if (overlayType === 'master') {
-    firstColumn = this.hot.view.getFirstRenderedVisibleColumn();
-    lastColumn = this.hot.view.getLastRenderedVisibleColumn();
+    firstColumn = this.hot.getFirstRenderedVisibleColumn();
+    lastColumn = this.hot.getLastRenderedVisibleColumn();
   } else {
     const activeOverlay = this.hot.view.getOverlayByName(overlayType);
     firstColumn = this.hot.columnIndexMapper.getVisualFromRenderableIndex(activeOverlay.clone.wtTable.getFirstRenderedColumn());
@@ -1434,7 +1457,7 @@ function _onModifyRowHeightByOverlayName(height, row, overlayType) {
   const from = this.hot._createCellCoords(row, firstColumn);
   const to = this.hot._createCellCoords(row, lastColumn);
   const viewportRange = this.hot._createCellRange(from, from, to);
-  const mergedCellsWithinRange = this.mergedCellsCollection.getWithinRange(viewportRange);
+  const mergedCellsWithinRange = this.mergedCellsCollection.getWithinRange(viewportRange, true);
   const maxRowspan = mergedCellsWithinRange.reduce((acc, _ref) => {
     let {
       rowspan

package/plugins/mergeCells/mergeCells.mjs

@@ -16,8 +16,8 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
 function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
-import { BasePlugin } from "../base/index.mjs";
-import Hooks from "../../pluginHooks.mjs";
+import { BasePlugin, defaultMainSettingSymbol } from "../base/index.mjs";
+import { Hooks } from "../../core/hooks/index.mjs";
 import MergedCellsCollection from "./cellsCollection.mjs";
 import MergedCellCoords from "./cellCoords.mjs";
 import AutofillCalculations from "./calculations/autofill.mjs";
@@ -26,7 +26,7 @@ import toggleMergeItem from "./contextMenuItem/toggleMerge.mjs";
 import { arrayEach } from "../../helpers/array.mjs";
 import { isObject } from "../../helpers/object.mjs";
 import { warn } from "../../helpers/console.mjs";
-import { rangeEach } from "../../helpers/number.mjs";
+import { rangeEach, clamp } from "../../helpers/number.mjs";
 import { getStyle } from "../../helpers/dom/element.mjs";
 import { isChrome } from "../../helpers/browser.mjs";
 import { FocusOrder } from "./focusOrder.mjs";
@@ -149,6 +149,13 @@ export class MergeCells extends BasePlugin {
   static get PLUGIN_PRIORITY() {
     return PLUGIN_PRIORITY;
   }
+  static get DEFAULT_SETTINGS() {
+    return {
+      [defaultMainSettingSymbol]: 'cells',
+      virtualized: false,
+      cells: []
+    };
+  }
   /**
    * Checks if the plugin is enabled in the handsontable settings. This method is executed in {@link Hooks#beforeInit}
    * hook and if it returns `true` then the {@link MergeCells#enablePlugin} method is called.
@@ -236,102 +243,108 @@ export class MergeCells extends BasePlugin {
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onModifyGetCellCoords).call(_this, ...args);
     });
-    this.addHook('afterIsMultipleSelection', function () {
+    this.addHook('modifyGetCoordsElement', function () {
       for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
         args[_key12] = arguments[_key12];
       }
+      return _assertClassBrand(_MergeCells_brand, _this, _onModifyGetCellCoords).call(_this, ...args);
+    });
+    this.addHook('afterIsMultipleSelection', function () {
+      for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
+        args[_key13] = arguments[_key13];
+      }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterIsMultipleSelection).call(_this, ...args);
     });
     this.addHook('afterRenderer', function () {
       return _classPrivateFieldGet(_cellRenderer, _this).after(...arguments);
     });
     this.addHook('afterContextMenuDefaultOptions', function () {
-      for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
-        args[_key13] = arguments[_key13];
+      for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
+        args[_key14] = arguments[_key14];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _addMergeActionsToContextMenu).call(_this, ...args);
     });
     this.addHook('afterGetCellMeta', function () {
-      for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
-        args[_key14] = arguments[_key14];
+      for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
+        args[_key15] = arguments[_key15];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterGetCellMeta).call(_this, ...args);
     });
     this.addHook('afterViewportRowCalculatorOverride', function () {
-      for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
-        args[_key15] = arguments[_key15];
+      for (var _len16 = arguments.length, args = new Array(_len16), _key16 = 0; _key16 < _len16; _key16++) {
+        args[_key16] = arguments[_key16];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterViewportRowCalculatorOverride).call(_this, ...args);
     });
     this.addHook('afterViewportColumnCalculatorOverride', function () {
-      for (var _len16 = arguments.length, args = new Array(_len16), _key16 = 0; _key16 < _len16; _key16++) {
-        args[_key16] = arguments[_key16];
+      for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
+        args[_key17] = arguments[_key17];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterViewportColumnCalculatorOverride).call(_this, ...args);
     });
     this.addHook('modifyAutofillRange', function () {
-      for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
-        args[_key17] = arguments[_key17];
+      for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
+        args[_key18] = arguments[_key18];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onModifyAutofillRange).call(_this, ...args);
     });
     this.addHook('afterCreateCol', function () {
-      for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
-        args[_key18] = arguments[_key18];
+      for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
+        args[_key19] = arguments[_key19];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterCreateCol).call(_this, ...args);
     });
     this.addHook('afterRemoveCol', function () {
-      for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
-        args[_key19] = arguments[_key19];
+      for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
+        args[_key20] = arguments[_key20];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterRemoveCol).call(_this, ...args);
     });
     this.addHook('afterCreateRow', function () {
-      for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
-        args[_key20] = arguments[_key20];
+      for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
+        args[_key21] = arguments[_key21];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterCreateRow).call(_this, ...args);
     });
     this.addHook('afterRemoveRow', function () {
-      for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
-        args[_key21] = arguments[_key21];
+      for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
+        args[_key22] = arguments[_key22];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterRemoveRow).call(_this, ...args);
     });
     this.addHook('afterChange', function () {
-      for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
-        args[_key22] = arguments[_key22];
+      for (var _len23 = arguments.length, args = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
+        args[_key23] = arguments[_key23];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterChange).call(_this, ...args);
     });
     this.addHook('beforeDrawBorders', function () {
-      for (var _len23 = arguments.length, args = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
-        args[_key23] = arguments[_key23];
+      for (var _len24 = arguments.length, args = new Array(_len24), _key24 = 0; _key24 < _len24; _key24++) {
+        args[_key24] = arguments[_key24];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onBeforeDrawAreaBorders).call(_this, ...args);
     });
     this.addHook('afterDrawSelection', function () {
-      for (var _len24 = arguments.length, args = new Array(_len24), _key24 = 0; _key24 < _len24; _key24++) {
-        args[_key24] = arguments[_key24];
+      for (var _len25 = arguments.length, args = new Array(_len25), _key25 = 0; _key25 < _len25; _key25++) {
+        args[_key25] = arguments[_key25];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterDrawSelection).call(_this, ...args);
     });
     this.addHook('beforeRemoveCellClassNames', function () {
-      for (var _len25 = arguments.length, args = new Array(_len25), _key25 = 0; _key25 < _len25; _key25++) {
-        args[_key25] = arguments[_key25];
+      for (var _len26 = arguments.length, args = new Array(_len26), _key26 = 0; _key26 < _len26; _key26++) {
+        args[_key26] = arguments[_key26];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onBeforeRemoveCellClassNames).call(_this, ...args);
     });
     this.addHook('beforeBeginEditing', function () {
-      for (var _len26 = arguments.length, args = new Array(_len26), _key26 = 0; _key26 < _len26; _key26++) {
-        args[_key26] = arguments[_key26];
+      for (var _len27 = arguments.length, args = new Array(_len27), _key27 = 0; _key27 < _len27; _key27++) {
+        args[_key27] = arguments[_key27];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onBeforeBeginEditing).call(_this, ...args);
     });
     this.addHook('modifyRowHeightByOverlayName', function () {
-      for (var _len27 = arguments.length, args = new Array(_len27), _key27 = 0; _key27 < _len27; _key27++) {
-        args[_key27] = arguments[_key27];
+      for (var _len28 = arguments.length, args = new Array(_len28), _key28 = 0; _key28 < _len28; _key28++) {
+        args[_key28] = arguments[_key28];
       }
       return _assertClassBrand(_MergeCells_brand, _this, _onModifyRowHeightByOverlayName).call(_this, ...args);
     });
@@ -362,10 +375,9 @@ export class MergeCells extends BasePlugin {
    *  - [`mergeCells`](@/api/options.md#mergecells)
    */
   updatePlugin() {
-    const settings = this.hot.getSettings()[PLUGIN_KEY];
     this.disablePlugin();
     this.enablePlugin();
-    this.generateFromSettings(settings);
+    this.generateFromSettings();
     super.updatePlugin();
   }
 
@@ -450,13 +462,9 @@ export class MergeCells extends BasePlugin {
    * Generates the merged cells from the settings provided to the plugin.
    *
    * @private
-   * @param {Array|boolean} settings The settings provided to the plugin.
    */
-  generateFromSettings(settings) {
-    if (!Array.isArray(settings)) {
-      return;
-    }
-    const validSettings = settings.filter(mergeCellInfo => this.validateSetting(mergeCellInfo));
+  generateFromSettings() {
+    const validSettings = this.getSetting('cells').filter(mergeCellInfo => this.validateSetting(mergeCellInfo));
     const nonOverlappingSettings = this.mergedCellsCollection.filterOverlappingMergeCells(validSettings);
     const populatedNulls = [];
     nonOverlappingSettings.forEach(mergeCellInfo => {
@@ -898,7 +906,7 @@ export class MergeCells extends BasePlugin {
    */
 }
 function _onAfterInit() {
-  this.generateFromSettings(this.hot.getSettings()[PLUGIN_KEY]);
+  this.generateFromSettings();
   this.hot.render();
 }
 function _onAfterIsMultipleSelection(isMultiple) {
@@ -1092,13 +1100,16 @@ function _onBeforeSelectionHighlightSet() {
   }
 }
 /**
- * `modifyGetCellCoords` hook callback. Swaps the `getCell` coords with the merged parent coords.
+ * The `modifyGetCellCoords` hook callback allows forwarding all `getCell` calls that point in-between the merged cells
+ * to the root element of the cell.
  *
  * @param {number} row Row index.
  * @param {number} column Visual column index.
+ * @param {boolean} topmost Indicates if the requested element belongs to the topmost layer (any overlay) or not.
+ * @param {string} [source] String that identifies how this coords change will be processed.
  * @returns {Array|undefined} Visual coordinates of the merge.
  */
-function _onModifyGetCellCoords(row, column) {
+function _onModifyGetCellCoords(row, column, topmost, source) {
   if (row < 0 || column < 0) {
     return;
   }
@@ -1112,11 +1123,17 @@ function _onModifyGetCellCoords(row, column) {
     colspan,
     rowspan
   } = mergeParent;
-  return [
-  // Most top-left merged cell coords.
-  mergeRow, mergeColumn,
-  // Most bottom-right merged cell coords.
-  mergeRow + rowspan - 1, mergeColumn + colspan - 1];
+  const topStartRow = mergeRow;
+  const topStartColumn = mergeColumn;
+  const bottomEndRow = mergeRow + rowspan - 1;
+  const bottomEndColumn = mergeColumn + colspan - 1;
+  if (source === 'render' && this.getSetting('virtualized')) {
+    const overlayName = this.hot.view.getActiveOverlayName();
+    const firstRenderedRow = ['top', 'top_inline_start_corner'].includes(overlayName) ? 0 : this.hot.getFirstRenderedVisibleRow();
+    const firstRenderedColumn = ['inline_start', 'top_inline_start_corner', 'bottom_inline_start_corner'].includes(overlayName) ? 0 : this.hot.getFirstRenderedVisibleColumn();
+    return [clamp(firstRenderedRow, topStartRow, bottomEndRow), clamp(firstRenderedColumn, topStartColumn, bottomEndColumn), clamp(this.hot.getLastRenderedVisibleRow(), topStartRow, bottomEndRow), clamp(this.hot.getLastRenderedVisibleColumn(), topStartColumn, bottomEndColumn)];
+  }
+  return [topStartRow, topStartColumn, bottomEndRow, bottomEndColumn];
 }
 /**
  * `afterContextMenuDefaultOptions` hook callback.
@@ -1252,11 +1269,17 @@ function _onAfterGetCellMeta(row, col, cellProperties) {
  * @param {object} calc The row calculator object.
  */
 function _onAfterViewportRowCalculatorOverride(calc) {
+  if (this.getSetting('virtualized')) {
+    return;
+  }
   const nrOfColumns = this.hot.countCols();
   this.modifyViewportRowStart(calc, nrOfColumns);
   this.modifyViewportRowEnd(calc, nrOfColumns);
 }
 function _onAfterViewportColumnCalculatorOverride(calc) {
+  if (this.getSetting('virtualized')) {
+    return;
+  }
   const nrOfRows = this.hot.countRows();
   this.modifyViewportColumnStart(calc, nrOfRows);
   this.modifyViewportColumnEnd(calc, nrOfRows);
@@ -1415,8 +1438,8 @@ function _onModifyRowHeightByOverlayName(height, row, overlayType) {
   let firstColumn;
   let lastColumn;
   if (overlayType === 'master') {
-    firstColumn = this.hot.view.getFirstRenderedVisibleColumn();
-    lastColumn = this.hot.view.getLastRenderedVisibleColumn();
+    firstColumn = this.hot.getFirstRenderedVisibleColumn();
+    lastColumn = this.hot.getLastRenderedVisibleColumn();
   } else {
     const activeOverlay = this.hot.view.getOverlayByName(overlayType);
     firstColumn = this.hot.columnIndexMapper.getVisualFromRenderableIndex(activeOverlay.clone.wtTable.getFirstRenderedColumn());
@@ -1429,7 +1452,7 @@ function _onModifyRowHeightByOverlayName(height, row, overlayType) {
   const from = this.hot._createCellCoords(row, firstColumn);
   const to = this.hot._createCellCoords(row, lastColumn);
   const viewportRange = this.hot._createCellRange(from, from, to);
-  const mergedCellsWithinRange = this.mergedCellsCollection.getWithinRange(viewportRange);
+  const mergedCellsWithinRange = this.mergedCellsCollection.getWithinRange(viewportRange, true);
   const maxRowspan = mergedCellsWithinRange.reduce((acc, _ref) => {
     let {
       rowspan