@revolist/react-datagrid 4.23.4 → 4.23.5

package/README.md

@@ -13,12 +13,21 @@
   <img src="https://badgen.net/bundlephobia/tree-shaking/@revolist/revogrid" alt="Tree shaking"/>
   <img src="https://img.shields.io/bundlephobia/min/@revolist/revogrid" alt="Bundle size"/>
   <img src="https://sonarcloud.io/api/project_badges/measure?project=revolist_revogrid&metric=alert_status" alt="Sonar Quality Gate"/>
+  <a href="https://github.com/revolist/revogrid/actions/workflows/unit.yml">
+        <img src="https://github.com/revolist/revogrid/actions/workflows/unit.yml/badge.svg" alt="Workflow status badge" loading="lazy" height="20">
+  </a>
+  <a href="https://github.com/revolist/revogrid/actions/workflows/e2e.yml">
+        <img src="https://github.com/revolist/revogrid/actions/workflows/e2e.yml/badge.svg" alt="Workflow status badge" loading="lazy" height="20">
+  </a>
 </p>
 
 
 <h3 align="center">Powerful React Data Grid component built on top of <a href="https://github.com/revolist/revogrid" target="_blank">RevoGrid</a>.</h3>
 <p align="center">
-Support Millions of cells and thousands of columns easy and efficiently for fast data rendering. Easy to use.
+Render 1M+ rows, millions of cells, and thousands of columns efficiently with no hard row limit in the grid.
+</p>
+<p align="center">
+Used by some of the largest companies in Europe and the United States.
 </p>
 
 <p align="center">
@@ -37,7 +46,7 @@ Support Millions of cells and thousands of columns easy and efficiently for fast
 
 ## Key Features
 
-- **High Performance**: Handles millions of cells in the viewport with a powerful core built by default.
+- **High Performance**: Render 1M+ rows and millions of cells with no hard row limit in the grid. Virtualization keeps the DOM focused on the visible viewport.
 
 - **[Accessibility](https://rv-grid.com/guide/wcag)**: Follows WAI-ARIA best practices.
 
@@ -52,7 +61,7 @@ Support Millions of cells and thousands of columns easy and efficiently for fast
 
 - **[Intelligent Virtual DOM](https://rv-grid.com/guide/overview#VNode-Reactive-DOM)**: Smart row recombination to minimize redraws.
 
-- **[Virtual Scroll](https://rv-grid.com/guide/viewports)**: Handles large datasets with infinite scroll.
+- **[Virtual Scroll](https://rv-grid.com/guide/viewports)**: Handles large datasets without rendering every row or column into the DOM.
 
 - **[Drag and Drop](https://rv-grid.com/guide/row/order)**: Drag and drop in [rows](https://rv-grid.com/guide/row/order) and [columns](https://rv-grid.com/guide/column/order).
 
@@ -105,20 +114,17 @@ Support Millions of cells and thousands of columns easy and efficiently for fast
 
 - **[Plugin System](https://rv-grid.com/guide/plugin/)**: Create custom plugins or extend existing ones easily.
 
-- **[Formula Support](https://rv-grid.com/guide/cell/formula)**: Evaluate formulas in cell data with Excel-like syntax, including basic arithmetic, statistical functions, and cell references.
-- **[Pivot Table](https://rv-grid.com/demo/pivot)**: Transform and analyze data dynamically with drag-and-drop field arrangement, aggregation functions, and interactive filtering capabilities.
-
-- **[Master Detail/Subtables/Forms](https://rv-grid.com/guide/row/master.pro)**: Expand rows to reveal child data.
-- **[Cell/Column/Row Span/Merge](https://rv-grid.com/guide/cell/merge)**: Merge cells to form groups.
-- **Auto Merge**: Automatically merges cells with identical values in a column.
-- **Form editig**: Edit forms directly within the grid, featuring all necessary fields, including custom options and markdown support for a fast and enhanced data entry experience.
-
 - **Customizations**:
   - [Column header template](https://rv-grid.com/guide/column/header.template).
   - [Row header template](https://rv-grid.com/guide/row/headers).
   - [Cell properties](https://rv-grid.com/guide/cell/) (define custom properties for rendered cells).
-  - Nested grids: Build a grid inside a grid, showcasing advanced editing options and user interactions for a more dynamic data presentation.
-  - Context Menu: Build context menus for any grid element - from cells to headers. Cut, copy, paste, add rows, modify columns, and more. Fully customizable with your own actions and behaviors.
+  - [Cell template](https://rv-grid.com/guide/cell/renderer) (create your own cell views).
+  - [Cell editor](https://rv-grid.com/guide/cell/editor) (use predefined or apply your own custom editors and cell types).
+
+- **[AI Agents and MCP](https://rv-grid.com/guide/mcp)**: Connect Codex, Cursor, Claude Code, and VS Code to version-aware RevoGrid docs, examples, migrations, feature availability, and typed API context.
+
+- **Rich API & Additional Improvements**: Explore hundreds of other small customizations and improvements in [RevoGrid](https://rv-grid.com/).
+
 
   - [Cell template](https://rv-grid.com/guide/react/renderer) (create your own cell views).
   - [Cell editor](https://rv-grid.com/guide/react/editor) (use predefined or apply your own custom editors and cell types).
@@ -321,6 +327,29 @@ If you or your company would like to support the ongoing development of RevoGrid
 Thank you for supporting RevoGrid! 🙏
 
 
+## Testing
+
+[![Unit Tests](https://github.com/revolist/revogrid/actions/workflows/ci-unit.yml/badge.svg?branch=main)](https://github.com/revolist/revogrid/actions/workflows/ci-unit.yml)
+[![E2E Tests](https://github.com/revolist/revogrid/actions/workflows/ci-e2e.yml/badge.svg?branch=main)](https://github.com/revolist/revogrid/actions/workflows/ci-e2e.yml)
+
+RevoGrid is thoroughly tested to ensure reliability and stability.
+
+| Suite | Command | Scope |
+|---|---|---|
+| Unit | `npm run test` | Services, utilities, pure logic |
+| E2E (Playwright) | `npm run test:e2e` | Real browser rendering & interaction |
+
+### E2E Tests
+
+End-to-end tests use [@stencil/playwright](https://www.npmjs.com/package/@stencil/playwright) to run `<revo-grid>` in a real Chromium browser. The dev server starts automatically when you run:
+
+```bash
+npm run test:e2e
+```
+
+Test files live in `e2e/` and share helpers from `e2e/helpers.ts`:
+
+
 ## Contributing
 
 By getting involved, you'll have the opportunity to enhance your skills, gain valuable experience, and make a significant impact on an innovative project. Your contribution, no matter how big or small, is valuable.

package/dist/index.d.ts

@@ -44,11 +44,17 @@ export declare type EditorType = {
 
 export declare interface ReactElement extends HTMLElement {
     _root?: Root;
+    _renderedComponent?: RenderedComponent<any>;
+    _templateComponent?: ComponentType<any>;
+    _templateKey?: string;
 }
 
 export declare interface RenderedComponent<T> {
+    el: ReactElement;
     update: (newProps: T) => void;
     destroy: () => void;
+    scheduleDestroy: () => void;
+    cancelDestroy: () => void;
 }
 
 export declare const RevoGrid: ForwardRefExoticComponent<JSX_2.RevoGrid & Omit<HTMLAttributes<HTMLRevoGridElement>, "style"> & StyleReactProps & RefAttributes<HTMLRevoGridElement>>;

package/dist/react-datagrid.js

@@ -1,13 +1,11 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { defineCustomElements } from "@revolist/revogrid/loader";
 export * from "@revolist/revogrid/loader";
 export * from "@revolist/revogrid";
 import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
 import React, { createElement } from "react";
 import { jsx } from "react/jsx-runtime";
 const dashToPascalCase = (str) => str.toLowerCase().split("-").map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join("");
@@ -171,40 +169,85 @@ const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFun
   };
   return createForwardRef(ReactComponent, displayName);
 };
-function TemplateConstructor(el, ReactComponent, initialProps, key) {
+function TemplateConstructor(el, ReactComponent, initialProps, key, lastEl = null) {
+  if (!el) {
+    lastEl == null ? void 0 : lastEl.scheduleDestroy();
+    return lastEl;
+  }
+  if (lastEl && lastEl.el !== el) {
+    lastEl.destroy();
+  }
+  if (!el._root) {
+    el._root = createRoot(el);
+  }
+  const renderedComponent = el._renderedComponent;
+  if (renderedComponent && el._templateComponent === ReactComponent && el._templateKey === key) {
+    renderedComponent.cancelDestroy();
+    renderedComponent.update(initialProps);
+    return renderedComponent;
+  }
+  renderedComponent == null ? void 0 : renderedComponent.destroy();
   if (!el._root) {
     el._root = createRoot(el);
   }
+  const root = el._root;
+  let destroyFrame = null;
+  let destroyed = false;
   const renderComponent = (props) => {
-    var _a;
     const vNode = createElement(ReactComponent, { ...props, key });
-    (_a = el._root) == null ? void 0 : _a.render(vNode);
+    flushSync(() => {
+      root.render(vNode);
+    });
   };
   renderComponent(initialProps);
   const update = (newProps) => {
     renderComponent(newProps);
   };
   const destroy = () => {
-    var _a;
-    (_a = el._root) == null ? void 0 : _a.unmount();
-    el._root = void 0;
+    if (destroyed) return;
+    destroyed = true;
+    if (destroyFrame !== null) {
+      cancelAnimationFrame(destroyFrame);
+      destroyFrame = null;
+    }
+    root.unmount();
+    if (el._root === root) {
+      el._root = void 0;
+      el._renderedComponent = void 0;
+      el._templateComponent = void 0;
+      el._templateKey = void 0;
+    }
+  };
+  const scheduleDestroy = () => {
+    if (destroyFrame !== null) return;
+    destroyFrame = requestAnimationFrame(() => {
+      destroyFrame = null;
+      if (el.isConnected && el._renderedComponent === component) {
+        return;
+      }
+      destroy();
+    });
+  };
+  const cancelDestroy = () => {
+    if (destroyFrame === null) return;
+    cancelAnimationFrame(destroyFrame);
+    destroyFrame = null;
   };
-  return { update, destroy };
+  const component = { el, update, destroy, scheduleDestroy, cancelDestroy };
+  el._renderedComponent = component;
+  el._templateComponent = ReactComponent;
+  el._templateKey = key;
+  return component;
 }
 const Template = (ReactComponent, customProps) => {
   return (h, p, addition) => {
-    const props = customProps ? { ...customProps, ...p } : p;
-    props.addition = addition;
+    const props = customProps ? { ...customProps, ...p, addition } : { ...p, addition };
     const key = `${p.prop}-${p.rowIndex || 0}`;
     let lastEl = null;
     return h("span", {
+      key,
       ref: (el) => {
-        var _a;
-        if (!el) {
-          (_a = lastEl == null ? void 0 : lastEl.destroy) == null ? void 0 : _a.call(lastEl);
-        } else {
-          lastEl = TemplateConstructor(el, ReactComponent, props, key);
-        }
+        lastEl = TemplateConstructor(el, ReactComponent, props, key, lastEl);
       }
     });
   };

package/dist/react-datagrid.umd.cjs

@@ -1,12 +1,9 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@revolist/revogrid/loader"), require("@revolist/revogrid"), require("react-dom/client"), require("react"), require("react/jsx-runtime")) : typeof define === "function" && define.amd ? define(["exports", "@revolist/revogrid/loader", "@revolist/revogrid", "react-dom/client", "react", "react/jsx-runtime"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.ReactDatagrid = {}, global.RevogridLoader, global.Revogrid, global.ReactDOM, global.React, global.ReactJSXR));
-})(this, function(exports2, loader, revogrid, client, React, jsxRuntime) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@revolist/revogrid/loader"), require("@revolist/revogrid"), require("react-dom/client"), require("react-dom"), require("react"), require("react/jsx-runtime")) : typeof define === "function" && define.amd ? define(["exports", "@revolist/revogrid/loader", "@revolist/revogrid", "react-dom/client", "react-dom", "react", "react/jsx-runtime"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.ReactDatagrid = {}, global.RevogridLoader, global.Revogrid, global.ReactDOM, global.ReactDOM, global.React, global.ReactJSXR));
+})(this, function(exports2, loader, revogrid, client, ReactDOM, React, jsxRuntime) {
   "use strict";var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
   const dashToPascalCase = (str) => str.toLowerCase().split("-").map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join("");
   const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
@@ -169,40 +166,85 @@ var __publicField = (obj, key, value) => {
     };
     return createForwardRef(ReactComponent, displayName);
   };
-  function TemplateConstructor(el, ReactComponent, initialProps, key) {
+  function TemplateConstructor(el, ReactComponent, initialProps, key, lastEl = null) {
+    if (!el) {
+      lastEl == null ? void 0 : lastEl.scheduleDestroy();
+      return lastEl;
+    }
+    if (lastEl && lastEl.el !== el) {
+      lastEl.destroy();
+    }
+    if (!el._root) {
+      el._root = client.createRoot(el);
+    }
+    const renderedComponent = el._renderedComponent;
+    if (renderedComponent && el._templateComponent === ReactComponent && el._templateKey === key) {
+      renderedComponent.cancelDestroy();
+      renderedComponent.update(initialProps);
+      return renderedComponent;
+    }
+    renderedComponent == null ? void 0 : renderedComponent.destroy();
     if (!el._root) {
       el._root = client.createRoot(el);
     }
+    const root = el._root;
+    let destroyFrame = null;
+    let destroyed = false;
     const renderComponent = (props) => {
-      var _a;
       const vNode = React.createElement(ReactComponent, { ...props, key });
-      (_a = el._root) == null ? void 0 : _a.render(vNode);
+      ReactDOM.flushSync(() => {
+        root.render(vNode);
+      });
     };
     renderComponent(initialProps);
     const update = (newProps) => {
       renderComponent(newProps);
     };
     const destroy = () => {
-      var _a;
-      (_a = el._root) == null ? void 0 : _a.unmount();
-      el._root = void 0;
+      if (destroyed) return;
+      destroyed = true;
+      if (destroyFrame !== null) {
+        cancelAnimationFrame(destroyFrame);
+        destroyFrame = null;
+      }
+      root.unmount();
+      if (el._root === root) {
+        el._root = void 0;
+        el._renderedComponent = void 0;
+        el._templateComponent = void 0;
+        el._templateKey = void 0;
+      }
     };
-    return { update, destroy };
+    const scheduleDestroy = () => {
+      if (destroyFrame !== null) return;
+      destroyFrame = requestAnimationFrame(() => {
+        destroyFrame = null;
+        if (el.isConnected && el._renderedComponent === component) {
+          return;
+        }
+        destroy();
+      });
+    };
+    const cancelDestroy = () => {
+      if (destroyFrame === null) return;
+      cancelAnimationFrame(destroyFrame);
+      destroyFrame = null;
+    };
+    const component = { el, update, destroy, scheduleDestroy, cancelDestroy };
+    el._renderedComponent = component;
+    el._templateComponent = ReactComponent;
+    el._templateKey = key;
+    return component;
   }
   const Template = (ReactComponent, customProps) => {
     return (h, p, addition) => {
-      const props = customProps ? { ...customProps, ...p } : p;
-      props.addition = addition;
+      const props = customProps ? { ...customProps, ...p, addition } : { ...p, addition };
       const key = `${p.prop}-${p.rowIndex || 0}`;
       let lastEl = null;
       return h("span", {
+        key,
         ref: (el) => {
-          var _a;
-          if (!el) {
-            (_a = lastEl == null ? void 0 : lastEl.destroy) == null ? void 0 : _a.call(lastEl);
-          } else {
-            lastEl = TemplateConstructor(el, ReactComponent, props, key);
-          }
+          lastEl = TemplateConstructor(el, ReactComponent, props, key, lastEl);
         }
       });
     };
@@ -264,18 +306,16 @@ var __publicField = (obj, key, value) => {
   exports2.RevoGrid = RevoGrid;
   exports2.Template = Template;
   Object.keys(loader).forEach((k) => {
-    if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports2, k))
-      Object.defineProperty(exports2, k, {
-        enumerable: true,
-        get: () => loader[k]
-      });
+    if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports2, k)) Object.defineProperty(exports2, k, {
+      enumerable: true,
+      get: () => loader[k]
+    });
   });
   Object.keys(revogrid).forEach((k) => {
-    if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports2, k))
-      Object.defineProperty(exports2, k, {
-        enumerable: true,
-        get: () => revogrid[k]
-      });
+    if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports2, k)) Object.defineProperty(exports2, k, {
+      enumerable: true,
+      get: () => revogrid[k]
+    });
   });
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@revolist/react-datagrid",
   "sideEffects": false,
-  "version": "4.23.4",
+  "version": "4.23.5",
   "description": "React DataGrid Spreadsheet component with native cell render support",
   "main": "./dist/react-datagrid.umd.cjs",
   "module": "./dist/react-datagrid.js",
@@ -64,7 +64,7 @@
   "homepage": "https://github.com/revolist/revogrid#readme",
   "license": "MIT",
   "dependencies": {
-    "@revolist/revogrid": "4.23.4"
+    "@revolist/revogrid": "4.23.5"
   },
   "devDependencies": {
     "@stencil/core": "^4.43.2",