@revolist/revogrid 4.22.1 → 4.23.1

package/dist/cjs/revo-grid.cjs.entry.js

@@ -4,16 +4,17 @@
 'use strict';
 
 var index = require('./index-Dq8Xzj5l.js');
-var column_service = require('./column.service-DXYMehqK.js');
-var dimension_helpers = require('./dimension.helpers-CiiNnlLa.js');
+var column_service = require('./column.service-C1Qvcf5l.js');
+var dimension_helpers = require('./dimension.helpers-B9HgANnM.js');
 var debounce = require('./debounce-CcpHiH2p.js');
-var column_drag_plugin = require('./column.drag.plugin-RDjQhKCH.js');
-var viewport_store = require('./viewport.store-q6YdR9mg.js');
+var viewport_helpers = require('./viewport.helpers-BND76K2j.js');
+var viewport_store = require('./viewport.store-BlKQ4x9H.js');
+var column_drag_plugin = require('./column.drag.plugin-DJueWxN_.js');
 var theme_service = require('./theme.service-BgnxGIjK.js');
-var viewport_helpers = require('./viewport.helpers-BAovztDd.js');
+var index$1 = require('./index-DxaSE5uZ.js');
 var events = require('./events-DeLDyZlb.js');
 require('./filter.button-w6LWnyhi.js');
-require('./header-cell-renderer-DGyBrK8I.js');
+require('./header-cell-renderer-QrcXXSkF.js');
 
 class ColumnDataProvider {
     get stores() {
@@ -365,6 +366,20 @@ class DimensionProvider {
     }
     setViewPortCoordinate({ type, coordinate = this.viewports.stores[type].lastCoordinate, force = false, }) {
         const dimension = this.stores[type].getCurrentState();
+        const viewport = this.viewports.stores[type].store;
+        const clientSize = viewport.get('clientSize');
+        const viewportSize = viewport.get('virtualSize');
+        const scrollDimension = viewport_helpers.getScrollDimension({
+            contentSize: dimension.realSize,
+            clientSize,
+            virtualSize: viewportSize,
+        });
+        const renderCoordinate = viewport_store.clampViewportCoordinate(coordinate, dimension, viewportSize);
+        const renderOffset = clientSize && viewportSize
+            ? scrollDimension.getRenderOffset(renderCoordinate)
+            : 0;
+        this.stores[type].setStore({ renderOffset });
+        this.viewports.stores[type].setViewport({ renderOffset });
         this.viewports.stores[type].setViewPortCoordinate(coordinate, dimension, force);
     }
     getViewPortPos(e) {
@@ -513,7 +528,8 @@ class ViewportService {
         (_a = this.config.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setCustomSizes(type, detail, true);
         // set resize event
         const changedItems = {};
-        for (const [i, size] of Object.entries(detail || {})) {
+        for (const i of Object.keys(detail || {})) {
+            const size = detail[i];
             const virtualIndex = parseInt(i, 10);
             const item = dimension_helpers.getSourceItem(store, virtualIndex);
             if (item) {
@@ -768,13 +784,11 @@ class SelectionStoreConnector {
         return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get('range');
     }
     registerColumn(x, type) {
+        this.updateColumnTypeMapping(x, type);
         if (this.columnStores[x]) {
             return this.columnStores[x];
         }
         this.columnStores[x] = new column_drag_plugin.SelectionStore();
-        // build cross-linking type to position
-        this.storesByType[type] = x;
-        this.storesXToType[x] = type;
         return this.columnStores[x];
     }
     registerRow(y, type) {
@@ -916,7 +930,10 @@ class SelectionStoreConnector {
         const nextItem = column_service.nextCell(focus, lastCell);
         let nextStore;
         if (nextItem) {
-            Object.entries(nextItem).forEach(([type, nextItemCoord]) => {
+            Object.keys(nextItem).forEach((t) => {
+                var _a;
+                const type = t;
+                const nextItemCoord = (_a = nextItem[type]) !== null && _a !== void 0 ? _a : 0;
                 let stores;
                 switch (type) {
                     case 'x':
@@ -992,6 +1009,31 @@ class SelectionStoreConnector {
         }
         return stores;
     }
+    /**
+     * Keep column viewport positions and types in sync across pin/unpin rerenders.
+     * Regression case: when a selected rgCol cell was pinned left, colPinStart
+     * could take over x=0 and render the stale rgCol focus store in the pinned area.
+     */
+    updateColumnTypeMapping(x, type) {
+        const previousType = this.storesXToType[x];
+        const previousX = this.storesByType[type];
+        let shouldClearFocus = false;
+        this.storesByType[type] = x;
+        this.storesXToType[x] = type;
+        if (previousType && previousType !== type) {
+            shouldClearFocus = true;
+            if (this.storesByType[previousType] === x) {
+                delete this.storesByType[previousType];
+            }
+        }
+        if (typeof previousX === 'number' && previousX !== x && this.storesXToType[previousX] === type) {
+            delete this.storesXToType[previousX];
+            shouldClearFocus = true;
+        }
+        if (shouldClearFocus) {
+            this.clearAll();
+        }
+    }
 }
 
 /**
@@ -1663,7 +1705,7 @@ const RevoGridComponent = class {
         if (!rgCol) {
             return;
         }
-        await dimension_helpers.timeout();
+        await index$1.timeout();
         const colGroup = rgCol.pin || 'rgCol';
         if (!this.columnProvider) {
             throw new Error('Not connected');
@@ -1875,7 +1917,7 @@ const RevoGridComponent = class {
     async onCellEdit(e) {
         var _a;
         const { defaultPrevented, detail } = this.beforeedit.emit(e.detail);
-        await dimension_helpers.timeout();
+        await index$1.timeout();
         // apply data
         if (!defaultPrevented) {
             (_a = this.dataProvider) === null || _a === void 0 ? void 0 : _a.setCellData(detail);
@@ -1941,6 +1983,7 @@ const RevoGridComponent = class {
         if (!this.dimensionProvider || !this.columnProvider) {
             return;
         }
+        const focusToRestore = init ? undefined : this.getColumnFocusRestore();
         const beforeGatherEvent = this.beforecolumnsgather.emit({
             columns: [...newVal],
         });
@@ -1958,14 +2001,76 @@ const RevoGridComponent = class {
             return;
         }
         const columns = this.columnProvider.setColumns(beforeApplyEvent.detail);
+        if (focusToRestore) {
+            this.pendingColumnFocusRestore = focusToRestore;
+        }
+        const order = {};
+        for (const prop of Object.keys(beforeApplyEvent.detail.sort)) {
+            order[prop] = beforeApplyEvent.detail.sort[prop].order;
+        }
         this.aftercolumnsset.emit({
             columns,
-            order: Object.entries(beforeApplyEvent.detail.sort).reduce((acc, [prop, column]) => {
-                acc[prop] = column.order;
-                return acc;
-            }, {}),
+            order,
         });
     }
+    /**
+     * Capture logical focus before columns are repartitioned by pin state.
+     * Regression case: selecting a regular cell, then pinning that column left,
+     * used to let the new pinned viewport reuse the old rgCol selection store.
+     */
+    getColumnFocusRestore() {
+        var _a, _b, _c, _d;
+        const focused = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getFocused();
+        const prevStoreX = (_c = (_b = this.selectionStoreConnector) === null || _b === void 0 ? void 0 : _b.focusedStore) === null || _c === void 0 ? void 0 : _c.position.x;
+        const prop = (_d = focused === null || focused === void 0 ? void 0 : focused.column) === null || _d === void 0 ? void 0 : _d.prop;
+        if (!focused || prop === undefined || prevStoreX === undefined) {
+            return;
+        }
+        return {
+            prop,
+            colType: focused.colType,
+            colIndex: focused.cell.x,
+            prevStoreX,
+            rowType: focused.rowType,
+            rowIndex: focused.cell.y,
+        };
+    }
+    /**
+     * Reapply focus by column prop after render, once pinning has moved the
+     * column to its new viewport and virtual index.
+     */
+    restoreColumnFocusAfterRender() {
+        var _a, _b, _c, _d;
+        const pending = this.pendingColumnFocusRestore;
+        if (!pending) {
+            return;
+        }
+        this.pendingColumnFocusRestore = undefined;
+        if (!this.viewport || !this.columnProvider) {
+            return;
+        }
+        const column = (_b = (_a = this.columnProvider.getColumnByProp(pending.prop)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : column_service.getColumnByProp(this.columns, pending.prop);
+        if (!column) {
+            return;
+        }
+        const colType = column.pin || 'rgCol';
+        const columnIndex = this.columnProvider.getColumnIndexByProp(pending.prop, colType);
+        if (columnIndex < 0) {
+            return;
+        }
+        // Header-only column refreshes should not collapse an existing range.
+        // Replay focus only when pin/unpin or repartitioning moved the logical column.
+        if (colType === pending.colType &&
+            columnIndex === pending.colIndex &&
+            pending.prevStoreX === ((_d = (_c = this.selectionStoreConnector) === null || _c === void 0 ? void 0 : _c.focusedStore) === null || _d === void 0 ? void 0 : _d.position.x)) {
+            return;
+        }
+        const cell = {
+            x: columnIndex,
+            y: pending.rowIndex,
+        };
+        this.viewport.setFocus(colType, pending.rowType, cell, cell);
+    }
     disableVirtualXChanged(newVal = false, prevVal = false) {
         if (newVal === prevVal) {
             return;
@@ -2252,7 +2357,7 @@ const RevoGridComponent = class {
         if (Object.keys((_a = this.trimmedRows) !== null && _a !== void 0 ? _a : {}).length > 0) {
             this.trimmedRowsChanged(this.trimmedRows);
         }
-        this.rowDefChanged(this.rowDefinitions);
+        this.rowDefChanged(this.rowDefinitions, undefined, undefined, false);
         // init grouping
         if (this.grouping && Object.keys(this.grouping).length > 0) {
             this.groupingChanged(this.grouping);
@@ -2278,6 +2383,7 @@ const RevoGridComponent = class {
         return Promise.all(this.jobsBeforeRender);
     }
     componentDidRender() {
+        this.restoreColumnFocusAfterRender();
         this.aftergridrender.emit();
     }
     render() {

package/dist/cjs/revogr-attribution_7.cjs.entry.js

@@ -4,14 +4,15 @@
 'use strict';
 
 var index = require('./index-Dq8Xzj5l.js');
-var dimension_helpers = require('./dimension.helpers-CiiNnlLa.js');
+var dimension_helpers = require('./dimension.helpers-B9HgANnM.js');
 var events = require('./events-DeLDyZlb.js');
-var column_service = require('./column.service-DXYMehqK.js');
-var edit_utils = require('./edit.utils-CecCfA4E.js');
+var column_service = require('./column.service-C1Qvcf5l.js');
+var edit_utils = require('./edit.utils-pKeiYFLJ.js');
+var index$1 = require('./index-DxaSE5uZ.js');
 var debounce = require('./debounce-CcpHiH2p.js');
-var viewport_store = require('./viewport.store-q6YdR9mg.js');
-var viewport_helpers = require('./viewport.helpers-BAovztDd.js');
-var throttle = require('./throttle-CfgQFkfR.js');
+var viewport_store = require('./viewport.store-BlKQ4x9H.js');
+var viewport_helpers = require('./viewport.helpers-BND76K2j.js');
+var throttle = require('./throttle-BCwEuJJq.js');
 
 const Attribution = class {
     constructor(hostRef) {
@@ -109,8 +110,8 @@ function getCurrentCell({ x, y }, { el, rows, cols }) {
         cellX = width - 1;
     }
     // Get the row and column items based on the cell position
-    const rgRow = dimension_helpers.getItemByPosition(rows, cellY);
-    const rgCol = dimension_helpers.getItemByPosition(cols, cellX);
+    const rgRow = dimension_helpers.getItemByPosition(rows, cellY + (rows.renderOffset || 0));
+    const rgCol = dimension_helpers.getItemByPosition(cols, cellX + (cols.renderOffset || 0));
     // Set the row and column index to 0 if they are before the first item
     if (rgCol.itemIndex < 0) {
         rgCol.itemIndex = 0;
@@ -180,10 +181,12 @@ function styleByCellProps(styles) {
     };
 }
 function getCell({ x, y, x1, y1 }, dimensionRow, dimensionCol) {
-    const top = dimension_helpers.getItemByIndex(dimensionRow, y).start;
-    const left = dimension_helpers.getItemByIndex(dimensionCol, x).start;
-    const bottom = dimension_helpers.getItemByIndex(dimensionRow, y1).end;
-    const right = dimension_helpers.getItemByIndex(dimensionCol, x1).end;
+    const rowOffset = dimensionRow.renderOffset || 0;
+    const colOffset = dimensionCol.renderOffset || 0;
+    const top = dimension_helpers.getItemByIndex(dimensionRow, y).start - rowOffset;
+    const left = dimension_helpers.getItemByIndex(dimensionCol, x).start - colOffset;
+    const bottom = dimension_helpers.getItemByIndex(dimensionRow, y1).end - rowOffset;
+    const right = dimension_helpers.getItemByIndex(dimensionCol, x1).end - colOffset;
     return {
         left,
         right,
@@ -281,9 +284,29 @@ class KeyboardService {
     constructor(sv) {
         this.sv = sv;
     }
+    /**
+     * Appends printable key input that arrives after edit mode was requested
+     * but before the editor input has mounted or received focus.
+     */
+    appendPendingEditValue(e) {
+        if (edit_utils.isShortcutModifier(e) ||
+            e.key.length !== 1 ||
+            (e.target instanceof HTMLElement && edit_utils.isEditInput(e.target))) {
+            return false;
+        }
+        const editCell = this.sv.selectionStore.get('edit');
+        if (typeof (editCell === null || editCell === void 0 ? void 0 : editCell.val) !== 'string') {
+            return false;
+        }
+        this.sv.selectionStore.set('edit', Object.assign(Object.assign({}, editCell), { val: `${editCell.val}${e.key}` }));
+        return true;
+    }
     async keyDown(e, canRange, isEditMode, { range, focus }) {
         // IF EDIT MODE
         if (isEditMode) {
+            if (this.appendPendingEditValue(e)) {
+                return;
+            }
             switch (e.code) {
                 case dimension_helpers.codesLetter.ESCAPE:
                     this.sv.cancel();
@@ -362,7 +385,7 @@ class KeyboardService {
         // this interval needed for several cases
         // grid could be resized before next click
         // at this case to avoid screen jump we use this interval
-        await dimension_helpers.timeout(dimension_helpers.RESIZE_INTERVAL + 30);
+        await index$1.timeout(dimension_helpers.RESIZE_INTERVAL + 30);
         const range = this.sv.selectionStore.get('range');
         const focus = this.sv.selectionStore.get('focus');
         return this.keyPositionChange(data.changes, range, focus, data.isMulti);
@@ -377,7 +400,8 @@ class KeyboardService {
         }
         const eData = this.sv.getData();
         if (isMulti) {
-            if (isAfterLast(data.end, eData.lastCell) || isBeforeFirst(data.start)) {
+            const isOutOfBounds = [data.start, data.end].some(cell => isAfterLast(cell, eData.lastCell) || isBeforeFirst(cell));
+            if (isOutOfBounds) {
                 return false;
             }
             const range = column_service.getRange(data.start, data.end);
@@ -1288,15 +1312,9 @@ const RevogrScrollVirtual = class {
      */
     async changeScroll(e) {
         if (e.delta) {
-            switch (e.dimension) {
-                case 'rgCol':
-                    e.coordinate = this.element.scrollLeft + e.delta;
-                    break;
-                case 'rgRow':
-                    e.coordinate = this.element.scrollTop + e.delta;
-                    break;
-            }
-            this.setScroll(e);
+            const scrollProperty = e.dimension === 'rgRow' ? 'scrollTop' : 'scrollLeft';
+            const currentPhysicalCoordinate = this.element[scrollProperty];
+            return this.localScrollService.setScrollByDelta(e, currentPhysicalCoordinate);
         }
         return e;
     }
@@ -1317,7 +1335,7 @@ const RevogrScrollVirtual = class {
         this.autohideScrollPlugin.clear();
     }
     componentWillLoad() {
-        this.scrollSize = dimension_helpers.getScrollbarSize(document);
+        this.scrollSize = index$1.getScrollbarSize(document);
     }
     componentDidRender() {
         let scrollSize = 0;
@@ -1359,7 +1377,7 @@ const RevogrScrollVirtual = class {
     }
     render() {
         const size = throttle.getContentSize(this.realSize, this.dimension === 'rgRow' ? this.element.clientHeight : this.element.clientWidth, this.clientSize);
-        return (index.h(index.Host, { key: '57f81ec9deb2395e96b283338c03b9ad44f1e929', onScroll: (e) => this.onScroll(e) }, index.h("div", { key: '1a8c869adab53b362c351dae8d53664f33c4212c', style: {
+        return (index.h(index.Host, { key: '7213817ef941eee4050b714266598ec0c2961ee9', onScroll: (e) => this.onScroll(e) }, index.h("div", { key: '501da49c63253ab943172494b9dbf5399be56cee', style: {
                 [this.dimension === 'rgRow' ? 'height' : 'width']: `${size}px`,
             } })));
     }

package/dist/cjs/revogr-clipboard_3.cjs.entry.js

@@ -4,10 +4,11 @@
 'use strict';
 
 var index = require('./index-Dq8Xzj5l.js');
-var dimension_helpers = require('./dimension.helpers-CiiNnlLa.js');
-var textEditor = require('./text-editor-DnLZW1a-.js');
-var edit_utils = require('./edit.utils-CecCfA4E.js');
+var dimension_helpers = require('./dimension.helpers-B9HgANnM.js');
+var textEditor = require('./text-editor-B4W-m-r-.js');
+var edit_utils = require('./edit.utils-pKeiYFLJ.js');
 var debounce = require('./debounce-CcpHiH2p.js');
+require('./index-DxaSE5uZ.js');
 
 const Clipboard = class {
     constructor(hostRef) {
@@ -334,11 +335,12 @@ class RowOrderService {
     getRow(y, { el, rows }) {
         const { top } = el.getBoundingClientRect();
         const topRelative = y - top;
-        const rgRow = dimension_helpers.getItemByPosition(rows, topRelative);
+        const rowOffset = rows.renderOffset || 0;
+        const rgRow = dimension_helpers.getItemByPosition(rows, topRelative + rowOffset);
         const absolutePosition = {
             itemIndex: rgRow.itemIndex,
-            start: rgRow.start + top,
-            end: rgRow.end + top,
+            start: rgRow.start - rowOffset + top,
+            end: rgRow.end - rowOffset + top,
         };
         return absolutePosition;
     }
@@ -347,8 +349,8 @@ class RowOrderService {
         const { top, left } = el.getBoundingClientRect();
         const topRelative = y - top;
         const leftRelative = x - left;
-        const rgRow = dimension_helpers.getItemByPosition(rows, topRelative);
-        const rgCol = dimension_helpers.getItemByPosition(cols, leftRelative);
+        const rgRow = dimension_helpers.getItemByPosition(rows, topRelative + (rows.renderOffset || 0));
+        const rgCol = dimension_helpers.getItemByPosition(cols, leftRelative + (cols.renderOffset || 0));
         return { x: rgCol.itemIndex, y: rgRow.itemIndex };
     }
 }

package/dist/cjs/revogr-data_4.cjs.entry.js

@@ -4,13 +4,13 @@
 'use strict';
 
 var index = require('./index-Dq8Xzj5l.js');
-var column_service = require('./column.service-DXYMehqK.js');
-var dimension_helpers = require('./dimension.helpers-CiiNnlLa.js');
-var cellRenderer = require('./cell-renderer-BQdEGQXP.js');
+var column_service = require('./column.service-C1Qvcf5l.js');
+var dimension_helpers = require('./dimension.helpers-B9HgANnM.js');
+var cellRenderer = require('./cell-renderer-Dcz022q7.js');
 var filter_button = require('./filter.button-w6LWnyhi.js');
-var headerCellRenderer = require('./header-cell-renderer-DGyBrK8I.js');
-var throttle = require('./throttle-CfgQFkfR.js');
-var viewport_helpers = require('./viewport.helpers-BAovztDd.js');
+var headerCellRenderer = require('./header-cell-renderer-QrcXXSkF.js');
+var throttle = require('./throttle-BCwEuJJq.js');
+var viewport_helpers = require('./viewport.helpers-BND76K2j.js');
 require('./debounce-CcpHiH2p.js');
 
 /**
@@ -170,11 +170,13 @@ const RevogrData = class {
         const depth = this.dataStore.get('groupingDepth');
         const groupingCustomRenderer = this.dataStore.get('groupingCustomRenderer');
         const groupDepth = this.columnService.hasGrouping ? depth : 0;
+        const rowRenderOffset = this.viewportRow.get('renderOffset') || 0;
+        const colRenderOffset = this.viewportCol.get('renderOffset') || 0;
         for (let rgRow of rows) {
             const dataItem = dimension_helpers.getSourceItem(this.dataStore, rgRow.itemIndex);
             // #region Grouping
             if (column_service.isGrouping(dataItem)) {
-                const gmodel = Object.assign(Object.assign({}, rgRow), { index: rgRow.itemIndex, model: dataItem, groupingCustomRenderer,
+                const gmodel = Object.assign(Object.assign({}, rgRow), { start: rgRow.start - rowRenderOffset, index: rgRow.itemIndex, model: dataItem, groupingCustomRenderer,
                     // Only show expand button if grouping is enabled and not in row headers
                     hasExpand: this.columnService.hasGrouping && this.colType !== 'rowHeaders', columnItems: cols, providers: this.providers });
                 rowsEls.push(index.h(cellRenderer.GroupingRowRenderer, Object.assign({}, gmodel)));
@@ -197,7 +199,7 @@ const RevogrData = class {
                     [dimension_helpers.DATA_ROW]: rowProps.itemIndex,
                     style: {
                         width: `${columnProps.size}px`,
-                        transform: `translateX(${columnProps.start}px)`,
+                        transform: `translateX(${columnProps.start - colRenderOffset}px)`,
                         height: rowProps.size ? `${rowProps.size}px` : undefined,
                     },
                 };
@@ -225,7 +227,7 @@ const RevogrData = class {
             if (this.rowHighlightPlugin.isRowFocused(rgRow.itemIndex)) {
                 rowClass += ` ${dimension_helpers.ROW_FOCUSED_CLASS}`;
             }
-            const row = (index.h(cellRenderer.RowRenderer, { index: rgRow.itemIndex, rowClass: rowClass, size: rgRow.size, start: rgRow.start, groupingLevel: groupDepth || undefined }, cells));
+            const row = (index.h(cellRenderer.RowRenderer, { index: rgRow.itemIndex, rowClass: rowClass, size: rgRow.size, start: rgRow.start - rowRenderOffset, groupingLevel: groupDepth || undefined }, cells));
             this.beforerowrender.emit({
                 node: row,
                 item: rgRow,
@@ -280,7 +282,7 @@ const HeaderRenderer = (p) => {
         class: cellClass,
         style: {
             width: `${p.column.size}px`,
-            transform: `translateX(${p.column.start}px)`,
+            transform: `translateX(${p.column.start - (p.renderOffset || 0)}px)`,
         },
         onResize: p.onResize,
         onDblClick(originalEvent) {
@@ -325,7 +327,7 @@ const HeaderGroupRenderer = (p) => {
             [dimension_helpers.HEADER_CLASS]: true,
         },
         style: {
-            transform: `translateX(${p.start}px)`,
+            transform: `translateX(${p.start - (p.renderOffset || 0)}px)`,
             width: `${p.end - p.start}px`,
         },
         onResize: p.onResize,
@@ -333,7 +335,7 @@ const HeaderGroupRenderer = (p) => {
     return (index.h(headerCellRenderer.HeaderCellRenderer, { data: Object.assign(Object.assign({}, p.group), { prop: '', providers: p.providers, index: p.start }), props: groupProps, additionalData: p.additionalData }));
 };
 
-const revogrHeaderStyleCss = () => `@charset "UTF-8";revogr-header{position:relative;z-index:5;display:block}revogr-header .header-rgRow{display:block;position:relative}revogr-header .header-rgRow.group{z-index:0}revogr-header .group-rgRow{position:relative;overflow:hidden}revogr-header .rgHeaderCell{position:absolute;box-sizing:border-box;height:100%;z-index:1;display:flex}revogr-header .rgHeaderCell.align-center{text-align:center}revogr-header .rgHeaderCell.align-left{text-align:left}revogr-header .rgHeaderCell.align-right{text-align:right}revogr-header .rgHeaderCell.sortable{cursor:pointer}revogr-header .rgHeaderCell i.asc:after,revogr-header .rgHeaderCell i.desc:after{font-size:13px}revogr-header .rgHeaderCell i.asc:after{content:"↑"}revogr-header .rgHeaderCell i.desc:after{content:"↓"}revogr-header .rgHeaderCell.active{z-index:10}revogr-header .rgHeaderCell.active .resizable{background-color:deepskyblue}revogr-header .rgHeaderCell .header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}revogr-header .rgHeaderCell .resizable{display:block;position:absolute;z-index:90;touch-action:none;user-select:none}revogr-header .rgHeaderCell .resizable:hover{background-color:deepskyblue}revogr-header .rgHeaderCell>.resizable-r{cursor:ew-resize;width:6px;right:0;top:0;height:100%}revogr-header .rgHeaderCell>.resizable-rb{cursor:se-resize;width:6px;height:6px;right:0;bottom:0}revogr-header .rgHeaderCell>.resizable-b{cursor:s-resize;height:6px;bottom:0;width:100%;left:0}revogr-header .rgHeaderCell>.resizable-lb{cursor:sw-resize;width:6px;height:6px;left:0;bottom:0}revogr-header .rgHeaderCell>.resizable-l{cursor:w-resize;width:6px;left:0;height:100%;top:0}revogr-header .rgHeaderCell>.resizable-lt{cursor:nw-resize;width:6px;height:6px;left:0;top:0}revogr-header .rgHeaderCell>.resizable-t{cursor:n-resize;height:6px;top:0;width:100%;left:0}revogr-header .rgHeaderCell>.resizable-rt{cursor:ne-resize;width:6px;height:6px;right:0;top:0}revogr-header .rv-filter{visibility:hidden}`;
+const revogrHeaderStyleCss = () => `@charset "UTF-8";revogr-header{position:relative;z-index:5;display:block}revogr-header .header-rgRow{display:block;position:relative}revogr-header .header-rgRow.group{z-index:0}revogr-header .group-rgRow{position:relative;overflow:hidden}revogr-header .rgHeaderCell{position:absolute;box-sizing:border-box;height:100%;z-index:1;display:flex}revogr-header .rgHeaderCell.align-center{text-align:center}revogr-header .rgHeaderCell.align-left{text-align:left}revogr-header .rgHeaderCell.align-right{text-align:right}revogr-header .rgHeaderCell.sortable{cursor:pointer}revogr-header .rgHeaderCell .sort-indicator{display:inline-flex;align-items:flex-start;gap:1px}revogr-header .rgHeaderCell .sort-indicator i.asc:after,revogr-header .rgHeaderCell .sort-indicator i.desc:after{font-size:13px}revogr-header .rgHeaderCell .sort-indicator i.asc:after{content:"↑"}revogr-header .rgHeaderCell .sort-indicator i.desc:after{content:"↓"}revogr-header .rgHeaderCell .sort-indicator .sort-order-index{font-size:10px;line-height:1;top:0}revogr-header .rgHeaderCell.active{z-index:10}revogr-header .rgHeaderCell.active .resizable{background-color:deepskyblue}revogr-header .rgHeaderCell .header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}revogr-header .rgHeaderCell .resizable{display:block;position:absolute;z-index:90;touch-action:none;user-select:none}revogr-header .rgHeaderCell .resizable:hover{background-color:deepskyblue}revogr-header .rgHeaderCell>.resizable-r{cursor:ew-resize;width:6px;right:0;top:0;height:100%}revogr-header .rgHeaderCell>.resizable-rb{cursor:se-resize;width:6px;height:6px;right:0;bottom:0}revogr-header .rgHeaderCell>.resizable-b{cursor:s-resize;height:6px;bottom:0;width:100%;left:0}revogr-header .rgHeaderCell>.resizable-lb{cursor:sw-resize;width:6px;height:6px;left:0;bottom:0}revogr-header .rgHeaderCell>.resizable-l{cursor:w-resize;width:6px;left:0;height:100%;top:0}revogr-header .rgHeaderCell>.resizable-lt{cursor:nw-resize;width:6px;height:6px;left:0;top:0}revogr-header .rgHeaderCell>.resizable-t{cursor:n-resize;height:6px;top:0;width:100%;left:0}revogr-header .rgHeaderCell>.resizable-rt{cursor:ne-resize;width:6px;height:6px;right:0;top:0}revogr-header .rv-filter{visibility:hidden}`;
 
 const RevogrHeaderComponent = class {
     constructor(hostRef) {
@@ -389,6 +391,7 @@ const RevogrHeaderComponent = class {
     }
     renderHeaderColumns(cols, range) {
         const columnsToRender = [];
+        const renderOffset = this.viewportCol.get('renderOffset') || 0;
         for (let rgCol of cols) {
             const colData = this.colData[rgCol.itemIndex];
             const props = {
@@ -397,6 +400,7 @@ const RevogrHeaderComponent = class {
                 data: Object.assign(Object.assign({}, colData), { index: rgCol.itemIndex, providers: this.providers }),
                 canFilter: !!this.columnFilter,
                 canResize: this.canResize,
+                renderOffset,
                 active: this.resizeHandler,
                 additionalData: this.additionalData,
                 onResize: e => this.onResize(e, rgCol.itemIndex),
@@ -432,37 +436,71 @@ const RevogrHeaderComponent = class {
         ];
     }
     renderGroupColumn(group, level, visibleGroupRange) {
-        var _a;
-        const groupStartIndex = (_a = group.indexes[0]) !== null && _a !== void 0 ? _a : -1;
-        if (groupStartIndex < 0) {
-            return;
-        }
-        const groupEndIndex = groupStartIndex + group.indexes.length - 1;
-        if (!visibleGroupRange ||
-            !isGroupInVisibleRange(groupStartIndex, groupEndIndex, visibleGroupRange)) {
-            return;
-        }
-        const groupStart = dimension_helpers.getItemByIndex(this.dimensionCol.state, groupStartIndex).start;
-        const groupEnd = dimension_helpers.getItemByIndex(this.dimensionCol.state, groupEndIndex).end;
+        const groupRange = this.getGroupIndexRange(group);
+        const groupBounds = this.getGroupBounds(groupRange);
         const props = {
+            level,
             providers: this.providers,
-            start: groupStart,
-            end: groupEnd,
+            start: groupBounds.start,
+            end: groupBounds.end,
             group,
+            renderOffset: this.viewportCol.get('renderOffset') || 0,
             active: this.resizeHandler,
             canResize: this.canResize,
             additionalData: this.additionalData,
             onResize: e => {
                 var _a;
-                return this.onResizeGroup((_a = e.changedX) !== null && _a !== void 0 ? _a : 0, groupStartIndex, groupEndIndex);
+                return groupRange
+                    ? this.onResizeGroup((_a = e.changedX) !== null && _a !== void 0 ? _a : 0, groupRange.startIndex, groupRange.endIndex)
+                    : undefined;
             },
         };
         const event = this.beforeGroupHeaderRender.emit(props);
         if (event.defaultPrevented) {
             return;
         }
+        const renderRange = this.getGroupIndexRange(event.detail.group);
+        if (!renderRange ||
+            !visibleGroupRange ||
+            !isGroupInVisibleRange(renderRange.startIndex, renderRange.endIndex, visibleGroupRange)) {
+            return;
+        }
+        if (event.detail.onResize === props.onResize) {
+            event.detail.onResize = e => {
+                var _a;
+                return this.onResizeGroup((_a = e.changedX) !== null && _a !== void 0 ? _a : 0, renderRange.startIndex, renderRange.endIndex);
+            };
+        }
+        const renderBounds = this.getGroupBounds(renderRange);
+        if (event.detail.start === props.start) {
+            event.detail.start = renderBounds.start;
+        }
+        if (event.detail.end === props.end) {
+            event.detail.end = renderBounds.end;
+        }
         return index.h(HeaderGroupRenderer, Object.assign({ key: this.getGroupHeaderCellKey(event.detail.group, level) }, event.detail));
     }
+    getGroupIndexRange(group) {
+        var _a;
+        const startIndex = (_a = group.indexes[0]) !== null && _a !== void 0 ? _a : -1;
+        if (startIndex < 0) {
+            return;
+        }
+        const endIndex = group.indexes[group.indexes.length - 1];
+        return {
+            startIndex,
+            endIndex,
+        };
+    }
+    getGroupBounds(range) {
+        if (!range) {
+            return { start: 0, end: 0 };
+        }
+        return {
+            start: dimension_helpers.getItemByIndex(this.dimensionCol.state, range.startIndex).start,
+            end: dimension_helpers.getItemByIndex(this.dimensionCol.state, range.endIndex).end,
+        };
+    }
     getVisibleGroupRange() {
         const visibleColumns = this.viewportCol.get('items');
         if (!visibleColumns.length) {
@@ -603,7 +641,7 @@ const RevogrViewportScroll = class {
      * @param e
      */
     async changeScroll(e, silent = false) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (silent) {
             if (e.coordinate && this.verticalScroll) {
                 switch (e.dimension) {
@@ -616,15 +654,16 @@ const RevogrViewportScroll = class {
             return;
         }
         if (e.delta) {
+            let currentPhysicalCoordinate = 0;
             switch (e.dimension) {
                 case 'rgCol':
-                    e.coordinate = this.horizontalScroll.scrollLeft + e.delta;
+                    currentPhysicalCoordinate = this.horizontalScroll.scrollLeft;
                     break;
                 case 'rgRow':
-                    e.coordinate = ((_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0) + e.delta;
+                    currentPhysicalCoordinate = (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0;
                     break;
             }
-            this.setScroll(e);
+            return (_d = (_c = this.localScrollService) === null || _c === void 0 ? void 0 : _c.setScrollByDelta(e, currentPhysicalCoordinate)) !== null && _d !== void 0 ? _d : e;
         }
         return e;
     }
@@ -776,7 +815,10 @@ const RevogrViewportScroll = class {
         this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
     }
     render() {
-        return (index.h(index.Host, { key: 'adc7378dba1794ca2ec263d52b09abefe50bcbfd', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, index.h("div", { key: '7b57a8a0ea44629fefcfe4d2cd77bf0f048d8e06', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, index.h("div", { key: 'cca3de158bc2a7f0651f578a281819be5698b257', class: "header-wrapper", ref: e => (this.header = e) }, index.h("slot", { key: '1d170147dabe034f2c35481a8e2fedd6de2b6aed', name: viewport_helpers.HEADER_SLOT })), index.h("div", { key: 'b6dd29a91bb1f380a83a035dfdb749ca669936f2', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, index.h("div", { key: '9bce27bf8ec4d3b679aa9a34eb6379a8c2d46cac', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, index.h("slot", { key: 'b44a082c9fbb948fd87bd235b4cd4356fd4a3536', name: viewport_helpers.CONTENT_SLOT }))), index.h("div", { key: '28c305ff6bc664f1d1bbb117e8b8565c8d4bb6b2', class: "footer-wrapper", ref: e => (this.footer = e) }, index.h("slot", { key: '96312fb7f18198fd1feb9dcc00c79cde74ba9c9f', name: viewport_helpers.FOOTER_SLOT })))));
+        var _a, _b, _c, _d;
+        const physicalContentHeight = throttle.getContentSize(this.contentHeight, (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0);
+        const physicalContentWidth = throttle.getContentSize(this.contentWidth, (_d = (_c = this.horizontalScroll) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 0);
+        return (index.h(index.Host, { key: 'a0c47dede9d131dea8c8ca449e8a323f24d9b113', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, index.h("div", { key: '6c960e753ffe522ba4afb1c379264873b6c617f3', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, index.h("div", { key: '1a6cbcbd3634e84756b54c8150aebd25c824e14a', class: "header-wrapper", ref: e => (this.header = e) }, index.h("slot", { key: 'e4202c687bc39b4f78f3ed9840e979b032f06af8', name: viewport_helpers.HEADER_SLOT })), index.h("div", { key: '651415b5b32e72735065b183317386a34042bb85', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, index.h("div", { key: 'e65623b78d80957d8676adb019618953ef267ec3', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, index.h("slot", { key: '5af47b12ef1226587cf774233447b5252d65e836', name: viewport_helpers.CONTENT_SLOT }))), index.h("div", { key: 'cbc0fd64fbfb53d3b18e547bbe34e32b7bb9c043', class: "footer-wrapper", ref: e => (this.footer = e) }, index.h("slot", { key: 'a8e4bfaef400973121090bac3069eb85469a95f3', name: viewport_helpers.FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing

package/dist/cjs/revogr-filter-panel.cjs.entry.js

@@ -269,7 +269,8 @@ const FilterPanel = class {
         const options = [];
         const prop = this.changes.prop;
         const hidden = new Set();
-        Object.entries(this.filterItems).forEach(([_, values]) => {
+        Object.keys(this.filterItems).forEach((prop) => {
+            const values = this.filterItems[prop];
             values.forEach((filter) => {
                 if (filter.hidden) {
                     hidden.add(filter.type);