@revolist/revogrid 4.9.41 → 4.9.42

package/dist/cjs/{column.drag.plugin-fcd892ec.js → column.drag.plugin-a6ef25bf.js}

@@ -3,45 +3,14 @@
  */
 'use strict';
 
-const column_service = require('./column.service-26c61ed6.js');
-const index = require('./index-3ab26ab9.js');
-const rowHeaderUtils = require('./row-header-utils-c37f76e4.js');
-const index$1 = require('./index-10d10c55.js');
+const column_service = require('./column.service-831e1c92.js');
+const dimension_helpers = require('./dimension.helpers-1927ad24.js');
+const viewport_store = require('./viewport.store-69b45f22.js');
+const index = require('./index-10d10c55.js');
 const filter_button = require('./filter.button-b8debe72.js');
 const debounce = require('./debounce-ec7a04b4.js');
-const headerCellRenderer = require('./header-cell-renderer-d879d95e.js');
+const headerCellRenderer = require('./header-cell-renderer-53ecdcdb.js');
 
-/**
- * Storing pre-calculated
- * Dimension information and sizes
- */
-const trimmedPlugin = (store) => {
-    let trimmedSize = {};
-    const setTrimmed = (sizes, trimmed) => {
-        const newSize = Object.assign({}, sizes);
-        trimmedSize = {};
-        for (const [index, v] of Object.entries(trimmed)) {
-            const i = index;
-            if (v && newSize[i]) {
-                trimmedSize[i] = newSize[i];
-                delete newSize[i];
-            }
-        }
-        store.setDimensionSize(newSize);
-    };
-    return {
-        set(key, val) {
-            switch (key) {
-                case 'trimmed':
-                    const trim = val;
-                    const sizes = store.store.get('sizes');
-                    // recover trimmed, apply new trim
-                    setTrimmed(Object.assign(Object.assign({}, sizes), trimmedSize), trim);
-                    break;
-            }
-        },
-    };
-};
 /**
  * Plugin which recalculates realSize on changes of sizes, originItemSize and count
  */
@@ -57,7 +26,7 @@ const recalculateRealSizePlugin = (storeService) => {
             switch (k) {
                 case 'count':
                 case 'sizes':
-                case 'originItemSize':
+                case 'originItemSize': {
                     // recalculate realSize
                     let realSize = 0;
                     const count = storeService.store.get('count');
@@ -68,19 +37,81 @@ const recalculateRealSizePlugin = (storeService) => {
                     }
                     storeService.setStore({ realSize });
                     break;
+                }
             }
         },
     };
 };
+
+/**
+ * Plugin for trimming
+ *
+ * 1.a. Retrieves the previous sizes value. Saves the resulting trimmed data as a new sizes value.
+ * 1.b. Stores a reference to the trimmed data to prevent further changes.
+ * 2. Removes multiple and shifts the data based on the trimmed value.
+ */
+const trimmedPlugin = (storeService) => {
+    let trimmingObject = null;
+    let trimmedPreviousSizes = null;
+    return {
+        set(key, val) {
+            switch (key) {
+                case 'sizes': {
+                    // prevent changes after trimming
+                    if (trimmingObject && trimmingObject === val) {
+                        trimmingObject = null;
+                        return;
+                    }
+                    trimmedPreviousSizes = null;
+                    break;
+                }
+                case 'trimmed': {
+                    const trim = val;
+                    if (!trimmedPreviousSizes) {
+                        trimmedPreviousSizes = storeService.store.get('sizes');
+                    }
+                    trimmingObject = removeMultipleAndShift(trimmedPreviousSizes, trim || {});
+                    // save a reference to the trimmed object to prevent changes after trimming
+                    storeService.setSizes(trimmingObject);
+                    break;
+                }
+            }
+        },
+    };
+};
+function removeMultipleAndShift(items, toRemove) {
+    const newItems = {};
+    const sortedIndexes = Object.keys(items || {})
+        .map(Number)
+        .sort((a, b) => a - b);
+    const lastIndex = sortedIndexes[sortedIndexes.length - 1];
+    let shift = 0;
+    for (let i = 0; i <= lastIndex; i++) {
+        if (toRemove[i] !== undefined) {
+            shift++;
+            // skip already removed
+            if (items[i] !== undefined) {
+                continue;
+            }
+        }
+        if (items[i] !== undefined) {
+            newItems[i - shift] = items[i];
+        }
+    }
+    return newItems;
+}
+
+/**
+ * Storing pre-calculated
+ * Dimension information and sizes
+ */
 function initialBase() {
     return {
         indexes: [],
         count: 0,
-        // plugin support
-        trimmed: {},
-        // size operations, this provider stores only changed sizes, not all of them
-        // same as indexes but for sizes and positions
-        // item index to size
+        // hidden items
+        trimmed: null,
+        // virtual item index to size
         sizes: {},
         // order in indexes[] to coordinate
         positionIndexToItem: {},
@@ -99,9 +130,15 @@ function initialState() {
 class DimensionStore {
     constructor(type) {
         this.type = type;
-        this.store = column_service.createStore(initialState());
-        this.store.use(trimmedPlugin(this));
-        this.store.use(recalculateRealSizePlugin(this));
+        this.store = dimension_helpers.createStore(initialState());
+        this.store.use(trimmedPlugin({
+            store: this.store,
+            setSizes: this.setDimensionSize.bind(this),
+        }));
+        this.store.use(recalculateRealSizePlugin({
+            store: this.store,
+            setStore: this.setStore.bind(this),
+        }));
     }
     getCurrentState() {
         const state = initialState();
@@ -113,22 +150,53 @@ class DimensionStore {
         }, state);
     }
     dispose() {
-        column_service.setStore(this.store, initialState());
+        dimension_helpers.setStore(this.store, initialState());
     }
     setStore(data) {
-        column_service.setStore(this.store, data);
+        dimension_helpers.setStore(this.store, data);
     }
     drop() {
-        column_service.setStore(this.store, initialBase());
+        dimension_helpers.setStore(this.store, initialBase());
     }
     /**
      * Set custom dimension sizes and overwrite old
      * Generates new indexes based on sizes
      * @param sizes - sizes to set
      */
-    setDimensionSize(sizes) {
-        const dimensionData = index.calculateDimensionData(this.store.get('originItemSize'), sizes);
-        column_service.setStore(this.store, dimensionData);
+    setDimensionSize(sizes = {}) {
+        const dimensionData = dimension_helpers.calculateDimensionData(this.store.get('originItemSize'), sizes);
+        dimension_helpers.setStore(this.store, Object.assign(Object.assign({}, dimensionData), { sizes }));
+    }
+    updateSizesPositionByIndexes(newItemsOrder, prevItemsOrder = []) {
+        // Move custom sizes to new order
+        const customSizes = Object.assign({}, this.store.get('sizes'));
+        if (!Object.keys(customSizes).length) {
+            return;
+        }
+        // Step 1: Create a map of original indices, but allow duplicates by storing arrays of indices
+        const originalIndices = {};
+        prevItemsOrder.forEach((physIndex, virtIndex) => {
+            if (!originalIndices[physIndex]) {
+                originalIndices[physIndex] = [];
+            }
+            originalIndices[physIndex].push(virtIndex); // Store all indices for each value
+        });
+        // Step 2: Create new sizes based on new item order
+        const newSizes = {};
+        newItemsOrder.forEach((physIndex, virtIndex) => {
+            const indices = originalIndices[physIndex]; // Get all original indices for this value
+            if (indices && indices.length > 0) {
+                const originalIndex = indices.shift(); // Get the first available original index
+                if (originalIndex !== undefined && originalIndex !== virtIndex && customSizes[originalIndex]) {
+                    newSizes[virtIndex] = customSizes[originalIndex];
+                    delete customSizes[originalIndex];
+                }
+            }
+        });
+        // Step 3: Set new sizes if there are changes
+        if (Object.keys(newSizes).length) {
+            this.setDimensionSize(Object.assign(Object.assign({}, customSizes), newSizes));
+        }
     }
 }
 
@@ -151,7 +219,7 @@ class BasePlugin {
     constructor(revogrid, providers) {
         this.revogrid = revogrid;
         this.providers = providers;
-        this.h = index$1.h;
+        this.h = index.h;
         this.subscriptions = {};
     }
     /**
@@ -257,7 +325,7 @@ function arrayEach(array, iteratee) {
  * @returns {Function} Returns cast function.
  */
 function castFunction(value) {
-  return typeof value == 'function' ? value : index.identity;
+  return typeof value == 'function' ? value : dimension_helpers.identity;
 }
 
 /**
@@ -291,7 +359,7 @@ function castFunction(value) {
  * // => Logs 'a' then 'b' (iteration order is not guaranteed).
  */
 function forEach(collection, iteratee) {
-  var func = column_service.isArray(collection) ? arrayEach : column_service.baseEach;
+  var func = dimension_helpers.isArray(collection) ? arrayEach : column_service.baseEach;
   return func(collection, castFunction(iteratee));
 }
 
@@ -463,7 +531,7 @@ class AutoSizeColumnPlugin extends BasePlugin {
         }
         return column_service.reduce(this.providers.data.stores, (r, s) => {
             const perStore = column_service.reduce(s.store.get('items'), (prev, _row, i) => {
-                const item = column_service.getSourceItem(s.store, i);
+                const item = dimension_helpers.getSourceItem(s.store, i);
                 return Math.max(prev || 0, this.getLength(item === null || item === void 0 ? void 0 : item[rgCol.prop]));
             }, 0);
             return Math.max(r, perStore);
@@ -529,7 +597,7 @@ class StretchColumn extends BasePlugin {
         this.providers = providers;
         this.stretchedColumn = null;
         // calculate scroll bar size for current user session
-        this.scrollSize = index.getScrollbarSize(document);
+        this.scrollSize = dimension_helpers.getScrollbarSize(document);
         // subscribe to column changes
         const beforecolumnapplied = ({ detail: { columns }, }) => this.applyStretch(columns);
         this.addEventListener('beforecolumnapplied', beforecolumnapplied);
@@ -577,7 +645,7 @@ class StretchColumn extends BasePlugin {
         if (this.revogrid.rowHeaders) {
             const itemsLength = this.providers.data.stores.rgRow.store.get('source').length;
             const header = this.revogrid.rowHeaders;
-            const rowHeaderSize = rowHeaderUtils.calculateRowHeaderSize(itemsLength, typeof header === 'object' ? header : undefined);
+            const rowHeaderSize = viewport_store.calculateRowHeaderSize(itemsLength, typeof header === 'object' ? header : undefined);
             if (rowHeaderSize) {
                 sizeDifference -= rowHeaderSize;
             }
@@ -664,7 +732,7 @@ var MAX_ARRAY_LENGTH = 4294967295;
  * // => 3
  */
 function toLength(value) {
-  return value ? baseClamp(column_service.toInteger(value), 0, MAX_ARRAY_LENGTH) : 0;
+  return value ? baseClamp(dimension_helpers.toInteger(value), 0, MAX_ARRAY_LENGTH) : 0;
 }
 
 /**
@@ -680,11 +748,11 @@ function toLength(value) {
 function baseFill(array, value, start, end) {
   var length = array.length;
 
-  start = column_service.toInteger(start);
+  start = dimension_helpers.toInteger(start);
   if (start < 0) {
     start = -start > length ? 0 : (length + start);
   }
-  end = (end === undefined || end > length) ? length : column_service.toInteger(end);
+  end = (end === undefined || end > length) ? length : dimension_helpers.toInteger(end);
   if (end < 0) {
     end += length;
   }
@@ -729,7 +797,7 @@ function fill(array, value, start, end) {
   if (!length) {
     return [];
   }
-  if (start && typeof start != 'number' && column_service.isIterateeCall(array, value, start)) {
+  if (start && typeof start != 'number' && dimension_helpers.isIterateeCall(array, value, start)) {
     start = 0;
     end = length;
   }
@@ -838,7 +906,7 @@ class ExportFilePlugin extends BasePlugin {
         a.dispatchEvent(new MouseEvent('click'));
         this.revogrid.removeChild(a);
         // delay for revoke, correct for some browsers
-        await index.timeout(120);
+        await dimension_helpers.timeout(120);
         URL.revokeObjectURL(url);
     }
     /** Blob object */
@@ -1055,6 +1123,7 @@ const notContains = (value, extra) => {
 notContains.extra = 'input';
 contains.extra = 'input';
 
+// filter.indexed.ts
 const filterCoreFunctionsIndexedByType = {
     none: () => true,
     empty: notSet,
@@ -1092,19 +1161,25 @@ const filterNames = {
     lte: '<=',
 };
 
+// filter.plugin.tsx
 const FILTER_TRIMMED_TYPE = 'filter';
 const FILTER_CONFIG_CHANGED_EVENT = 'filterconfigchanged';
 const FILTE_PANEL = 'revogr-filter-panel';
 /**
  * @typedef ColumnFilterConfig
  * @type {object}
- * @property {FilterCollection|undefined} collection - preserved filter data
+ *
+ * @property {MultiFilterItem|undefined} multiFilterItems - data for multi filtering with relation
+ *
+ * @property {Record<ColumnProp, FilterCollectionItem>|undefined} collection - preserved filter data, relation for filters will be applied as 'and'
+ *
  * @property {string[]|undefined} include - filters to be included, if defined everything else out of scope will be ignored
+ *
  * @property {Record<string, CustomFilter>|undefined} customFilters - hash map of {FilterType:CustomFilter}.
+ *
  * @property {FilterLocalization|undefined} localization - translation for filter popup captions.
- * @property {MultiFilterItem|undefined} multiFilterItems - data for multi filtering.
+ *
  * @property {boolean|undefined} disableDynamicFiltering - disables dynamic filtering. A way to apply filters on Save only.
- * A way to define your own filter types per column
  */
 /**
  * @internal
@@ -1114,8 +1189,17 @@ class FilterPlugin extends BasePlugin {
         var _a;
         super(revogrid, providers);
         this.revogrid = revogrid;
+        this.config = config;
         this.filterCollection = {};
         this.multiFilterItems = {};
+        /**
+         * Filter types
+         * @example
+         * {
+         *    string: ['contains', 'beginswith'],
+         *    number: ['eqN', 'neqN', 'gt']
+         *  }
+         */
         this.filterByType = Object.assign({}, filterTypes);
         this.filterNameIndexByType = Object.assign({}, filterNames);
         this.filterFunctionsIndexedByType = Object.assign({}, filterCoreFunctionsIndexedByType);
@@ -1126,8 +1210,8 @@ class FilterPlugin extends BasePlugin {
         const existingNodes = this.revogrid.registerVNode.filter(n => typeof n === 'object' && n.$tag$ !== FILTE_PANEL);
         this.revogrid.registerVNode = [
             ...existingNodes,
-            index$1.h("revogr-filter-panel", { filterItems: this.multiFilterItems, filterNames: this.filterNameIndexByType, filterEntities: this.filterFunctionsIndexedByType, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: e => this.onFilterChange(e.detail), onResetChange: e => this.onFilterReset(e.detail), disableDynamicFiltering: config === null || config === void 0 ? void 0 : config.disableDynamicFiltering, ref: e => (this.pop = e) },
-                " ",
+            index.h("revogr-filter-panel", { filterNames: this.filterNameIndexByType, filterEntities: this.filterFunctionsIndexedByType, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: e => this.onFilterChange(e.detail), onResetChange: e => this.onFilterReset(e.detail), disableDynamicFiltering: config === null || config === void 0 ? void 0 : config.disableDynamicFiltering, ref: e => (this.pop = e) },
+                ' ',
                 this.extraContent()),
         ];
         const aftersourceset = async () => {
@@ -1147,11 +1231,17 @@ class FilterPlugin extends BasePlugin {
                     }
                 });
             }
+            if (Object.keys(this.multiFilterItems).length === 0) {
+                return;
+            }
             await this.runFiltering(this.multiFilterItems);
         };
-        this.addEventListener('headerclick', (e) => this.headerclick(e));
+        this.addEventListener('headerclick', e => this.headerclick(e));
         this.addEventListener(FILTER_CONFIG_CHANGED_EVENT, ({ detail }) => {
-            if (!detail) {
+            if (!detail ||
+                (typeof detail === 'object' &&
+                    (!detail.multiFilterItems ||
+                        !Object.keys(detail.multiFilterItems).length))) {
                 this.clearFiltering();
                 return;
             }
@@ -1163,6 +1253,9 @@ class FilterPlugin extends BasePlugin {
         this.addEventListener('aftersourceset', aftersourceset);
         this.addEventListener('filter', ({ detail }) => this.onFilterChange(detail));
     }
+    beforeshow(_) {
+        // used as hook for filter panel
+    }
     extraContent() {
         return null;
     }
@@ -1170,6 +1263,9 @@ class FilterPlugin extends BasePlugin {
         if (config.multiFilterItems) {
             this.multiFilterItems = Object.assign({}, config.multiFilterItems);
         }
+        else {
+            this.multiFilterItems = {};
+        }
         // Add custom filters
         if (config.customFilters) {
             for (let customFilterType in config.customFilters) {
@@ -1177,8 +1273,11 @@ class FilterPlugin extends BasePlugin {
                 if (!this.filterByType[cFilter.columnFilterType]) {
                     this.filterByType[cFilter.columnFilterType] = [];
                 }
+                // add custom filter type
                 this.filterByType[cFilter.columnFilterType].push(customFilterType);
+                // add custom filter function
                 this.filterFunctionsIndexedByType[customFilterType] = cFilter.func;
+                // add custom filter name
                 this.filterNameIndexByType[customFilterType] = cFilter.name;
             }
         }
@@ -1188,7 +1287,7 @@ class FilterPlugin extends BasePlugin {
         }
         /**
          * which filters has to be included/excluded
-         * convinient way to exclude system filters
+         * convenient way to exclude system filters
          */
         const cfgInlcude = config.include;
         if (cfgInlcude) {
@@ -1206,15 +1305,11 @@ class FilterPlugin extends BasePlugin {
             }
         }
         if (config.collection) {
-            this.filterCollection = column_service.reduce(config.collection, (result, item, prop) => {
-                if (this.filterFunctionsIndexedByType[item.type]) {
-                    result[prop] = item;
-                }
-                else {
-                    console.warn(`${item.type} type is not found.`);
-                }
-                return result;
-            }, {});
+            const filtersWithFilterFunctionPresent = Object.entries(config.collection).filter(([, item]) => this.filterFunctionsIndexedByType[item.type]);
+            this.filterCollection = Object.fromEntries(filtersWithFilterFunctionPresent);
+        }
+        else {
+            this.filterCollection = {};
         }
         if (config.localization) {
             if (config.localization.filterNames) {
@@ -1227,18 +1322,12 @@ class FilterPlugin extends BasePlugin {
         }
     }
     async headerclick(e) {
-        var _a, _b, _c;
+        var _a, _b;
         const el = (_a = e.detail.originalEvent) === null || _a === void 0 ? void 0 : _a.target;
         if (!filter_button.isFilterBtn(el)) {
             return;
         }
         e.preventDefault();
-        // close if same
-        const changes = await ((_b = this.pop) === null || _b === void 0 ? void 0 : _b.getChanges());
-        if (changes && (changes === null || changes === void 0 ? void 0 : changes.prop) === e.detail.prop) {
-            (_c = this.pop) === null || _c === void 0 ? void 0 : _c.show();
-            return;
-        }
         if (!this.pop) {
             return;
         }
@@ -1246,7 +1335,9 @@ class FilterPlugin extends BasePlugin {
         const gridPos = this.revogrid.getBoundingClientRect();
         const buttonPos = el.getBoundingClientRect();
         const prop = e.detail.prop;
-        this.pop.show(Object.assign(Object.assign({}, this.filterCollection[prop]), { x: buttonPos.x - gridPos.x, y: buttonPos.y - gridPos.y + buttonPos.height, autoCorrect: true, prop, filterTypes: this.getColumnFilter(e.detail.filter) }));
+        const data = Object.assign(Object.assign(Object.assign({}, e.detail), this.filterCollection[prop]), { x: buttonPos.x - gridPos.x, y: buttonPos.y - gridPos.y + buttonPos.height, autoCorrect: true, filterTypes: this.getColumnFilter(e.detail.filter), filterItems: this.multiFilterItems, extraContent: this.extraHyperContent });
+        (_b = this.beforeshow) === null || _b === void 0 ? void 0 : _b.call(this, data);
+        this.pop.show(data);
     }
     getColumnFilter(type) {
         let filterType = 'string';
@@ -1330,7 +1421,11 @@ class FilterPlugin extends BasePlugin {
         }
         // applies the hasFilter to the columns to show filter icon
         this.providers.column.updateColumns(columnsToUpdate);
-        this.emit('afterfilterapply');
+        this.emit('afterfilterapply', {
+            multiFilterItems: filterItems,
+            source,
+            collection,
+        });
     }
     async clearFiltering() {
         this.multiFilterItems = {};
@@ -1345,7 +1440,6 @@ class FilterPlugin extends BasePlugin {
             if (multiFilterItems[prop].length > 0) {
                 const firstFilterItem = multiFilterItems[prop][0];
                 collection[prop] = {
-                    filter: this.filterFunctionsIndexedByType[firstFilterItem.type],
                     type: firstFilterItem.type,
                     value: firstFilterItem.value,
                 };
@@ -1372,65 +1466,847 @@ class FilterPlugin extends BasePlugin {
     getRowFilter(rows, filterItems, columnByProp) {
         const propKeys = Object.keys(filterItems);
         const trimmed = {};
-        let propFilterSatisfiedCount = 0;
-        let lastFilterResults = [];
         // each rows
-        rows.forEach((model, rowIndex) => {
+        for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
             // check filter by column properties
             for (const prop of propKeys) {
-                const propFilters = filterItems[prop];
-                // reset the count of satisfied filters
-                propFilterSatisfiedCount = 0;
+                // add to the list of removed/trimmed rows of filter condition is satisfied
+                if (this.shouldTrimRow(filterItems[prop], prop, columnByProp[prop], rows[rowIndex])) {
+                    trimmed[rowIndex] = true;
+                }
+            } // end of for-of propKeys
+        }
+        return trimmed;
+    }
+    shouldTrimRow(propFilters, prop, column, model = {}) {
+        // reset the count of satisfied filters
+        let propFilterSatisfiedCount = 0;
+        // reset the array of last filter results
+        let lastFilterResults = [];
+        // testing each filter for a prop
+        for (const [filterIndex, filterData] of propFilters.entries()) {
+            // the filter LogicFunction based on the type
+            const filterFunc = this.filterFunctionsIndexedByType[filterData.type];
+            // THE MAGIC OF FILTERING IS HERE
+            // If there is no column but user wants to filter by a property
+            const value = column ? column_service.getCellDataParsed(model, column) : model[prop];
+            // OR relation
+            if (filterData.relation === 'or') {
                 // reset the array of last filter results
                 lastFilterResults = [];
-                // testing each filter for a prop
-                for (const [filterIndex, filterData] of propFilters.entries()) {
-                    // the filter LogicFunction based on the type
-                    const filterFunc = this.filterFunctionsIndexedByType[filterData.type];
-                    // THE MAGIC OF FILTERING IS HERE
-                    const column = columnByProp[prop];
-                    // If there is no column but user wants to filter by a property
-                    const value = column ? column_service.getCellDataParsed(model, columnByProp[prop]) : model[prop];
-                    // OR relation
-                    if (filterData.relation === 'or') {
+                // if the filter is satisfied, continue to the next filter
+                if (filterFunc(value, filterData.value)) {
+                    continue;
+                }
+                // if the filter is not satisfied, count it
+                propFilterSatisfiedCount++;
+                // AND relation
+            }
+            else {
+                // 'and' relation will need to know the next filter
+                // so we save this current filter to include it in the next filter
+                lastFilterResults.push(!filterFunc(value, filterData.value));
+                if (isFinalAndFilter(filterIndex, propFilters)) {
+                    // let's just continue since for sure propFilterSatisfiedCount cannot be satisfied
+                    if (allAndConditionsSatisfied(lastFilterResults)) {
                         // reset the array of last filter results
                         lastFilterResults = [];
-                        // if the filter is satisfied, continue to the next filter
-                        if (filterFunc(value, filterData.value)) {
-                            continue;
-                        }
-                        // if the filter is not satisfied, count it
-                        propFilterSatisfiedCount++;
-                        // AND relation
-                    }
-                    else {
-                        // 'and' relation will need to know the next filter
-                        // so we save this current filter to include it in the next filter
-                        lastFilterResults.push(!filterFunc(value, filterData.value));
-                        // check first if we have a filter on the next index to pair it with this current filter
-                        const nextFilterData = propFilters[filterIndex + 1];
-                        // stop the sequence if there is no next filter or if the next filter is not an 'and' relation
-                        if (!nextFilterData || nextFilterData.relation !== 'and') {
-                            // let's just continue since for sure propFilterSatisfiedCount cannot be satisfied
-                            if (lastFilterResults.indexOf(true) === -1) {
-                                // reset the array of last filter results
-                                lastFilterResults = [];
-                                continue;
-                            }
-                            // we need to add all of the lastFilterResults since we need to satisfy all
-                            propFilterSatisfiedCount += lastFilterResults.length;
-                            // reset the array of last filter results
-                            lastFilterResults = [];
-                        }
+                        continue;
                     }
-                } // end of propFilters forEach
-                // add to the list of removed/trimmed rows of filter condition is satisfied
-                if (propFilterSatisfiedCount === propFilters.length) {
-                    trimmed[rowIndex] = true;
+                    // we need to add all of the lastFilterResults since we need to satisfy all
+                    propFilterSatisfiedCount += lastFilterResults.length;
+                    // reset the array of last filter results
+                    lastFilterResults = [];
                 }
-            } // end of for-of propKeys
+            }
+        } // end of propFilters forEach
+        return propFilterSatisfiedCount === propFilters.length;
+    }
+}
+/**
+ * Checks if the current filter is the final one in an AND sequence.
+ * @param index - Current filter index in the list.
+ * @param filters - Array of filters for the property.
+ * @returns True if this is the last AND condition; false otherwise.
+ */
+function isFinalAndFilter(index, filters) {
+    const nextFilter = filters[index + 1]; // Get the next filter in the list.
+    // Return true if there's no next filter or if the next filter defined and is not part of the AND sequence.
+    return !nextFilter || (!!nextFilter.relation && nextFilter.relation !== 'and');
+}
+/**
+ * Determines if all conditions in an AND sequence are satisfied.
+ * @param pendingResults - An array of results from the AND conditions.
+ * @returns True if all conditions are satisfied; false otherwise.
+ */
+function allAndConditionsSatisfied(pendingResults) {
+    // Check if there are any failed conditions in the pending results.
+    return !pendingResults.includes(true);
+}
+
+// provide collapse data
+function doCollapse(pIndex, source) {
+    const model = source[pIndex];
+    const collapseValue = model[column_service.PSEUDO_GROUP_ITEM_VALUE];
+    const trimmed = {};
+    let i = pIndex + 1;
+    const total = source.length;
+    while (i < total) {
+        const currentModel = source[i];
+        if (column_service.isGrouping(currentModel)) {
+            const currentValue = currentModel[column_service.PSEUDO_GROUP_ITEM_VALUE];
+            if (!currentValue.length || !currentValue.startsWith(collapseValue + ',')) {
+                break;
+            }
+            currentModel[column_service.GROUP_EXPANDED] = false;
+        }
+        trimmed[i++] = true;
+    }
+    model[column_service.GROUP_EXPANDED] = false;
+    return { trimmed };
+}
+/**
+ *
+ * @param pIndex - physical index
+ * @param vIndex - virtual index, need to update item collection
+ * @param source - data source
+ * @param rowItemsIndexes - rgRow indexes
+ */
+function doExpand(vIndex, source, rowItemsIndexes) {
+    const physicalIndex = rowItemsIndexes[vIndex];
+    const model = source[physicalIndex];
+    const currentGroup = column_service.getParsedGroup(model[column_service.PSEUDO_GROUP_ITEM_ID]);
+    const trimmed = {};
+    // no group found
+    if (!currentGroup) {
+        return { trimmed };
+    }
+    const groupItems = [];
+    model[column_service.GROUP_EXPANDED] = true;
+    let i = physicalIndex + 1;
+    const total = source.length;
+    let groupLevelOnly = 0;
+    // go through all rows
+    while (i < total) {
+        const currentModel = source[i];
+        const isGroup = column_service.isGrouping(currentModel);
+        // group found
+        if (isGroup) {
+            if (!column_service.isSameGroup(currentGroup, model, currentModel)) {
+                break;
+            }
+            else if (!groupLevelOnly) {
+                // if get group first it's group only level
+                groupLevelOnly = currentModel[column_service.GROUP_DEPTH];
+            }
+        }
+        // level 0 or same depth
+        if (!groupLevelOnly || (isGroup && groupLevelOnly === currentModel[column_service.GROUP_DEPTH])) {
+            trimmed[i] = false;
+            groupItems.push(i);
+        }
+        i++;
+    }
+    const result = {
+        trimmed,
+    };
+    if (groupItems.length) {
+        const items = [...rowItemsIndexes];
+        items.splice(vIndex + 1, 0, ...groupItems);
+        result.items = items;
+    }
+    return result;
+}
+
+const TRIMMED_GROUPING = 'grouping';
+/**
+ * Prepare trimming updated indexes for grouping
+ * @param initiallyTrimed
+ * @param firstLevelMap
+ * @param secondLevelMap
+ */
+function processDoubleConversionTrimmed(initiallyTrimed, firstLevelMap, secondLevelMap) {
+    const trimemedOptionsToUpgrade = {};
+    /**
+     * go through all groups except grouping
+     */
+    for (let type in initiallyTrimed) {
+        if (type === TRIMMED_GROUPING) {
+            continue;
+        }
+        const items = initiallyTrimed[type];
+        const newItems = {};
+        for (let initialIndex in items) {
+            /**
+             * if item exists we find it in collection
+             * we support 2 level of conversions
+             */
+            let newConversionIndex = firstLevelMap[initialIndex];
+            if (secondLevelMap) {
+                newConversionIndex = secondLevelMap[newConversionIndex];
+            }
+            /**
+             * if item was trimmed previously
+             * trimming makes sense to apply
+             */
+            if (items[initialIndex]) {
+                newItems[newConversionIndex] = true;
+                /**
+                 * If changes present apply changes to new source
+                 */
+                if (newConversionIndex !== parseInt(initialIndex, 10)) {
+                    trimemedOptionsToUpgrade[type] = newItems;
+                }
+            }
+        }
+    }
+    return trimemedOptionsToUpgrade;
+}
+
+/** `Object#toString` result references. */
+var stringTag = '[object String]';
+
+/**
+ * Checks if `value` is classified as a `String` primitive or object.
+ *
+ * @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
+ */
+function isString(value) {
+  return typeof value == 'string' ||
+    (!dimension_helpers.isArray(value) && debounce.isObjectLike(value) && debounce.baseGetTag(value) == stringTag);
+}
+
+/**
+ * Gets the size of an ASCII `string`.
+ *
+ * @private
+ * @param {string} string The string inspect.
+ * @returns {number} Returns the string size.
+ */
+var asciiSize = dimension_helpers.baseProperty('length');
+
+const asciiSize$1 = asciiSize;
+
+/** 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 + ']');
+
+/**
+ * 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`.
+ */
+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');
+
+/**
+ * Gets the size of a Unicode `string`.
+ *
+ * @private
+ * @param {string} string The string inspect.
+ * @returns {number} Returns the string size.
+ */
+function unicodeSize(string) {
+  var result = reUnicode.lastIndex = 0;
+  while (reUnicode.test(string)) {
+    ++result;
+  }
+  return result;
+}
+
+/**
+ * Gets the number of symbols in `string`.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {number} Returns the string size.
+ */
+function stringSize(string) {
+  return hasUnicode(string)
+    ? unicodeSize(string)
+    : asciiSize$1(string);
+}
+
+/** `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
+ *
+ * _.size({ 'a': 1, 'b': 2 });
+ * // => 2
+ *
+ * _.size('pebbles');
+ * // => 7
+ */
+function size(collection) {
+  if (collection == null) {
+    return 0;
+  }
+  if (dimension_helpers.isArrayLike(collection)) {
+    return isString(collection) ? stringSize(collection) : collection.length;
+  }
+  var tag = dimension_helpers.getTag(collection);
+  if (tag == mapTag || tag == setTag) {
+    return collection.size;
+  }
+  return dimension_helpers.baseKeys(collection).length;
+}
+
+function sortIndexByItems(indexes, source, sortingFunc = {}) {
+    // if no sorting - return unsorted indexes
+    if (Object.entries(sortingFunc).length === 0) {
+        // Unsorted indexes
+        return [...Array(indexes.length).keys()];
+    }
+    //
+    /**
+     * go through all indexes and align in new order
+     * performs a multi-level sorting by applying multiple comparison functions to determine the order of the items based on different properties.
+     */
+    return indexes.sort((a, b) => {
+        const itemA = source[a];
+        const itemB = source[b];
+        for (const [prop, cmp] of Object.entries(sortingFunc)) {
+            if (column_service.isGrouping(itemA)) {
+                if (itemA['__rvgr-prop'] !== prop) {
+                    return 0;
+                }
+            }
+            if (column_service.isGrouping(itemB)) {
+                if (itemB['__rvgr-prop'] !== prop) {
+                    return 0;
+                }
+            }
+            /**
+             * If the comparison function returns a non-zero value (sorted), it means that the items should be sorted based on the given property. In such a case, the function immediately returns the sorted value, indicating the order in which the items should be arranged.
+             * If none of the comparison functions result in a non-zero value, indicating that the items are equal or should remain in the same order, the function eventually returns 0.
+             */
+            const sorted = cmp === null || cmp === void 0 ? void 0 : cmp(prop, itemA, itemB);
+            if (sorted) {
+                return sorted;
+            }
+        }
+        return 0;
+    });
+}
+
+/**
+ * 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.
+ * 1.1. @event `beforesourcesortingapply` - Triggered before the sorting data is applied to the data source. You can prevent this event, and the data will not be sorted.
+ * 2. @method `updateColumnSorting` - Updates the column sorting icon on the grid and the column itself, but the data remains untouched.
+ * 3. @event `beforesortingapply` - Triggered before the sorting data is applied to the data source. You can prevent this event, and the data will not be sorted. This event is only called from a column sorting click.
+ * 4. @event `aftersortingapply` - Triggered after sorting has been applied and completed. This event occurs for both row and column sorting.
+ *
+ * Note: If you prevent an event, it will not proceed to the subsequent steps.
+ */
+class SortingPlugin extends BasePlugin {
+    runSorting(order, comparison, ignoreViewportUpdate) {
+        var _a;
+        this.sort(order, comparison, undefined, ignoreViewportUpdate);
+        (_a = this.sortingPromise) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.sortingPromise = null;
+    }
+    constructor(revogrid, providers, config) {
+        super(revogrid, providers);
+        this.revogrid = revogrid;
+        this.sortingPromise = null;
+        this.postponeSort = debounce.debounce((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] = this.getComparer(col, col.order);
+                    order[col.prop] = col.order;
+                });
+                // // set sorting
+                this.sorting = order;
+                this.sortingFunc = sortingFunc;
+            }
+        };
+        setConfig(config);
+        this.addEventListener('sortingconfigchanged', ({ detail }) => {
+            config = detail;
+            setConfig(detail);
+            this.startSorting(this.sorting, this.sortingFunc);
         });
-        return trimmed;
+        this.addEventListener('beforeanysource', ({ detail: { type }, }) => {
+            // if sorting was provided - sort data
+            if (!!this.sorting && this.sortingFunc) {
+                const event = this.emit('beforesourcesortingapply', { type, sorting: this.sorting });
+                if (event.defaultPrevented) {
+                    return;
+                }
+                this.startSorting(this.sorting, this.sortingFunc);
+            }
+        });
+        this.addEventListener('aftercolumnsset', ({ detail: { order }, }) => {
+            // if config provided - do nothing, read from config
+            if (config) {
+                return;
+            }
+            const columns = this.providers.column.getColumns();
+            const sortingFunc = {};
+            for (let prop in order) {
+                const cmp = this.getComparer(column_service.getColumnByProp(columns, prop), order[prop]);
+                sortingFunc[prop] = cmp;
+            }
+            // set sorting
+            this.sorting = order;
+            this.sortingFunc = order && sortingFunc;
+        });
+        this.addEventListener('beforeheaderclick', (e) => {
+            var _a, _b, _c, _d;
+            if (e.defaultPrevented) {
+                return;
+            }
+            if (!((_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.column) === null || _b === void 0 ? void 0 : _b.sortable)) {
+                return;
+            }
+            this.headerclick(e.detail.column, e.detail.index, (_d = (_c = e.detail) === null || _c === void 0 ? void 0 : _c.originalEvent) === null || _d === void 0 ? void 0 : _d.shiftKey);
+        });
+    }
+    startSorting(order, sortingFunc, ignoreViewportUpdate) {
+        if (!this.sortingPromise) {
+            // add job before render
+            this.revogrid.jobsBeforeRender.push(new Promise(resolve => {
+                this.sortingPromise = resolve;
+            }));
+        }
+        this.postponeSort(order, sortingFunc, ignoreViewportUpdate);
+    }
+    getComparer(column, order) {
+        var _a, _b;
+        const cellCmp = ((_a = column === null || column === void 0 ? void 0 : column.cellCompare) === null || _a === void 0 ? void 0 : _a.bind({ order })) || ((_b = this.defaultCellCompare) === null || _b === void 0 ? void 0 : _b.bind({ column, order }));
+        if (order == 'asc') {
+            return cellCmp;
+        }
+        if (order == 'desc') {
+            return this.descCellCompare(cellCmp);
+        }
+        return undefined;
+    }
+    /**
+     * Apply sorting to data on header click
+     * If additive - add to existing sorting, multiple columns can be sorted
+     */
+    headerclick(column, index, additive) {
+        var _a, _b;
+        let order = this.getNextOrder(column.order);
+        const beforeEvent = this.emit('beforesorting', { column, order, additive });
+        if (beforeEvent.defaultPrevented) {
+            return;
+        }
+        order = beforeEvent.detail.order;
+        const newCol = this.providers.column.updateColumnSorting(beforeEvent.detail.column, index, order, additive);
+        // apply sort data
+        const beforeApplyEvent = this.emit('beforesortingapply', {
+            column: newCol,
+            order,
+            additive,
+        });
+        if (beforeApplyEvent.defaultPrevented) {
+            return;
+        }
+        const cmp = this.getComparer(beforeApplyEvent.detail.column, beforeApplyEvent.detail.order);
+        if (beforeApplyEvent.detail.additive && this.sorting) {
+            const sorting = {};
+            const sortingFunc = {};
+            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);
+            if (column.prop in sorting && size(sorting) > 1 && order === undefined) {
+                delete sorting[column.prop];
+                delete sortingFunc[column.prop];
+            }
+            else {
+                sorting[column.prop] = order;
+                sortingFunc[column.prop] = cmp;
+            }
+        }
+        else {
+            if (order) {
+                // reset sorting
+                this.sorting = { [column.prop]: order };
+                this.sortingFunc = { [column.prop]: cmp };
+            }
+            else {
+                (_a = this.sorting) === null || _a === void 0 ? true : delete _a[column.prop];
+                (_b = this.sortingFunc) === null || _b === void 0 ? true : delete _b[column.prop];
+            }
+        }
+        this.startSorting(this.sorting, this.sortingFunc);
+    }
+    /**
+     * 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) {
+        // if no sorting - reset
+        if (!Object.keys(sorting || {}).length) {
+            for (let type of types) {
+                const storeService = this.providers.data.stores[type];
+                // row data
+                const source = storeService.store.get('source');
+                // row indexes
+                const proxyItems = storeService.store.get('proxyItems');
+                // 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], });
+            }
+        }
+        else {
+            for (let type of types) {
+                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);
+                // 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) {
+                    this.providers.dimension
+                        .updateSizesPositionByNewDataIndexes(type, newItems, prevItems);
+                }
+            }
+        }
+        this.emit('aftersortingapply');
+    }
+    defaultCellCompare(prop, a, b) {
+        const aRaw = this.column ? column_service.getCellRaw(a, this.column) : a === null || a === void 0 ? void 0 : a[prop];
+        const bRaw = this.column ? column_service.getCellRaw(b, this.column) : b === null || b === void 0 ? void 0 : b[prop];
+        const av = aRaw === null || aRaw === void 0 ? void 0 : aRaw.toString().toLowerCase();
+        const bv = bRaw === null || bRaw === void 0 ? void 0 : bRaw.toString().toLowerCase();
+        return av == bv ? 0 : av > bv ? 1 : -1;
+    }
+    descCellCompare(cmp) {
+        return (prop, a, b) => {
+            return -1 * cmp(prop, a, b);
+        };
+    }
+    getNextOrder(currentOrder) {
+        switch (currentOrder) {
+            case undefined:
+                return 'asc';
+            case 'asc':
+                return 'desc';
+            case 'desc':
+                return undefined;
+        }
+    }
+}
+
+class GroupingRowPlugin extends BasePlugin {
+    getStore(type = column_service.GROUPING_ROW_TYPE) {
+        return this.providers.data.stores[type].store;
+    }
+    constructor(revogrid, providers) {
+        super(revogrid, providers);
+        this.revogrid = revogrid;
+        this.providers = providers;
+    }
+    // befoce cell focus
+    onFocus(e) {
+        if (column_service.isGrouping(e.detail.model)) {
+            e.preventDefault();
+        }
+    }
+    // expand event triggered
+    onExpand({ virtualIndex }) {
+        const { source } = column_service.getSource(this.getStore().get('source'), this.getStore().get('proxyItems'));
+        let newTrimmed = this.getStore().get('trimmed')[TRIMMED_GROUPING];
+        let i = dimension_helpers.getPhysical(this.getStore(), virtualIndex);
+        const isExpanded = column_service.getExpanded(source[i]);
+        if (!isExpanded) {
+            const { trimmed, items } = doExpand(virtualIndex, source, this.getStore().get('items'));
+            newTrimmed = Object.assign(Object.assign({}, newTrimmed), trimmed);
+            if (items) {
+                dimension_helpers.setItems(this.getStore(), items);
+            }
+        }
+        else {
+            const { trimmed } = doCollapse(i, source);
+            newTrimmed = Object.assign(Object.assign({}, newTrimmed), trimmed);
+            this.revogrid.clearFocus();
+        }
+        this.getStore().set('source', source);
+        this.revogrid.addTrimmed(newTrimmed, TRIMMED_GROUPING);
+    }
+    setColumnGrouping(cols) {
+        // if 0 column as holder
+        if (cols === null || cols === void 0 ? void 0 : cols.length) {
+            cols[0][column_service.PSEUDO_GROUP_COLUMN] = true;
+            return true;
+        }
+        return false;
+    }
+    setColumns({ columns }) {
+        for (let type of columnTypes) {
+            if (this.setColumnGrouping(columns[type])) {
+                break;
+            }
+        }
+    }
+    // evaluate drag between groups
+    onDrag(e) {
+        const { from, to } = e.detail;
+        const isDown = to - from >= 0;
+        const { source } = column_service.getSource(this.getStore().get('source'), this.getStore().get('proxyItems'));
+        const items = this.getStore().get('items');
+        let i = isDown ? from : to;
+        const end = isDown ? to : from;
+        for (; i < end; i++) {
+            const model = source[items[i]];
+            const isGroup = column_service.isGrouping(model);
+            if (isGroup) {
+                e.preventDefault();
+                return;
+            }
+        }
+    }
+    beforeTrimmedApply(trimmed, type) {
+        /** Before filter apply remove grouping filtering */
+        if (type === FILTER_TRIMMED_TYPE) {
+            const source = this.getStore().get('source');
+            for (let index in trimmed) {
+                if (trimmed[index] && column_service.isGrouping(source[index])) {
+                    trimmed[index] = false;
+                }
+            }
+        }
+    }
+    isSortingRunning() {
+        const sortingPlugin = this.providers.plugins.getByClass(SortingPlugin);
+        return !!(sortingPlugin === null || sortingPlugin === void 0 ? void 0 : sortingPlugin.sortingPromise);
+    }
+    // subscribe to grid events to process them accordingly
+    subscribe() {
+        /** if grouping present and new data source arrived */
+        this.addEventListener('beforesourceset', ({ detail }) => {
+            var _a, _b, _c;
+            if (!(((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.length) && ((_c = detail === null || detail === void 0 ? void 0 : detail.source) === null || _c === void 0 ? void 0 : _c.length))) {
+                return;
+            }
+            // if sorting is running don't apply grouping, wait for sorting, then it'll apply in @aftersortingapply
+            if (this.isSortingRunning()) {
+                return;
+            }
+            this.onDataSet(detail);
+        });
+        this.addEventListener('beforecolumnsset', ({ detail }) => {
+            this.setColumns(detail);
+        });
+        /**
+         * filter applied need to clear grouping and apply again
+         * based on new results can be new grouping
+         */
+        this.addEventListener('beforetrimmed', ({ detail: { trimmed, trimmedType } }) => this.beforeTrimmedApply(trimmed, trimmedType));
+        /**
+         * sorting applied need to clear grouping and apply again
+         * based on new results whole grouping order will changed
+         */
+        this.addEventListener('aftersortingapply', () => {
+            var _a, _b;
+            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));
+        });
+        /**
+         * Apply logic for focus inside of grouping
+         * We can't focus on grouping rows, navigation only inside of groups for now
+         */
+        this.addEventListener('beforecellfocus', e => this.onFocus(e));
+        /**
+         * Prevent rgRow drag outside the group
+         */
+        this.addEventListener('roworderchanged', e => this.onDrag(e));
+        /**
+         * When grouping expand icon was clicked
+         */
+        this.addEventListener('groupexpandclick', e => this.onExpand(e.detail));
+    }
+    /**
+     * Starts global source update with group clearing and applying new one
+     * Initiated when need to reapply grouping
+     */
+    doSourceUpdate(options) {
+        var _a;
+        /**
+         * Get source without grouping
+         * @param newOldIndexMap - provides us mapping with new indexes vs old indexes, we would use it for trimmed mapping
+         */
+        const { source, prevExpanded, oldNewIndexes } = column_service.getSource(this.getStore().get('source'), this.getStore().get('proxyItems'), true);
+        const expanded = Object.assign({ prevExpanded }, options);
+        /**
+         * Group again
+         * @param oldNewIndexMap - provides us mapping with new indexes vs old indexes
+         */
+        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup, } = column_service.gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], expanded);
+        const customRenderer = options === null || options === void 0 ? void 0 : options.groupLabelTemplate;
+        // setup source
+        this.providers.data.setData(sourceWithGroups, column_service.GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, { depth, customRenderer }, true);
+        this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexes !== null && oldNewIndexes !== void 0 ? oldNewIndexes : {}, oldNewIndexMap);
+    }
+    /**
+     * Apply grouping on data set
+     * Clear grouping from source
+     * If source came from other plugin
+     */
+    onDataSet(data) {
+        var _a, _b;
+        let preservedExpanded = {};
+        if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.preserveGroupingOnUpdate) !== false) {
+            let { prevExpanded } = column_service.getSource(this.getStore().get('source'), this.getStore().get('proxyItems'), true);
+            preservedExpanded = prevExpanded;
+        }
+        const source = data.source.filter(s => !column_service.isGrouping(s));
+        const options = Object.assign(Object.assign({}, (this.revogrid.grouping || {})), { prevExpanded: preservedExpanded });
+        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup, } = column_service.gatherGrouping(source, ((_b = this.options) === null || _b === void 0 ? void 0 : _b.props) || [], options);
+        data.source = sourceWithGroups;
+        this.providers.data.setGrouping({ depth });
+        this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexMap);
+    }
+    /**
+     * Externam call to apply grouping. Called by revogrid when prop changed.
+     */
+    setGrouping(options) {
+        var _a, _b;
+        // unsubscribe from all events when group applied
+        this.clearSubscriptions();
+        this.options = options;
+        // clear props, no grouping exists
+        if (!((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.length)) {
+            this.clearGrouping();
+            return;
+        }
+        // props exist and source inited
+        const { source } = column_service.getSource(this.getStore().get('source'), this.getStore().get('proxyItems'));
+        if (source.length) {
+            this.doSourceUpdate(Object.assign({}, options));
+        }
+        // props exist and columns inited
+        for (let t of columnTypes) {
+            if (this.setColumnGrouping(this.providers.column.getColumns(t))) {
+                this.providers.column.refreshByType(t);
+                break;
+            }
+        }
+        // if has any grouping subscribe to events again
+        this.subscribe();
+    }
+    // clear grouping
+    clearGrouping() {
+        // clear columns
+        columnTypes.forEach(t => {
+            const cols = this.providers.column.getColumns(t);
+            let deleted = false;
+            cols.forEach(c => {
+                if (column_service.isGroupingColumn(c)) {
+                    delete c[column_service.PSEUDO_GROUP_COLUMN];
+                    deleted = true;
+                }
+            });
+            // if column store had grouping clear and refresh
+            if (deleted) {
+                this.providers.column.refreshByType(t);
+            }
+        });
+        // clear rows
+        const { source, oldNewIndexes } = column_service.getSource(this.getStore().get('source'), this.getStore().get('proxyItems'), true);
+        this.providers.data.setData(source, column_service.GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, undefined, true);
+        this.updateTrimmed(undefined, undefined, oldNewIndexes);
+    }
+    updateTrimmed(trimmedGroup = {}, _childrenByGroup = {}, firstLevelMap = {}, secondLevelMap) {
+        // map previously trimmed data
+        const trimemedOptionsToUpgrade = processDoubleConversionTrimmed(this.getStore().get('trimmed'), firstLevelMap, secondLevelMap);
+        for (let type in trimemedOptionsToUpgrade) {
+            this.revogrid.addTrimmed(trimemedOptionsToUpgrade[type], type);
+        }
+        // const emptyGroups = this.filterOutEmptyGroups(trimemedOptionsToUpgrade, childrenByGroup);
+        // setup trimmed data for grouping
+        this.revogrid.addTrimmed(Object.assign({}, trimmedGroup), TRIMMED_GROUPING);
     }
 }
 
@@ -1509,7 +2385,7 @@ const DRAG_END = 'columndragend';
 const BEFORE_DRAG_END = 'beforecolumndragend';
 // use this event subscription to drop D&D for particular columns
 const DRAG_START = 'columndragstart';
-class ColumnPlugin extends BasePlugin {
+class ColumnMovePlugin extends BasePlugin {
     constructor(revogrid, providers) {
         super(revogrid, providers);
         this.revogrid = revogrid;
@@ -1561,7 +2437,7 @@ class ColumnPlugin extends BasePlugin {
         const cols = this.getDimension(data.pin || 'rgCol');
         const gridRect = this.revogrid.getBoundingClientRect();
         const elRect = dataEl.getBoundingClientRect();
-        const startItem = index.getItemByPosition(cols, getLeftRelative(event.x, gridRect.left, elRect.left - gridRect.left));
+        const startItem = dimension_helpers.getItemByPosition(cols, getLeftRelative(event.x, gridRect.left, elRect.left - gridRect.left));
         this.staticDragData = {
             startPos: event.x,
             startItem,
@@ -1586,8 +2462,12 @@ class ColumnPlugin extends BasePlugin {
         const start = this.staticDragData.startPos;
         if (Math.abs(start - e.x) > 10) {
             const x = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);
-            const rgCol = index.getItemByPosition(this.staticDragData.cols, x);
+            const rgCol = dimension_helpers.getItemByPosition(this.staticDragData.cols, x);
             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);
         }
     }
@@ -1606,16 +2486,18 @@ class ColumnPlugin extends BasePlugin {
             if (relativePos < 0) {
                 relativePos = 0;
             }
-            const newPosition = index.getItemByPosition(this.staticDragData.cols, relativePos);
+            const newPosition = dimension_helpers.getItemByPosition(this.staticDragData.cols, relativePos);
             const store = this.providers.column.stores[this.dragData.type].store;
-            const items = [...store.get('items')];
+            const newItems = [...store.get('items')];
             // prevent position change if needed
-            const { defaultPrevented: stopDrag } = headerCellRenderer.dispatch(this.revogrid, BEFORE_DRAG_END, Object.assign(Object.assign({}, this.staticDragData), { startPosition: this.staticDragData.startItem, newPosition, newItem: store.get('source')[items[this.staticDragData.startItem.itemIndex]] }));
+            const { defaultPrevented: stopDrag } = headerCellRenderer.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]] }));
             if (!stopDrag) {
+                const prevItems = [...newItems];
                 // todo: if move item out of group remove item from group
-                const toMove = items.splice(this.staticDragData.startItem.itemIndex, 1);
-                items.splice(newPosition.itemIndex, 0, ...toMove);
-                store.set('items', items);
+                const toMove = newItems.splice(this.staticDragData.startItem.itemIndex, 1);
+                newItems.splice(newPosition.itemIndex, 0, ...toMove);
+                store.set('items', newItems);
+                this.providers.dimension.updateSizesPositionByNewDataIndexes(this.dragData.type, newItems, prevItems);
             }
             headerCellRenderer.dispatch(this.revogrid, DRAG_END, this.dragData);
         }
@@ -1658,13 +2540,16 @@ function getLeftRelative(absoluteX, gridPos, offset) {
 
 exports.AutoSizeColumnPlugin = AutoSizeColumnPlugin;
 exports.BasePlugin = BasePlugin;
-exports.ColumnPlugin = ColumnPlugin;
+exports.ColumnMovePlugin = ColumnMovePlugin;
 exports.DimensionStore = DimensionStore;
+exports.ExportCsv = ExportCsv;
 exports.ExportFilePlugin = ExportFilePlugin;
 exports.FILTER_CONFIG_CHANGED_EVENT = FILTER_CONFIG_CHANGED_EVENT;
 exports.FILTER_TRIMMED_TYPE = FILTER_TRIMMED_TYPE;
 exports.FILTE_PANEL = FILTE_PANEL;
 exports.FilterPlugin = FilterPlugin;
+exports.GroupingRowPlugin = GroupingRowPlugin;
+exports.SortingPlugin = SortingPlugin;
 exports.StretchColumn = StretchColumn;
 exports.columnTypes = columnTypes;
 exports.filterCoreFunctionsIndexedByType = filterCoreFunctionsIndexedByType;
@@ -1676,4 +2561,4 @@ exports.isRowType = isRowType;
 exports.isStretchPlugin = isStretchPlugin;
 exports.rowTypes = rowTypes;
 
-//# sourceMappingURL=column.drag.plugin-fcd892ec.js.map
+//# sourceMappingURL=column.drag.plugin-a6ef25bf.js.map