@revolist/revogrid 4.23.3 → 4.23.5

package/hydrate/index.js

@@ -12051,6 +12051,29 @@ function getViewportMaxCoordinate(dimension, viewportSize, frameOffset = 1) {
     }
     return Math.max(0, dimension.realSize - viewportSize - dimension.originItemSize * frameOffset);
 }
+/**
+ * Clamp the viewport coordinate within the valid range.
+ * Given a scroll position, pick a safe starting point for rendering visible items.
+ *
+ * Do not use it when you need the exact scroll position for positioning math.
+ *
+ * It does two things:
+ * 1. If the coordinate is below 0, use 0.
+ * 2. If the coordinate is too close to the very end, pull it back a bit.
+ *
+ * Example:
+ *
+ * content height: 1000px
+ * viewport height: 200px
+ * row height: 30px
+ * The real max scroll is:
+ *
+ * 1000 - 200 = 800
+ * But clampViewportCoordinate may clamp to:
+ *
+ * 1000 - 200 - 30 = 770
+ * Ask for 800 -> it returns 770.
+ */
 function clampViewportCoordinate(coordinate, dimension, viewportSize, frameOffset = 1) {
     return Math.min(Math.max(0, coordinate), getViewportMaxCoordinate(dimension, viewportSize, frameOffset));
 }
@@ -14946,7 +14969,16 @@ class DimensionProvider {
             clientSize,
             virtualSize: viewportSize,
         });
-        const renderCoordinate = clampViewportCoordinate(coordinate, dimension, viewportSize);
+        // Render offset must use the true logical scroll coordinate
+        // It is the logical scroll position that should be used for compressed-scroll offset math.
+        const renderCoordinate = Math.min(Math.max(0, coordinate), // prevents negative scroll positions
+        scrollDimension.logicalScrollSize); // prevents positions past the logical end
+        /**
+         * If viewport sizing is initialized (clientSize and viewportSize are truthy), calculate the offset needed for compressed scroll.
+         * Otherwise keep renderOffset at 0, because there is not enough measurement data yet.
+         *
+         * In normal scrolling, logical and physical coordinates are the same, so offset is 0.
+         */
         const renderOffset = clientSize && viewportSize
             ? scrollDimension.getRenderOffset(renderCoordinate)
             : 0;
@@ -18408,24 +18440,13 @@ const ResizableElement = (props, children) => {
             }
         })) ||
         null;
