handsontable 18.0.0-rc4 → 18.0.0

package/3rdparty/walkontable/src/utils/orderView/view.d.ts

@@ -1,10 +1,15 @@
 import { ViewSizeSet } from './viewSizeSet';
-import { ViewDiffer } from './viewDiffer';
 /**
  * Executive model for each table renderer. It's responsible for injecting DOM nodes in a
  * specified order and adjusting the number of elements in the root node.
  *
- * Only this class have rights to juggling DOM elements within the root node (see render method).
+ * Rendering writes directly to the DOM: the root node keeps exactly `viewSize` children, and on
+ * each render cycle the existing children are reused in place (their content is overwritten by the
+ * cell renderer). There is no node pool keyed by source coordinate and no diffing strategy — those
+ * were removed because keeping a fixed, viewport-sized set of nodes is simpler and bounds memory to
+ * the viewport regardless of dataset size.
+ *
+ * Only this class has rights to juggle DOM elements within the root node (see render method).
  *
  * @class {OrderView}
  */
@@ -20,7 +25,7 @@ export declare class OrderView {
      *
      * @type {function(number): HTMLElement}
      */
-    nodesPool: (index?: number) => HTMLElement;
+    nodesPool: () => HTMLElement;
     /**
      * Holder for sizing and positioning of the view.
      *
@@ -34,32 +39,26 @@ export declare class OrderView {
      */
     collectedNodes: HTMLElement[];
     /**
-     * The differ which calculates the differences between current and next view. It generates
-     * commands that are processed by the OrderView (see `applyCommand` method).
-     *
-     * @type {ViewDiffer}
-     */
-    viewDiffer: ViewDiffer;
-    /**
-     * Node type which the order view will manage while rendering the DOM elements.
+     * Node type which the order view will manage while rendering the DOM elements (uppercased to
+     * match `Element.tagName`).
      *
      * @type {string}
      */
     childNodeType: string;
     /**
-     * The renderer adapter that handles browser-specific rendering logic.
+     * The visual index of the currently processed child within a render cycle.
      *
-     * @type {StandardRendererAdapter|FirefoxRendererAdapter}
+     * @type {number}
      */
-    rendererAdapter: import("./rendererAdapter/differBasedRendererAdapter").DifferBasedRendererAdapter | import("./rendererAdapter/directDomRendererAdapter").DirectDomRendererAdapter;
+    visualIndex: number;
     /**
      * Creates a new OrderView instance.
      *
      * @param {HTMLElement} rootNode The root node to manage.
-     * @param {function(number?): HTMLElement} nodesPool Factory for creating new DOM elements.
+     * @param {function(): HTMLElement} nodesPool Factory for creating new DOM elements.
      * @param {string} childNodeType The type of child nodes to manage.
      */
-    constructor(rootNode: HTMLElement, nodesPool: (index?: number) => HTMLElement, childNodeType: string);
+    constructor(rootNode: HTMLElement, nodesPool: () => HTMLElement, childNodeType: string);
     /**
      * Sets the size for rendered elements. It can be a size for rows, cells or size for row
      * headers etc. It depends for what table renderer this instance was created.
@@ -98,18 +97,26 @@ export declare class OrderView {
      */
     getCurrentNode(): HTMLElement | null;
     /**
-     * Setups and prepares all necessary properties and start the rendering process.
+     * Returns the count of children in the root node that belong to this view (for shared root nodes
+     * only the children matching this view's node type and working space are counted).
+     *
+     * @returns {number}
+     */
+    getRenderedChildCount(): number;
+    /**
+     * Setups and prepares all necessary properties and starts the rendering process. It adjusts the
+     * number of children in the root node to the next view size, creating or removing nodes as needed.
      * This method has to be called only once (at the start) for the render cycle.
      */
     start(): void;
     /**
-     * Renders the DOM element based on visual index (which is calculated internally).
+     * Renders the DOM element for the current visual index by reusing the child already in place.
+     * If a child of the wrong node type occupies the slot, it is replaced with a freshly created one.
      * This method has to be called as many times as the size count is met (to cover all previously rendered DOM elements).
      */
     render(): void;
     /**
-     * Ends the render process.
-     * This method has to be called only once (at the end) for the render cycle.
+     * Ends the render process. No cleanup is required — all work is done in `start()` and `render()`.
      */
     end(): void;
 }

package/3rdparty/walkontable/src/utils/orderView/view.js

@@ -9,8 +9,7 @@ Object.defineProperty(exports, "OrderView", {
     }
 });
 const _viewSizeSet = require("./viewSizeSet");
-const _viewDiffer = require("./viewDiffer");
-const _rendererAdapter = require("./rendererAdapter");
+const _constants = require("./constants");
 class OrderView {
     /**
    * Sets the size for rendered elements. It can be a size for rows, cells or size for row
@@ -58,28 +57,94 @@ class OrderView {
         return length > 0 ? this.collectedNodes[length - 1] : null;
     }
     /**
-   * Setups and prepares all necessary properties and start the rendering process.
+   * Returns the count of children in the root node that belong to this view (for shared root nodes
+   * only the children matching this view's node type and working space are counted).
+   *
+   * @returns {number}
+   */ getRenderedChildCount() {
+        const { rootNode, sizeSet } = this;
+        let childElementCount = 0;
+        if (this.isSharedViewSet()) {
+            let element = rootNode.firstElementChild;
+            while(element){
+                if (element.tagName === this.childNodeType) {
+                    childElementCount += 1;
+                } else if (sizeSet.isPlaceOn(_constants.WORKING_SPACE_TOP)) {
+                    break;
+                }
+                element = element.nextElementSibling;
+            }
+        } else {
+            childElementCount = rootNode.childElementCount;
+        }
+        return childElementCount;
+    }
+    /**
+   * Setups and prepares all necessary properties and starts the rendering process. It adjusts the
+   * number of children in the root node to the next view size, creating or removing nodes as needed.
    * This method has to be called only once (at the start) for the render cycle.
    */ start() {
-        this.rendererAdapter.start();
+        this.collectedNodes.length = 0;
+        this.visualIndex = 0;
+        const { rootNode, sizeSet } = this;
+        const isShared = this.isSharedViewSet();
+        const { nextSize } = sizeSet.getViewSize();
+        let childElementCount = this.getRenderedChildCount();
+        while(childElementCount < nextSize){
+            const newNode = this.nodesPool();
+            if (!isShared || sizeSet.isPlaceOn(_constants.WORKING_SPACE_BOTTOM)) {
+                rootNode.appendChild(newNode);
+            } else {
+                rootNode.insertBefore(newNode, rootNode.firstChild);
+            }
+            childElementCount += 1;
+        }
+        const isSharedPlacedOnTop = isShared && sizeSet.isPlaceOn(_constants.WORKING_SPACE_TOP);
+        while(childElementCount > nextSize){
+            const childToRemove = isSharedPlacedOnTop ? rootNode.firstChild : rootNode.lastChild;
+            if (childToRemove) {
+                rootNode.removeChild(childToRemove);
+            }
+            childElementCount -= 1;
+        }
     }
     /**
-   * Renders the DOM element based on visual index (which is calculated internally).
+   * Renders the DOM element for the current visual index by reusing the child already in place.
+   * If a child of the wrong node type occupies the slot, it is replaced with a freshly created one.
    * This method has to be called as many times as the size count is met (to cover all previously rendered DOM elements).
    */ render() {
-        this.rendererAdapter.render();
+        const { rootNode, sizeSet } = this;
+        let visualIndex = this.visualIndex;
+        if (this.isSharedViewSet() && sizeSet.isPlaceOn(_constants.WORKING_SPACE_BOTTOM) && sizeSet.sharedSize) {
+            visualIndex += sizeSet.sharedSize.nextSize;
+        }
+        // Index by element children only (`children`, not `childNodes`) to stay consistent with the
+        // element-based counting in `start()` and `getRenderedChildCount()`; a stray text/comment node
+        // in the root would otherwise shift the slot.
+        let node = rootNode.children[visualIndex];
+        if (!node) {
+            // Defensive guard: `start()` always provisions enough children for this render cycle, so the
+            // slot should exist. Recreate it rather than dereferencing `undefined` if that ever breaks.
+            node = this.nodesPool();
+            rootNode.appendChild(node);
+        } else if (node.tagName !== this.childNodeType) {
+            const newNode = this.nodesPool();
+            node.replaceWith(newNode);
+            node = newNode;
+        }
+        this.collectedNodes.push(node);
+        this.visualIndex += 1;
     }
     /**
-   * Ends the render process.
-   * This method has to be called only once (at the end) for the render cycle.
+   * Ends the render process. No cleanup is required — all work is done in `start()` and `render()`.
    */ end() {
-        this.rendererAdapter.end();
+    // intentionally empty
     }
     /**
    * Creates a new OrderView instance.
    *
    * @param {HTMLElement} rootNode The root node to manage.
-   * @param {function(number?): HTMLElement} nodesPool Factory for creating new DOM elements.
+   * @param {function(): HTMLElement} nodesPool Factory for creating new DOM elements.
    * @param {string} childNodeType The type of child nodes to manage.
    */ constructor(rootNode, nodesPool, childNodeType){
         /**
@@ -93,14 +158,12 @@ class OrderView {
    * @type {HTMLElement[]}
    */ this.collectedNodes = [];
         /**
-   * The differ which calculates the differences between current and next view. It generates
-   * commands that are processed by the OrderView (see `applyCommand` method).
+   * The visual index of the currently processed child within a render cycle.
    *
-   * @type {ViewDiffer}
-   */ this.viewDiffer = new _viewDiffer.ViewDiffer(this.sizeSet);
+   * @type {number}
+   */ this.visualIndex = 0;
         this.rootNode = rootNode;
         this.nodesPool = nodesPool;
-        this.childNodeType = childNodeType;
-        this.rendererAdapter = (0, _rendererAdapter.createRendererAdapter)(this);
+        this.childNodeType = typeof childNodeType === 'string' ? childNodeType.toUpperCase() : childNodeType;
     }
 }

package/3rdparty/walkontable/src/utils/orderView/view.mjs

@@ -1,11 +1,16 @@
 import { ViewSizeSet } from './viewSizeSet.mjs';
-import { ViewDiffer } from './viewDiffer/index.mjs';
-import { createRendererAdapter } from './rendererAdapter/index.mjs';
+import { WORKING_SPACE_TOP, WORKING_SPACE_BOTTOM } from './constants.mjs';
 /**
  * Executive model for each table renderer. It's responsible for injecting DOM nodes in a
  * specified order and adjusting the number of elements in the root node.
  *
- * Only this class have rights to juggling DOM elements within the root node (see render method).
+ * Rendering writes directly to the DOM: the root node keeps exactly `viewSize` children, and on
+ * each render cycle the existing children are reused in place (their content is overwritten by the
+ * cell renderer). There is no node pool keyed by source coordinate and no diffing strategy — those
+ * were removed because keeping a fixed, viewport-sized set of nodes is simpler and bounds memory to
+ * the viewport regardless of dataset size.
+ *
+ * Only this class has rights to juggle DOM elements within the root node (see render method).
  *
  * @class {OrderView}
  */ export class OrderView {
@@ -55,28 +60,94 @@ import { createRendererAdapter } from './rendererAdapter/index.mjs';
         return length > 0 ? this.collectedNodes[length - 1] : null;
     }
     /**
-   * Setups and prepares all necessary properties and start the rendering process.
+   * Returns the count of children in the root node that belong to this view (for shared root nodes
+   * only the children matching this view's node type and working space are counted).
+   *
+   * @returns {number}
+   */ getRenderedChildCount() {
+        const { rootNode, sizeSet } = this;
+        let childElementCount = 0;
+        if (this.isSharedViewSet()) {
+            let element = rootNode.firstElementChild;
+            while(element){
+                if (element.tagName === this.childNodeType) {
+                    childElementCount += 1;
+                } else if (sizeSet.isPlaceOn(WORKING_SPACE_TOP)) {
+                    break;
+                }
+                element = element.nextElementSibling;
+            }
+        } else {
+            childElementCount = rootNode.childElementCount;
+        }
+        return childElementCount;
+    }
+    /**
+   * Setups and prepares all necessary properties and starts the rendering process. It adjusts the
+   * number of children in the root node to the next view size, creating or removing nodes as needed.
    * This method has to be called only once (at the start) for the render cycle.
    */ start() {
-        this.rendererAdapter.start();
+        this.collectedNodes.length = 0;
+        this.visualIndex = 0;
+        const { rootNode, sizeSet } = this;
+        const isShared = this.isSharedViewSet();
+        const { nextSize } = sizeSet.getViewSize();
+        let childElementCount = this.getRenderedChildCount();
+        while(childElementCount < nextSize){
+            const newNode = this.nodesPool();
+            if (!isShared || sizeSet.isPlaceOn(WORKING_SPACE_BOTTOM)) {
+                rootNode.appendChild(newNode);
+            } else {
+                rootNode.insertBefore(newNode, rootNode.firstChild);
+            }
+            childElementCount += 1;
+        }
+        const isSharedPlacedOnTop = isShared && sizeSet.isPlaceOn(WORKING_SPACE_TOP);
+        while(childElementCount > nextSize){
+            const childToRemove = isSharedPlacedOnTop ? rootNode.firstChild : rootNode.lastChild;
+            if (childToRemove) {
+                rootNode.removeChild(childToRemove);
+            }
+            childElementCount -= 1;
+        }
     }
     /**
-   * Renders the DOM element based on visual index (which is calculated internally).
+   * Renders the DOM element for the current visual index by reusing the child already in place.
+   * If a child of the wrong node type occupies the slot, it is replaced with a freshly created one.
    * This method has to be called as many times as the size count is met (to cover all previously rendered DOM elements).
    */ render() {
-        this.rendererAdapter.render();
+        const { rootNode, sizeSet } = this;
+        let visualIndex = this.visualIndex;
+        if (this.isSharedViewSet() && sizeSet.isPlaceOn(WORKING_SPACE_BOTTOM) && sizeSet.sharedSize) {
+            visualIndex += sizeSet.sharedSize.nextSize;
+        }
+        // Index by element children only (`children`, not `childNodes`) to stay consistent with the
+        // element-based counting in `start()` and `getRenderedChildCount()`; a stray text/comment node
+        // in the root would otherwise shift the slot.
+        let node = rootNode.children[visualIndex];
+        if (!node) {
+            // Defensive guard: `start()` always provisions enough children for this render cycle, so the
+            // slot should exist. Recreate it rather than dereferencing `undefined` if that ever breaks.
+            node = this.nodesPool();
+            rootNode.appendChild(node);
+        } else if (node.tagName !== this.childNodeType) {
+            const newNode = this.nodesPool();
+            node.replaceWith(newNode);
+            node = newNode;
+        }
+        this.collectedNodes.push(node);
+        this.visualIndex += 1;
     }
     /**
-   * Ends the render process.
-   * This method has to be called only once (at the end) for the render cycle.
+   * Ends the render process. No cleanup is required — all work is done in `start()` and `render()`.
    */ end() {
-        this.rendererAdapter.end();
+    // intentionally empty
     }
     /**
    * Creates a new OrderView instance.
    *
    * @param {HTMLElement} rootNode The root node to manage.
-   * @param {function(number?): HTMLElement} nodesPool Factory for creating new DOM elements.
+   * @param {function(): HTMLElement} nodesPool Factory for creating new DOM elements.
    * @param {string} childNodeType The type of child nodes to manage.
    */ constructor(rootNode, nodesPool, childNodeType){
         /**
@@ -90,14 +161,12 @@ import { createRendererAdapter } from './rendererAdapter/index.mjs';
    * @type {HTMLElement[]}
    */ this.collectedNodes = [];
         /**
-   * The differ which calculates the differences between current and next view. It generates
-   * commands that are processed by the OrderView (see `applyCommand` method).
+   * The visual index of the currently processed child within a render cycle.
    *
-   * @type {ViewDiffer}
-   */ this.viewDiffer = new ViewDiffer(this.sizeSet);
+   * @type {number}
+   */ this.visualIndex = 0;
         this.rootNode = rootNode;
         this.nodesPool = nodesPool;
-        this.childNodeType = childNodeType;
-        this.rendererAdapter = createRendererAdapter(this);
+        this.childNodeType = typeof childNodeType === 'string' ? childNodeType.toUpperCase() : childNodeType;
     }
 }

package/3rdparty/walkontable/src/utils/orderView/viewSize.d.ts

@@ -5,25 +5,13 @@
  */
 export declare class ViewSize {
     /**
-     * Current size of the rendered DOM elements.
-     *
-     * @type {number}
-     */
-    currentSize: number;
-    /**
-     * Next size of the rendered DOM elements which should be fulfilled.
+     * Size of the rendered DOM elements which should be fulfilled.
      *
      * @type {number}
      */
     nextSize: number;
     /**
-     * Current offset.
-     *
-     * @type {number}
-     */
-    currentOffset: number;
-    /**
-     * Next offset.
+     * Offset of the first rendered element according to the scroll position.
      *
      * @type {number}
      */

package/3rdparty/walkontable/src/utils/orderView/viewSize.js

@@ -18,7 +18,6 @@ class ViewSize {
    *
    * @param {number} size The size.
    */ setSize(size) {
-        this.currentSize = this.nextSize;
         this.nextSize = size;
     }
     /**
@@ -26,27 +25,16 @@ class ViewSize {
    *
    * @param {number} offset The offset.
    */ setOffset(offset) {
-        this.currentOffset = this.nextOffset;
         this.nextOffset = offset;
     }
     constructor(){
         /**
-   * Current size of the rendered DOM elements.
-   *
-   * @type {number}
-   */ this.currentSize = 0;
-        /**
-   * Next size of the rendered DOM elements which should be fulfilled.
+   * Size of the rendered DOM elements which should be fulfilled.
    *
    * @type {number}
    */ this.nextSize = 0;
         /**
-   * Current offset.
-   *
-   * @type {number}
-   */ this.currentOffset = 0;
-        /**
-   * Next offset.
+   * Offset of the first rendered element according to the scroll position.
    *
    * @type {number}
    */ this.nextOffset = 0;

package/3rdparty/walkontable/src/utils/orderView/viewSize.mjs

@@ -8,7 +8,6 @@
    *
    * @param {number} size The size.
    */ setSize(size) {
-        this.currentSize = this.nextSize;
         this.nextSize = size;
     }
     /**
@@ -16,27 +15,16 @@
    *
    * @param {number} offset The offset.
    */ setOffset(offset) {
-        this.currentOffset = this.nextOffset;
         this.nextOffset = offset;
     }
     constructor(){
         /**
-   * Current size of the rendered DOM elements.
-   *
-   * @type {number}
-   */ this.currentSize = 0;
-        /**
-   * Next size of the rendered DOM elements which should be fulfilled.
+   * Size of the rendered DOM elements which should be fulfilled.
    *
    * @type {number}
    */ this.nextSize = 0;
         /**
-   * Current offset.
-   *
-   * @type {number}
-   */ this.currentOffset = 0;
-        /**
-   * Next offset.
+   * Offset of the first rendered element according to the scroll position.
    *
    * @type {number}
    */ this.nextOffset = 0;

package/CHANGELOG.md

@@ -9,7 +9,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 <!-- UNVERSIONED -->
 
-## [18.0.0-rc3] - 2026-06-23
+## [18.0.0] - 2026-06-30
 
 ### Added
 - **Breaking change**: Added wrapper layout slots and a `layout` option to control the order of UI elements rendered around the grid (pagination, dialog). The license notification always renders last in the bottom area and is not orderable. Built-in UI now mounts into dedicated wrapper containers, which changes the root DOM structure. [#12094](https://github.com/handsontable/handsontable/issues/12094)
@@ -32,6 +32,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Changed the Notification plugin to render its toasts in the grid's overlay layer. [#12777](https://github.com/handsontable/handsontable/issues/12777)
 - Angular: Modernized the Angular wrapper to align with Angular 17–19, simplify setup, reduce dependencies, and clean up tooling. [#12451](https://github.com/handsontable/handsontable/issues/12451)
 - Angular: Added support for installing Angular 16 through 22, without the --force flag [#12752](https://github.com/handsontable/handsontable/issues/12752)
+- Reduced memory usage and improved initialization time for large datasets by no longer materializing cell metadata for every cell during source data validation. [#12847](https://github.com/handsontable/handsontable/pull/12847)
 
 ### Removed
 - **Breaking change**: Removed the numbro, moment.js, DOMPurify, and @handsontable/pikaday dependencies. [#12689](https://github.com/handsontable/handsontable/issues/12689)
@@ -120,6 +121,8 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - React: Fixed React component renderers being unmounted and visibly cleared on every grid render after a cell edit. [#12494](https://github.com/handsontable/handsontable/issues/12494)
 - React: Fixed an issue where `HotColumn` children removed from a `HotTable` left phantom columns behind in the React wrapper. [#12596](https://github.com/handsontable/handsontable/issues/12596)
 - Angular: Fixed subscription leak, missing EmbeddedViewRef cleanup, repeated registerRenderer calls, wrong constructor.name, incorrect prop type, missing null guard in ngOnDestroy, premature editor destruction, redundant double-destroy of already-swept renderer refs, and stale editor reuse when a different column takes an index. [#12657](https://github.com/handsontable/handsontable/issues/12657)
+- Fixed cell meta set with `setCellMeta` (for example, `readOnly`) being reset by `updateSettings`. [#12811](https://github.com/handsontable/handsontable/issues/12811)
+- Reduced memory usage during scrolling and fixed potential out-of-memory errors on very large datasets. [#12844](https://github.com/handsontable/handsontable/pull/12844)
 
 ## [17.1.0] - 2026-05-19
 

package/base.js

@@ -72,8 +72,8 @@ Handsontable.hooks = _hooks.Hooks.getSingleton();
 Handsontable.CellCoords = _src.CellCoords;
 Handsontable.CellRange = _src.CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "24/06/2026 08:31:19";
-Handsontable.version = "18.0.0-rc4";
+Handsontable.buildDate = "30/06/2026 08:45:33";
+Handsontable.version = "18.0.0";
 Handsontable.languages = {
     dictionaryKeys: _registry.dictionaryKeys,
     getLanguageDictionary: _registry.getLanguageDictionary,

package/base.mjs

@@ -43,8 +43,8 @@ Handsontable.hooks = Hooks.getSingleton();
 Handsontable.CellCoords = CellCoords;
 Handsontable.CellRange = CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "24/06/2026 08:31:19";
-Handsontable.version = "18.0.0-rc4";
+Handsontable.buildDate = "30/06/2026 08:45:33";
+Handsontable.version = "18.0.0";
 Handsontable.languages = {
     dictionaryKeys,
     getLanguageDictionary,

package/core/types.d.ts

@@ -16,6 +16,8 @@ import type { FocusGridManager as FocusManagerInstance } from '../focusManager/g
 import type { FocusScopeManager as FocusScopeManagerInstance } from '../focusManager/scopeManager';
 import type { LayoutManager } from './layout';
 import type { default as EditorManagerInstance } from '../editorManager';
+import type { default as DataSourceInstance } from '../dataMap/dataSource';
+import type { default as MetaManagerInstance } from '../dataMap/metaManager';
 import type { BaseEditor as BaseEditorInstance } from '../editors/baseEditor/baseEditor';
 import type { StylesHandler } from '../utils/stylesHandler';
 import type { ThemeManager } from '../themes/engine/manager';
@@ -194,6 +196,8 @@ export interface HotInstance {
     getFocusScopeManager(): FocusScopeManagerInstance;
     getLayoutManager(): LayoutManager;
     _getEditorManager(): EditorManagerInstance;
+    _getDataSource(): DataSourceInstance;
+    _getMetaManager(): MetaManagerInstance;
     rootElement: HTMLElement;
     rootDocument: Document;
     rootWindow: Window & typeof globalThis;

package/core.js

@@ -2428,6 +2428,10 @@ function Core(rootContainer, userSettings, rootInstanceSymbol = false) {
    * Since 12.0.0 passing `data` inside `settings` objects no longer results in resetting states corresponding to rows and columns
    * (for example, row/column sequence, column width, row height, frozen columns etc.).
    *
+   * Cell meta set imperatively through [[setCellMeta]] (for example, by the user or the context menu) is preserved across
+   * `updateSettings`, even when `settings` includes `cell`, `cells`, or `columns`. On a direct conflict, a value re-stated
+   * through the declarative `cell` option takes precedence over the preserved imperative value.
+   *
    * When [[Hooks#hasExternalDataSource]] is true, Handsontable clears and rebinds the placeholder dataset only during
    * initialization or when `settings` includes `data` or `dataProvider`. Other keys alone (for example `height`) do not clear loaded rows.
    * If only `columns` changes, the column map is rebuilt without clearing rows.
@@ -2566,9 +2570,17 @@ function Core(rootContainer, userSettings, rootInstanceSymbol = false) {
         }
         const clen = instance.countCols();
         const columnSetting = tableMeta.columns;
-        // Clear cell meta cache
+        // Clear cell meta cache. Cell meta set imperatively through `setCellMeta` (for example, by the
+        // user or the context menu) is snapshotted beforehand and replayed afterward, so that it
+        // survives the clear instead of being discarded (see GitHub issue #4446).
         if (settings.cell !== undefined || settings.cells !== undefined || settings.columns !== undefined) {
+            const userDefinedCellMetas = metaManager.getUserDefinedCellMetas();
             metaManager.clearCache();
+            // Replay before the column and `cell` option re-application, so that a value re-stated through
+            // the declarative `cell` option still wins on a direct conflict (preserving legacy behavior).
+            userDefinedCellMetas.forEach(({ physicalRow, physicalColumn, key, value })=>{
+                metaManager.setCellMeta(physicalRow, physicalColumn, key, value);
+            });
         }
         if (clen > 0) {
             for(i = 0, j = 0; i < clen; i++){
@@ -2583,9 +2595,18 @@ function Core(rootContainer, userSettings, rootInstanceSymbol = false) {
             }
         }
         if ((0, _mixed.isDefined)(settings.cell)) {
-            settings.cell.forEach((cell)=>{
-                instance.setCellMetaObject(cell.row, cell.col, cell);
-            });
+            // The `cell` option is declarative - it is re-applied from settings on every `updateSettings`
+            // call. Recording is disabled so these writes are not tracked as user-defined (and a key
+            // re-stated here de-marks any imperative value), keeping `updateSettings({ cell: [] })` able
+            // to remove previously declared entries.
+            metaManager.disableUserDefinedMetaRecording();
+            try {
+                settings.cell.forEach((cell)=>{
+                    instance.setCellMetaObject(cell.row, cell.col, cell);
+                });
+            } finally{
+                metaManager.enableUserDefinedMetaRecording();
+            }
         }
         instance.runHooks('afterCellMetaReset');
         // for the first run, we need to run the source data warnings after cell meta initialization

package/core.mjs

@@ -2413,6 +2413,10 @@ let activeGuid = null;
    * Since 12.0.0 passing `data` inside `settings` objects no longer results in resetting states corresponding to rows and columns
    * (for example, row/column sequence, column width, row height, frozen columns etc.).
    *
+   * Cell meta set imperatively through [[setCellMeta]] (for example, by the user or the context menu) is preserved across
+   * `updateSettings`, even when `settings` includes `cell`, `cells`, or `columns`. On a direct conflict, a value re-stated
+   * through the declarative `cell` option takes precedence over the preserved imperative value.
+   *
    * When [[Hooks#hasExternalDataSource]] is true, Handsontable clears and rebinds the placeholder dataset only during
    * initialization or when `settings` includes `data` or `dataProvider`. Other keys alone (for example `height`) do not clear loaded rows.
    * If only `columns` changes, the column map is rebuilt without clearing rows.
@@ -2551,9 +2555,17 @@ let activeGuid = null;
         }
         const clen = instance.countCols();
         const columnSetting = tableMeta.columns;
-        // Clear cell meta cache
+        // Clear cell meta cache. Cell meta set imperatively through `setCellMeta` (for example, by the
+        // user or the context menu) is snapshotted beforehand and replayed afterward, so that it
+        // survives the clear instead of being discarded (see GitHub issue #4446).
         if (settings.cell !== undefined || settings.cells !== undefined || settings.columns !== undefined) {
+            const userDefinedCellMetas = metaManager.getUserDefinedCellMetas();
             metaManager.clearCache();
+            // Replay before the column and `cell` option re-application, so that a value re-stated through
+            // the declarative `cell` option still wins on a direct conflict (preserving legacy behavior).
+            userDefinedCellMetas.forEach(({ physicalRow, physicalColumn, key, value })=>{
+                metaManager.setCellMeta(physicalRow, physicalColumn, key, value);
+            });
         }
         if (clen > 0) {
             for(i = 0, j = 0; i < clen; i++){
@@ -2568,9 +2580,18 @@ let activeGuid = null;
             }
         }
         if (isDefined(settings.cell)) {
-            settings.cell.forEach((cell)=>{
-                instance.setCellMetaObject(cell.row, cell.col, cell);
-            });
+            // The `cell` option is declarative - it is re-applied from settings on every `updateSettings`
+            // call. Recording is disabled so these writes are not tracked as user-defined (and a key
+            // re-stated here de-marks any imperative value), keeping `updateSettings({ cell: [] })` able
+            // to remove previously declared entries.
+            metaManager.disableUserDefinedMetaRecording();
+            try {
+                settings.cell.forEach((cell)=>{
+                    instance.setCellMetaObject(cell.row, cell.col, cell);
+                });
+            } finally{
+                metaManager.enableUserDefinedMetaRecording();
+            }
         }
         instance.runHooks('afterCellMetaReset');
         // for the first run, we need to run the source data warnings after cell meta initialization