@revolist/revogrid 4.22.0 → 4.23.0

package/hydrate/index.mjs

@@ -6798,8 +6798,8 @@ class Clipboard {
             return;
         }
         const data = this.getData(beforeCopy.detail.event);
-        this.copyRegion.emit(data || undefined);
         e.preventDefault();
+        this.copyRegion.emit(data || undefined);
     }
     /**
      * Listen to copy event and emit copy region event
@@ -7644,7 +7644,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);
@@ -8727,11 +8728,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]',
@@ -8786,16 +8787,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);
 
@@ -9136,12 +9137,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]',
@@ -9167,9 +9168,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;
 
 /**
@@ -9519,10 +9520,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]';
@@ -9545,9 +9546,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),
@@ -9557,9 +9558,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;
       }
     }
@@ -10823,9 +10824,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]);
+    }
 }
 
 /**
@@ -11287,6 +11288,26 @@ function isAll(event) {
     return ((event.ctrlKey && event.code === 'KeyA') || // Ctrl + A on Windows
         (event.metaKey && event.code === 'KeyA')); // Cmd + A on Mac
 }
+/**
+ * Returns true when a keyboard event represents a shortcut modifier that
+ * should not start cell editing from printable `event.key` input.
+ *
+ * AltGr is intentionally excluded because many Windows/Linux layouts expose
+ * printable AltGr characters as Ctrl+Alt key events.
+ */
+function isShortcutModifier(event) {
+    var _a;
+    if ((_a = event.getModifierState) === null || _a === void 0 ? void 0 : _a.call(event, 'AltGraph')) {
+        return false;
+    }
+    if (event.ctrlKey &&
+        event.altKey &&
+        !event.metaKey &&
+        event.key.length === 1) {
+        return false;
+    }
+    return event.ctrlKey || event.metaKey;
+}
 
 const LETTER_BLOCK_SIZE$1 = 10;
 const calculateRowHeaderSize = (itemsLength, rowHeaderColumn, minWidth = 50) => {
@@ -11316,21 +11337,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
  */
@@ -11704,6 +11710,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
  */
@@ -11716,20 +11737,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;
                 }
             }
@@ -11819,7 +11838,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 {
@@ -11851,7 +11872,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
@@ -12022,6 +12043,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
@@ -12287,6 +12317,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,
     };
 }
 /**
@@ -12322,21 +12354,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
@@ -12473,11 +12492,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;
     }
@@ -12486,8 +12506,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 };
     }
 }
@@ -13223,8 +13243,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;
@@ -13294,10 +13314,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,
@@ -13328,9 +13350,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();
@@ -13382,7 +13424,7 @@ class KeyboardService {
             return;
         }
         // pressed letter key
-        if (e.key.length === 1) {
+        if (!isShortcutModifier(e) && e.key.length === 1) {
             this.sv.change(e.key);
             return;
         }
@@ -13424,7 +13466,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);
@@ -14666,6 +14709,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
@@ -14803,6 +14927,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) {
@@ -15499,17 +15637,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];
                     }
                 });
             }
@@ -15739,165 +15884,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);
     }
     //
     /**
@@ -15907,15 +16061,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;
                 }
             }
             /**
@@ -15935,13 +16089,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) => {
@@ -15970,11 +16118,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.
@@ -15989,54 +16158,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 }, }) => {
@@ -16046,13 +16198,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;
@@ -16066,23 +16229,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.
+     */
+    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.
      */
-    startSorting(order, sortingFunc, ignoreViewportUpdate) {
+    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 });
@@ -16100,52 +16329,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');
@@ -16154,26 +16390,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);
                 }
