handsontable 14.6.1 → 15.0.0-next-fdd4480-20241205

package/core.mjs

@@ -7,6 +7,10 @@ import "core-js/modules/es.set.is-subset-of.v2.js";
 import "core-js/modules/es.set.is-superset-of.v2.js";
 import "core-js/modules/es.set.symmetric-difference.v2.js";
 import "core-js/modules/es.set.union.v2.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/esnext.iterator.map.js";
 import "core-js/modules/web.immediate.js";
 import { addClass, empty, observeVisibilityChangeOnce, removeClass } from "./helpers/dom/element.mjs";
 import { isFunction } from "./helpers/function.mjs";
@@ -30,7 +34,7 @@ import { spreadsheetColumnLabel } from "./helpers/data.mjs";
 import { IndexMapper } from "./translations/index.mjs";
 import { registerAsRootInstance, hasValidParameter, isRootInstance } from "./utils/rootInstance.mjs";
 import { DEFAULT_COLUMN_WIDTH } from "./3rdparty/walkontable/src/index.mjs";
-import Hooks from "./pluginHooks.mjs";
+import { Hooks } from "./core/hooks/index.mjs";
 import { hasLanguageDictionary, getValidLanguageCode, getTranslatedPhrase } from "./i18n/registry.mjs";
 import { warnUserAboutLanguageRegistration, normalizeLanguageCode } from "./i18n/utils.mjs";
 import { Selection } from "./selection/index.mjs";
@@ -39,6 +43,7 @@ import { installFocusCatcher, createViewportScroller } from "./core/index.mjs";
 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";
 let activeGuid = null;
 
 /**
@@ -225,6 +230,7 @@ export default function Core(rootElement, userSettings) {
   rootElement.insertBefore(this.container, rootElement.firstChild);
   if (isRootInstance(this)) {
     _injectProductInfo(userSettings.licenseKey, rootElement);
+    addClass(rootElement, 'ht-wrapper');
   }
   this.guid = `ht_${randomString()}`; // this is the namespace for global events
 
@@ -937,7 +943,9 @@ export default function Core(rootElement, userSettings) {
                 // when 'value' is array and 'orgValue' is null, set 'orgValue' to
                 // an empty array so that the null value can be compared to 'value'
                 // as an empty value for the array context
-                if (Array.isArray(value) && orgValue === null) orgValue = [];
+                if (Array.isArray(value) && orgValue === null) {
+                  orgValue = [];
+                }
                 if (orgValue === null || typeof orgValue !== 'object') {
                   pushData = false;
                 } else {
@@ -1025,6 +1033,13 @@ export default function Core(rootElement, userSettings) {
     }
     this.updateSettings(tableMeta, true);
     this.view = new TableView(this);
+    const themeName = tableMeta.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());
     editorManager = EditorManager.getInstance(instance, tableMeta, selection);
     viewportScroller = createViewportScroller(instance);
     focusManager = new FocusManager(instance);
@@ -1402,7 +1417,7 @@ export default function Core(rootElement, userSettings) {
     if (!changeSource && typeof row === 'object') {
       changeSource = column;
     }
-    const processedChanges = processChanges(changes, source);
+    const processedChanges = processChanges(changes, changeSource);
     instance.runHooks('afterSetDataAtCell', processedChanges, changeSource);
     validateChanges(processedChanges, changeSource, () => {
       applyChanges(processedChanges, changeSource);
@@ -2289,9 +2304,10 @@ export default function Core(rootElement, userSettings) {
         setClassName('tableClassName', settings.tableClassName);
         instance.view._wt.wtOverlays.syncOverlayTableClassNames();
       } else if (Hooks.getSingleton().isRegistered(i) || Hooks.getSingleton().isDeprecated(i)) {
-        if (isFunction(settings[i]) || Array.isArray(settings[i])) {
-          settings[i].initialHook = true;
-          instance.addHook(i, settings[i]);
+        if (isFunction(settings[i])) {
+          Hooks.getSingleton().addAsFixed(i, settings[i], instance);
+        } else if (Array.isArray(settings[i])) {
+          Hooks.getSingleton().add(i, settings[i], instance);
         }
       } else if (!init && hasOwnProperty(settings, i)) {
         // Update settings
@@ -2377,6 +2393,19 @@ export default function Core(rootElement, userSettings) {
       if (instance.view) {
         instance.view._wt.wtViewport.resetHasOversizedColumnHeadersMarked();
         instance.view._wt.exportSettingsAsClassNames();
+        const currentThemeName = instance.getCurrentThemeName();
+        const themeNameOptionExists = hasOwnProperty(settings, 'themeName');
+        if (currentThemeName && themeNameOptionExists) {
+          instance.view.getStylesHandler().removeClassNames();
+          instance.view.removeClassNameFromLicenseElement(currentThemeName);
+        }
+        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);
     }
@@ -3488,12 +3517,13 @@ export default function Core(rootElement, userSettings) {
    * @memberof Core#
    * @function getColWidth
    * @param {number} column Visual column index.
+   * @param {string} [source] The source of the call.
    * @returns {number} Column width.
    * @fires Hooks#modifyColWidth
    */
-  this.getColWidth = function (column) {
+  this.getColWidth = function (column, source) {
     let width = instance._getColWidthFromSettings(column);
-    width = instance.runHooks('modifyColWidth', width, column);
+    width = instance.runHooks('modifyColWidth', width, column, source);
     if (width === undefined) {
       width = DEFAULT_COLUMN_WIDTH;
     }
@@ -3553,12 +3583,13 @@ export default function Core(rootElement, userSettings) {
    * @memberof Core#
    * @function getRowHeight
    * @param {number} row A visual row index.
+   * @param {string} [source] The source of the call.
    * @returns {number|undefined} The height of the specified row, in pixels.
    * @fires Hooks#modifyRowHeight
    */
-  this.getRowHeight = function (row) {
+  this.getRowHeight = function (row, source) {
     let height = instance._getRowHeightFromSettings(row);
-    height = instance.runHooks('modifyRowHeight', height, row);
+    height = instance.runHooks('modifyRowHeight', height, row, source);
     return height;
   };
 
@@ -4071,22 +4102,8 @@ export default function Core(rootElement, userSettings) {
     const {
       row,
       col,
-      verticalSnap,
-      horizontalSnap,
       considerHiddenIndexes
     } = (_options = options) !== null && _options !== void 0 ? _options : {};
-    let snapToTop;
-    let snapToBottom;
-    let snapToInlineStart;
-    let snapToInlineEnd;
-    if (verticalSnap !== undefined) {
-      snapToTop = verticalSnap === 'top';
-      snapToBottom = !snapToTop;
-    }
-    if (horizontalSnap !== undefined) {
-      snapToInlineStart = horizontalSnap === 'start';
-      snapToInlineEnd = !snapToInlineStart;
-    }
     let renderableRow = row;
     let renderableColumn = col;
     if (considerHiddenIndexes === undefined || considerHiddenIndexes) {
@@ -4103,13 +4120,13 @@ export default function Core(rootElement, userSettings) {
     const isRowInteger = Number.isInteger(renderableRow);
     const isColumnInteger = Number.isInteger(renderableColumn);
     if (isRowInteger && renderableRow >= 0 && isColumnInteger && renderableColumn >= 0) {
-      return instance.view.scrollViewport(instance._createCellCoords(renderableRow, renderableColumn), snapToTop, snapToInlineEnd, snapToBottom, snapToInlineStart);
+      return instance.view.scrollViewport(instance._createCellCoords(renderableRow, renderableColumn), options.horizontalSnap, options.verticalSnap);
     }
     if (isRowInteger && renderableRow >= 0 && (isColumnInteger && renderableColumn < 0 || !isColumnInteger)) {
-      return instance.view.scrollViewportVertically(renderableRow, snapToTop, snapToBottom);
+      return instance.view.scrollViewportVertically(renderableRow, options.verticalSnap);
     }
     if (isColumnInteger && renderableColumn >= 0 && (isRowInteger && renderableRow < 0 || !isRowInteger)) {
-      return instance.view.scrollViewportHorizontally(renderableColumn, snapToInlineEnd, snapToInlineStart);
+      return instance.view.scrollViewportHorizontally(renderableColumn, options.horizontalSnap);
     }
     return false;
   };
@@ -4578,6 +4595,31 @@ export default function Core(rootElement, userSettings) {
   };
   this.timeouts = [];
 
+  /**
+   * Use the theme specified by the provided name.
+   *
+   * @memberof Core#
+   * @function useTheme
+   * @since 15.0.0
+   * @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);
+  };
+
+  /**
+   * Gets the name of the currently used theme.
+   *
+   * @memberof Core#
+   * @function getCurrentThemeName
+   * @since 15.0.0
+   * @returns {string|undefined} The name of the currently used theme.
+   */
+  this.getCurrentThemeName = () => {
+    return this.view.getStylesHandler().getThemeName();
+  };
+
   /**
    * Sets timeout. Purpose of this method is to clear all known timeouts when `destroy` method is called.
    *

package/dataMap/dataMap.js

@@ -3,6 +3,9 @@
 exports.__esModule = true;
 require("core-js/modules/es.error.cause.js");
 require("core-js/modules/es.array.push.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
 var _SheetClip = require("../3rdparty/SheetClip");
 var _data = require("../helpers/data");
 var _object = require("../helpers/object");

package/dataMap/dataMap.mjs

@@ -1,5 +1,8 @@
 import "core-js/modules/es.error.cause.js";
 import "core-js/modules/es.array.push.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 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); }

package/dataMap/dataSource.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 require("core-js/modules/es.error.cause.js");
 require("core-js/modules/es.array.push.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.for-each.js");
 var _object = require("../helpers/object");
 var _data = require("../helpers/data");
 var _array = require("../helpers/array");

package/dataMap/dataSource.mjs

@@ -1,5 +1,7 @@
 import "core-js/modules/es.error.cause.js";
 import "core-js/modules/es.array.push.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.for-each.js";
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 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); }

package/dataMap/metaManager/index.js

@@ -2,6 +2,8 @@
 
 exports.__esModule = true;
 require("core-js/modules/es.error.cause.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.for-each.js");
 var _globalMeta = _interopRequireDefault(require("./metaLayers/globalMeta"));
 var _tableMeta = _interopRequireDefault(require("./metaLayers/tableMeta"));
 var _columnMeta = _interopRequireDefault(require("./metaLayers/columnMeta"));

package/dataMap/metaManager/index.mjs

@@ -1,4 +1,6 @@
 import "core-js/modules/es.error.cause.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.for-each.js";
 import GlobalMeta from "./metaLayers/globalMeta.mjs";
 import TableMeta from "./metaLayers/tableMeta.mjs";
 import ColumnMeta from "./metaLayers/columnMeta.mjs";

package/dataMap/metaManager/metaSchema.js

@@ -3842,8 +3842,8 @@ var _default = () => {
     /**
      * The `rowHeights` option sets rows' heights, in pixels.
      *
-     * In the rendering process, the default row height is 23 px (22 px + 1 px of the row's bottom border).
-     * You can change it to equal or greater than 23px, by setting the `rowHeights` option to one of the following:
+     * In the rendering process, the default row height is 23 px (in the classic theme: 22 px + 1 px of the row's bottom border) or whatever is defined in the used theme (based on the line height, vertical padding and cell borders).
+     * You can change it to equal or greater than the defautl value, by setting the `rowHeights` option to one of the following:
      *
      * | Setting     | Description                                                                                         | Example                                                      |
      * | ----------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
@@ -3875,7 +3875,7 @@ var _default = () => {
      * // set the first (by visual index) row's height to 100
      * // set the second (by visual index) row's height to 120
      * // set the third (by visual index) row's height to `undefined`
-     * // set any other row's height to the default 23px
+     * // set any other row's height to the default height value
      * rowHeights: [100, 120, undefined],
      *
      * // set each row's height individually, using a function
@@ -4313,6 +4313,26 @@ var _default = () => {
      * ```
      */
     tableClassName: undefined,
+    /**
+     * The `themeName` option allows enabling a theme by that name.
+     *
+     * If no `themeName` is provided, the table will use the classic theme (if the correct CSS files are imported).
+     *
+     * Read more:
+     * - [Themes](@/guides/styling/themes/themes.md)
+     *
+     * @memberof Options#
+     * @type {string|boolean|undefined}
+     * @default undefined
+     * @category Core
+     * @since 15.0.0
+     *
+     * @example
+     * ```js
+     * themeName: 'ht-theme-name',
+     * ```
+     */
+    themeName: undefined,
     /**
      * The `tabMoves` option configures the action of the <kbd>**Tab**</kbd> key.
      *
@@ -4681,7 +4701,7 @@ var _default = () => {
      * - [Performance: Define the number of pre-rendered rows and columns](@/guides/optimization/performance/performance.md#define-the-number-of-pre-rendered-rows-and-columns)
      *
      * @memberof Options#
-     * @type {number|string}
+     * @type {number|'auto'}
      * @default 'auto'
      * @category Core
      *
@@ -4711,7 +4731,7 @@ var _default = () => {
      * - [Column virtualization](@/guides/columns/column-virtualization/column-virtualization.md)
      *
      * @memberof Options#
-     * @type {number|string}
+     * @type {number|'auto'}
      * @default 'auto'
      * @category Core
      *
@@ -4722,6 +4742,72 @@ var _default = () => {
      * ```
      */
     viewportRowRenderingOffset: 'auto',
+    /**
+     * @description
+     * The `viewportColumnRenderingThreshold` option configures what column number starting from the left or right
+     * (depends on the scroll direction) should trigger the rendering of columns outside of the grid's viewport.
+     *
+     * You can set the `viewportColumnRenderingThreshold` option to one of the following:
+     *
+     * | Setting            | Description                                             |
+     * | ------------------ | ------------------------------------------------------- |
+     * | `auto`             | Triggers rendering at half the offset defined by [`viewportColumnRenderingOffset`](#viewportColumnRenderingOffset) option |
+     * | A number           | Sets the offset manually (`0` is a default)             |
+     *
+     * The `viewportColumnRenderingThreshold` setting is ignored when [`renderAllColumn`](#renderAllColumn) is set to `true`.
+     *
+     * Read more:
+     * - [Performance: Define the number of pre-rendered rows and columns](@/guides/optimization/performance/performance.md#define-the-number-of-pre-rendered-rows-and-columns)
+     * - [Column virtualization](@/guides/columns/column-virtualization/column-virtualization.md)
+     *
+     * @memberof Options#
+     * @since 1.14.7
+     * @type {number|'auto'}
+     * @default 0
+     * @category Core
+     *
+     * @example
+     * ```js
+     * // render 12 columns outside of the grid's viewport
+     * viewportColumnRenderingOffset: 12,
+     * // the columns outside of the viewport will be rendered when the user scrolls to the 8th column from/to
+     * viewportColumnRenderingThreshold: 8,
+     * ```
+     */
+    viewportColumnRenderingThreshold: 0,
+    /**
+     * @description
+     * The `viewportRowRenderingThreshold` option configures what row number starting from the top or bottom
+     * (depends on the scroll direction) should trigger the rendering of rows outside of the grid's viewport.
+     *
+     * You can set the `viewportRowRenderingThreshold` option to one of the following:
+     *
+     * | Setting            | Description                                             |
+     * | ------------------ | ------------------------------------------------------- |
+     * | `auto`             | Triggers rendering at half the offset defined by [`viewportRowRenderingOffset`](#viewportRowRenderingOffset) option |
+     * | A number           | Sets the offset manually (`0` is a default)             |
+     *
+     * The `viewportRowRenderingThreshold` setting is ignored when [`renderAllRows`](#renderAllRows) is set to `true`.
+     *
+     * Read more:
+     * - [Performance: Define the number of pre-rendered rows and columns](@/guides/optimization/performance/performance.md#define-the-number-of-pre-rendered-rows-and-columns)
+     * - [Row virtualization](@/guides/rows/row-virtualization/row-virtualization.md)
+     *
+     * @memberof Options#
+     * @since 1.14.7
+     * @type {number|'auto'}
+     * @default 0
+     * @category Core
+     *
+     * @example
+     * ```js
+     * // render 12 rows outside of the grid's viewport
+     * viewportRowRenderingOffset: 12,
+     * // the rows outside of the viewport will be rendered when the user scrolls to the 8th row from/to
+     * viewportRowRenderingThreshold: 8,
+     * ```
+     */
+    viewportRowRenderingThreshold: 0,
     /**
      * The `visibleRows` option sets the height of the [`autocomplete`](@/guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md)
      * and [`dropdown`](@/guides/cell-types/dropdown-cell-type/dropdown-cell-type.md) lists.

package/dataMap/metaManager/metaSchema.mjs

@@ -3839,8 +3839,8 @@ export default () => {
     /**
      * The `rowHeights` option sets rows' heights, in pixels.
      *
-     * In the rendering process, the default row height is 23 px (22 px + 1 px of the row's bottom border).
-     * You can change it to equal or greater than 23px, by setting the `rowHeights` option to one of the following:
+     * In the rendering process, the default row height is 23 px (in the classic theme: 22 px + 1 px of the row's bottom border) or whatever is defined in the used theme (based on the line height, vertical padding and cell borders).
+     * You can change it to equal or greater than the defautl value, by setting the `rowHeights` option to one of the following:
      *
      * | Setting     | Description                                                                                         | Example                                                      |
      * | ----------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
@@ -3872,7 +3872,7 @@ export default () => {
      * // set the first (by visual index) row's height to 100
      * // set the second (by visual index) row's height to 120
      * // set the third (by visual index) row's height to `undefined`
-     * // set any other row's height to the default 23px
+     * // set any other row's height to the default height value
      * rowHeights: [100, 120, undefined],
      *
      * // set each row's height individually, using a function
@@ -4310,6 +4310,26 @@ export default () => {
      * ```
      */
     tableClassName: undefined,
+    /**
+     * The `themeName` option allows enabling a theme by that name.
+     *
+     * If no `themeName` is provided, the table will use the classic theme (if the correct CSS files are imported).
+     *
+     * Read more:
+     * - [Themes](@/guides/styling/themes/themes.md)
+     *
+     * @memberof Options#
+     * @type {string|boolean|undefined}
+     * @default undefined
+     * @category Core
+     * @since 15.0.0
+     *
+     * @example
+     * ```js
+     * themeName: 'ht-theme-name',
+     * ```
+     */
+    themeName: undefined,
     /**
      * The `tabMoves` option configures the action of the <kbd>**Tab**</kbd> key.
      *
@@ -4678,7 +4698,7 @@ export default () => {
      * - [Performance: Define the number of pre-rendered rows and columns](@/guides/optimization/performance/performance.md#define-the-number-of-pre-rendered-rows-and-columns)
      *
      * @memberof Options#
-     * @type {number|string}
+     * @type {number|'auto'}
      * @default 'auto'
      * @category Core
      *
@@ -4708,7 +4728,7 @@ export default () => {
      * - [Column virtualization](@/guides/columns/column-virtualization/column-virtualization.md)
      *
      * @memberof Options#
-     * @type {number|string}
+     * @type {number|'auto'}
      * @default 'auto'
      * @category Core
      *
@@ -4719,6 +4739,72 @@ export default () => {
      * ```
      */
     viewportRowRenderingOffset: 'auto',
+    /**
+     * @description
+     * The `viewportColumnRenderingThreshold` option configures what column number starting from the left or right
+     * (depends on the scroll direction) should trigger the rendering of columns outside of the grid's viewport.
+     *
+     * You can set the `viewportColumnRenderingThreshold` option to one of the following:
+     *
+     * | Setting            | Description                                             |
+     * | ------------------ | ------------------------------------------------------- |
+     * | `auto`             | Triggers rendering at half the offset defined by [`viewportColumnRenderingOffset`](#viewportColumnRenderingOffset) option |
+     * | A number           | Sets the offset manually (`0` is a default)             |
+     *
+     * The `viewportColumnRenderingThreshold` setting is ignored when [`renderAllColumn`](#renderAllColumn) is set to `true`.
+     *
+     * Read more:
+     * - [Performance: Define the number of pre-rendered rows and columns](@/guides/optimization/performance/performance.md#define-the-number-of-pre-rendered-rows-and-columns)
+     * - [Column virtualization](@/guides/columns/column-virtualization/column-virtualization.md)
+     *
+     * @memberof Options#
+     * @since 1.14.7
+     * @type {number|'auto'}
+     * @default 0
+     * @category Core
+     *
+     * @example
+     * ```js
+     * // render 12 columns outside of the grid's viewport
+     * viewportColumnRenderingOffset: 12,
+     * // the columns outside of the viewport will be rendered when the user scrolls to the 8th column from/to
+     * viewportColumnRenderingThreshold: 8,
+     * ```
+     */
+    viewportColumnRenderingThreshold: 0,
+    /**
+     * @description
+     * The `viewportRowRenderingThreshold` option configures what row number starting from the top or bottom
+     * (depends on the scroll direction) should trigger the rendering of rows outside of the grid's viewport.
+     *
+     * You can set the `viewportRowRenderingThreshold` option to one of the following:
+     *
+     * | Setting            | Description                                             |
+     * | ------------------ | ------------------------------------------------------- |
+     * | `auto`             | Triggers rendering at half the offset defined by [`viewportRowRenderingOffset`](#viewportRowRenderingOffset) option |
+     * | A number           | Sets the offset manually (`0` is a default)             |
+     *
+     * The `viewportRowRenderingThreshold` setting is ignored when [`renderAllRows`](#renderAllRows) is set to `true`.
+     *
+     * Read more:
+     * - [Performance: Define the number of pre-rendered rows and columns](@/guides/optimization/performance/performance.md#define-the-number-of-pre-rendered-rows-and-columns)
+     * - [Row virtualization](@/guides/rows/row-virtualization/row-virtualization.md)
+     *
+     * @memberof Options#
+     * @since 1.14.7
+     * @type {number|'auto'}
+     * @default 0
+     * @category Core
+     *
+     * @example
+     * ```js
+     * // render 12 rows outside of the grid's viewport
+     * viewportRowRenderingOffset: 12,
+     * // the rows outside of the viewport will be rendered when the user scrolls to the 8th row from/to
+     * viewportRowRenderingThreshold: 8,
+     * ```
+     */
+    viewportRowRenderingThreshold: 0,
     /**
      * The `visibleRows` option sets the height of the [`autocomplete`](@/guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md)
      * and [`dropdown`](@/guides/cell-types/dropdown-cell-type/dropdown-cell-type.md) lists.

package/dataMap/metaManager/mods/dynamicCellMeta.js

@@ -9,10 +9,9 @@ require("core-js/modules/es.set.is-subset-of.v2.js");
 require("core-js/modules/es.set.is-superset-of.v2.js");
 require("core-js/modules/es.set.symmetric-difference.v2.js");
 require("core-js/modules/es.set.union.v2.js");
-var _pluginHooks = _interopRequireDefault(require("../../../pluginHooks"));
+var _hooks = require("../../../core/hooks");
 var _object = require("../../../helpers/object");
 var _function = require("../../../helpers/function");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 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); }
@@ -43,7 +42,7 @@ class DynamicCellMetaMod {
     _defineProperty(this, "metaSyncMemo", new Map());
     this.metaManager = metaManager;
     metaManager.addLocalHook('afterGetCellMeta', cellMeta => this.extendCellMeta(cellMeta));
-    _pluginHooks.default.getSingleton().add('beforeRender', forceFullRender => {
+    _hooks.Hooks.getSingleton().add('beforeRender', forceFullRender => {
       if (forceFullRender) {
         this.metaSyncMemo.clear();
       }

package/dataMap/metaManager/mods/dynamicCellMeta.mjs

@@ -9,7 +9,7 @@ import "core-js/modules/es.set.union.v2.js";
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 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); }
-import Hooks from "../../../pluginHooks.mjs";
+import { Hooks } from "../../../core/hooks/index.mjs";
 import { hasOwnProperty } from "../../../helpers/object.mjs";
 import { isFunction } from "../../../helpers/function.mjs";
 /**

package/dataMap/metaManager/mods/extendMetaProperties.js

@@ -10,6 +10,8 @@ require("core-js/modules/es.set.is-subset-of.v2.js");
 require("core-js/modules/es.set.is-superset-of.v2.js");
 require("core-js/modules/es.set.symmetric-difference.v2.js");
 require("core-js/modules/es.set.union.v2.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.for-each.js");
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
 function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }

package/dataMap/metaManager/mods/extendMetaProperties.mjs

@@ -7,6 +7,8 @@ import "core-js/modules/es.set.is-subset-of.v2.js";
 import "core-js/modules/es.set.is-superset-of.v2.js";
 import "core-js/modules/es.set.symmetric-difference.v2.js";
 import "core-js/modules/es.set.union.v2.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.for-each.js";
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
 function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }