@revolist/revogrid 4.22.1 → 4.23.1

package/hydrate/index.js

@@ -7646,7 +7646,8 @@ class FilterPanel {
         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);
@@ -8729,11 +8730,11 @@ var COMPARE_PARTIAL_FLAG$4 = 1,
 var boolTag$1 = '[object Boolean]',
     dateTag$1 = '[object Date]',
     errorTag$1 = '[object Error]',
-    mapTag$3 = '[object Map]',
+    mapTag$2 = '[object Map]',
     numberTag$1 = '[object Number]',
     regexpTag$1 = '[object RegExp]',
-    setTag$3 = '[object Set]',
-    stringTag$2 = '[object String]',
+    setTag$2 = '[object Set]',
+    stringTag$1 = '[object String]',
     symbolTag = '[object Symbol]';
 
 var arrayBufferTag$1 = '[object ArrayBuffer]',
@@ -8788,16 +8789,16 @@ function equalByTag(object, other, tag, bitmask, customizer, equalFunc, stack) {
       return object.name == other.name && object.message == other.message;
 
     case regexpTag$1:
-    case stringTag$2:
+    case stringTag$1:
       // Coerce regexes to strings and treat strings, primitives and objects,
       // as equal. See http://www.ecma-international.org/ecma-262/7.0/#sec-regexp.prototype.tostring
       // for more details.
       return object == (other + '');
 
-    case mapTag$3:
+    case mapTag$2:
       var convert = mapToArray;
 
-    case setTag$3:
+    case setTag$2:
       var isPartial = bitmask & COMPARE_PARTIAL_FLAG$4;
       convert || (convert = setToArray);
 
@@ -9138,12 +9139,12 @@ var argsTag$1 = '[object Arguments]',
     dateTag = '[object Date]',
     errorTag = '[object Error]',
     funcTag = '[object Function]',
-    mapTag$2 = '[object Map]',
+    mapTag$1 = '[object Map]',
     numberTag = '[object Number]',
     objectTag$2 = '[object Object]',
     regexpTag = '[object RegExp]',
-    setTag$2 = '[object Set]',
-    stringTag$1 = '[object String]',
+    setTag$1 = '[object Set]',
+    stringTag = '[object String]',
     weakMapTag$1 = '[object WeakMap]';
 
 var arrayBufferTag = '[object ArrayBuffer]',
@@ -9169,9 +9170,9 @@ typedArrayTags[argsTag$1] = typedArrayTags[arrayTag$1] =
 typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] =
 typedArrayTags[dataViewTag$1] = typedArrayTags[dateTag] =
 typedArrayTags[errorTag] = typedArrayTags[funcTag] =
-typedArrayTags[mapTag$2] = typedArrayTags[numberTag] =
+typedArrayTags[mapTag$1] = typedArrayTags[numberTag] =
 typedArrayTags[objectTag$2] = typedArrayTags[regexpTag] =
-typedArrayTags[setTag$2] = typedArrayTags[stringTag$1] =
+typedArrayTags[setTag$1] = typedArrayTags[stringTag] =
 typedArrayTags[weakMapTag$1] = false;
 
 /**
@@ -9521,10 +9522,10 @@ var Set$1 = getNative(root, 'Set');
 var WeakMap$1 = getNative(root, 'WeakMap');
 
 /** `Object#toString` result references. */
-var mapTag$1 = '[object Map]',
+var mapTag = '[object Map]',
     objectTag$1 = '[object Object]',
     promiseTag = '[object Promise]',
-    setTag$1 = '[object Set]',
+    setTag = '[object Set]',
     weakMapTag = '[object WeakMap]';
 
 var dataViewTag = '[object DataView]';
@@ -9547,9 +9548,9 @@ var getTag = baseGetTag;
 
 // Fallback for data views, maps, sets, and weak maps in IE 11 and promises in Node.js < 6.
 if ((DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag) ||
-    (Map$1 && getTag(new Map$1) != mapTag$1) ||
+    (Map$1 && getTag(new Map$1) != mapTag) ||
     (Promise$1 && getTag(Promise$1.resolve()) != promiseTag) ||
-    (Set$1 && getTag(new Set$1) != setTag$1) ||
+    (Set$1 && getTag(new Set$1) != setTag) ||
     (WeakMap$1 && getTag(new WeakMap$1) != weakMapTag)) {
   getTag = function(value) {
     var result = baseGetTag(value),
@@ -9559,9 +9560,9 @@ if ((DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag) ||
     if (ctorString) {
       switch (ctorString) {
         case dataViewCtorString: return dataViewTag;
-        case mapCtorString: return mapTag$1;
+        case mapCtorString: return mapTag;
         case promiseCtorString: return promiseTag;
-        case setCtorString: return setTag$1;
+        case setCtorString: return setTag;
         case weakMapCtorString: return weakMapTag;
       }
     }
@@ -10825,9 +10826,9 @@ function gatherTrimmedItems(trimmedItems) {
  * @param data - The data to set on the store.
  */
 function setStore(store, data) {
-    Object.entries(data).forEach(([key, value]) => {
-        store.set(key, value);
-    });
+    for (const key of Object.keys(data)) {
+        store.set(key, data[key]);
+    }
 }
 
 /**
@@ -11338,21 +11339,6 @@ function getScrollbarSize(document) {
     // Return the calculated width of the scrollbar
     return scrollbarWidth;
 }
-/* Scale a value between 2 ranges
- *
- * Sample:
- * // 55 from a 0-100 range to a 0-1000 range (Ranges don't have to be positive)
- * const n = scaleValue(55, [0,100], [0,1000]);
- *
- * Ranges of two values
- * @from
- * @to
- *
- * ~~ return value does the equivalent of Math.floor but faster.
- */
-function scaleValue(value, from, to) {
-    return ((to[1] - to[0]) * (value - from[0])) / (from[1] - from[0]) + to[0];
-}
 /**
  * Async timeout
  */
@@ -11726,6 +11712,21 @@ function getItemByIndex(dimension, index) {
     return item;
 }
 
+function calculateRealSize({ count, originItemSize, sizes, }) {
+    const safeCount = Math.max(0, count);
+    let realSize = safeCount * originItemSize;
+    for (let index in sizes) {
+        const itemIndex = Number(index);
+        if (!Number.isInteger(itemIndex) ||
+            itemIndex < 0 ||
+            itemIndex >= safeCount ||
+            String(itemIndex) !== index) {
+            continue;
+        }
+        realSize += sizes[index] - originItemSize;
+    }
+    return realSize;
+}
 /**
  * Plugin which recalculates realSize on changes of sizes, originItemSize and count
  */
@@ -11738,20 +11739,18 @@ const recalculateRealSizePlugin = (storeService) => {
          * Reacts on changes of count, sizes and originItemSize
          */
         set(k) {
-            var _a;
             switch (k) {
                 case 'count':
                 case 'sizes':
                 case 'originItemSize': {
                     // recalculate realSize
-                    let realSize = 0;
-                    const count = storeService.store.get('count');
-                    const sizes = storeService.store.get('sizes');
-                    const originItemSize = storeService.store.get('originItemSize');
-                    for (let i = 0; i < count; i++) {
-                        realSize += (_a = sizes[i]) !== null && _a !== void 0 ? _a : originItemSize;
-                    }
-                    storeService.setStore({ realSize });
+                    storeService.setStore({
+                        realSize: calculateRealSize({
+                            count: storeService.store.get('count'),
+                            sizes: storeService.store.get('sizes'),
+                            originItemSize: storeService.store.get('originItemSize'),
+                        }),
+                    });
                     break;
                 }
             }
@@ -11841,7 +11840,9 @@ function initialState$1() {
         // size which all items can take
         realSize: 0,
         // initial item size if it wasn't changed
-        originItemSize: 0
+        originItemSize: 0,
+        // logical-to-physical render offset used when scroll space is compressed
+        renderOffset: 0
     });
 }
 class DimensionStore {
@@ -11873,7 +11874,7 @@ class DimensionStore {
         setStore(this.store, data);
     }
     drop() {
-        setStore(this.store, initialBase());
+        setStore(this.store, Object.assign(Object.assign({}, initialBase()), { renderOffset: 0 }));
     }
     /**
      * Set custom dimension sizes and overwrite old
@@ -12044,6 +12045,15 @@ function isRangeSingleCell(a) {
     return a.x === a.x1 && a.y === a.y1;
 }
 
+function getViewportMaxCoordinate(dimension, viewportSize, frameOffset = 1) {
+    if (!viewportSize || dimension.realSize <= viewportSize) {
+        return 0;
+    }
+    return Math.max(0, dimension.realSize - viewportSize - dimension.originItemSize * frameOffset);
+}
+function clampViewportCoordinate(coordinate, dimension, viewportSize, frameOffset = 1) {
+    return Math.min(Math.max(0, coordinate), getViewportMaxCoordinate(dimension, viewportSize, frameOffset));
+}
 /**
  * Update items based on new scroll position
  * If viewport wasn't changed fully simple recombination of positions
@@ -12309,6 +12319,8 @@ function initialState() {
         realCount: 0,
         // size of viewport in px
         clientSize: 0,
+        // logical-to-physical render offset used when scroll space is compressed
+        renderOffset: 0,
     };
 }
 /**
@@ -12344,21 +12356,8 @@ class ViewportStore {
         const outsize = singleOffsetInPx * 2;
         // math virtual size is based on visible area + 2 items outside of visible area
         const virtualSize = viewportSize + outsize;
-        // expected no scroll if real size less than virtual size, position is 0
-        let maxCoordinate = 0;
-        // if there is nodes outside of viewport, max coordinate has to be adjusted
-        if (dimension.realSize > viewportSize) {
-            // max coordinate is real size minus virtual/rendered space
-            maxCoordinate = dimension.realSize - viewportSize - singleOffsetInPx;
-        }
-        let pos = position;
-        // limit position to max and min coordinates
-        if (pos < 0) {
-            pos = 0;
-        }
-        else if (pos > maxCoordinate) {
-            pos = maxCoordinate;
-        }
+        const maxCoordinate = getViewportMaxCoordinate(dimension, viewportSize, frameOffset);
+        let pos = clampViewportCoordinate(position, dimension, viewportSize, frameOffset);
         // store last coordinate for further restore on redraw
         this.lastCoordinate = pos;
         // actual position is less than first item start based on offset
@@ -12495,11 +12494,12 @@ class RowOrderService {
     getRow(y, { el, rows }) {
         const { top } = el.getBoundingClientRect();
         const topRelative = y - top;
-        const rgRow = getItemByPosition(rows, topRelative);
+        const rowOffset = rows.renderOffset || 0;
+        const rgRow = 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;
     }
@@ -12508,8 +12508,8 @@ class RowOrderService {
         const { top, left } = el.getBoundingClientRect();
         const topRelative = y - top;
         const leftRelative = x - left;
-        const rgRow = getItemByPosition(rows, topRelative);
-        const rgCol = getItemByPosition(cols, leftRelative);
+        const rgRow = getItemByPosition(rows, topRelative + (rows.renderOffset || 0));
+        const rgCol = getItemByPosition(cols, leftRelative + (cols.renderOffset || 0));
         return { x: rgCol.itemIndex, y: rgRow.itemIndex };
     }
 }
@@ -12645,6 +12645,9 @@ const GROUPING_ROW_TYPE = 'rgRow';
 function getGroupValueDefault(item, prop) {
     return item[prop] || null;
 }
+function isDataRow(item) {
+    return item != null;
+}
 // get source based on proxy item collection to preserve rgRow order
 function getSource(source, items, withoutGrouping = false) {
     let index = 0;
@@ -12666,6 +12669,9 @@ function getSource(source, items, withoutGrouping = false) {
                 result.prevExpanded[model[PSEUDO_GROUP_ITEM_VALUE]] = true;
             }
         }
+        else if (!isDataRow(model)) {
+            return;
+        }
         else {
             result.source.push(model);
             result.oldNewIndexes[i] = index;
@@ -12746,6 +12752,9 @@ function flattenGroupMaps({ groupedValues, parentIds, isExpanded, itemIndex, exp
 function gatherGrouping(array, columnProps, { prevExpanded = {}, expandedAll = false, getGroupValue = getGroupValueDefault, }) {
     const groupedItems = new Map();
     array.forEach((item, originalIndex) => {
+        if (!isDataRow(item)) {
+            return;
+        }
         const groupLevelValues = columnProps.map(groupId => getGroupValue(item, groupId));
         const lastLevelValue = groupLevelValues.pop();
         let currentGroupLevel = groupedItems;
@@ -13245,8 +13254,8 @@ function getCurrentCell({ x, y }, { el, rows, cols }) {
         cellX = width - 1;
     }
     // Get the row and column items based on the cell position
-    const rgRow = getItemByPosition(rows, cellY);
-    const rgCol = getItemByPosition(cols, cellX);
+    const rgRow = getItemByPosition(rows, cellY + (rows.renderOffset || 0));
+    const rgCol = 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;
@@ -13316,10 +13325,12 @@ function styleByCellProps(styles) {
     };
 }
 function getCell({ x, y, x1, y1 }, dimensionRow, dimensionCol) {
-    const top = getItemByIndex(dimensionRow, y).start;
-    const left = getItemByIndex(dimensionCol, x).start;
-    const bottom = getItemByIndex(dimensionRow, y1).end;
-    const right = getItemByIndex(dimensionCol, x1).end;
+    const rowOffset = dimensionRow.renderOffset || 0;
+    const colOffset = dimensionCol.renderOffset || 0;
+    const top = getItemByIndex(dimensionRow, y).start - rowOffset;
+    const left = getItemByIndex(dimensionCol, x).start - colOffset;
+    const bottom = getItemByIndex(dimensionRow, y1).end - rowOffset;
+    const right = getItemByIndex(dimensionCol, x1).end - colOffset;
     return {
         left,
         right,
@@ -13350,9 +13361,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 (isShortcutModifier(e) ||
+            e.key.length !== 1 ||
+            (e.target instanceof HTMLElement && 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 codesLetter.ESCAPE:
                     this.sv.cancel();
@@ -13446,7 +13477,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 = getRange(data.start, data.end);
@@ -14688,6 +14720,87 @@ class DataProvider {
     }
 }
 
+const FALLBACK_MAX_SCROLL_SIZE = 16000000;
+const SCROLL_SIZE_GUARD = 1000000;
+let detectedMaxScrollSize;
+function getMaxScrollSize(doc = typeof document === 'undefined' ? undefined : document) {
+    if (typeof detectedMaxScrollSize === 'number') {
+        return detectedMaxScrollSize;
+    }
+    const body = doc === null || doc === void 0 ? void 0 : doc.body;
+    if (body) {
+        const ownerDocument = body.ownerDocument;
+        const element = ownerDocument.createElement('div');
+        element.style.cssText = [
+            'height:1px',
+            'left:-10000px',
+            'overflow:scroll',
+            'position:absolute',
+            'top:-10000px',
+            'visibility:hidden',
+            'width:1px',
+        ].join(';');
+        const content = ownerDocument.createElement('div');
+        content.style.height = `${FALLBACK_MAX_SCROLL_SIZE * 4}px`;
+        element.appendChild(content);
+        body.appendChild(element);
+        detectedMaxScrollSize = Math.max(0, Math.min(element.scrollHeight, FALLBACK_MAX_SCROLL_SIZE * 4) - SCROLL_SIZE_GUARD);
+        element.remove();
+        if (detectedMaxScrollSize > SCROLL_SIZE_GUARD) {
+            return detectedMaxScrollSize;
+        }
+        detectedMaxScrollSize = FALLBACK_MAX_SCROLL_SIZE;
+        return detectedMaxScrollSize;
+    }
+    return FALLBACK_MAX_SCROLL_SIZE;
+}
+function getScrollDimension({ contentSize, clientSize, virtualSize = 0, maxScrollSize = getMaxScrollSize(), }) {
+    const safeContentSize = Math.max(0, maxScrollSize - SCROLL_SIZE_GUARD);
+    const size = Math.max(0, contentSize);
+    const client = Math.max(0, clientSize);
+    const viewport = Math.max(0, virtualSize || client);
+    const logicalScrollSize = Math.max(0, size - viewport);
+    const maxPhysicalScrollSize = Math.max(0, safeContentSize - client);
+    const physicalScrollSize = Math.min(logicalScrollSize, maxPhysicalScrollSize);
+    const physicalContentSize = client + physicalScrollSize;
+    const isCompressed = logicalScrollSize > physicalScrollSize && physicalScrollSize > 0;
+    const clampLogical = (coordinate) => Math.min(Math.max(0, coordinate || 0), logicalScrollSize);
+    const clampPhysical = (coordinate) => Math.min(Math.max(0, coordinate || 0), physicalScrollSize);
+    const toLogicalCoordinate = (coordinate) => {
+        if (!logicalScrollSize || !physicalScrollSize) {
+            return 0;
+        }
+        if (!isCompressed) {
+            return clampLogical(coordinate);
+        }
+        return clampLogical((clampPhysical(coordinate) / physicalScrollSize) * logicalScrollSize);
+    };
+    const toPhysicalCoordinate = (coordinate) => {
+        if (!logicalScrollSize || !physicalScrollSize) {
+            return 0;
+        }
+        if (!isCompressed) {
+            return clampPhysical(coordinate);
+        }
+        return clampPhysical((clampLogical(coordinate) / logicalScrollSize) * physicalScrollSize);
+    };
+    return {
+        contentSize: size,
+        clientSize: client,
+        viewportSize: viewport,
+        physicalContentSize,
+        logicalScrollSize,
+        physicalScrollSize,
+        isCompressed,
+        toLogicalCoordinate,
+        toPhysicalCoordinate,
+        getRenderOffset(coordinate) {
+            const logical = clampLogical(coordinate);
+            return logical - toPhysicalCoordinate(logical);
+        },
+    };
+}
+
 /**
  * Dimension provider
  * Stores dimension information and custom sizes
@@ -14825,6 +14938,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 = getScrollDimension({
+            contentSize: dimension.realSize,
+            clientSize,
+            virtualSize: viewportSize,
+        });
+        const renderCoordinate = 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) {
@@ -15521,17 +15648,24 @@ class FilterPlugin extends BasePlugin {
             }
         }
         if (config.collection) {
-            const filtersWithFilterFunctionPresent = Object.entries(config.collection).filter(([, item]) => this.filterFunctionsIndexedByType[item.type]);
-            this.filterCollection = Object.fromEntries(filtersWithFilterFunctionPresent);
+            const filterCollection = {};
+            for (const prop of Object.keys(config.collection)) {
+                const item = config.collection[prop];
+                if (this.filterFunctionsIndexedByType[item.type]) {
+                    filterCollection[prop] = item;
+                }
+            }
+            this.filterCollection = filterCollection;
         }
         else {
             this.filterCollection = {};
         }
         if (config.localization) {
             if (config.localization.filterNames) {
-                Object.entries(config.localization.filterNames).forEach(([k, v]) => {
+                const filterNames = config.localization.filterNames;
+                Object.keys(filterNames).forEach((k) => {
                     if (this.filterNameIndexByType[k] != void 0) {
-                        this.filterNameIndexByType[k] = v;
+                        this.filterNameIndexByType[k] = filterNames[k];
                     }
                 });
             }
@@ -15761,165 +15895,174 @@ function allAndConditionsSatisfied(pendingResults) {
     return !pendingResults.includes(true);
 }
 
-/** `Object#toString` result references. */
-var stringTag = '[object String]';
-
 /**
- * Checks if `value` is classified as a `String` primitive or object.
+ * Checks whether a sorting map contains at least one active order.
  *
- * @static
- * @since 0.1.0
- * @memberOf _
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a string, else `false`.
- * @example
- *
- * _.isString('abc');
- * // => true
- *
- * _.isString(1);
- * // => false
+ * Empty maps and properties with `undefined` order are treated as inactive.
  */
-function isString(value) {
-  return typeof value == 'string' ||
-    (!isArray(value) && isObjectLike(value) && baseGetTag(value) == stringTag);
+function hasActiveSorting(sorting) {
+    for (const prop of Object.keys(sorting || {})) {
+        if (sorting === null || sorting === void 0 ? void 0 : sorting[prop]) {
+            return true;
+        }
+    }
+    return false;
 }
-
 /**
- * Gets the size of an ASCII `string`.
- *
- * @private
- * @param {string} string The string inspect.
- * @returns {number} Returns the string size.
+ * Compares column properties after object-key coercion.
  */
-var asciiSize = baseProperty('length');
-
-/** Used to compose unicode character classes. */
-var rsAstralRange$1 = '\\ud800-\\udfff',
-    rsComboMarksRange$1 = '\\u0300-\\u036f',
-    reComboHalfMarksRange$1 = '\\ufe20-\\ufe2f',
-    rsComboSymbolsRange$1 = '\\u20d0-\\u20ff',
-    rsComboRange$1 = rsComboMarksRange$1 + reComboHalfMarksRange$1 + rsComboSymbolsRange$1,
-    rsVarRange$1 = '\\ufe0e\\ufe0f';
-
-/** Used to compose unicode capture groups. */
-var rsZWJ$1 = '\\u200d';
-
-/** Used to detect strings with [zero-width joiners or code points from the astral planes](http://eev.ee/blog/2015/09/12/dark-corners-of-unicode/). */
-var reHasUnicode = RegExp('[' + rsZWJ$1 + rsAstralRange$1  + rsComboRange$1 + rsVarRange$1 + ']');
-
+function isSameColumnProp(a, b) {
+    return String(a) === String(b);
+}
 /**
- * Checks if `string` contains Unicode symbols.
- *
- * @private
- * @param {string} string The string to inspect.
- * @returns {boolean} Returns `true` if a symbol is found, else `false`.
+ * Returns active sorting properties in explicit priority order.
  */
-function hasUnicode(string) {
-  return reHasUnicode.test(string);
-}
-
-/** Used to compose unicode character classes. */
-var rsAstralRange = '\\ud800-\\udfff',
-    rsComboMarksRange = '\\u0300-\\u036f',
-    reComboHalfMarksRange = '\\ufe20-\\ufe2f',
-    rsComboSymbolsRange = '\\u20d0-\\u20ff',
-    rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange,
-    rsVarRange = '\\ufe0e\\ufe0f';
-
-/** Used to compose unicode capture groups. */
-var rsAstral = '[' + rsAstralRange + ']',
-    rsCombo = '[' + rsComboRange + ']',
-    rsFitz = '\\ud83c[\\udffb-\\udfff]',
-    rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')',
-    rsNonAstral = '[^' + rsAstralRange + ']',
-    rsRegional = '(?:\\ud83c[\\udde6-\\uddff]){2}',
-    rsSurrPair = '[\\ud800-\\udbff][\\udc00-\\udfff]',
-    rsZWJ = '\\u200d';
-
-/** Used to compose unicode regexes. */
-var reOptMod = rsModifier + '?',
-    rsOptVar = '[' + rsVarRange + ']?',
-    rsOptJoin = '(?:' + rsZWJ + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*',
-    rsSeq = rsOptVar + reOptMod + rsOptJoin,
-    rsSymbol = '(?:' + [rsNonAstral + rsCombo + '?', rsCombo, rsRegional, rsSurrPair, rsAstral].join('|') + ')';
-
-/** Used to match [string symbols](https://mathiasbynens.be/notes/javascript-unicode). */
-var reUnicode = RegExp(rsFitz + '(?=' + rsFitz + ')|' + rsSymbol + rsSeq, 'g');
-
+function getActiveSortingProps(sorting, sortingOrder) {
+    const activeProps = [];
+    const add = (prop) => {
+        if ((sorting === null || sorting === void 0 ? void 0 : sorting[prop]) && !activeProps.some(active => isSameColumnProp(active, prop))) {
+            activeProps.push(prop);
+        }
+    };
+    sortingOrder === null || sortingOrder === void 0 ? void 0 : sortingOrder.forEach(add);
+    Object.keys(sorting || {}).forEach(add);
+    return activeProps;
+}
 /**
- * Gets the size of a Unicode `string`.
+ * Returns one-based additive sorting rank for a column.
  *
- * @private
- * @param {string} string The string inspect.
- * @returns {number} Returns the string size.
+ * A single active sort does not need a visible rank, so it returns undefined.
  */
-function unicodeSize(string) {
-  var result = reUnicode.lastIndex = 0;
-  while (reUnicode.test(string)) {
-    ++result;
-  }
-  return result;
+function getSortingIndex(sorting, prop, sortingOrder) {
+    const activeProps = getActiveSortingProps(sorting, sortingOrder);
+    if (activeProps.length <= 1) {
+        return undefined;
+    }
+    const index = activeProps.findIndex(active => isSameColumnProp(active, prop));
+    return index >= 0 ? index + 1 : undefined;
 }
-
 /**
- * Gets the number of symbols in `string`.
+ * Collects only active comparator functions from a sorting function map.
  *
- * @private
- * @param {string} string The string to inspect.
- * @returns {number} Returns the string size.
+ * This keeps undefined comparator entries from triggering sorting work.
  */
-function stringSize(string) {
-  return hasUnicode(string)
-    ? unicodeSize(string)
-    : asciiSize(string);
+function activeSortingEntries(sortingFunc = {}, sortingOrder) {
+    const entries = [];
+    const add = (prop) => {
+        const cmp = sortingFunc[prop];
+        if (typeof cmp === 'function' && !entries.some(([active]) => isSameColumnProp(active, prop))) {
+            entries.push([prop, cmp]);
+        }
+    };
+    sortingOrder === null || sortingOrder === void 0 ? void 0 : sortingOrder.forEach(add);
+    Object.keys(sortingFunc).forEach(add);
+    return entries;
 }
-
-/** `Object#toString` result references. */
-var mapTag = '[object Map]',
-    setTag = '[object Set]';
-
 /**
- * Gets the size of `collection` by returning its length for array-like
- * values or the number of own enumerable string keyed properties for objects.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Collection
- * @param {Array|Object|string} collection The collection to inspect.
- * @returns {number} Returns the collection size.
- * @example
- *
- * _.size([1, 2, 3]);
- * // => 3
+ * Reads and normalizes a value for the built-in default comparer.
+ */
+function getDefaultCompareValue(item, prop, column) {
+    const aRaw = column ? getCellRaw(item, column) : item === null || item === void 0 ? void 0 : item[prop];
+    return typeof aRaw === 'number' ? aRaw : aRaw === null || aRaw === void 0 ? void 0 : aRaw.toString().toLowerCase();
+}
+function isEmptyCompareValue(value) {
+    return value === '' || value === null || value === undefined;
+}
+/**
+ * Compares two already-normalized default comparer values.
+ */
+function compareValues(av, bv) {
+    if (av === bv) {
+        return 0;
+    }
+    const aEmpty = isEmptyCompareValue(av);
+    const bEmpty = isEmptyCompareValue(bv);
+    if (aEmpty || bEmpty) {
+        if (aEmpty && bEmpty) {
+            return 0;
+        }
+        return aEmpty ? -1 : 1;
+    }
+    if (av > bv) {
+        return 1;
+    }
+    return -1;
+}
+/**
+ * Sorts indexes by precomputed values for default column comparers.
  *
- * _.size({ 'a': 1, 'b': 2 });
- * // => 2
+ * This avoids repeatedly parsing the same cell value during large default
+ * sorts while preserving normal multi-column ordering.
+ */
+function sortIndexByDefaultComparers(indexes, source, entries, sorting, sortingColumns) {
+    const prepared = entries.map(([prop]) => {
+        const values = [];
+        const column = sortingColumns[prop];
+        for (const index of indexes) {
+            values[index] = getDefaultCompareValue(source[index], prop, column);
+        }
+        return {
+            order: sorting[prop],
+            values,
+        };
+    });
+    return indexes.sort((a, b) => {
+        for (const { order, values } of prepared) {
+            const sorted = compareValues(values[a], values[b]);
+            if (sorted) {
+                return order === 'desc' ? -sorted : sorted;
+            }
+        }
+        return 0;
+    });
+}
+/**
+ * Detects whether the optimized default-comparer path can be used.
  *
- * _.size('pebbles');
- * // => 7
+ * Grouped rows and custom `cellCompare` functions stay on the legacy
+ * comparator path to preserve their exact behavior.
  */
-function size(collection) {
-  if (collection == null) {
-    return 0;
-  }
-  if (isArrayLike(collection)) {
-    return isString(collection) ? stringSize(collection) : collection.length;
-  }
-  var tag = getTag(collection);
-  if (tag == mapTag || tag == setTag) {
-    return collection.size;
-  }
-  return baseKeys(collection).length;
+function canUseDefaultCompareFastPath(entries, indexes, source, sorting, sortingColumns) {
+    return !indexes.some(index => isGrouping(source[index])) && !!sorting && !!sortingColumns && entries.every(([prop]) => {
+        const order = sorting[prop];
+        const column = sortingColumns[prop];
+        return !!order && !(column === null || column === void 0 ? void 0 : column.cellCompare);
+    });
 }
-
-function sortIndexByItems(indexes, source, sortingFunc = {}) {
+/**
+ * Group placeholder rows are generated for their grouping column. If sorting is
+ * requested for another column, the grouped source must be unwrapped first.
+ */
+function hasGroupingRowsForOtherSorting(entries, indexes, source) {
+    return indexes.some(index => {
+        const item = source[index];
+        return isGrouping(item) && !entries.some(([prop]) => isSameColumnProp(item[GROUP_COLUMN_PROP], prop));
+    });
+}
+/**
+ * Sorts row indexes against a source collection.
+ *
+ * @param indexes - Current proxy row indexes to sort.
+ * @param source - Full source collection addressed by the indexes.
+ * @param sortingFunc - Comparator functions by column property.
+ * @param sorting - Active sorting order by column property.
+ * @param sortingColumns - Column metadata by property for default-comparer optimization.
+ * @param sortingOrder - Active sorting priority in click/config insertion order.
+ * @returns Sorted proxy indexes. With no sorting function keys, returns source-order indexes.
+ */
+function sortIndexByItems(indexes, source, sortingFunc = {}, sorting, sortingColumns, sortingOrder) {
+    const hasSortingKeys = Object.keys(sortingFunc).length > 0;
+    const sortingEntries = activeSortingEntries(sortingFunc, sortingOrder);
     // if no sorting - return unsorted indexes
-    if (Object.entries(sortingFunc).length === 0) {
+    if (sortingEntries.length === 0) {
         // Unsorted indexes
-        return [...Array(indexes.length).keys()];
+        return hasSortingKeys ? indexes : [...new Array(indexes.length).keys()];
+    }
+    if (hasGroupingRowsForOtherSorting(sortingEntries, indexes, source)) {
+        return indexes;
+    }
+    if (canUseDefaultCompareFastPath(sortingEntries, indexes, source, sorting, sortingColumns)) {
+        return sortIndexByDefaultComparers(indexes, source, sortingEntries, sorting, sortingColumns);
     }
     //
     /**
@@ -15929,15 +16072,15 @@ function sortIndexByItems(indexes, source, sortingFunc = {}) {
     return indexes.sort((a, b) => {
         const itemA = source[a];
         const itemB = source[b];
-        for (const [prop, cmp] of Object.entries(sortingFunc)) {
+        for (const [prop, cmp] of sortingEntries) {
             if (isGrouping(itemA)) {
-                if (itemA['__rvgr-prop'] !== prop) {
-                    return 0;
+                if (!isSameColumnProp(itemA[GROUP_COLUMN_PROP], prop)) {
+                    return a - b;
                 }
             }
             if (isGrouping(itemB)) {
-                if (itemB['__rvgr-prop'] !== prop) {
-                    return 0;
+                if (!isSameColumnProp(itemB[GROUP_COLUMN_PROP], prop)) {
+                    return a - b;
                 }
             }
             /**
@@ -15957,13 +16100,7 @@ function defaultCellCompare(prop, a, b) {
     const bRaw = this.column ? getCellRaw(b, this.column) : b === null || b === void 0 ? void 0 : b[prop];
     const av = typeof aRaw === 'number' ? aRaw : aRaw === null || aRaw === void 0 ? void 0 : aRaw.toString().toLowerCase();
     const bv = typeof bRaw === 'number' ? bRaw : bRaw === null || bRaw === void 0 ? void 0 : bRaw.toString().toLowerCase();
-    if (av === bv) {
-        return 0;
-    }
-    if (av > bv) {
-        return 1;
-    }
-    return -1;
+    return compareValues(av, bv);
 }
 function descCellCompare(cmp) {
     return (prop, a, b) => {
@@ -15992,11 +16129,32 @@ function getComparer(column, order) {
     return undefined;
 }
 
+/**
+ * Renders sorting direction and optional additive sorting rank.
+ */
 const SortingSign = ({ column }) => {
     var _a;
-    return hAsync("i", { class: (_a = column === null || column === void 0 ? void 0 : column.order) !== null && _a !== void 0 ? _a : 'sort-off' });
+    const indicatorAttrs = { class: 'sort-indicator' };
+    const iconAttrs = { class: (_a = column === null || column === void 0 ? void 0 : column.order) !== null && _a !== void 0 ? _a : 'sort-off' };
+    const orderIndexAttrs = { class: 'sort-order-index' };
+    return (hAsync("span", Object.assign({}, indicatorAttrs), hAsync("i", Object.assign({}, iconAttrs)), (column === null || column === void 0 ? void 0 : column.sortIndex) ? (hAsync("sup", Object.assign({}, orderIndexAttrs), column.sortIndex)) : null));
 };
 
+function getSortableRowIndexes(indexes, source) {
+    return indexes.filter(index => !isGrouping(source[index]));
+}
+function mergeSortedRowsWithGroups(indexes, source, sortedRows) {
+    if (sortedRows.length === indexes.length) {
+        return sortedRows;
+    }
+    let rowIndex = 0;
+    return indexes.map(index => {
+        if (isGrouping(source[index])) {
+            return index;
+        }
+        return sortedRows[rowIndex++];
+    });
+}
 /**
  * Lifecycle
  * 1. @event `beforesorting` - Triggered when sorting just starts. Nothing has happened yet. This can be triggered from a column or from the source. If the type is from rows, the column will be undefined.
@@ -16011,54 +16169,37 @@ class SortingPlugin extends BasePlugin {
         super(revogrid, providers);
         this.revogrid = revogrid;
         /**
-         * Delayed sorting promise
+         * Delayed sorting promise registered in the grid render job queue.
          */
         this.sortingPromise = null;
         /**
-         * We need to sort only so often
+         * Debounced sorting entry point.
+         *
+         * Sorting can be requested by column changes, source changes, and header
+         * clicks in quick succession, so the actual sort is delayed and coalesced.
          */
-        this.postponeSort = debounce$1((order, comparison, ignoreViewportUpdate) => this.runSorting(order, comparison, ignoreViewportUpdate), 50);
-        const setConfig = (cfg) => {
-            var _a;
-            if (cfg) {
-                const sortingFunc = {};
-                const order = {};
-                (_a = cfg.columns) === null || _a === void 0 ? void 0 : _a.forEach(col => {
-                    sortingFunc[col.prop] = getComparer(col, col.order);
-                    order[col.prop] = col.order;
-                });
-                if (cfg.additive) {
-                    this.sorting = Object.assign(Object.assign({}, this.sorting), order);
-                    this.sortingFunc = Object.assign(Object.assign({}, this.sortingFunc), sortingFunc);
-                }
-                else {
-                    // // set sorting
-                    this.sorting = order;
-                    this.sortingFunc = sortingFunc;
-                }
-            }
-        };
-        setConfig(config);
+        this.postponeSort = debounce$1((order, comparison, sortingColumns, sortingOrder, ignoreViewportUpdate) => this.runSorting(order, comparison, sortingColumns, sortingOrder, ignoreViewportUpdate), 50);
+        this.applySortingConfig(config);
         this.addEventListener('sortingconfigchanged', ({ detail }) => {
             config = detail;
-            setConfig(detail);
-            this.startSorting(this.sorting, this.sortingFunc);
+            this.applySortingConfig(detail);
+            this.startSorting(this.sorting, this.sortingFunc, this.sortingColumns, this.sortingOrder);
         });
         this.addEventListener('beforeheaderrender', ({ detail, }) => {
             var _a;
             const { data: column } = detail;
             if (column.sortable) {
-                detail.data = Object.assign(Object.assign({}, column), { order: (_a = this.sorting) === null || _a === void 0 ? void 0 : _a[column.prop] });
+                detail.data = Object.assign(Object.assign({}, column), { order: (_a = this.sorting) === null || _a === void 0 ? void 0 : _a[column.prop], sortIndex: getSortingIndex(this.sorting, column.prop, this.sortingOrder) });
             }
         });
         this.addEventListener('beforeanysource', ({ detail: { type }, }) => {
             // if sorting was provided - sort data
-            if (!!this.sorting && this.sortingFunc) {
+            if (hasActiveSorting(this.sorting) && this.sortingFunc) {
                 const event = this.emit('beforesourcesortingapply', { type, sorting: this.sorting });
                 if (event.defaultPrevented) {
                     return;
                 }
-                this.startSorting(this.sorting, this.sortingFunc);
+                this.startSorting(this.sorting, this.sortingFunc, this.sortingColumns, this.sortingOrder);
             }
         });
         this.addEventListener('aftercolumnsset', ({ detail: { order }, }) => {
@@ -16068,13 +16209,24 @@ class SortingPlugin extends BasePlugin {
             }
             const columns = this.providers.column.getColumns();
             const sortingFunc = {};
+            const sortingColumns = {};
+            const sortingOrder = [];
+            const sorting = {};
             for (let prop in order) {
-                const cmp = getComparer(getColumnByProp(columns, prop), order[prop]);
-                sortingFunc[prop] = cmp;
+                if (order[prop]) {
+                    const column = getColumnByProp(columns, prop);
+                    const cmp = getComparer(column, order[prop]);
+                    sorting[prop] = order[prop];
+                    sortingFunc[prop] = cmp;
+                    sortingColumns[prop] = column;
+                    sortingOrder.push(prop);
+                }
             }
             // set sorting
-            this.sorting = order;
-            this.sortingFunc = order && sortingFunc;
+            this.sorting = hasActiveSorting(sorting) ? sorting : undefined;
+            this.sortingFunc = this.sorting ? sortingFunc : undefined;
+            this.sortingColumns = this.sorting ? sortingColumns : undefined;
+            this.sortingOrder = this.sorting ? sortingOrder : undefined;
         });
         this.addEventListener('beforeheaderclick', (e) => {
             var _a, _b, _c, _d;
@@ -16088,23 +16240,89 @@ class SortingPlugin extends BasePlugin {
         });
     }
     /**
-     * Entry point for sorting, waits for all delays, registers jobs
+     * Creates mutable sorting maps from current state when additive sorting is requested.
+     */
+    createSortingState(additive) {
+        var _a;
+        return {
+            sorting: additive ? Object.assign({}, this.sorting) : {},
+            sortingFunc: additive ? Object.assign({}, this.sortingFunc) : {},
+            sortingColumns: additive ? Object.assign({}, this.sortingColumns) : {},
+            sortingOrder: additive ? [...((_a = this.sortingOrder) !== null && _a !== void 0 ? _a : [])] : [],
+        };
+    }
+    /**
+     * Stores normalized sorting state, clearing inactive empty maps.
+     */
+    setSortingState({ sorting, sortingFunc, sortingColumns, sortingOrder, }) {
+        this.sorting = hasActiveSorting(sorting) ? sorting : undefined;
+        this.sortingFunc = this.sorting ? sortingFunc : undefined;
+        this.sortingColumns = this.sorting ? sortingColumns : undefined;
+        this.sortingOrder = this.sorting ? sortingOrder : undefined;
+    }
+    /**
+     * Adds or replaces a column in a sorting state.
      */
-    startSorting(order, sortingFunc, ignoreViewportUpdate) {
+    setColumnSorting(state, prop, order, cmp, column) {
+        state.sorting[prop] = order;
+        state.sortingFunc[prop] = cmp;
+        state.sortingColumns[prop] = column;
+        if (!state.sortingOrder.some(sortingProp => String(sortingProp) === String(prop))) {
+            state.sortingOrder.push(prop);
+        }
+    }
+    /**
+     * Removes a column from a sorting state.
+     */
+    clearColumnSorting(state, prop) {
+        delete state.sorting[prop];
+        delete state.sortingFunc[prop];
+        delete state.sortingColumns[prop];
+        const index = state.sortingOrder.findIndex(sortingProp => String(sortingProp) === String(prop));
+        if (index >= 0) {
+            state.sortingOrder.splice(index, 1);
+        }
+    }
+    /**
+     * Normalizes external sorting configuration into internal order,
+     * comparator, and column metadata maps.
+     */
+    applySortingConfig(cfg) {
+        var _a;
+        if (!cfg) {
+            return;
+        }
+        const state = this.createSortingState(cfg.additive);
+        (_a = cfg.columns) === null || _a === void 0 ? void 0 : _a.forEach(col => {
+            if (col.order) {
+                this.setColumnSorting(state, col.prop, col.order, getComparer(col, col.order), col);
+                return;
+            }
+            this.clearColumnSorting(state, col.prop);
+        });
+        this.setSortingState(state);
+    }
+    startSorting(order, sortingFunc, sortingColumns, sortingOrder, ignoreViewportUpdate) {
         if (!this.sortingPromise) {
             // add job before render
             this.revogrid.jobsBeforeRender.push(new Promise(resolve => {
                 this.sortingPromise = resolve;
             }));
         }
-        this.postponeSort(order, sortingFunc, ignoreViewportUpdate);
+        if (typeof sortingColumns === 'boolean') {
+            this.postponeSort(order, sortingFunc, undefined, undefined, sortingColumns);
+            return;
+        }
+        this.postponeSort(order, sortingFunc, sortingColumns, sortingOrder, ignoreViewportUpdate);
     }
     /**
-     * Apply sorting to data on header click
-     * If additive - add to existing sorting, multiple columns can be sorted
+     * Applies sorting requested by a sortable header click.
+     *
+     * @param column - Column that initiated sorting.
+     * @param additive - If true, add/remove this column from the current multi-sort state.
      */
     headerclick(column, additive) {
-        var _a, _b, _c;
+        var _a;
         const columnProp = column.prop;
         let order = getNextOrder((_a = this.sorting) === null || _a === void 0 ? void 0 : _a[columnProp]);
         const beforeEvent = this.emit('beforesorting', { column, order, additive });
@@ -16122,52 +16340,59 @@ class SortingPlugin extends BasePlugin {
             return;
         }
         const cmp = getComparer(beforeApplyEvent.detail.column, beforeApplyEvent.detail.order);
-        if (beforeApplyEvent.detail.additive && this.sorting) {
-            const sorting = {};
-            const sortingFunc = {};
-            if (columnProp in sorting && size(sorting) > 1 && order === undefined) {
-                delete sorting[columnProp];
-                delete sortingFunc[columnProp];
-            }
-            else {
-                sorting[columnProp] = order;
-                sortingFunc[columnProp] = cmp;
-            }
-            this.sorting = Object.assign(Object.assign({}, this.sorting), sorting);
-            // extend sorting function with new sorting for multiple columns sorting
-            this.sortingFunc = Object.assign(Object.assign({}, this.sortingFunc), sortingFunc);
+        this.applyHeaderSorting(beforeApplyEvent.detail.column, beforeApplyEvent.detail.additive, order, cmp);
+        this.startSorting(this.sorting, this.sortingFunc, this.sortingColumns, this.sortingOrder);
+    }
+    /**
+     * Applies sorting state produced by a header click.
+     */
+    applyHeaderSorting(column, additive, order, cmp) {
+        if (!additive) {
+            this.setSortingState(order ? {
+                sorting: { [column.prop]: order },
+                sortingFunc: { [column.prop]: cmp },
+                sortingColumns: { [column.prop]: column },
+                sortingOrder: [column.prop],
+            } : this.createSortingState());
+            return;
+        }
+        const state = this.createSortingState(true);
+        if (order) {
+            this.setColumnSorting(state, column.prop, order, cmp, column);
         }
         else {
-            if (order) {
-                // reset sorting
-                this.sorting = { [columnProp]: order };
-                this.sortingFunc = { [columnProp]: cmp };
-            }
-            else {
-                (_b = this.sorting) === null || _b === void 0 ? true : delete _b[columnProp];
-                (_c = this.sortingFunc) === null || _c === void 0 ? true : delete _c[columnProp];
-            }
+            this.clearColumnSorting(state, column.prop);
         }
-        this.startSorting(this.sorting, this.sortingFunc);
+        this.setSortingState(state);
     }
-    runSorting(order, comparison, ignoreViewportUpdate) {
-        var _a;
-        this.sort(order, comparison, undefined, ignoreViewportUpdate);
-        (_a = this.sortingPromise) === null || _a === void 0 ? void 0 : _a.call(this);
+    runSorting(order, comparison, sortingColumns, sortingOrder, ignoreViewportUpdate) {
+        var _a, _b;
+        if (typeof sortingColumns === 'boolean') {
+            this.sort(order, comparison, undefined, undefined, undefined, sortingColumns);
+            (_a = this.sortingPromise) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.sortingPromise = null;
+            return;
+        }
+        this.sort(order, comparison, sortingColumns, sortingOrder, undefined, ignoreViewportUpdate);
+        (_b = this.sortingPromise) === null || _b === void 0 ? void 0 : _b.call(this);
         this.sortingPromise = null;
     }
-    /**
-     * Sort items by sorting function
-     * @requires proxyItems applied to row store
-     * @requires source applied to row store
-     *
-     * @param sorting - per column sorting
-     * @param data - this.stores['rgRow'].store.get('source')
-     */
-    sort(sorting, sortingFunc, types = rowTypes, ignoreViewportUpdate = false) {
+    sort(sorting, sortingFunc, sortingColumns, sortingOrder, types = rowTypes, ignoreViewportUpdate = false) {
+        let activeSortingColumns;
+        let activeSortingOrder;
+        let activeTypes = types;
+        let activeIgnoreViewportUpdate = ignoreViewportUpdate;
+        if (Array.isArray(sortingColumns)) {
+            activeTypes = sortingColumns;
+            activeIgnoreViewportUpdate = typeof sortingOrder === 'boolean' ? sortingOrder : false;
+        }
+        else {
+            activeSortingColumns = sortingColumns;
+            activeSortingOrder = Array.isArray(sortingOrder) ? sortingOrder : undefined;
+        }
         // if no sorting - reset
         if (!Object.keys(sorting || {}).length) {
-            for (let type of types) {
+            for (let type of activeTypes) {
                 const storeService = this.providers.data.stores[type];
                 // row data
                 const source = storeService.store.get('source');
@@ -16176,26 +16401,27 @@ class SortingPlugin extends BasePlugin {
                 // row indexes
                 const newItemsOrder = Array.from({ length: source.length }, (_, i) => i); // recover indexes range(0, source.length)
                 this.providers.dimension.updateSizesPositionByNewDataIndexes(type, newItemsOrder, proxyItems);
-                storeService.setData({ proxyItems: newItemsOrder, source: [...source], });
+                storeService.setData({ proxyItems: newItemsOrder });
             }
         }
         else {
-            for (let type of types) {
+            for (let type of activeTypes) {
                 const storeService = this.providers.data.stores[type];
                 // row data
                 const source = storeService.store.get('source');
                 // row indexes
                 const proxyItems = storeService.store.get('proxyItems');
-                const newItemsOrder = sortIndexByItems([...proxyItems], source, sortingFunc);
+                const sortItems = getSortableRowIndexes(proxyItems, source);
+                const sortedItems = sortIndexByItems([...sortItems], source, sortingFunc, sorting, activeSortingColumns, activeSortingOrder);
+                const newItemsOrder = mergeSortedRowsWithGroups(proxyItems, source, sortedItems);
                 // take row indexes before trim applied and proxy items
                 const prevItems = storeService.store.get('items');
                 storeService.setData({
                     proxyItems: newItemsOrder,
-                    source: [...source],
                 });
                 // take currently visible row indexes
                 const newItems = storeService.store.get('items');
-                if (!ignoreViewportUpdate) {
+                if (!activeIgnoreViewportUpdate) {
                     this.providers.dimension
                         .updateSizesPositionByNewDataIndexes(type, newItems, prevItems);
                 }
@@ -16765,6 +16991,18 @@ const expandSvgIconVNode = (expanded = false) => {
     return (hAsync("svg", { "aria-hidden": "true", style: { transform: `rotate(${!expanded ? -90 : 0}deg)` }, focusable: "false", viewBox: "0 0 448 512" }, hAsync("path", { fill: "currentColor", d: "M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" })));
 };
 
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 class GroupingRowPlugin extends BasePlugin {
     getStore(type = GROUPING_ROW_TYPE) {
         return this.providers.data.stores[type].store;
@@ -16848,6 +17086,18 @@ class GroupingRowPlugin extends BasePlugin {
         const sortingPlugin = this.providers.plugins.getByClass(SortingPlugin);
         return !!(sortingPlugin === null || sortingPlugin === void 0 ? void 0 : sortingPlugin.sortingPromise);
     }
+    /**
+     * Returns grouping options for regrouping that must preserve current UI state.
+     *
+     * `expandedAll` and config `prevExpanded` are initial/config instructions.
+     * Reusing them after sorting would reopen groups the user collapsed before
+     * sorting instead of using the current grouped source state.
+     */
+    getCurrentExpandedOptions() {
+        var _a;
+        const _b = (_a = this.options) !== null && _a !== void 0 ? _a : {}, options = __rest(_b, ["expandedAll", "prevExpanded"]);
+        return options;
+    }
     /**
      * Starts global source update with group clearing and applying new one
      * Initiated when need to reapply grouping
@@ -16950,7 +17200,7 @@ class GroupingRowPlugin extends BasePlugin {
             if (!((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.length)) {
                 return;
             }
-            this.doSourceUpdate(Object.assign({}, this.options));
+            this.doSourceUpdate(this.getCurrentExpandedOptions());
         });
         /**
          * Apply logic for focus inside of grouping
@@ -17157,7 +17407,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 = getSourceItem(store, virtualIndex);
             if (item) {
@@ -17412,13 +17663,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 SelectionStore();
-        // build cross-linking type to position
-        this.storesByType[type] = x;
-        this.storesXToType[x] = type;
         return this.columnStores[x];
     }
     registerRow(y, type) {
@@ -17560,7 +17809,10 @@ class SelectionStoreConnector {
         const nextItem = 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':
@@ -17636,6 +17888,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();
+        }
+    }
 }
 
 /**
@@ -18235,7 +18512,7 @@ class ColumnMovePlugin extends BasePlugin {
         const cols = this.getDimension(data.pin || 'rgCol');
         const gridRect = this.revogrid.getBoundingClientRect();
         const elRect = dataEl.getBoundingClientRect();
-        const startItem = getItemByPosition(cols, getLeftRelative(event.x, gridRect.left, elRect.left - gridRect.left));
+        const startItem = getItemByPosition(cols, getLeftRelative(event.x, gridRect.left, elRect.left - gridRect.left) + (cols.renderOffset || 0));
         this.staticDragData = {
             startPos: event.x,
             startItem,
@@ -18260,13 +18537,13 @@ class ColumnMovePlugin extends BasePlugin {
         const start = this.staticDragData.startPos;
         if (Math.abs(start - e.x) > 10) {
             const x = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);
-            const rgCol = getItemByPosition(this.staticDragData.cols, x);
+            const rgCol = getItemByPosition(this.staticDragData.cols, x + (this.staticDragData.cols.renderOffset || 0));
             this.orderUi.autoscroll(x, dragData.elRect.width);
             // prevent position change if out of bounds
             if (rgCol.itemIndex >= this.staticDragData.cols.count) {
                 return;
             }
-            this.orderUi.showHandler(rgCol.end + dragData.scrollOffset, dragData.gridRect.width);
+            this.orderUi.showHandler(rgCol.end - (this.staticDragData.cols.renderOffset || 0) + dragData.scrollOffset, dragData.gridRect.width);
         }
     }
     move(e) {
@@ -18284,7 +18561,7 @@ class ColumnMovePlugin extends BasePlugin {
             if (relativePos < 0) {
                 relativePos = 0;
             }
-            const newPosition = getItemByPosition(this.staticDragData.cols, relativePos);
+            const newPosition = getItemByPosition(this.staticDragData.cols, relativePos + (this.staticDragData.cols.renderOffset || 0));
             const store = this.providers.column.stores[this.dragData.type].store;
             const source = store.get('source');
             const newItems = [...store.get('items')];
@@ -19232,6 +19509,7 @@ class RevoGridComponent {
         if (!this.dimensionProvider || !this.columnProvider) {
             return;
         }
+        const focusToRestore = init ? undefined : this.getColumnFocusRestore();
         const beforeGatherEvent = this.beforecolumnsgather.emit({
             columns: [...newVal],
         });
@@ -19249,14 +19527,76 @@ class RevoGridComponent {
             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 : 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;
@@ -19543,7 +19883,7 @@ class RevoGridComponent {
         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);
@@ -19569,6 +19909,7 @@ class RevoGridComponent {
         return Promise.all(this.jobsBeforeRender);
     }
     componentDidRender() {
+        this.restoreColumnFocusAfterRender();
         this.aftergridrender.emit();
     }
     render() {
@@ -20060,11 +20401,13 @@ class RevogrData {
         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 = getSourceItem(this.dataStore, rgRow.itemIndex);
             // #region Grouping
             if (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(hAsync(GroupingRowRenderer, Object.assign({}, gmodel)));
@@ -20087,7 +20430,7 @@ class RevogrData {
                     [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,
                     },
                 };
@@ -20115,7 +20458,7 @@ class RevogrData {
             if (this.rowHighlightPlugin.isRowFocused(rgRow.itemIndex)) {
                 rowClass += ` ${ROW_FOCUSED_CLASS}`;
             }
-            const row = (hAsync(RowRenderer, { index: rgRow.itemIndex, rowClass: rowClass, size: rgRow.size, start: rgRow.start, groupingLevel: groupDepth || undefined }, cells));
+            const row = (hAsync(RowRenderer, { index: rgRow.itemIndex, rowClass: rowClass, size: rgRow.size, start: rgRow.start - rowRenderOffset, groupingLevel: groupDepth || undefined }, cells));
             this.beforerowrender.emit({
                 node: row,
                 item: rgRow,
@@ -20434,7 +20777,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) {
@@ -20479,7 +20822,7 @@ const HeaderGroupRenderer = (p) => {
             [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,
@@ -20487,7 +20830,7 @@ const HeaderGroupRenderer = (p) => {
     return (hAsync(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}`;
 
 class RevogrHeaderComponent {
     constructor(hostRef) {
@@ -20543,6 +20886,7 @@ class RevogrHeaderComponent {
     }
     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 = {
@@ -20551,6 +20895,7 @@ class RevogrHeaderComponent {
                 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),
@@ -20586,37 +20931,71 @@ class RevogrHeaderComponent {
         ];
     }
     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 = getItemByIndex(this.dimensionCol.state, groupStartIndex).start;
-        const groupEnd = 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 hAsync(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: getItemByIndex(this.dimensionCol.state, range.startIndex).start,
+            end: getItemByIndex(this.dimensionCol.state, range.endIndex).end,
+        };
+    }
     getVisibleGroupRange() {
         const visibleColumns = this.viewportCol.get('items');
         if (!visibleColumns.length) {
@@ -20793,10 +21172,11 @@ const NO_COORDINATE = -1;
  * return full size
  */
 function getContentSize(contentSize, clientSize, virtualSize = 0) {
-    if (virtualSize > contentSize) {
-        return 0;
-    }
-    return contentSize + (virtualSize ? clientSize - virtualSize : 0);
+    return getScrollDimension({
+        contentSize,
+        clientSize,
+        virtualSize,
+    }).physicalContentSize;
 }
 class LocalScrollService {
     constructor(cfg) {
@@ -20810,14 +21190,20 @@ class LocalScrollService {
             rgRow: NO_COORDINATE,
             rgCol: NO_COORDINATE,
         };
+        this.previousLogicalScroll = {
+            rgRow: 0,
+            rgCol: 0,
+        };
         this.params = {
             rgRow: Object.assign({}, initialParams),
             rgCol: Object.assign({}, initialParams),
         };
     }
     setParams(params, dimension) {
-        const virtualContentSize = getContentSize(params.contentSize, params.clientSize, params.virtualSize);
-        this.params[dimension] = Object.assign(Object.assign({}, params), { maxSize: virtualContentSize - params.clientSize, virtualContentSize });
+        const scrollDimension = getScrollDimension(params);
+        const virtualContentSize = scrollDimension.physicalContentSize;
+        this.params[dimension] = Object.assign(Object.assign({}, params), { maxSize: virtualContentSize - params.clientSize, virtualContentSize,
+            scrollDimension });
     }
     // apply scroll values after scroll done
     async setScroll(e) {
@@ -20837,16 +21223,27 @@ class LocalScrollService {
             await frameAnimation;
             const params = this.getParams(e.dimension);
             e.coordinate = Math.ceil(e.coordinate);
-            this.previousScroll[e.dimension] = this.wrapCoordinate(e.coordinate, params);
+            this.previousLogicalScroll[e.dimension] = this.wrapLogicalCoordinate(e.coordinate, params);
+            const physicalCoordinate = this.toPhysicalCoordinate(e.coordinate, params);
+            this.previousScroll[e.dimension] = this.wrapPhysicalCoordinate(physicalCoordinate, params);
             this.preventArtificialScroll[e.dimension] = null;
-            this.cfg.applyScroll(Object.assign(Object.assign({}, e), { coordinate: params.virtualSize
-                    ? this.convert(e.coordinate, params, false)
-                    : e.coordinate }));
+            this.cfg.applyScroll(Object.assign(Object.assign({}, e), { coordinate: physicalCoordinate }));
         }
         catch (id) {
             window.cancelAnimationFrame(id);
         }
     }
+    async setScrollByDelta(e, currentPhysicalCoordinate) {
+        var _a;
+        const params = this.getParams(e.dimension);
+        const baseCoordinate = this.previousScroll[e.dimension] === NO_COORDINATE
+            ? this.toLogicalCoordinate(currentPhysicalCoordinate, params)
+            : this.previousLogicalScroll[e.dimension];
+        const coordinate = this.wrapLogicalCoordinate(baseCoordinate + ((_a = e.delta) !== null && _a !== void 0 ? _a : 0), params);
+        const nextEvent = Object.assign(Object.assign({}, e), { coordinate });
+        await this.setScroll(nextEvent);
+        return nextEvent;
+    }
     /**
      * On scroll event started
      */
@@ -20859,21 +21256,21 @@ class LocalScrollService {
             return;
         }
         const param = this.getParams(dimension);
+        const logicalCoordinate = this.toLogicalScrollCoordinate(coordinate, dimension, param, delta);
         // let component know about scroll event started
         this.cfg.runScroll({
             dimension: dimension,
-            coordinate: param.virtualSize
-                ? this.convert(coordinate, param)
-                : coordinate,
+            coordinate: logicalCoordinate,
             delta,
             outside,
         });
+        this.previousLogicalScroll[dimension] = logicalCoordinate;
     }
     getParams(dimension) {
         return this.params[dimension];
     }
     // check if scroll outside of region to avoid looping
-    wrapCoordinate(c, param) {
+    wrapPhysicalCoordinate(c, param) {
         if (c < 0) {
             return NO_COORDINATE;
         }
@@ -20882,22 +21279,39 @@ class LocalScrollService {
         }
         return c;
     }
+    wrapLogicalCoordinate(c, param) {
+        var _a, _b;
+        if (c < 0) {
+            return 0;
+        }
+        return Math.min(c, (_b = (_a = param.scrollDimension) === null || _a === void 0 ? void 0 : _a.logicalScrollSize) !== null && _b !== void 0 ? _b : c);
+    }
     // prevent already started scroll, performance optimization
     cancelScroll(dimension) {
         var _a, _b;
         (_b = (_a = this.preventArtificialScroll)[dimension]) === null || _b === void 0 ? void 0 : _b.call(_a);
         this.preventArtificialScroll[dimension] = null;
     }
-    /* convert virtual to real and back, scale range */
-    convert(pos, param, toReal = true) {
-        var _a;
-        const minRange = param.clientSize;
-        const from = [0, ((_a = param.virtualContentSize) !== null && _a !== void 0 ? _a : minRange) - minRange];
-        const to = [0, param.contentSize - param.virtualSize];
-        if (toReal) {
-            return scaleValue(pos, from, to);
+    toLogicalScrollCoordinate(coordinate, dimension, param, delta) {
+        const scrollDimension = param.scrollDimension;
+        if (!scrollDimension) {
+            return coordinate;
+        }
+        if (typeof delta === 'number' && scrollDimension.isCompressed) {
+            const base = this.previousScroll[dimension] === NO_COORDINATE
+                ? scrollDimension.toLogicalCoordinate(coordinate - delta)
+                : this.previousLogicalScroll[dimension];
+            return scrollDimension.toLogicalCoordinate(scrollDimension.toPhysicalCoordinate(base + delta));
         }
-        return scaleValue(pos, to, from);
+        return scrollDimension.toLogicalCoordinate(coordinate);
+    }
+    toPhysicalCoordinate(coordinate, param) {
+        var _a, _b;
+        return (_b = (_a = param.scrollDimension) === null || _a === void 0 ? void 0 : _a.toPhysicalCoordinate(coordinate)) !== null && _b !== void 0 ? _b : coordinate;
+    }
+    toLogicalCoordinate(coordinate, param) {
+        var _a, _b;
+        return (_b = (_a = param.scrollDimension) === null || _a === void 0 ? void 0 : _a.toLogicalCoordinate(coordinate)) !== null && _b !== void 0 ? _b : coordinate;
     }
 }
 
@@ -21055,15 +21469,9 @@ class RevogrScrollVirtual {
      */
     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;
     }
@@ -21126,7 +21534,7 @@ class RevogrScrollVirtual {
     }
     render() {
         const size = getContentSize(this.realSize, this.dimension === 'rgRow' ? this.element.clientHeight : this.element.clientWidth, this.clientSize);
-        return (hAsync(Host, { key: '57f81ec9deb2395e96b283338c03b9ad44f1e929', onScroll: (e) => this.onScroll(e) }, hAsync("div", { key: '1a8c869adab53b362c351dae8d53664f33c4212c', style: {
+        return (hAsync(Host, { key: '7213817ef941eee4050b714266598ec0c2961ee9', onScroll: (e) => this.onScroll(e) }, hAsync("div", { key: '501da49c63253ab943172494b9dbf5399be56cee', style: {
                 [this.dimension === 'rgRow' ? 'height' : 'width']: `${size}px`,
             } })));
     }
@@ -21235,7 +21643,7 @@ class RevogrViewportScroll {
      * @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) {
@@ -21248,15 +21656,16 @@ class RevogrViewportScroll {
             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;
     }
@@ -21408,7 +21817,10 @@ class RevogrViewportScroll {
         this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
     }
     render() {
-        return (hAsync(Host, { key: 'adc7378dba1794ca2ec263d52b09abefe50bcbfd', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: '7b57a8a0ea44629fefcfe4d2cd77bf0f048d8e06', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, hAsync("div", { key: 'cca3de158bc2a7f0651f578a281819be5698b257', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '1d170147dabe034f2c35481a8e2fedd6de2b6aed', name: HEADER_SLOT })), hAsync("div", { key: 'b6dd29a91bb1f380a83a035dfdb749ca669936f2', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: '9bce27bf8ec4d3b679aa9a34eb6379a8c2d46cac', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, hAsync("slot", { key: 'b44a082c9fbb948fd87bd235b4cd4356fd4a3536', name: CONTENT_SLOT }))), hAsync("div", { key: '28c305ff6bc664f1d1bbb117e8b8565c8d4bb6b2', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: '96312fb7f18198fd1feb9dcc00c79cde74ba9c9f', name: FOOTER_SLOT })))));
+        var _a, _b, _c, _d;
+        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, (_d = (_c = this.horizontalScroll) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 0);
+        return (hAsync(Host, { key: 'a0c47dede9d131dea8c8ca449e8a323f24d9b113', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: '6c960e753ffe522ba4afb1c379264873b6c617f3', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, hAsync("div", { key: '1a6cbcbd3634e84756b54c8150aebd25c824e14a', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: 'e4202c687bc39b4f78f3ed9840e979b032f06af8', name: HEADER_SLOT })), hAsync("div", { key: '651415b5b32e72735065b183317386a34042bb85', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'e65623b78d80957d8676adb019618953ef267ec3', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, hAsync("slot", { key: '5af47b12ef1226587cf774233447b5252d65e836', name: CONTENT_SLOT }))), hAsync("div", { key: 'cbc0fd64fbfb53d3b18e547bbe34e32b7bb9c043', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: 'a8e4bfaef400973121090bac3069eb85469a95f3', name: FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing