handsontable 15.3.0-next-175012b-20250429 → 16.0.0-next-f486b48-20250702

package/core.mjs

@@ -23,6 +23,7 @@ import { deepClone, duckSchema, isObjectEqual, isObject, deepObjectSize, hasOwnP
 import { FocusManager } from "./focusManager.mjs";
 import { arrayMap, arrayEach, arrayReduce, getDifferenceOfArrays, stringToArray, pivot } from "./helpers/array.mjs";
 import { instanceToHTML } from "./utils/parseTable.mjs";
+import { staticRegister } from "./utils/staticRegister.mjs";
 import { getPlugin, getPluginsNames } from "./plugins/registry.mjs";
 import { getRenderer } from "./renderers/registry.mjs";
 import { getEditor } from "./editors/registry.mjs";
@@ -45,6 +46,9 @@ import { createUniqueMap } from "./utils/dataStructures/uniqueMap.mjs";
 import { createShortcutManager } from "./shortcuts/index.mjs";
 import { registerAllShortcutContexts } from "./shortcutContexts/index.mjs";
 import { getThemeClassName } from "./helpers/themes.mjs";
+import { StylesHandler } from "./utils/stylesHandler.mjs";
+import { warn } from "./helpers/console.mjs";
+import { CellRangeToRenderableMapper } from "./core/coordsMapper/rangeToRenderableMapper.mjs";
 let activeGuid = null;
 
 /**
@@ -80,6 +84,12 @@ const deprecationWarns = new Set();
  * by using React's `ref` feature (read more on the [Instance methods](@/guides/getting-started/react-methods/react-methods.md) page).
  * :::
  *
+ * ::: only-for angular
+ * To use these methods, associate a Handsontable instance with your instance
+ * of the [`HotTable` component](@/guides/getting-started/installation/installation.md#5-use-the-hottable-component),
+ * by using `@ViewChild` decorator (read more on the [Instance access](@/guides/getting-started/angular-hot-instance/angular-hot-instance.md) page).
+ * :::
+ *
  * ## How to call a method
  *
  * ::: only-for javascript
@@ -110,11 +120,44 @@ const deprecationWarns = new Set();
  * ```
  * :::
  *
- * @param {HTMLElement} rootElement The element to which the Handsontable instance is injected.
+ * ::: only-for angular
+ * ```ts
+ * import { Component, ViewChild, AfterViewInit } from "@angular/core";
+ * import {
+ *   GridSettings,
+ *   HotTableComponent,
+ *   HotTableModule,
+ * } from "@handsontable/angular-wrapper";
+ *
+ * `@Component`({
+ *   standalone: true,
+ *   imports: [HotTableModule],
+ *   template: ` <div>
+ *     <hot-table themeName="ht-theme-main" [settings]="gridSettings" />
+ *   </div>`,
+ * })
+ * export class ExampleComponent implements AfterViewInit {
+ *   `@ViewChild`(HotTableComponent, { static: false })
+ *   readonly hotTable!: HotTableComponent;
+ *
+ *   readonly gridSettings = <GridSettings>{
+ *     columns: [{}],
+ *   };
+ *
+ *   ngAfterViewInit(): void {
+ *     // Access the Handsontable instance
+ *     // Call a method
+ *     this.hotTable?.hotInstance?.setDataAtCell(0, 0, "new value");
+ *   }
+ * }
+ * ```
+ * :::
+ *
+ * @param {HTMLElement} rootContainer The element to which the Handsontable instance is injected.
  * @param {object} userSettings The user defined options.
  * @param {boolean} [rootInstanceSymbol=false] Indicates if the instance is root of all later instances created.
  */
-export default function Core(rootElement, userSettings) {
+export default function Core(rootContainer, userSettings) {
   var _userSettings$layoutD,
     _this = this;
   let rootInstanceSymbol = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
@@ -131,6 +174,30 @@ export default function Core(rootElement, userSettings) {
     registerAsRootInstance(this);
   }
 
+  /**
+   * Reference to the root container.
+   *
+   * @private
+   * @type {HTMLElement}
+   */
+  this.rootContainer = rootContainer;
+
+  /**
+   * Reference to the wrapper element.
+   *
+   * @private
+   * @type {HTMLElement}
+   */
+  this.rootWrapperElement = undefined;
+
+  /**
+   * Reference to the portal element.
+   *
+   * @private
+   * @type {HTMLElement}
+   */
+  this.rootPortalElement = undefined;
+
   // TODO: check if references to DOM elements should be move to UI layer (Walkontable)
   /**
    * Reference to the container element.
@@ -138,14 +205,16 @@ export default function Core(rootElement, userSettings) {
    * @private
    * @type {HTMLElement}
    */
-  this.rootElement = rootElement;
+  this.rootElement = isRootInstance(this) ? rootContainer.ownerDocument.createElement('div') : rootContainer;
+
   /**
    * The nearest document over container.
    *
    * @private
    * @type {Document}
    */
-  this.rootDocument = rootElement.ownerDocument;
+  this.rootDocument = rootContainer.ownerDocument;
+
   /**
    * Window object over container's document.
    *
@@ -153,6 +222,17 @@ export default function Core(rootElement, userSettings) {
    * @type {Window}
    */
   this.rootWindow = this.rootDocument.defaultView;
+  if (isRootInstance(this)) {
+    this.rootWrapperElement = this.rootDocument.createElement('div');
+    this.rootPortalElement = this.rootDocument.createElement('div');
+    addClass(this.rootElement, 'ht-wrapper');
+    addClass(this.rootWrapperElement, 'ht-root-wrapper');
+    this.rootWrapperElement.appendChild(this.rootElement);
+    this.rootContainer.appendChild(this.rootWrapperElement);
+    addClass(this.rootPortalElement, 'ht-portal');
+    this.rootDocument.body.appendChild(this.rootPortalElement);
+  }
+
   /**
    * A boolean to tell if the Handsontable has been fully destroyed. This is set to `true`
    * after `afterDestroy` hook is called.
@@ -162,6 +242,7 @@ export default function Core(rootElement, userSettings) {
    * @type {boolean}
    */
   this.isDestroyed = false;
+
   /**
    * The counter determines how many times the render suspending was called. It allows
    * tracking the nested suspending calls. For each render suspend resuming call the
@@ -172,6 +253,7 @@ export default function Core(rootElement, userSettings) {
    * @type {number}
    */
   this.renderSuspendedCounter = 0;
+
   /**
    * The counter determines how many times the execution suspending was called. It allows
    * tracking the nested suspending calls. For each execution suspend resuming call the
@@ -221,6 +303,14 @@ export default function Core(rootElement, userSettings) {
   this.getDirectionFactor = function () {
     return instance.isLtr() ? 1 : -1;
   };
+
+  /**
+   * Styles handler instance.
+   *
+   * @private
+   * @type {StylesHandler}
+   */
+  this.stylesHandler = new StylesHandler(instance.rootElement, instance.rootDocument);
   userSettings.language = getValidLanguageCode(userSettings.language);
   const settingsWithoutHooks = Object.fromEntries(Object.entries(userSettings).filter(_ref => {
     let [key] = _ref;
@@ -231,10 +321,9 @@ export default function Core(rootElement, userSettings) {
   const globalMeta = metaManager.getGlobalMeta();
   const pluginsRegistry = createUniqueMap();
   this.container = this.rootDocument.createElement('div');
-  rootElement.insertBefore(this.container, rootElement.firstChild);
+  this.rootElement.insertBefore(this.container, this.rootElement.firstChild);
   if (isRootInstance(this)) {
-    _injectProductInfo(userSettings.licenseKey, rootElement);
-    addClass(rootElement, 'ht-wrapper');
+    _injectProductInfo(userSettings.licenseKey, this.rootWrapperElement);
   }
   this.guid = `ht_${randomString()}`; // this is the namespace for global events
 
@@ -248,6 +337,7 @@ export default function Core(rootElement, userSettings) {
    * @type {IndexMapper}
    */
   this.columnIndexMapper = new IndexMapper();
+
   /**
    * Instance of index mapper which is responsible for managing the row indexes.
    *
@@ -266,6 +356,11 @@ export default function Core(rootElement, userSettings) {
     instance.runHooks('beforeCompositionStart', event);
   });
   dataSource = new DataSource(instance);
+  const moduleRegisterer = staticRegister(this.guid);
+  moduleRegisterer.register('cellRangeMapper', new CellRangeToRenderableMapper({
+    rowIndexMapper: this.rowIndexMapper,
+    columnIndexMapper: this.columnIndexMapper
+  }));
   if (!this.rootElement.id || this.rootElement.id.substring(0, 3) === 'ht_') {
     this.rootElement.id = this.guid; // if root element does not have an id, assign a random id
   }
@@ -381,11 +476,13 @@ export default function Core(rootElement, userSettings) {
     } else {
       removeClass(this.rootElement, ['ht__selection--rows', 'ht__selection--columns']);
     }
-    if (selection.getSelectionSource() !== 'shift') {
+    if (!['shift', 'refresh'].includes(selection.getSelectionSource())) {
       editorManager.closeEditor(null);
     }
-    instance.view.render();
-    editorManager.prepareEditor();
+    if (selection.getSelectionSource() !== 'refresh') {
+      instance.view.render();
+      editorManager.prepareEditor();
+    }
   });
   this.selection.addLocalHook('beforeSetFocus', cellCoords => {
     this.runHooks('beforeSelectionFocusSet', cellCoords.row, cellCoords.col);
@@ -408,6 +505,10 @@ export default function Core(rootElement, userSettings) {
     } = cellRanges[selectionLayerLevel];
     this.runHooks('afterSelectionEnd', from.row, from.col, to.row, to.col, selectionLayerLevel);
     this.runHooks('afterSelectionEndByProp', from.row, instance.colToProp(from.col), to.row, instance.colToProp(to.col), selectionLayerLevel);
+    if (selection.getSelectionSource() === 'refresh') {
+      instance.view.render();
+      editorManager.prepareEditor();
+    }
   });
   this.selection.addLocalHook('afterIsMultipleSelection', isMultiple => {
     const changedIsMultiple = this.runHooks('afterIsMultipleSelection', isMultiple.value);
@@ -467,33 +568,33 @@ export default function Core(rootElement, userSettings) {
     }
     return _this.runHooks('afterModifyTransformStart', ...args);
   }).addLocalHook('beforeModifyTransformFocus', function () {
-    for (var _len10 = arguments.length, args = new Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
-      args[_key10] = arguments[_key10];
+    for (var _len0 = arguments.length, args = new Array(_len0), _key0 = 0; _key0 < _len0; _key0++) {
+      args[_key0] = arguments[_key0];
     }
     return _this.runHooks('modifyTransformFocus', ...args);
   }).addLocalHook('afterModifyTransformFocus', function () {
-    for (var _len11 = arguments.length, args = new Array(_len11), _key11 = 0; _key11 < _len11; _key11++) {
-      args[_key11] = arguments[_key11];
+    for (var _len1 = arguments.length, args = new Array(_len1), _key1 = 0; _key1 < _len1; _key1++) {
+      args[_key1] = arguments[_key1];
     }
     return _this.runHooks('afterModifyTransformFocus', ...args);
   }).addLocalHook('beforeModifyTransformEnd', function () {
-    for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
-      args[_key12] = arguments[_key12];
+    for (var _len10 = arguments.length, args = new Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
+      args[_key10] = arguments[_key10];
     }
     return _this.runHooks('modifyTransformEnd', ...args);
   }).addLocalHook('afterModifyTransformEnd', function () {
-    for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
-      args[_key13] = arguments[_key13];
+    for (var _len11 = arguments.length, args = new Array(_len11), _key11 = 0; _key11 < _len11; _key11++) {
+      args[_key11] = arguments[_key11];
     }
     return _this.runHooks('afterModifyTransformEnd', ...args);
   }).addLocalHook('beforeRowWrap', function () {
-    for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
-      args[_key14] = arguments[_key14];
+    for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
+      args[_key12] = arguments[_key12];
     }
     return _this.runHooks('beforeRowWrap', ...args);
   }).addLocalHook('beforeColumnWrap', function () {
-    for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
-      args[_key15] = arguments[_key15];
+    for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
+      args[_key13] = arguments[_key13];
     }
     return _this.runHooks('beforeColumnWrap', ...args);
   }).addLocalHook('insertRowRequire', totalRows => this.alter('insert_row_above', totalRows, 1, 'auto')).addLocalHook('insertColRequire', totalCols => this.alter('insert_col_start', totalCols, 1, 'auto'));
@@ -639,6 +740,9 @@ export default function Core(rootElement, userSettings) {
               if (totalRows === 0) {
                 selection.deselect();
               } else if (source === 'ContextMenu.removeRow') {
+                const selectionRange = selection.getSelectedRange();
+                const lastSelection = selectionRange.pop();
+                selectionRange.clear().set(lastSelection.from).current().setTo(lastSelection.to);
                 selection.refresh();
               } else {
                 selection.shiftRows(groupIndex, -groupAmount);
@@ -687,6 +791,9 @@ export default function Core(rootElement, userSettings) {
               if (totalColumns === 0) {
                 selection.deselect();
               } else if (source === 'ContextMenu.removeColumn') {
+                const selectionRange = selection.getSelectedRange();
+                const lastSelection = selectionRange.pop();
+                selectionRange.clear().set(lastSelection.from).current().setTo(lastSelection.to);
                 selection.refresh();
               } else {
                 selection.shiftColumns(groupIndex, -groupAmount);
@@ -1038,13 +1145,10 @@ export default function Core(rootElement, userSettings) {
     }
     this.updateSettings(userSettings, true);
     this.view = new TableView(this);
-    const themeName = tableMeta.themeName || getThemeClassName(instance.rootElement);
+    const themeName = tableMeta.themeName || getThemeClassName(instance.rootContainer);
 
-    // Use the theme defined as a root element class or in the settings (in that order).
+    // Use the theme defined in the settings object or set as a root container class name (in that order).
     instance.useTheme(themeName);
-
-    // Add the theme class name to the license info element.
-    instance.view.addClassNameToLicenseElement(instance.getCurrentThemeName());
     editorManager = EditorManager.getInstance(instance, tableMeta, selection);
     viewportScroller = createViewportScroller(instance);
     focusManager = new FocusManager(instance);
@@ -1587,8 +1691,8 @@ export default function Core(rootElement, userSettings) {
    * @returns {Array} Returns removed portion of columns.
    */
   this.spliceCol = function (column, index, amount) {
-    for (var _len16 = arguments.length, elements = new Array(_len16 > 3 ? _len16 - 3 : 0), _key16 = 3; _key16 < _len16; _key16++) {
-      elements[_key16 - 3] = arguments[_key16];
+    for (var _len14 = arguments.length, elements = new Array(_len14 > 3 ? _len14 - 3 : 0), _key14 = 3; _key14 < _len14; _key14++) {
+      elements[_key14 - 3] = arguments[_key14];
     }
     return datamap.spliceCol(column, index, amount, ...elements);
   };
@@ -1605,8 +1709,8 @@ export default function Core(rootElement, userSettings) {
    * @returns {Array} Returns removed portion of rows.
    */
   this.spliceRow = function (row, index, amount) {
-    for (var _len17 = arguments.length, elements = new Array(_len17 > 3 ? _len17 - 3 : 0), _key17 = 3; _key17 < _len17; _key17++) {
-      elements[_key17 - 3] = arguments[_key17];
+    for (var _len15 = arguments.length, elements = new Array(_len15 > 3 ? _len15 - 3 : 0), _key15 = 3; _key15 < _len15; _key15++) {
+      elements[_key15 - 3] = arguments[_key15];
     }
     return datamap.spliceRow(row, index, amount, ...elements);
   };
@@ -2423,17 +2527,9 @@ export default function Core(rootElement, userSettings) {
         instance.view._wt.exportSettingsAsClassNames();
         const currentThemeName = instance.getCurrentThemeName();
         const themeNameOptionExists = hasOwnProperty(settings, 'themeName');
-        if (currentThemeName && themeNameOptionExists && currentThemeName !== settings.themeName) {
-          instance.view.getStylesHandler().removeClassNames();
-          instance.view.removeClassNameFromLicenseElement(currentThemeName);
+        if (themeNameOptionExists && currentThemeName !== settings.themeName) {
+          instance.useTheme(settings.themeName);
         }
-        const themeName = themeNameOptionExists && settings.themeName || getThemeClassName(instance.rootElement);
-
-        // Use the theme defined as a root element class or in the settings (in that order).
-        instance.useTheme(themeName);
-
-        // Add the theme class name to the license info element.
-        instance.view.addClassNameToLicenseElement(instance.getCurrentThemeName());
       }
       instance.runHooks('afterUpdateSettings', settings);
     }
@@ -2875,8 +2971,8 @@ export default function Core(rootElement, userSettings) {
         changeValue]);
       });
     }
-    arrayEach(input, _ref10 => {
-      let [changeRow, changeProp, changeValue] = _ref10;
+    arrayEach(input, _ref0 => {
+      let [changeRow, changeProp, changeValue] = _ref0;
       dataSource.setAtCell(changeRow, changeProp, changeValue);
     });
     if (isThereAnySetSourceListener) {
@@ -3014,8 +3110,8 @@ export default function Core(rootElement, userSettings) {
    */
   this.spliceCellsMeta = function (visualIndex) {
     let deleteAmount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    for (var _len18 = arguments.length, cellMetaRows = new Array(_len18 > 2 ? _len18 - 2 : 0), _key18 = 2; _key18 < _len18; _key18++) {
-      cellMetaRows[_key18 - 2] = arguments[_key18];
+    for (var _len16 = arguments.length, cellMetaRows = new Array(_len16 > 2 ? _len16 - 2 : 0), _key16 = 2; _key16 < _len16; _key16++) {
+      cellMetaRows[_key16 - 2] = arguments[_key16];
     }
     if (cellMetaRows.length > 0 && !Array.isArray(cellMetaRows[0])) {
       throw new Error('The 3rd argument (cellMetaRows) has to be passed as an array of cell meta objects array.');
@@ -3573,7 +3669,7 @@ export default function Core(rootElement, userSettings) {
    * @returns {number}
    */
   this._getRowHeightFromSettings = function (row) {
-    const defaultRowHeight = this.view.getDefaultRowHeight();
+    const defaultRowHeight = instance.stylesHandler.getDefaultRowHeight();
     let height = tableMeta.rowHeights;
     if (height !== undefined && height !== null) {
       switch (typeof height) {
@@ -4228,27 +4324,27 @@ export default function Core(rootElement, userSettings) {
     }
     dataSource = null;
     this.getShortcutManager().destroy();
+    moduleRegisterer.clear();
     metaManager.clearCache();
     foreignHotInstances.delete(this.guid);
-    if (isRootInstance(instance)) {
-      const licenseInfo = this.rootDocument.querySelector('.hot-display-license-info');
-      if (licenseInfo) {
-        licenseInfo.parentNode.removeChild(licenseInfo);
-      }
-    }
-    empty(instance.rootElement);
     eventManager.destroy();
     if (editorManager) {
       editorManager.destroy();
     }
+    if (instance.rootContainer) {
+      empty(instance.rootContainer);
+    }
+    if (instance.rootPortalElement) {
+      instance.rootPortalElement.remove();
+    }
 
     // The plugin's `destroy` method is called as a consequence and it should handle
     // unregistration of plugin's maps. Some unregistered maps reset the cache.
     instance.batchExecution(() => {
       instance.rowIndexMapper.unregisterAll();
       instance.columnIndexMapper.unregisterAll();
-      pluginsRegistry.getItems().forEach(_ref11 => {
-        let [, plugin] = _ref11;
+      pluginsRegistry.getItems().forEach(_ref1 => {
+        let [, plugin] = _ref1;
         plugin.destroy();
       });
       pluginsRegistry.clear();
@@ -4649,8 +4745,32 @@ export default function Core(rootElement, userSettings) {
    * @param {string|boolean|undefined} themeName The name of the theme to use.
    */
   this.useTheme = themeName => {
-    this.view.getStylesHandler().useTheme(themeName);
-    this.runHooks('afterSetTheme', themeName, !!firstRun);
+    const isFirstRun = !!firstRun;
+    this.stylesHandler.useTheme(themeName);
+    const validThemeName = this.stylesHandler.getThemeName();
+    if (isRootInstance(this)) {
+      removeClass(this.rootWrapperElement, /ht-theme-.*/g);
+      removeClass(this.rootPortalElement, /ht-theme-.*/g);
+      if (validThemeName) {
+        addClass(this.rootWrapperElement, validThemeName);
+        addClass(this.rootPortalElement, validThemeName);
+        if (!getComputedStyle(this.rootWrapperElement).getPropertyValue('--ht-line-height')) {
+          warn(`The "${validThemeName}" theme is enabled, but its stylesheets are missing or not imported correctly. \
+            Import the correct CSS files in order to use that theme.`);
+        }
+      }
+    }
+    if (!isFirstRun) {
+      instance.render();
+      instance.scrollViewportTo(0, 0);
+      if (getThemeClassName(this.rootContainer)) {
+        removeClass(this.rootContainer, /ht-theme-.*/g);
+        if (validThemeName) {
+          addClass(this.rootContainer, validThemeName);
+        }
+      }
+    }
+    this.runHooks('afterSetTheme', validThemeName, isFirstRun);
   };
 
   /**
@@ -4662,7 +4782,31 @@ export default function Core(rootElement, userSettings) {
    * @returns {string|undefined} The name of the currently used theme.
    */
   this.getCurrentThemeName = () => {
-    return this.view.getStylesHandler().getThemeName();
+    return this.stylesHandler.getThemeName();
+  };
+
+  /**
+   * Gets the table's root container element height.
+   *
+   * @memberof Core#
+   * @function getTableHeight
+   * @since 16.0.0
+   * @returns {number}
+   */
+  this.getTableHeight = () => {
+    return this.rootElement.offsetHeight;
+  };
+
+  /**
+   * Gets the table's root container element width.
+   *
+   * @memberof Core#
+   * @function getTableWidth
+   * @since 16.0.0
+   * @returns {number}
+   */
+  this.getTableWidth = () => {
+    return this.rootElement.offsetWidth;
   };
 
   /**

package/dataMap/dataMap.js

@@ -386,31 +386,20 @@ class DataMap {
     }
     const dataSource = this.dataSource;
     const maxCols = this.tableMeta.maxCols;
-    const countSourceCols = this.hot.countSourceCols();
-    let columnIndex = index;
-    if (typeof columnIndex !== 'number' || columnIndex >= countSourceCols) {
-      columnIndex = countSourceCols;
-    }
-    const continueProcess = this.hot.runHooks('beforeCreateCol', columnIndex, amount, source);
-    if (continueProcess === false) {
+    const numberOfSourceCols = this.hot.countSourceCols();
+    const numberOfVisualCols = this.hot.countCols();
+    const numberOfSourceRows = this.hot.countSourceRows();
+    const visualColumnIndex = typeof index === 'number' && index <= numberOfSourceCols ? index : numberOfVisualCols;
+    if (this.hot.runHooks('beforeCreateCol', visualColumnIndex, amount, source) === false) {
       return {
         delta: 0
       };
     }
-    let physicalColumnIndex = countSourceCols;
-    if (columnIndex < this.hot.countCols()) {
-      physicalColumnIndex = this.hot.toPhysicalColumn(columnIndex);
-    }
-    const numberOfSourceRows = this.hot.countSourceRows();
-    let nrOfColumns = this.hot.countCols();
+    const physicalColumnIndex = visualColumnIndex < numberOfVisualCols ? this.hot.toPhysicalColumn(visualColumnIndex) : numberOfSourceCols;
+    const firstNewPhysicalColumnIndex = mode === 'end' ? Math.min(physicalColumnIndex + 1, numberOfSourceCols) : physicalColumnIndex;
     let numberOfCreatedCols = 0;
-    let currentIndex = physicalColumnIndex;
-    if (mode === 'end') {
-      currentIndex = Math.min(currentIndex + 1, countSourceCols);
-    }
-    const startPhysicalIndex = currentIndex;
-    while (numberOfCreatedCols < amount && nrOfColumns < maxCols) {
-      if (typeof columnIndex !== 'number' || columnIndex >= nrOfColumns) {
+    for (let col = firstNewPhysicalColumnIndex; numberOfCreatedCols < amount && numberOfVisualCols + numberOfCreatedCols < maxCols; col++) {
+      if (typeof visualColumnIndex !== 'number' || visualColumnIndex >= numberOfVisualCols + numberOfCreatedCols) {
         if (numberOfSourceRows > 0) {
           for (let row = 0; row < numberOfSourceRows; row += 1) {
             if (typeof dataSource[row] === 'undefined') {
@@ -423,29 +412,26 @@ class DataMap {
         }
       } else {
         for (let row = 0; row < numberOfSourceRows; row++) {
-          dataSource[row].splice(currentIndex, 0, null);
+          dataSource[row].splice(col, 0, null);
         }
       }
       numberOfCreatedCols += 1;
-      currentIndex += 1;
-      nrOfColumns += 1;
     }
-    this.hot.columnIndexMapper.insertIndexes(columnIndex, numberOfCreatedCols);
     if (numberOfCreatedCols > 0) {
       if (index === undefined || index === null) {
         // Creates the meta columns at the end of the columns collection without shifting the cells
         // that were defined out of the range of the dataset.
         this.metaManager.createColumn(null, numberOfCreatedCols);
       } else if (source !== 'auto') {
-        this.metaManager.createColumn(startPhysicalIndex, amount);
+        this.metaManager.createColumn(firstNewPhysicalColumnIndex, amount);
       }
     }
-    const newVisualColumnIndex = this.hot.toVisualColumn(startPhysicalIndex);
-    this.hot.runHooks('afterCreateCol', newVisualColumnIndex, numberOfCreatedCols, source);
+    this.hot.columnIndexMapper.insertIndexes(visualColumnIndex, numberOfCreatedCols, mode);
+    this.hot.runHooks('afterCreateCol', this.hot.toVisualColumn(firstNewPhysicalColumnIndex), numberOfCreatedCols, source);
     this.refreshDuckSchema();
     return {
       delta: numberOfCreatedCols,
-      startPhysicalIndex
+      startPhysicalIndex: firstNewPhysicalColumnIndex
     };
   }
 
@@ -685,7 +671,7 @@ class DataMap {
     }
     if (this.hot.hasHook('modifyData')) {
       const valueHolder = (0, _object.createObjectPropListener)(value);
-      this.hot.runHooks('modifyData', physicalRow, this.propToCol(prop), valueHolder, 'get');
+      this.hot.runHooks('modifyData', row, this.propToCol(prop), valueHolder, 'get');
       if (valueHolder.isTouched()) {
         value = valueHolder.value;
       }
@@ -725,7 +711,7 @@ class DataMap {
 
     if (this.hot.hasHook('modifyData')) {
       const valueHolder = (0, _object.createObjectPropListener)(newValue);
-      this.hot.runHooks('modifyData', physicalRow, this.propToCol(prop), valueHolder, 'set');
+      this.hot.runHooks('modifyData', row, this.propToCol(prop), valueHolder, 'set');
       if (valueHolder.isTouched()) {
         newValue = valueHolder.value;
       }