@revolist/revogrid 4.10.31 → 4.10.32

package/dist/cjs/{sorting.plugin-13a26a98.js → column.drag.plugin-e7ee8105.js}

@@ -3,13 +3,13 @@
  */
 'use strict';
 
-const column_service = require('./column.service-f869b692.js');
+const column_service = require('./column.service-905483c3.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-131f117c.js');
+const headerCellRenderer = require('./header-cell-renderer-64a361f7.js');
 
 /**
  * Plugin which recalculates realSize on changes of sizes, originItemSize and count
@@ -1626,838 +1626,879 @@ function processDoubleConversionTrimmed(initiallyTrimed, firstLevelMap, secondLe
     return trimemedOptionsToUpgrade;
 }
 
-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();
-        }
+/** `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()];
     }
-    // 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);
+    //
+    /**
+     * 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;
+                }
             }
-        }
-        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;
+            if (column_service.isGrouping(itemB)) {
+                if (itemB['__rvgr-prop'] !== prop) {
+                    return 0;
+                }
             }
-        }
-    }
-    // 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;
+            /**
+             * 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.
+ * 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;
     }
-    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;
+    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);
+        });
+        this.addEventListener('beforeanysource', ({ detail: { type }, }) => {
+            // if sorting was provided - sort data
+            if (!!this.sorting && this.sortingFunc) {
+                const beforeEvent = this.emit('beforesorting', { type });
+                if (beforeEvent.defaultPrevented) {
+                    return;
                 }
+                this.startSorting(this.sorting, this.sortingFunc);
             }
-        }
-    }
-    // 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))) {
+        });
+        this.addEventListener('aftercolumnsset', ({ detail: { order }, }) => {
+            // if config provided - do nothing, read from config
+            if (config) {
                 return;
             }
-            this.onDataSet(detail);
+            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('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', () => {
+        this.addEventListener('beforeheaderclick', (e) => {
             var _a, _b;
-            if (!((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.length)) {
+            if (e.defaultPrevented) {
                 return;
             }
-            this.doSourceUpdate(Object.assign({}, this.options));
+            if (!e.detail.column.sortable) {
+                return;
+            }
+            this.headerclick(e.detail.column, e.detail.index, (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.originalEvent) === null || _b === void 0 ? void 0 : _b.shiftKey);
         });
-        /**
-         * 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);
+    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);
     }
-    /**
-     * Apply grouping on data set
-     * Clear grouping from source
-     * If source came from other plugin
-     */
-    onDataSet(data) {
+    getComparer(column, order) {
         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 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;
         }
-        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);
+        if (order == 'desc') {
+            return this.descCellCompare(cellCmp);
+        }
+        return undefined;
     }
     /**
-     * Externam call to apply grouping. Called by revogrid when prop changed.
+     * Apply sorting to data on header click
+     * If additive - add to existing sorting, multiple columns can be sorted
      */
-    setGrouping(options) {
+    headerclick(column, index, additive) {
         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();
+        let order = this.getNextOrder(column.order);
+        const beforeEvent = this.emit('beforesorting', { column, order, additive });
+        if (beforeEvent.defaultPrevented) {
             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));
+        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;
         }
-        // props exist and columns inited
-        for (let t of columnTypes) {
-            if (this.setColumnGrouping(this.providers.column.getColumns(t))) {
-                this.providers.column.refreshByType(t);
-                break;
+        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;
             }
         }
-        // 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);
+        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];
             }
-        });
-        // 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);
-    }
-}
-
-const COLUMN_DRAG_CLASS = 'column-drag-start';
-class ColumnOrderHandler {
-    constructor() {
-        this.offset = 0;
+        this.startSorting(this.sorting, this.sortingFunc);
     }
-    renderAutoscroll(_, parent) {
-        if (!parent) {
-            return;
+    /**
+     * 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], });
+            }
         }
-        this.autoscrollEl = document.createElement('div');
-        this.autoscrollEl.classList.add('drag-auto-scroll-y');
-        parent.appendChild(this.autoscrollEl);
-    }
-    autoscroll(pos, dataContainerSize, direction = 'translateX') {
-        if (!this.autoscrollEl) {
-            return;
+        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);
+                }
+            }
         }
-        const helperOffset = 10;
-        // calculate current y position inside of the grid active holder
-        // 3 - size of element + border
-        const maxScroll = Math.min(pos + helperOffset, dataContainerSize - 3);
-        this.autoscrollEl.style.transform = `${direction}(${maxScroll}px)`;
-        this.autoscrollEl.scrollIntoView({
-            block: 'nearest',
-            inline: 'nearest',
-        });
+        this.emit('aftersortingapply');
     }
-    start(e, { dataEl, gridRect, scrollEl, gridEl }, dir = 'left') {
-        gridEl.classList.add(COLUMN_DRAG_CLASS);
-        const scrollContainerRect = scrollEl.getBoundingClientRect();
-        if (scrollContainerRect) {
-            this.offset = scrollContainerRect[dir] - gridRect[dir];
-        }
-        this.renderAutoscroll(e, dataEl);
+    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;
     }
-    stop(gridEl) {
-        var _a;
-        gridEl.classList.remove(COLUMN_DRAG_CLASS);
-        if (this.element) {
-            this.element.hidden = true;
-        }
-        this.offset = 0;
-        (_a = this.autoscrollEl) === null || _a === void 0 ? void 0 : _a.remove();
-        this.autoscrollEl = undefined;
+    descCellCompare(cmp) {
+        return (prop, a, b) => {
+            return -1 * cmp(prop, a, b);
+        };
     }
-    showHandler(pos, size, direction = 'translateX') {
-        if (!this.element) {
-            return;
-        }
-        // do not allow overcross top of the scrollable area, header excluded
-        if (this.offset) {
-            pos = Math.max(pos, this.offset);
+    getNextOrder(currentOrder) {
+        switch (currentOrder) {
+            case undefined:
+                return 'asc';
+            case 'asc':
+                return 'desc';
+            case 'desc':
+                return undefined;
         }
-        // can not be bigger then grid end
-        pos = Math.min(pos, size);
-        this.element.style.transform = `${direction}(${pos}px)`;
-        this.element.hidden = false;
-    }
-    render() {
-        const el = this.element = document.createElement('div');
-        el.classList.add('drag-position-y');
-        el.hidden = true;
-        return el;
     }
 }
 
-/**
- * Plugin for column manual move
- */
-const COLUMN_CLICK = headerCellRenderer.ON_COLUMN_CLICK;
-const MOVE = 'columndragmousemove';
-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 ColumnMovePlugin extends BasePlugin {
+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;
-        this.moveFunc = debounce.debounce((e) => this.doMove(e), 5);
-        this.staticDragData = null;
-        this.dragData = null;
-        this.localSubscriptions = {};
-        this.orderUi = new ColumnOrderHandler();
-        revogrid.appendChild(this.orderUi.render());
-        revogrid.classList.add('column-draggable');
-        // Register events
-        this.localSubscriptions['mouseleave'] = {
-            target: document,
-            callback: (e) => this.onMouseOut(e),
-        };
-        this.localSubscriptions['mouseup'] = {
-            target: document,
-            callback: (e) => this.onMouseUp(e),
-        };
-        this.localSubscriptions['mousemove'] = {
-            target: document,
-            callback: (e) => this.move(e),
-        };
-        this.addEventListener(COLUMN_CLICK, ({ detail }) => this.dragStart(detail));
-    }
-    dragStart({ event, data }) {
-        if (event.defaultPrevented) {
-            return;
-        }
-        const { defaultPrevented } = headerCellRenderer.dispatch(this.revogrid, DRAG_START, data);
-        // check if allowed to drag particulat column
-        if (defaultPrevented) {
-            return;
-        }
-        this.clearOrder();
-        const { mouseleave, mouseup, mousemove } = this.localSubscriptions;
-        mouseleave.target.addEventListener('mouseleave', mouseleave.callback);
-        mouseup.target.addEventListener('mouseup', mouseup.callback);
-        const dataEl = event.target.closest('revogr-header');
-        const scrollEl = event.target.closest('revogr-viewport-scroll');
-        if (!dataEl || !scrollEl) {
-            return;
-        }
-        // no grouping drag and no row header column drag
-        if (column_service.isColGrouping(data) || data.providers.type === 'rowHeaders') {
-            return;
-        }
-        const cols = this.getDimension(data.pin || 'rgCol');
-        const gridRect = this.revogrid.getBoundingClientRect();
-        const elRect = dataEl.getBoundingClientRect();
-        const startItem = dimension_helpers.getItemByPosition(cols, getLeftRelative(event.x, gridRect.left, elRect.left - gridRect.left));
-        this.staticDragData = {
-            startPos: event.x,
-            startItem,
-            data,
-            dataEl,
-            scrollEl,
-            gridEl: this.revogrid,
-            cols,
-        };
-        this.dragData = this.getData(this.staticDragData);
-        mousemove.target.addEventListener('mousemove', mousemove.callback);
-        this.orderUi.start(event, Object.assign(Object.assign({}, this.dragData), this.staticDragData));
     }
-    doMove(e) {
-        if (!this.staticDragData) {
-            return;
-        }
-        const dragData = (this.dragData = this.getData(this.staticDragData));
-        if (!dragData) {
-            return;
-        }
-        const start = this.staticDragData.startPos;
-        if (Math.abs(start - e.x) > 10) {
-            const x = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);
-            const rgCol = 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);
+    // befoce cell focus
+    onFocus(e) {
+        if (column_service.isGrouping(e.detail.model)) {
+            e.preventDefault();
         }
     }
-    move(e) {
-        headerCellRenderer.dispatch(this.revogrid, MOVE, e);
-        // then do move
-        this.moveFunc(e);
-    }
-    onMouseOut(_) {
-        this.clearOrder();
-    }
-    onMouseUp(e) {
-        // apply new positions
-        if (this.dragData && this.staticDragData) {
-            let relativePos = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);
-            if (relativePos < 0) {
-                relativePos = 0;
-            }
-            const newPosition = dimension_helpers.getItemByPosition(this.staticDragData.cols, relativePos);
-            const store = this.providers.column.stores[this.dragData.type].store;
-            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')[newItems[this.staticDragData.startItem.itemIndex]] }));
-            if (!stopDrag) {
-                const prevItems = [...newItems];
-                // todo: if move item out of group remove item from group
-                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);
+    // 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);
             }
-            headerCellRenderer.dispatch(this.revogrid, DRAG_END, this.dragData);
         }
-        this.clearOrder();
-    }
-    clearLocalSubscriptions() {
-        forEach(this.localSubscriptions, ({ target, callback }, key) => target.removeEventListener(key, callback));
-    }
-    clearOrder() {
-        this.staticDragData = null;
-        this.dragData = null;
-        this.clearLocalSubscriptions();
-        this.orderUi.stop(this.revogrid);
-    }
-    /**
-     * Clearing subscription
-     */
-    clearSubscriptions() {
-        super.clearSubscriptions();
-        this.clearLocalSubscriptions();
+        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);
     }
-    getData({ gridEl, dataEl, data, }) {
-        const gridRect = gridEl.getBoundingClientRect();
-        const elRect = dataEl.getBoundingClientRect();
-        const scrollOffset = elRect.left - gridRect.left;
-        return {
-            elRect,
-            gridRect,
-            type: data.pin || 'rgCol',
-            scrollOffset,
-        };
+    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;
     }
-    getDimension(type) {
-        return this.providers.dimension.stores[type].getCurrentState();
+    setColumns({ columns }) {
+        for (let type of columnTypes) {
+            if (this.setColumnGrouping(columns[type])) {
+                break;
+            }
+        }
     }
-}
-function getLeftRelative(absoluteX, gridPos, offset) {
-    return absoluteX - gridPos - offset;
-}
-
-/** `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()];
+    // 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;
+            }
+        }
     }
-    //
-    /**
-     * 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) => {
-        for (const [prop, cmp] of Object.entries(sortingFunc)) {
-            const itemA = source[a];
-            const itemB = source[b];
-            /**
-             * 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;
+    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;
+                }
             }
         }
-        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.
- * 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) {
-        super(revogrid, providers);
-        this.revogrid = revogrid;
-        this.sortingPromise = null;
-        this.postponeSort = debounce.debounce((order, comparison, ignoreViewportUpdate) => this.runSorting(order, comparison, ignoreViewportUpdate), 50);
-        this.addEventListener('beforeanysource', ({ detail: { type }, }) => {
-            // if sorting was provided - sort data
-            if (!!this.sorting && this.sortingFunc) {
-                const beforeEvent = this.emit('beforesorting', { type });
-                if (beforeEvent.defaultPrevented) {
-                    return;
-                }
-                this.startSorting(this.sorting, this.sortingFunc);
+    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;
             }
-        });
-        this.addEventListener('aftercolumnsset', ({ detail: { order }, }) => {
-            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;
+            // if sorting is running don't apply grouping, wait for sorting, then it'll apply in @aftersortingapply
+            if (this.isSortingRunning()) {
+                return;
             }
-            this.startSorting(order, sortingFunc, true);
+            this.onDataSet(detail);
         });
-        this.addEventListener('beforeheaderclick', (e) => {
+        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 (e.defaultPrevented) {
+            if (!((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.length)) {
                 return;
             }
-            if (!e.detail.column.sortable) {
-                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;
             }
-            this.headerclick(e.detail.column, e.detail.index, (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.originalEvent) === null || _b === void 0 ? void 0 : _b.shiftKey);
+        }
+        // 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);
+    }
+}
+
+const COLUMN_DRAG_CLASS = 'column-drag-start';
+class ColumnOrderHandler {
+    constructor() {
+        this.offset = 0;
+    }
+    renderAutoscroll(_, parent) {
+        if (!parent) {
+            return;
+        }
+        this.autoscrollEl = document.createElement('div');
+        this.autoscrollEl.classList.add('drag-auto-scroll-y');
+        parent.appendChild(this.autoscrollEl);
+    }
+    autoscroll(pos, dataContainerSize, direction = 'translateX') {
+        if (!this.autoscrollEl) {
+            return;
+        }
+        const helperOffset = 10;
+        // calculate current y position inside of the grid active holder
+        // 3 - size of element + border
+        const maxScroll = Math.min(pos + helperOffset, dataContainerSize - 3);
+        this.autoscrollEl.style.transform = `${direction}(${maxScroll}px)`;
+        this.autoscrollEl.scrollIntoView({
+            block: 'nearest',
+            inline: 'nearest',
         });
     }
-    startSorting(order, sortingFunc, ignoreViewportUpdate) {
-        if (!this.sortingPromise) {
-            // add job before render
-            this.revogrid.jobsBeforeRender.push(new Promise(resolve => {
-                this.sortingPromise = resolve;
-            }));
+    start(e, { dataEl, gridRect, scrollEl, gridEl }, dir = 'left') {
+        gridEl.classList.add(COLUMN_DRAG_CLASS);
+        const scrollContainerRect = scrollEl.getBoundingClientRect();
+        if (scrollContainerRect) {
+            this.offset = scrollContainerRect[dir] - gridRect[dir];
+        }
+        this.renderAutoscroll(e, dataEl);
+    }
+    stop(gridEl) {
+        var _a;
+        gridEl.classList.remove(COLUMN_DRAG_CLASS);
+        if (this.element) {
+            this.element.hidden = true;
+        }
+        this.offset = 0;
+        (_a = this.autoscrollEl) === null || _a === void 0 ? void 0 : _a.remove();
+        this.autoscrollEl = undefined;
+    }
+    showHandler(pos, size, direction = 'translateX') {
+        if (!this.element) {
+            return;
+        }
+        // do not allow overcross top of the scrollable area, header excluded
+        if (this.offset) {
+            pos = Math.max(pos, this.offset);
+        }
+        // can not be bigger then grid end
+        pos = Math.min(pos, size);
+        this.element.style.transform = `${direction}(${pos}px)`;
+        this.element.hidden = false;
+    }
+    render() {
+        const el = this.element = document.createElement('div');
+        el.classList.add('drag-position-y');
+        el.hidden = true;
+        return el;
+    }
+}
+
+/**
+ * Plugin for column manual move
+ */
+const COLUMN_CLICK = headerCellRenderer.ON_COLUMN_CLICK;
+const MOVE = 'columndragmousemove';
+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 ColumnMovePlugin extends BasePlugin {
+    constructor(revogrid, providers) {
+        super(revogrid, providers);
+        this.revogrid = revogrid;
+        this.providers = providers;
+        this.moveFunc = debounce.debounce((e) => this.doMove(e), 5);
+        this.staticDragData = null;
+        this.dragData = null;
+        this.localSubscriptions = {};
+        this.orderUi = new ColumnOrderHandler();
+        revogrid.appendChild(this.orderUi.render());
+        revogrid.classList.add('column-draggable');
+        // Register events
+        this.localSubscriptions['mouseleave'] = {
+            target: document,
+            callback: (e) => this.onMouseOut(e),
+        };
+        this.localSubscriptions['mouseup'] = {
+            target: document,
+            callback: (e) => this.onMouseUp(e),
+        };
+        this.localSubscriptions['mousemove'] = {
+            target: document,
+            callback: (e) => this.move(e),
+        };
+        this.addEventListener(COLUMN_CLICK, ({ detail }) => this.dragStart(detail));
+    }
+    dragStart({ event, data }) {
+        if (event.defaultPrevented) {
+            return;
         }
-        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 }));
-        if (order == 'asc') {
-            return cellCmp;
+        const { defaultPrevented } = headerCellRenderer.dispatch(this.revogrid, DRAG_START, data);
+        // check if allowed to drag particulat column
+        if (defaultPrevented) {
+            return;
         }
-        if (order == 'desc') {
-            return this.descCellCompare(cellCmp);
+        this.clearOrder();
+        const { mouseleave, mouseup, mousemove } = this.localSubscriptions;
+        mouseleave.target.addEventListener('mouseleave', mouseleave.callback);
+        mouseup.target.addEventListener('mouseup', mouseup.callback);
+        const dataEl = event.target.closest('revogr-header');
+        const scrollEl = event.target.closest('revogr-viewport-scroll');
+        if (!dataEl || !scrollEl) {
+            return;
         }
-        return undefined;
+        // no grouping drag and no row header column drag
+        if (column_service.isColGrouping(data) || data.providers.type === 'rowHeaders') {
+            return;
+        }
+        const cols = this.getDimension(data.pin || 'rgCol');
+        const gridRect = this.revogrid.getBoundingClientRect();
+        const elRect = dataEl.getBoundingClientRect();
+        const startItem = dimension_helpers.getItemByPosition(cols, getLeftRelative(event.x, gridRect.left, elRect.left - gridRect.left));
+        this.staticDragData = {
+            startPos: event.x,
+            startItem,
+            data,
+            dataEl,
+            scrollEl,
+            gridEl: this.revogrid,
+            cols,
+        };
+        this.dragData = this.getData(this.staticDragData);
+        mousemove.target.addEventListener('mousemove', mousemove.callback);
+        this.orderUi.start(event, Object.assign(Object.assign({}, this.dragData), this.staticDragData));
     }
-    /**
-     * 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) {
+    doMove(e) {
+        if (!this.staticDragData) {
             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) {
+        const dragData = (this.dragData = this.getData(this.staticDragData));
+        if (!dragData) {
             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;
+        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 = 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);
         }
-        else {
-            if (order) {
-                // reset sorting
-                this.sorting = { [column.prop]: order };
-                this.sortingFunc = { [column.prop]: cmp };
+    }
+    move(e) {
+        headerCellRenderer.dispatch(this.revogrid, MOVE, e);
+        // then do move
+        this.moveFunc(e);
+    }
+    onMouseOut(_) {
+        this.clearOrder();
+    }
+    onMouseUp(e) {
+        // apply new positions
+        if (this.dragData && this.staticDragData) {
+            let relativePos = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);
+            if (relativePos < 0) {
+                relativePos = 0;
             }
-            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];
+            const newPosition = dimension_helpers.getItemByPosition(this.staticDragData.cols, relativePos);
+            const store = this.providers.column.stores[this.dragData.type].store;
+            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')[newItems[this.staticDragData.startItem.itemIndex]] }));
+            if (!stopDrag) {
+                const prevItems = [...newItems];
+                // todo: if move item out of group remove item from group
+                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);
         }
-        this.startSorting(this.sorting, this.sortingFunc);
+        this.clearOrder();
+    }
+    clearLocalSubscriptions() {
+        forEach(this.localSubscriptions, ({ target, callback }, key) => target.removeEventListener(key, callback));
+    }
+    clearOrder() {
+        this.staticDragData = null;
+        this.dragData = null;
+        this.clearLocalSubscriptions();
+        this.orderUi.stop(this.revogrid);
     }
     /**
-     * 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')
+     * Clearing subscription
      */
-    sort(sorting, sortingFunc, types = rowTypes, ignoreViewportUpdate = false) {
-        // if no sorting - reset
-        if (!Object.keys(sorting || {}).length) {
-            this.sorting = undefined;
-            this.sortingFunc = undefined;
-            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 {
-            // set sorting
-            this.sorting = sorting;
-            this.sortingFunc = sortingFunc;
-            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;
+    clearSubscriptions() {
+        super.clearSubscriptions();
+        this.clearLocalSubscriptions();
     }
-    descCellCompare(cmp) {
-        return (prop, a, b) => {
-            return -1 * cmp(prop, a, b);
+    getData({ gridEl, dataEl, data, }) {
+        const gridRect = gridEl.getBoundingClientRect();
+        const elRect = dataEl.getBoundingClientRect();
+        const scrollOffset = elRect.left - gridRect.left;
+        return {
+            elRect,
+            gridRect,
+            type: data.pin || 'rgCol',
+            scrollOffset,
         };
     }
-    getNextOrder(currentOrder) {
-        switch (currentOrder) {
-            case undefined:
-                return 'asc';
-            case 'asc':
-                return 'desc';
-            case 'desc':
-                return undefined;
-        }
+    getDimension(type) {
+        return this.providers.dimension.stores[type].getCurrentState();
     }
 }
+function getLeftRelative(absoluteX, gridPos, offset) {
+    return absoluteX - gridPos - offset;
+}
 
 exports.AutoSizeColumnPlugin = AutoSizeColumnPlugin;
 exports.BasePlugin = BasePlugin;
@@ -2482,4 +2523,4 @@ exports.isRowType = isRowType;
 exports.isStretchPlugin = isStretchPlugin;
 exports.rowTypes = rowTypes;
 
-//# sourceMappingURL=sorting.plugin-13a26a98.js.map
+//# sourceMappingURL=column.drag.plugin-e7ee8105.js.map