@revolist/revogrid 4.9.41 → 4.9.42

package/dist/esm/{column.drag.plugin-3cc77986.js → column.drag.plugin-50f49fa9.js}

@@ -1,45 +1,14 @@
 /*!
  * Built by Revolist OU ❤️
  */
-import { z as createStore, A as reduce, m as setStore, B as isArray, C as baseEach, b as getSourceItem, r as getColumnType, E as toInteger, F as isIterateeCall, G as isGrouping, H as getGroupingName, q as getCellDataParsed, v as isColGrouping } from './column.service-751345b2.js';
-import { c as calculateDimensionData, z as identity, b as getScrollbarSize, t as timeout, g as getItemByPosition } from './index-1dcad6ef.js';
-import { f as calculateRowHeaderSize } from './row-header-utils-3dfbb81f.js';
+import { x as reduce, y as baseEach, r as getColumnType, h as isGrouping, f as getGroupingName, q as getCellDataParsed, G as GROUP_EXPANDED, k as getParsedGroup, P as PSEUDO_GROUP_ITEM_ID, l as isSameGroup, z as GROUP_DEPTH, A as PSEUDO_GROUP_ITEM_VALUE, w as getColumnByProp, p as getCellRaw, B as GROUPING_ROW_TYPE, b as getSource, C as PSEUDO_GROUP_COLUMN, e as gatherGrouping, j as isGroupingColumn, d as getExpanded, t as isColGrouping } from './column.service-a6a7c415.js';
+import { W as createStore, w as setStore, i as calculateDimensionData, X as identity, Y as isArray, b as getSourceItem, o as getScrollbarSize, Z as toInteger, _ as isIterateeCall, u as timeout, $ as baseProperty, a0 as isArrayLike, a1 as getTag, a2 as baseKeys, g as getPhysical, e as setItems, j as getItemByPosition } from './dimension.helpers-d0d709c4.js';
+import { f as calculateRowHeaderSize } from './viewport.store-afa8c4fe.js';
 import { h } from './index-a61f225b.js';
 import { b as FILTER_PROP, i as isFilterBtn } from './filter.button-d40ab17b.js';
-import { d as debounce } from './debounce-72878ced.js';
-import { d as dispatch, O as ON_COLUMN_CLICK } from './header-cell-renderer-32d2ed96.js';
+import { i as isObjectLike, b as baseGetTag, d as debounce } from './debounce-b3166f78.js';
+import { d as dispatch, O as ON_COLUMN_CLICK } from './header-cell-renderer-36ecbdef.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
  */
@@ -55,7 +24,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');
@@ -66,19 +35,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: {},
@@ -98,8 +129,14 @@ class DimensionStore {
     constructor(type) {
         this.type = type;
         this.store = createStore(initialState());
-        this.store.use(trimmedPlugin(this));
-        this.store.use(recalculateRealSizePlugin(this));
+        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();
@@ -124,9 +161,40 @@ class DimensionStore {
      * Generates new indexes based on sizes
      * @param sizes - sizes to set
      */
-    setDimensionSize(sizes) {
+    setDimensionSize(sizes = {}) {
         const dimensionData = calculateDimensionData(this.store.get('originItemSize'), sizes);
-        setStore(this.store, dimensionData);
+        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));
+        }
     }
 }
 
@@ -1053,6 +1121,7 @@ const notContains = (value, extra) => {
 notContains.extra = 'input';
 contains.extra = 'input';
 
+// filter.indexed.ts
 const filterCoreFunctionsIndexedByType = {
     none: () => true,
     empty: notSet,
@@ -1090,19 +1159,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
@@ -1112,8 +1187,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);
@@ -1124,8 +1208,8 @@ class FilterPlugin extends BasePlugin {
         const existingNodes = this.revogrid.registerVNode.filter(n => typeof n === 'object' && n.$tag$ !== FILTE_PANEL);
         this.revogrid.registerVNode = [
             ...existingNodes,
-            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) },
-                " ",
+            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 () => {
@@ -1145,11 +1229,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;
             }
@@ -1161,6 +1251,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;
     }
@@ -1168,6 +1261,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) {
@@ -1175,8 +1271,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;
             }
         }
@@ -1186,7 +1285,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) {
@@ -1204,15 +1303,11 @@ class FilterPlugin extends BasePlugin {
             }
         }
         if (config.collection) {
-            this.filterCollection = 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) {
@@ -1225,18 +1320,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 (!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;
         }
@@ -1244,7 +1333,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';
@@ -1328,7 +1419,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 = {};
@@ -1343,7 +1438,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,
                 };
@@ -1370,65 +1464,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 ? 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 ? 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[PSEUDO_GROUP_ITEM_VALUE];
+    const trimmed = {};
+    let i = pIndex + 1;
+    const total = source.length;
+    while (i < total) {
+        const currentModel = source[i];
+        if (isGrouping(currentModel)) {
+            const currentValue = currentModel[PSEUDO_GROUP_ITEM_VALUE];
+            if (!currentValue.length || !currentValue.startsWith(collapseValue + ',')) {
+                break;
+            }
+            currentModel[GROUP_EXPANDED] = false;
+        }
+        trimmed[i++] = true;
+    }
+    model[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 = getParsedGroup(model[PSEUDO_GROUP_ITEM_ID]);
+    const trimmed = {};
+    // no group found
+    if (!currentGroup) {
+        return { trimmed };
+    }
+    const groupItems = [];
+    model[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 = isGrouping(currentModel);
+        // group found
+        if (isGroup) {
+            if (!isSameGroup(currentGroup, model, currentModel)) {
+                break;
+            }
+            else if (!groupLevelOnly) {
+                // if get group first it's group only level
+                groupLevelOnly = currentModel[GROUP_DEPTH];
+            }
+        }
+        // level 0 or same depth
+        if (!groupLevelOnly || (isGroup && groupLevelOnly === currentModel[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' ||
+    (!isArray(value) && isObjectLike(value) && 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 = 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 (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 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 (isGrouping(itemA)) {
+                if (itemA['__rvgr-prop'] !== prop) {
+                    return 0;
+                }
+            }
+            if (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((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(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 ? getCellRaw(a, this.column) : a === null || a === void 0 ? void 0 : a[prop];
+        const bRaw = this.column ? 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 = 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 (isGrouping(e.detail.model)) {
+            e.preventDefault();
+        }
+    }
+    // expand event triggered
+    onExpand({ virtualIndex }) {
+        const { source } = getSource(this.getStore().get('source'), this.getStore().get('proxyItems'));
+        let newTrimmed = this.getStore().get('trimmed')[TRIMMED_GROUPING];
+        let i = getPhysical(this.getStore(), virtualIndex);
+        const isExpanded = getExpanded(source[i]);
+        if (!isExpanded) {
+            const { trimmed, items } = doExpand(virtualIndex, source, this.getStore().get('items'));
+            newTrimmed = Object.assign(Object.assign({}, newTrimmed), trimmed);
+            if (items) {
+                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][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 } = 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 = 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] && 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 } = 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, } = 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, 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 } = getSource(this.getStore().get('source'), this.getStore().get('proxyItems'), true);
+            preservedExpanded = prevExpanded;
+        }
+        const source = data.source.filter(s => !isGrouping(s));
+        const options = Object.assign(Object.assign({}, (this.revogrid.grouping || {})), { prevExpanded: preservedExpanded });
+        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup, } = 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 } = 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 (isGroupingColumn(c)) {
+                    delete c[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 } = getSource(this.getStore().get('source'), this.getStore().get('proxyItems'), true);
+        this.providers.data.setData(source, 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);
     }
 }
 
@@ -1507,7 +2383,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;
@@ -1586,6 +2462,10 @@ class ColumnPlugin extends BasePlugin {
             const x = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);
             const rgCol = 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,14 +2486,16 @@ class ColumnPlugin extends BasePlugin {
             }
             const newPosition = 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 } = 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 } = 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);
             }
             dispatch(this.revogrid, DRAG_END, this.dragData);
         }
@@ -1654,6 +2536,6 @@ function getLeftRelative(absoluteX, gridPos, offset) {
     return absoluteX - gridPos - offset;
 }
 
-export { AutoSizeColumnPlugin as A, BasePlugin as B, ColumnPlugin as C, DimensionStore as D, ExportFilePlugin as E, FILTER_TRIMMED_TYPE as F, StretchColumn as S, isStretchPlugin as a, FILTER_CONFIG_CHANGED_EVENT as b, columnTypes as c, FILTE_PANEL as d, FilterPlugin as e, filterCoreFunctionsIndexedByType as f, filterTypes as g, filterNames as h, isRowType as i, getLeftRelative as j, forEach as k, rowTypes as r };
+export { AutoSizeColumnPlugin as A, BasePlugin as B, ColumnMovePlugin as C, DimensionStore as D, ExportFilePlugin as E, FILTER_TRIMMED_TYPE as F, GroupingRowPlugin as G, StretchColumn as S, isStretchPlugin as a, ExportCsv as b, columnTypes as c, FILTER_CONFIG_CHANGED_EVENT as d, FILTE_PANEL as e, FilterPlugin as f, filterCoreFunctionsIndexedByType as g, filterTypes as h, isRowType as i, filterNames as j, getLeftRelative as k, SortingPlugin as l, forEach as m, rowTypes as r };
 
-//# sourceMappingURL=column.drag.plugin-3cc77986.js.map
+//# sourceMappingURL=column.drag.plugin-50f49fa9.js.map