-    if (props.active) {
-        if (props.canResize) {
-            for (let p in props.active) {
-                resizeEls.push(hAsync("div", { onClick: e => e.preventDefault(), onDblClick: e => {
-                        var _a;
-                        e.preventDefault();
-                        (_a = props.onDblClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                    }, onMouseDown: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), onTouchStart: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), class: `resizable resizable-${props.active[p]}` }));
-            }
-        }
-        else {
-            for (let _p in props.active) {
-                resizeEls.push(hAsync("div", { onClick: e => e.preventDefault(), onTouchStart: (e) => e.preventDefault(), onDblClick: e => {
-                        var _a;
-                        e.preventDefault();
-                        (_a = props.onDblClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                    }, class: `no-resize` }));
-            }
+    if (props.active && props.canResize) {
+        for (let p in props.active) {
+            resizeEls.push(hAsync("div", { onClick: e => e.preventDefault(), onDblClick: e => {
+                    var _a;
+                    e.preventDefault();
+                    (_a = props.onDblClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                }, onMouseDown: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), onTouchStart: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), class: `resizable resizable-${props.active[p]}` }));
         }
     }
     return (hAsync("div", Object.assign({}, props, { ref: e => e && (directive === null || directive === void 0 ? void 0 : directive.set(e)) }), children, resizeEls));
@@ -20759,20 +20780,23 @@ class RevogrFocus {
 }
 
 const HeaderRenderer = (p) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const hasSortingSign = !!(((_a = p.data) === null || _a === void 0 ? void 0 : _a.sortable) ||
+        ((_b = p.data) === null || _b === void 0 ? void 0 : _b.order) ||
+        ((_c = p.data) === null || _c === void 0 ? void 0 : _c.sortIndex));
     const cellClass = {
         [HEADER_CLASS]: true,
-        [HEADER_SORTABLE_CLASS]: !!((_a = p.data) === null || _a === void 0 ? void 0 : _a.sortable),
+        [HEADER_SORTABLE_CLASS]: !!((_d = p.data) === null || _d === void 0 ? void 0 : _d.sortable),
     };
-    if ((_b = p.data) === null || _b === void 0 ? void 0 : _b.order) {
+    if ((_e = p.data) === null || _e === void 0 ? void 0 : _e.order) {
         cellClass[p.data.order] = true;
     }
     const dataProps = {
-        key: String((_d = (_c = p.data) === null || _c === void 0 ? void 0 : _c.prop) !== null && _d !== void 0 ? _d : p.column.itemIndex),
+        key: String((_g = (_f = p.data) === null || _f === void 0 ? void 0 : _f.prop) !== null && _g !== void 0 ? _g : p.column.itemIndex),
         [DATA_COL]: p.column.itemIndex,
         canResize: p.canResize,
-        minWidth: ((_e = p.data) === null || _e === void 0 ? void 0 : _e.minSize) || MIN_COL_SIZE,
-        maxWidth: (_f = p.data) === null || _f === void 0 ? void 0 : _f.maxSize,
+        minWidth: ((_h = p.data) === null || _h === void 0 ? void 0 : _h.minSize) || MIN_COL_SIZE,
+        maxWidth: (_j = p.data) === null || _j === void 0 ? void 0 : _j.maxSize,
         active: p.active || ['r'],
         class: cellClass,
         style: {
@@ -20808,7 +20832,7 @@ const HeaderRenderer = (p) => {
             }
         }
     }
-    return (hAsync(HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData }, hAsync(SortingSign, { column: p.data }), p.canFilter && ((_g = p.data) === null || _g === void 0 ? void 0 : _g.filter) !== false ? (hAsync(FilterButton, { column: p.data })) : ('')));
+    return (hAsync(HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData }, hasSortingSign ? hAsync(SortingSign, { column: p.data }) : null, p.canFilter && ((_k = p.data) === null || _k === void 0 ? void 0 : _k.filter) !== false ? (hAsync(FilterButton, { column: p.data })) : ('')));
 };
 
 const HeaderGroupRenderer = (p) => {
@@ -21603,6 +21627,7 @@ class GridResizeService {
     }
     destroy() {
         var _a;
+        this.apply.cancel();
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.resizeObserver = null;
     }
@@ -21747,6 +21772,10 @@ class RevogrViewportScroll {
                 scroll: this.horizontalScroll.scrollLeft,
                 noScroll: this.colType !== 'rgCol',
             };
+            this.setScrollParams({
+                rgRow: calculatedHeight,
+                rgCol: calculatedWidth,
+            });
             // Process changes in order: width first, then height
             const dimensions = ['rgCol', 'rgRow'];
             for (const dimension of dimensions) {
@@ -21803,24 +21832,30 @@ class RevogrViewportScroll {
     }
     async componentDidRender() {
         var _a, _b, _c, _d;
+        this.setScrollParams({
+            rgRow: (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0,
+            rgCol: this.horizontalScroll.clientWidth,
+        });
+        this.setScrollVisibility('rgRow', (_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0, this.contentHeight);
+        this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
+    }
+    setScrollParams(clientSize) {
         this.localScrollService.setParams({
             contentSize: this.contentHeight,
-            clientSize: (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0,
+            clientSize: clientSize.rgRow,
             virtualSize: 0,
         }, 'rgRow');
         this.localScrollService.setParams({
             contentSize: this.contentWidth,
-            clientSize: this.horizontalScroll.clientWidth,
+            clientSize: clientSize.rgCol,
             virtualSize: 0,
         }, 'rgCol');
-        this.setScrollVisibility('rgRow', (_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0, this.contentHeight);
-        this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
     }
     render() {
         var _a, _b;
         const physicalContentHeight = getContentSize(this.contentHeight, (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0);
         const physicalContentWidth = getContentSize(this.contentWidth, 0);
-        return (hAsync(Host, { key: 'e52df53dcdcac76f02160615399c558e78fe5825', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: '6821c4472db2208c2d52da9d6d43a7e5343d15bb', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, hAsync("div", { key: '1916ec94af312621ed4d937c905ed745a23a7d3b', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '2348a566b127f27d969a4e2ff67fab4022501ceb', name: HEADER_SLOT })), hAsync("div", { key: 'd88eebb7b0028b350f5b0feb6b3893efbd3f645c', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: '1778856706d9d6bbc52882a150cb66c9b3f11e06', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, hAsync("slot", { key: '200bc8a9e692b6183ac2665b68961d28892f7cab', name: CONTENT_SLOT }))), hAsync("div", { key: 'dc812739b4ad829867dd1effe94a871be247979a', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: '06e3b3a4f88c477dc33268ee317856820f2650e6', name: FOOTER_SLOT })))));
+        return (hAsync(Host, { key: 'ec8d907976c1d50f7aab3c263be3f0249a274df6', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: 'e35696a7993ac94261426b45c28d488cdc42b7f0', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, hAsync("div", { key: 'a6997451e01eacda1d27d4efa1d74e1748626218', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '1d401e87d32d5b1531c2211723b552bbc894f22c', name: HEADER_SLOT })), hAsync("div", { key: 'ceab6f9e812d6ca9a0aa376afcd2562a17f505e0', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'a9556578a23d6efddec2e982e863aec064042154', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, hAsync("slot", { key: '0ae01f9736b9740612e75261f6e3abebda533377', name: CONTENT_SLOT }))), hAsync("div", { key: '09c2565d4ed449a43820f92d97b6558fca3758e7', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: '1ffb08ff8138a560cc09d82e3fe22a53e502aafe', name: FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing

package/hydrate/index.mjs

@@ -12049,6 +12049,29 @@ function getViewportMaxCoordinate(dimension, viewportSize, frameOffset = 1) {
     }
     return Math.max(0, dimension.realSize - viewportSize - dimension.originItemSize * frameOffset);
 }
+/**
+ * Clamp the viewport coordinate within the valid range.
+ * Given a scroll position, pick a safe starting point for rendering visible items.
+ *
+ * Do not use it when you need the exact scroll position for positioning math.
+ *
+ * It does two things:
+ * 1. If the coordinate is below 0, use 0.
+ * 2. If the coordinate is too close to the very end, pull it back a bit.
+ *
+ * Example:
+ *
+ * content height: 1000px
+ * viewport height: 200px
+ * row height: 30px
+ * The real max scroll is:
+ *
+ * 1000 - 200 = 800
+ * But clampViewportCoordinate may clamp to:
+ *
+ * 1000 - 200 - 30 = 770
+ * Ask for 800 -> it returns 770.
+ */
 function clampViewportCoordinate(coordinate, dimension, viewportSize, frameOffset = 1) {
     return Math.min(Math.max(0, coordinate), getViewportMaxCoordinate(dimension, viewportSize, frameOffset));
 }
@@ -14944,7 +14967,16 @@ class DimensionProvider {
             clientSize,
             virtualSize: viewportSize,
         });
-        const renderCoordinate = clampViewportCoordinate(coordinate, dimension, viewportSize);
+        // Render offset must use the true logical scroll coordinate
+        // It is the logical scroll position that should be used for compressed-scroll offset math.
+        const renderCoordinate = Math.min(Math.max(0, coordinate), // prevents negative scroll positions
+        scrollDimension.logicalScrollSize); // prevents positions past the logical end
+        /**
+         * If viewport sizing is initialized (clientSize and viewportSize are truthy), calculate the offset needed for compressed scroll.
+         * Otherwise keep renderOffset at 0, because there is not enough measurement data yet.
+         *
+         * In normal scrolling, logical and physical coordinates are the same, so offset is 0.
+         */
         const renderOffset = clientSize && viewportSize
             ? scrollDimension.getRenderOffset(renderCoordinate)
             : 0;
@@ -18406,24 +18438,13 @@ const ResizableElement = (props, children) => {
             }
         })) ||
         null;
-    if (props.active) {
-        if (props.canResize) {
-            for (let p in props.active) {
-                resizeEls.push(hAsync("div", { onClick: e => e.preventDefault(), onDblClick: e => {
-                        var _a;
-                        e.preventDefault();
-                        (_a = props.onDblClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                    }, onMouseDown: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), onTouchStart: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), class: `resizable resizable-${props.active[p]}` }));
-            }
-        }
-        else {
-            for (let _p in props.active) {
-                resizeEls.push(hAsync("div", { onClick: e => e.preventDefault(), onTouchStart: (e) => e.preventDefault(), onDblClick: e => {
-                        var _a;
-                        e.preventDefault();
-                        (_a = props.onDblClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                    }, class: `no-resize` }));
-            }
+    if (props.active && props.canResize) {
+        for (let p in props.active) {
+            resizeEls.push(hAsync("div", { onClick: e => e.preventDefault(), onDblClick: e => {
+                    var _a;
+                    e.preventDefault();
+                    (_a = props.onDblClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                }, onMouseDown: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), onTouchStart: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), class: `resizable resizable-${props.active[p]}` }));
         }
     }
     return (hAsync("div", Object.assign({}, props, { ref: e => e && (directive === null || directive === void 0 ? void 0 : directive.set(e)) }), children, resizeEls));
@@ -20757,20 +20778,23 @@ class RevogrFocus {
 }
 
 const HeaderRenderer = (p) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const hasSortingSign = !!(((_a = p.data) === null || _a === void 0 ? void 0 : _a.sortable) ||
+        ((_b = p.data) === null || _b === void 0 ? void 0 : _b.order) ||
+        ((_c = p.data) === null || _c === void 0 ? void 0 : _c.sortIndex));
     const cellClass = {
         [HEADER_CLASS]: true,
-        [HEADER_SORTABLE_CLASS]: !!((_a = p.data) === null || _a === void 0 ? void 0 : _a.sortable),
+        [HEADER_SORTABLE_CLASS]: !!((_d = p.data) === null || _d === void 0 ? void 0 : _d.sortable),
     };
-    if ((_b = p.data) === null || _b === void 0 ? void 0 : _b.order) {
+    if ((_e = p.data) === null || _e === void 0 ? void 0 : _e.order) {
         cellClass[p.data.order] = true;
     }
     const dataProps = {
-        key: String((_d = (_c = p.data) === null || _c === void 0 ? void 0 : _c.prop) !== null && _d !== void 0 ? _d : p.column.itemIndex),
+        key: String((_g = (_f = p.data) === null || _f === void 0 ? void 0 : _f.prop) !== null && _g !== void 0 ? _g : p.column.itemIndex),
         [DATA_COL]: p.column.itemIndex,
         canResize: p.canResize,
-        minWidth: ((_e = p.data) === null || _e === void 0 ? void 0 : _e.minSize) || MIN_COL_SIZE,
-        maxWidth: (_f = p.data) === null || _f === void 0 ? void 0 : _f.maxSize,
+        minWidth: ((_h = p.data) === null || _h === void 0 ? void 0 : _h.minSize) || MIN_COL_SIZE,
+        maxWidth: (_j = p.data) === null || _j === void 0 ? void 0 : _j.maxSize,
         active: p.active || ['r'],
         class: cellClass,
         style: {
@@ -20806,7 +20830,7 @@ const HeaderRenderer = (p) => {
             }
         }
     }
-    return (hAsync(HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData }, hAsync(SortingSign, { column: p.data }), p.canFilter && ((_g = p.data) === null || _g === void 0 ? void 0 : _g.filter) !== false ? (hAsync(FilterButton, { column: p.data })) : ('')));
+    return (hAsync(HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData }, hasSortingSign ? hAsync(SortingSign, { column: p.data }) : null, p.canFilter && ((_k = p.data) === null || _k === void 0 ? void 0 : _k.filter) !== false ? (hAsync(FilterButton, { column: p.data })) : ('')));
 };
 
 const HeaderGroupRenderer = (p) => {
@@ -21601,6 +21625,7 @@ class GridResizeService {
     }
     destroy() {
         var _a;
+        this.apply.cancel();
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.resizeObserver = null;
     }
@@ -21745,6 +21770,10 @@ class RevogrViewportScroll {
                 scroll: this.horizontalScroll.scrollLeft,
                 noScroll: this.colType !== 'rgCol',
             };
+            this.setScrollParams({
+                rgRow: calculatedHeight,
+                rgCol: calculatedWidth,
+            });
             // Process changes in order: width first, then height
             const dimensions = ['rgCol', 'rgRow'];
             for (const dimension of dimensions) {
@@ -21801,24 +21830,30 @@ class RevogrViewportScroll {
     }
     async componentDidRender() {
         var _a, _b, _c, _d;
+        this.setScrollParams({
+            rgRow: (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0,
+            rgCol: this.horizontalScroll.clientWidth,
+        });
+        this.setScrollVisibility('rgRow', (_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0, this.contentHeight);
+        this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
+    }
+    setScrollParams(clientSize) {
         this.localScrollService.setParams({
             contentSize: this.contentHeight,
-            clientSize: (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0,
+            clientSize: clientSize.rgRow,
             virtualSize: 0,
         }, 'rgRow');
         this.localScrollService.setParams({
             contentSize: this.contentWidth,
-            clientSize: this.horizontalScroll.clientWidth,
+            clientSize: clientSize.rgCol,
             virtualSize: 0,
         }, 'rgCol');
-        this.setScrollVisibility('rgRow', (_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0, this.contentHeight);
-        this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
     }
     render() {
         var _a, _b;
         const physicalContentHeight = getContentSize(this.contentHeight, (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0);
         const physicalContentWidth = getContentSize(this.contentWidth, 0);
-        return (hAsync(Host, { key: 'e52df53dcdcac76f02160615399c558e78fe5825', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: '6821c4472db2208c2d52da9d6d43a7e5343d15bb', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, hAsync("div", { key: '1916ec94af312621ed4d937c905ed745a23a7d3b', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '2348a566b127f27d969a4e2ff67fab4022501ceb', name: HEADER_SLOT })), hAsync("div", { key: 'd88eebb7b0028b350f5b0feb6b3893efbd3f645c', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: '1778856706d9d6bbc52882a150cb66c9b3f11e06', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, hAsync("slot", { key: '200bc8a9e692b6183ac2665b68961d28892f7cab', name: CONTENT_SLOT }))), hAsync("div", { key: 'dc812739b4ad829867dd1effe94a871be247979a', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: '06e3b3a4f88c477dc33268ee317856820f2650e6', name: FOOTER_SLOT })))));
+        return (hAsync(Host, { key: 'ec8d907976c1d50f7aab3c263be3f0249a274df6', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: 'e35696a7993ac94261426b45c28d488cdc42b7f0', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, hAsync("div", { key: 'a6997451e01eacda1d27d4efa1d74e1748626218', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '1d401e87d32d5b1531c2211723b552bbc894f22c', name: HEADER_SLOT })), hAsync("div", { key: 'ceab6f9e812d6ca9a0aa376afcd2562a17f505e0', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'a9556578a23d6efddec2e982e863aec064042154', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, hAsync("slot", { key: '0ae01f9736b9740612e75261f6e3abebda533377', name: CONTENT_SLOT }))), hAsync("div", { key: '09c2565d4ed449a43820f92d97b6558fca3758e7', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: '1ffb08ff8138a560cc09d82e3fe22a53e502aafe', name: FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolist/revogrid",
-  "version": "4.23.3",
+  "version": "4.23.5",
   "type": "module",
   "description": "Virtual reactive data grid spreadsheet component - RevoGrid.",
   "license": "MIT",

package/readme.md

@@ -22,7 +22,7 @@
 
 <h3 align="center">Powerful data grid component built with <a href="https://stenciljs.com" target="_blank">StencilJS</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.
@@ -31,6 +31,7 @@ Used by some of the largest companies in Europe and the United States.
 <p align="center">
   <a href="https://rv-grid.com/demo/">Demo and API</a> •
   <a href="#key-features">Key Features</a> •
+  <a href="#revogrid-pro-features">Pro Features</a> •
   <a href="#basic-usage">How To Use</a> •
   <a href="#installation">Installation</a> •
   <a href="https://rv-grid.com/guide/">Docs</a> •
@@ -44,7 +45,7 @@ Used by some of the largest companies in Europe and the United States.
 
 ## 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.
 
@@ -59,7 +60,7 @@ Used by some of the largest companies in Europe and the United States.
 
 - **[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).
 
@@ -112,28 +113,138 @@ Used by some of the largest companies in Europe and the United States.
 
 - **[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.
-
-- **[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.
-
   - [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/).
 
+
+## RevoGrid Pro Features
+
+RevoGrid Pro extends the core grid with production plugins for advanced data entry, analytics, layout, validation, remote data workflows, and enterprise planning.
+
+- **Advanced Data Structures**:
+  - **Hierarchical Data View**: Display tree data with expandable rows, nested relationships, sorting, filtering, editing, and drag-and-drop friendly hierarchy handling.
+  - **Row Transpose**: Flip records into a row-oriented view when users need to inspect one entity as a vertical form-like grid.
+
+- **Headers, Columns, and Grid Structure**:
+  - **Multi-Level Headers / Column Groups**: Build stacked, nested headers so related columns can sit under shared parent groups.
+  - **Multi-Row Headers**: Render more than one header row for dense tables, grouped labels, or spreadsheet-like header layouts.
+  - **Column Group Panel**: Let users drag columns into a grouping panel to create row groups interactively.
+  - **Column Group Render Sync**: Keep grouped header rendering aligned during column moves, resizing, and virtualization updates.
+  - **Column Move with Groups**: Move columns while preserving grouped header relationships and valid group boundaries.
+  - **Column Collapse & Expand (Drill Down)**: Collapse grouped columns to focus on summary information, then expand when details are needed.
+  - **Column Hide**: Hide and reveal columns to create focused views without mutating the underlying dataset.
+  - **Column Add Popup**: Provide a UI flow for adding columns from available field definitions.
+  - **Column Selection**: Select entire columns from the header for bulk operations, copying, formatting, or analysis.
+  - **Column Stretch**: Distribute column widths to fill available grid space while respecting sizing constraints.
+  - **Column Autosize**: Measure content and automatically adjust column widths for readability.
+  - **Merge Cells**: Merge cells across rows and columns for grouped labels, reports, or spreadsheet-style layouts.
+  - **Auto Merge / Same-Value Merge**: Automatically merge neighboring cells with matching values to reduce visual repetition.
+  - **Sticky Cells and Rows**: Keep important rows, cells, totals, labels, or action areas visible while scrolling.
+  - **Overlay Layers**: Push temporary UI layers above the grid for richer interactions without replacing the main grid.
+
+- **Remote Data and Large Dataset Workflows**:
+  - **Server Loading with Infinite Scroll**: Load remote data as users scroll, keeping memory and DOM usage controlled for large datasets.
+  - **Infinite Scroll**: Support total-based or dynamic scrolling patterns where rows are fetched and released in chunks.
+  - **Pagination**: Split large datasets into page-sized views with built-in navigation controls.
+  - **Remote Pagination**: Keep page index, page size, total counts, and server-loaded rows synchronized with the grid.
+  - **Server-Side Grouping**: Request grouped row blocks from a remote source, expand group paths on demand, and combine grouping with remote filtering, sorting, and export.
+
+- **Data Management and Change Tracking**:
+  - **Audit Trail History**: Record data-change history for traceability, review, and compliance-oriented workflows.
+  - **History**: Track user edits and provide undo/redo controls for grid changes.
+  - **History Controls**: Add ready-made UI controls for navigating undo and redo stacks.
+  - **Range Apply Preview**: Preview copy, paste, or fill changes before applying them to target cells.
+  - **Smart Auto Fill**: Fill ranges from an initial value, series, or pattern to speed repetitive data entry.
+  - **Excel Export/Import**: Export and import Excel workbook formats including `xlsx`, `xlsm`, `xlsb`, and `xls`.
+  - **Multi-Column Export Headers**: Preserve grouped and multi-level column headers when exporting structured grids.
+  - **Clipboard with JSON**: Copy and paste structured JSON/object values while keeping control over parsing and rendering.
+
+- **Selection and Range Operations**:
+  - **Multi-Range Selection**: Work with multiple selected ranges for spreadsheet-style copy, edit, and interaction flows.
+  - **Range Selection Limit**: Restrict selected ranges with configurable limits to protect performance and workflow rules.
+  - **Row Checkbox Selection**: Select rows through checkbox controls with bulk selection and keyboard-friendly behavior.
+  - **Row Advanced Drag and Drop**: Reorder rows with custom drag handles, multi-row behavior, and controlled drop handling.
+  - **Row Expand**: Add expandable row affordances for detail views, children, or custom row content.
+  - **Row Custom Heading**: Customize row header content for labels, actions, or contextual row information.
+
+- **Filtering, Search, and Grouping**:
+  - **Advanced Selection Filtering**: Filter with multi-condition selection controls for categorical data.
+  - **Selection Filter Cascade**: Cascade filters so each choice narrows available values in dependent filters.
+  - **Advanced Slider Filtering**: Filter numeric values with range sliders.
+  - **Header Input Filtering**: Put filter inputs in the header area for fast per-column search.
+  - **Date Filter**: Filter temporal data by date-specific conditions and ranges.
+  - **Row Grouping Drag and Drop**: Drag fields into a panel to group rows dynamically.
+  - **Grouping Aggregation**: Calculate grouped summaries such as sum, average, count, min, and max.
+  - **Server-Side Group Aggregation**: Combine remote grouped data with aggregate values returned by the server.
+
+- **Calculations and Formulas**:
+  - **Formula Engine**: Add Excel-like formulas with cell references, dynamic calculations, and a broad function set.
+  - **Formula Bar**: Give users a dedicated place to inspect and edit formulas.
+  - **Formula Name Manager**: Define reusable named references for formulas.
+  - **Formula Dependency Highlighting**: Highlight related cells so users can understand formula inputs and outputs.
+  - **Summary Header**: Render calculated summary values in header-level UI.
+
+- **Data Visualization and Cell Rendering**:
+  - **Charts in Cells**: Render compact visuals such as progress lines, progress lines with values, sparklines, bar charts, timelines, rating stars, badges, change indicators, thumbs, and pie charts.
+  - **Heat and Cold Maps**: Color-code values with gradients and legends so users can compare magnitude quickly.
+  - **Conditional Formatting**: Apply styling rules based on cell values, row data, or custom logic.
+  - **Multi-Cell Formatting**: Choose different renderers or editors inside the same column based on row-level conditions.
+  - **Cell Flash**: Highlight recently changed values so live updates are easy to spot.
+  - **Avatar, Badge, Progress, Rate, Link, and Chart Column Types**: Use ready-made renderers for common visual data patterns.
+  - **Array Renderer**: Display array-like values inside cells with a purpose-built renderer.
+  - **Buttons**: Add action buttons inside grid cells for row-level commands.
+
+- **Editing and Data Entry**:
+  - **Dynamic Form Editing**: Edit row data through a generated form with custom options and richer inputs.
+  - **Full Row Editing**: Edit multiple columns in a row as one coordinated editing flow.
+  - **Cell Checkbox Editors**: Use checkbox cells that act as both renderer and editor.
+  - **Cell Slider Editor**: Edit bounded numeric values with an inline slider.
+  - **Cell Counter Editor**: Adjust numeric values with plus/minus controls and configurable steps.
+  - **Textarea Editor**: Edit longer text values without leaving the grid.
+  - **Dropdown Editor**: Edit values through a dropdown or custom popup.
+  - **Timeline Editor**: Edit date ranges and timeline-like values with visual controls.
+  - **Cell Validation**: Highlight invalid cells and block or guide invalid edits with custom rules.
+  - **Input Validation**: Validate editor input before it is committed to the grid.
+
+- **User Interaction and UX**:
+  - **Context Menus**: Build menus for cells, rows, columns, and headers with actions such as cut, copy, paste, insert, delete, and custom commands.
+  - **Tooltips**: Show contextual information on hover for cells or custom grid elements.
+  - **Next Line Focus (WCAG)**: Move focus automatically to the next row during data entry workflows.
+  - **WCAG Helpers**: Improve keyboard and screen-reader-oriented grid workflows.
+  - **Cell Focus Helpers**: Extend focus behavior for custom editing and navigation scenarios.
+  - **Info Panel**: Show contextual status or helper information around grid interactions.
+  - **Loader**: Display loading state while remote data, exports, or long-running operations are in progress.
+
+- **Development and Integration**:
+  - **Event Manager**: Coordinate grid events through one managed layer for easier customization and cleanup.
+  - **Observable Props**: React to property changes and synchronize plugin state with grid configuration.
+  - **Plugin Dependencies**: Declare and resolve plugin relationships when features need to work together.
+  - **Dimension Animation**: Animate row and column dimension changes for smoother layout transitions.
+  - **Dropdown Infrastructure**: Reuse popup/dropdown services for custom editors and plugin UI.
+  - **Grid Presets and Utilities**: Compose reusable grid configurations, helper functions, and shared plugin behavior.
+
+- **Enterprise Analytics and Planning**:
+  - **Pivot Table**: Build multidimensional analytics with dynamic row, column, and value dimensions; built-in and custom aggregations; hierarchical rows; generated column groups; flat headers; grand totals and subtotals; values-on-rows layouts; row and column drill-down; grouped aggregate values; drag-and-drop configuration; compact field panel; server-side engine/store contracts; remote sorting and filtering; drilldown contracts; field registry validation; cache keys; serializable errors; and state save/load.
+  - **Pivot Configurator**: Give users a drag-and-drop UI for choosing Pivot rows, columns, values, filters, and field layout.
+  - **Gantt & Scheduling**: Plan projects with task, dependency, calendar, resource, assignment, and baseline models; summary tasks and milestones; WBS hierarchy; automatic scheduling; working calendars and holidays; constrained scheduling; dependency validation; FS, SS, FF, and SF dependencies with lead/lag; critical path and slack; baselines; resource filtering; task move, resize, create, and progress controls; indent/outdent; timeline zoom; highlighted ranges; non-working time shading; labels; and custom markers.
+  - **Gantt Toolbar**: Provide ready-made timeline navigation, baseline, critical path, and export actions for Gantt views.
+  - **Gantt Task Editor Dialog**: Edit task fields, dependencies, resources, and scheduling details in a structured dialog.
+
+- **Advanced Support**:
+  - **AI Agent Support**: Use Pro AI tooling to generate plugins, renderers, templates, and grid configurations.
+  - **RevoGrid MCP - AI-Native Grid Intelligence**: Connect AI coding tools to version-aware docs, examples, migrations, feature resolution, and typed API context.
+  - **Support via GitHub**: Get engineering support through GitHub-based workflows.
+  - **Support via Email**: Get direct support for Pro and enterprise implementation questions.
+
+
 <h2 align="center">Framework Friendly</h2>
 
 <p align="center">