@@ -16743,6 +16980,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;
@@ -16826,6 +17075,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
@@ -16928,7 +17189,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
@@ -17135,7 +17396,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) {
@@ -17538,7 +17800,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':
@@ -18158,11 +18423,11 @@ const HeaderCellRenderer = ({ data, props, additionalData }, children) => {
  * Plugin for column manual move
  */
 const COLUMN_CLICK = ON_COLUMN_CLICK;
-const MOVE = 'columndragmousemove';
-const DRAG_END = 'columndragend';
-const BEFORE_DRAG_END = 'beforecolumndragend';
+const COLUMN_DRAG_MOVE_EVENT = 'columndragmousemove';
+const COLUMN_DRAG_END_EVENT = 'columndragend';
+const BEFORE_COLUMN_DRAG_END_EVENT = 'beforecolumndragend';
 // use this event subscription to drop D&D for particular columns
-const DRAG_START = 'columndragstart';
+const COLUMN_DRAG_START_EVENT = 'columndragstart';
 class ColumnMovePlugin extends BasePlugin {
     constructor(revogrid, providers) {
         super(revogrid, providers);
@@ -18192,7 +18457,7 @@ class ColumnMovePlugin extends BasePlugin {
         if (event.defaultPrevented) {
             return;
         }
-        const { defaultPrevented } = dispatch(this.revogrid, DRAG_START, data);
+        const { defaultPrevented } = dispatch(this.revogrid, COLUMN_DRAG_START_EVENT, data);
         // check if allowed to drag particulat column
         if (defaultPrevented) {
             return;
@@ -18213,7 +18478,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,
@@ -18223,7 +18488,7 @@ class ColumnMovePlugin extends BasePlugin {
             gridEl: this.revogrid,
             cols,
         };
-        this.dragData = this.getData(this.staticDragData);
+        this.dragData = this.getData(this.staticDragData, []);
         mousemove.target.addEventListener('mousemove', mousemove.callback);
         this.orderUi.start(event, Object.assign(Object.assign({}, this.dragData), this.staticDragData));
     }
@@ -18231,24 +18496,24 @@ class ColumnMovePlugin extends BasePlugin {
         if (!this.staticDragData) {
             return;
         }
-        const dragData = (this.dragData = this.getData(this.staticDragData));
+        const dragData = (this.dragData = this.getData(this.staticDragData, []));
         if (!dragData) {
             return;
         }
         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) {
-        dispatch(this.revogrid, MOVE, e);
+        dispatch(this.revogrid, COLUMN_DRAG_MOVE_EVENT, e);
         // then do move
         this.moveFunc(e);
     }
@@ -18262,11 +18527,12 @@ 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')];
             // prevent position change if needed
-            const { defaultPrevented: stopDrag } = dispatch(this.revogrid, BEFORE_DRAG_END, Object.assign(Object.assign({}, this.staticDragData), { startPosition: this.staticDragData.startItem, newPosition, newItem: store.get('source')[newItems[this.staticDragData.startItem.itemIndex]] }));
+            const { defaultPrevented: stopDrag } = dispatch(this.revogrid, BEFORE_COLUMN_DRAG_END_EVENT, Object.assign(Object.assign({}, this.staticDragData), { startPosition: this.staticDragData.startItem, newPosition, newItem: source[newItems[this.staticDragData.startItem.itemIndex]] }));
             if (!stopDrag) {
                 const prevItems = [...newItems];
                 // todo: if move item out of group remove item from group
@@ -18275,7 +18541,7 @@ class ColumnMovePlugin extends BasePlugin {
                 store.set('items', newItems);
                 this.providers.dimension.updateSizesPositionByNewDataIndexes(this.dragData.type, newItems, prevItems);
             }
-            dispatch(this.revogrid, DRAG_END, this.dragData);
+            dispatch(this.revogrid, COLUMN_DRAG_END_EVENT, this.getData(this.staticDragData, newItems, source));
         }
         this.clearOrder();
     }
@@ -18295,13 +18561,15 @@ class ColumnMovePlugin extends BasePlugin {
         super.clearSubscriptions();
         this.clearLocalSubscriptions();
     }
-    getData({ gridEl, dataEl, pin, }) {
+    getData({ gridEl, dataEl, pin }, order, source = []) {
         const gridRect = gridEl.getBoundingClientRect();
         const elRect = dataEl.getBoundingClientRect();
         const scrollOffset = elRect.left - gridRect.left;
         return {
+            columns: order.map(index => source[index]).filter(Boolean),
             elRect,
             gridRect,
+            order,
             type: pin || 'rgCol',
             scrollOffset,
         };
@@ -19224,12 +19492,13 @@ class RevoGridComponent {
             return;
         }
         const columns = this.columnProvider.setColumns(beforeApplyEvent.detail);
+        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,
         });
     }
     disableVirtualXChanged(newVal = false, prevVal = false) {
@@ -19518,7 +19787,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);
@@ -20035,11 +20304,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)));
@@ -20062,7 +20333,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,
                     },
                 };
@@ -20090,7 +20361,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,
@@ -20390,126 +20661,8 @@ class RevogrFocus {
     }; }
 }
 
-var defineProperty = (function() {
-  try {
-    var func = getNative(Object, 'defineProperty');
-    func({}, '', {});
-    return func;
-  } catch (e) {}
-}());
-
-/**
- * The base implementation of `assignValue` and `assignMergeValue` without
- * value checks.
- *
- * @private
- * @param {Object} object The object to modify.
- * @param {string} key The key of the property to assign.
- * @param {*} value The value to assign.
- */
-function baseAssignValue(object, key, value) {
-  if (key == '__proto__' && defineProperty) {
-    defineProperty(object, key, {
-      'configurable': true,
-      'enumerable': true,
-      'value': value,
-      'writable': true
-    });
-  } else {
-    object[key] = value;
-  }
-}
-
-/**
- * A specialized version of `baseAggregator` for arrays.
- *
- * @private
- * @param {Array} [array] The array to iterate over.
- * @param {Function} setter The function to set `accumulator` values.
- * @param {Function} iteratee The iteratee to transform keys.
- * @param {Object} accumulator The initial aggregated object.
- * @returns {Function} Returns `accumulator`.
- */
-function arrayAggregator(array, setter, iteratee, accumulator) {
-  var index = -1,
-      length = array == null ? 0 : array.length;
-
-  while (++index < length) {
-    var value = array[index];
-    setter(accumulator, value, iteratee(value), array);
-  }
-  return accumulator;
-}
-
-/**
- * Aggregates elements of `collection` on `accumulator` with keys transformed
- * by `iteratee` and values set by `setter`.
- *
- * @private
- * @param {Array|Object} collection The collection to iterate over.
- * @param {Function} setter The function to set `accumulator` values.
- * @param {Function} iteratee The iteratee to transform keys.
- * @param {Object} accumulator The initial aggregated object.
- * @returns {Function} Returns `accumulator`.
- */
-function baseAggregator(collection, setter, iteratee, accumulator) {
-  baseEach(collection, function(value, key, collection) {
-    setter(accumulator, value, iteratee(value), collection);
-  });
-  return accumulator;
-}
-
-/**
- * Creates a function like `_.groupBy`.
- *
- * @private
- * @param {Function} setter The function to set accumulator values.
- * @param {Function} [initializer] The accumulator object initializer.
- * @returns {Function} Returns the new aggregator function.
- */
-function createAggregator(setter, initializer) {
-  return function(collection, iteratee) {
-    var func = isArray(collection) ? arrayAggregator : baseAggregator,
-        accumulator = {};
-
-    return func(collection, setter, baseIteratee(iteratee), accumulator);
-  };
-}
-
-/**
- * Creates an object composed of keys generated from the results of running
- * each element of `collection` thru `iteratee`. The corresponding value of
- * each key is the last element responsible for generating the key. The
- * iteratee is invoked with one argument: (value).
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Collection
- * @param {Array|Object} collection The collection to iterate over.
- * @param {Function} [iteratee=_.identity] The iteratee to transform keys.
- * @returns {Object} Returns the composed aggregate object.
- * @example
- *
- * var array = [
- *   { 'dir': 'left', 'code': 97 },
- *   { 'dir': 'right', 'code': 100 }
- * ];
- *
- * _.keyBy(array, function(o) {
- *   return String.fromCharCode(o.code);
- * });
- * // => { 'a': { 'dir': 'left', 'code': 97 }, 'd': { 'dir': 'right', 'code': 100 } }
- *
- * _.keyBy(array, 'dir');
- * // => { 'left': { 'dir': 'left', 'code': 97 }, 'right': { 'dir': 'right', 'code': 100 } }
- */
-var keyBy = createAggregator(function(result, value, key) {
-  baseAssignValue(result, key, value);
-});
-
 const HeaderRenderer = (p) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     const cellClass = {
         [HEADER_CLASS]: true,
         [HEADER_SORTABLE_CLASS]: !!((_a = p.data) === null || _a === void 0 ? void 0 : _a.sortable),
@@ -20518,15 +20671,16 @@ const HeaderRenderer = (p) => {
         cellClass[p.data.order] = true;
     }
     const dataProps = {
+        key: String((_d = (_c = p.data) === null || _c === void 0 ? void 0 : _c.prop) !== null && _d !== void 0 ? _d : p.column.itemIndex),
         [DATA_COL]: p.column.itemIndex,
         canResize: p.canResize,
-        minWidth: ((_c = p.data) === null || _c === void 0 ? void 0 : _c.minSize) || MIN_COL_SIZE,
-        maxWidth: (_d = p.data) === null || _d === void 0 ? void 0 : _d.maxSize,
+        minWidth: ((_e = p.data) === null || _e === void 0 ? void 0 : _e.minSize) || MIN_COL_SIZE,
+        maxWidth: (_f = p.data) === null || _f === void 0 ? void 0 : _f.maxSize,
         active: p.active || ['r'],
         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) {
@@ -20557,11 +20711,12 @@ const HeaderRenderer = (p) => {
             }
         }
     }
-    return (hAsync(HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData }, hAsync(SortingSign, { column: p.data }), p.canFilter && ((_e = p.data) === null || _e === void 0 ? void 0 : _e.filter) !== false ? (hAsync(FilterButton, { column: p.data })) : ('')));
+    return (hAsync(HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData }, hAsync(SortingSign, { column: p.data }), p.canFilter && ((_g = p.data) === null || _g === void 0 ? void 0 : _g.filter) !== false ? (hAsync(FilterButton, { column: p.data })) : ('')));
 };
 
 const HeaderGroupRenderer = (p) => {
     const groupProps = {
+        key: `${p.group.name}-${p.group.indexes.join('-')}`,
         canResize: p.canResize,
         minWidth: p.group.indexes.length * MIN_COL_SIZE,
         maxWidth: 0,
@@ -20570,7 +20725,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,
@@ -20578,7 +20733,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) {
@@ -20611,13 +20766,10 @@ class RevogrHeaderComponent {
     }
     onResizeGroup(changedX, startIndex, endIndex) {
         const sizes = {};
-        const cols = keyBy(this.viewportCol.get('items'), 'itemIndex');
         const change = changedX / (endIndex - startIndex + 1);
         for (let i = startIndex; i <= endIndex; i++) {
-            const item = cols[i];
-            if (item) {
-                sizes[i] = item.size + change;
-            }
+            const item = getItemByIndex(this.dimensionCol.state, i);
+            sizes[i] = item.end - item.start + change;
         }
         this.headerresize.emit(sizes);
     }
@@ -20631,12 +20783,13 @@ class RevogrHeaderComponent {
         const { cells } = this.renderHeaderColumns(cols, range);
         const groupRow = this.renderGroupingColumns();
         return [
-            hAsync("div", { key: 'a8d57270f4758b454fb4900808453e0c4663c91c', class: "group-rgRow" }, groupRow),
-            hAsync("div", { key: '41a270ff6bde9943a81d9c46482f2a40312afb50', class: `${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}` }, cells),
+            hAsync("div", { key: '3cc466db6bc4df0cd61c47a22c3a0473318e5dd8', class: "group-rgRow" }, groupRow),
+            hAsync("div", { key: '9742a3fa4d4b75073aef5544806f42386ebffdea', class: `${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}` }, cells),
         ];
     }
     renderHeaderColumns(cols, range) {
-        const cells = [];
+        const columnsToRender = [];
+        const renderOffset = this.viewportCol.get('renderOffset') || 0;
         for (let rgCol of cols) {
             const colData = this.colData[rgCol.itemIndex];
             const props = {
@@ -20645,6 +20798,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),
@@ -20653,45 +20807,106 @@ class RevogrHeaderComponent {
             };
             const event = this.beforeHeaderRender.emit(props);
             if (!event.defaultPrevented) {
-                cells.push(hAsync(HeaderRenderer, Object.assign({}, event.detail)));
+                columnsToRender.push(event.detail);
             }
         }
+        const duplicateProps = this.getDuplicateHeaderProps(columnsToRender);
+        const cells = columnsToRender.map(detail => hAsync(HeaderRenderer, Object.assign({ key: this.getHeaderCellKey(detail.data, this.type, duplicateProps) }, detail)));
         return { cells };
     }
     renderGroupingColumns() {
+        const visibleGroupRange = this.getVisibleGroupRange();
+        return Array.from({ length: this.groupingDepth }, (_, level) => this.renderGroupRow(level, visibleGroupRange)).flat();
+    }
+    renderGroupRow(level, visibleGroupRange) {
+        const groupCells = (this.groups[level] || [])
+            .map(group => this.renderGroupColumn(group, level, visibleGroupRange))
+            .filter((cell) => !!cell);
+        return [
+            ...groupCells,
+            hAsync('div', {
+                key: `group-row-${level}`,
+                class: {
+                    [HEADER_ROW_CLASS]: true,
+                    group: true,
+                },
+            }),
+        ];
+    }
+    renderGroupColumn(group, level, visibleGroupRange) {
         var _a;
-        const groupRow = [];
-        for (let i = 0; i < this.groupingDepth; i++) {
-            if (this.groups[i]) {
-                for (let group of this.groups[i]) {
-                    const groupStartIndex = (_a = group.indexes[0]) !== null && _a !== void 0 ? _a : -1;
-                    if (groupStartIndex > -1) {
-                        const groupEndIndex = groupStartIndex + group.indexes.length - 1;
-                        const groupStart = getItemByIndex(this.dimensionCol.state, groupStartIndex).start;
-                        const groupEnd = getItemByIndex(this.dimensionCol.state, groupEndIndex).end;
-                        const props = {
-                            providers: this.providers,
-                            start: groupStart,
-                            end: groupEnd,
-                            group,
-                            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);
-                            },
-                        };
-                        const event = this.beforeGroupHeaderRender.emit(props);
-                        if (!event.defaultPrevented) {
-                            groupRow.push(hAsync(HeaderGroupRenderer, Object.assign({}, event.detail)));
-                        }
-                    }
+        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 props = {
+            providers: this.providers,
+            start: groupStart,
+            end: groupEnd,
+            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);
+            },
+        };
+        const event = this.beforeGroupHeaderRender.emit(props);
+        if (event.defaultPrevented) {
+            return;
+        }
+        return hAsync(HeaderGroupRenderer, Object.assign({ key: this.getGroupHeaderCellKey(event.detail.group, level) }, event.detail));
+    }
+    getVisibleGroupRange() {
+        const visibleColumns = this.viewportCol.get('items');
+        if (!visibleColumns.length) {
+            return;
+        }
+        return visibleColumns.reduce((range, column) => ({
+            start: Math.min(range.start, column.itemIndex),
+            end: Math.max(range.end, column.itemIndex),
+        }), {
+            start: visibleColumns[0].itemIndex,
+            end: visibleColumns[0].itemIndex,
+        });
+    }
+    getHeaderCellKey(column, type, duplicateProps) {
+        if ((column === null || column === void 0 ? void 0 : column.prop) === undefined) {
+            return `${type}-${String(column === null || column === void 0 ? void 0 : column.index)}`;
+        }
+        const propKey = String(column.prop);
+        if (duplicateProps.has(propKey)) {
+            return `${type}-${propKey}-${String(column.index)}`;
+        }
+        return `${type}-${propKey}`;
+    }
+    getDuplicateHeaderProps(columns) {
+        const seenProps = new Set();
+        const duplicateProps = new Set();
+        columns.forEach(({ data }) => {
+            if ((data === null || data === void 0 ? void 0 : data.prop) !== undefined) {
+                const propKey = String(data.prop);
+                if (seenProps.has(propKey)) {
+                    duplicateProps.add(propKey);
+                }
+                else {
+                    seenProps.add(propKey);
                 }
             }
-            groupRow.push(hAsync("div", { class: `${HEADER_ROW_CLASS} group` }));
-        }
-        return groupRow;
+        });
+        return duplicateProps;
+    }
+    getGroupHeaderCellKey(group, level) {
+        return `group-${level}-${group.name}-${group.indexes.join('-')}`;
     }
     get providers() {
         return {
@@ -20727,6 +20942,10 @@ class RevogrHeaderComponent {
         "$attrsToReflect$": []
     }; }
 }
+function isGroupInVisibleRange(groupStartIndex, groupEndIndex, visibleRange) {
+    return (groupStartIndex <= visibleRange.end &&
+        groupEndIndex >= visibleRange.start);
+}
 
 const RowHeaderRender = s => (__, { rowIndex: i }) => s + i;
 
@@ -20823,10 +21042,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) {
@@ -20840,14 +21060,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) {
@@ -20867,16 +21093,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
      */
@@ -20889,21 +21126,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;
         }
@@ -20912,22 +21149,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;
         }
-        return scaleValue(pos, to, from);
+        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 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;
     }
 }
 
@@ -21085,15 +21339,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;
     }
@@ -21156,7 +21404,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`,
             } })));
     }
@@ -21265,7 +21513,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) {
@@ -21278,15 +21526,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;
     }
@@ -21438,7 +21687,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