@revolist/revogrid 4.9.9 → 4.9.11

package/dist/cjs/revo-grid.cjs.entry.js

@@ -6,17 +6,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-10d10c55.js');
-const index = require('./index-464d1aaf.js');
-const column_utils = require('./column.utils-4a450d27.js');
-const toNumber = require('./toNumber-838e6ff5.js');
-const selection_helpers = require('./selection.helpers-2c90d546.js');
-const debounce = require('./debounce-e2b7c6fb.js');
-const rowHeaderUtils = require('./row-header-utils-e71dc7bf.js');
-const filter_button = require('./filter.button-afb16244.js');
-const column_service = require('./column.service-bfaba0e0.js');
-const dispatcher = require('./dispatcher-998aa470.js');
-const headerCellRenderer = require('./header-cell-renderer-53e4fd75.js');
+const index = require('./index-28b6fdfb.js');
+const column_drag_plugin = require('./column.drag.plugin-e636b5af.js');
+const debounce = require('./debounce-cb5f4e35.js');
+const column_service = require('./column.service-15c8352d.js');
+const rowHeaderUtils = require('./row-header-utils-22ffee54.js');
+const viewport_helpers = require('./viewport.helpers-e59a544e.js');
 const events = require('./events-af8f6914.js');
+require('./filter.button-afb16244.js');
+require('./header-cell-renderer-375a879f.js');
 
 class ThemeCompact {
     constructor() {
@@ -83,1087 +81,377 @@ class ThemeService {
     }
 }
 
-var baseIteratee = index._baseIteratee,
-    isArrayLike$1 = index.isArrayLike_1,
-    keys = index.keys_1;
-
-/**
- * Creates a `_.find` or `_.findLast` function.
- *
- * @private
- * @param {Function} findIndexFunc The function to find the collection index.
- * @returns {Function} Returns the new find function.
- */
-function createFind$1(findIndexFunc) {
-  return function(collection, predicate, fromIndex) {
-    var iterable = Object(collection);
-    if (!isArrayLike$1(collection)) {
-      var iteratee = baseIteratee(predicate);
-      collection = keys(collection);
-      predicate = function(key) { return iteratee(iterable[key], key, iterable); };
-    }
-    var index = findIndexFunc(collection, predicate, fromIndex);
-    return index > -1 ? iterable[iteratee ? collection[index] : index] : undefined;
-  };
-}
-
-var _createFind = createFind$1;
-
-var createFind = _createFind,
-    findIndex = index.findIndex_1;
-
-/**
- * Iterates over elements of `collection`, returning the first element
- * `predicate` returns truthy for. The predicate is invoked with three
- * arguments: (value, index|key, collection).
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Collection
- * @param {Array|Object} collection The collection to inspect.
- * @param {Function} [predicate=_.identity] The function invoked per iteration.
- * @param {number} [fromIndex=0] The index to search from.
- * @returns {*} Returns the matched element, else `undefined`.
- * @example
- *
- * var users = [
- *   { 'user': 'barney',  'age': 36, 'active': true },
- *   { 'user': 'fred',    'age': 40, 'active': false },
- *   { 'user': 'pebbles', 'age': 1,  'active': true }
- * ];
- *
- * _.find(users, function(o) { return o.age < 40; });
- * // => object for 'barney'
- *
- * // The `_.matches` iteratee shorthand.
- * _.find(users, { 'age': 1, 'active': true });
- * // => object for 'pebbles'
- *
- * // The `_.matchesProperty` iteratee shorthand.
- * _.find(users, ['active', false]);
- * // => object for 'fred'
- *
- * // The `_.property` iteratee shorthand.
- * _.find(users, 'active');
- * // => object for 'barney'
- */
-var find = createFind(findIndex);
-
-var find_1 = find;
-
-class ColumnDataProvider {
-    get order() {
-        const order = {};
-        const sorting = this.sorting;
-        if (sorting) {
-            Object.keys(sorting).forEach((prop) => {
-                order[prop] = sorting[prop].order;
-            });
-        }
-        return order;
-    }
-    get stores() {
-        return this.dataSources;
-    }
-    constructor() {
-        this.sorting = null;
-        this.dataSources = column_utils.columnTypes.reduce((sources, k) => {
-            sources[k] = new index.DataStore(k);
-            return sources;
-        }, {});
-    }
-    column(c, pin) {
-        return this.getColumn(c, pin || 'rgCol');
-    }
-    getColumn(virtualIndex, type) {
-        return index.getSourceItem(this.dataSources[type].store, virtualIndex);
-    }
-    getRawColumns() {
-        return index.reduce_1(this.dataSources, (result, item, type) => {
-            result[type] = item.store.get('source');
-            return result;
-        }, {
-            rgCol: [],
-            colPinStart: [],
-            colPinEnd: [],
-        });
-    }
-    getColumns(type = 'all') {
-        if (type !== 'all') {
-            return this.dataSources[type].store.get('source');
-        }
-        return column_utils.columnTypes.reduce((r, t) => {
-            r.push(...this.dataSources[t].store.get('source'));
-            return r;
-        }, []);
-    }
-    getColumnIndexByProp(prop, type) {
-        return index.getSourceItemVirtualIndexByProp(this.dataSources[type].store, prop);
-    }
-    getColumnByProp(prop, type) {
-        const items = this.dataSources[type].store.get('source');
-        return find_1(items, { prop });
-    }
-    refreshByType(type) {
-        this.dataSources[type].refresh();
-    }
-    setColumns(data) {
-        column_utils.columnTypes.forEach(k => {
-            // set columns data
-            this.dataSources[k].updateData(data.columns[k], {
-                // max depth level
-                depth: data.maxLevel,
-                // groups
-                groups: data.columnGrouping[k].reduce((res, g) => {
-                    if (!res[g.level]) {
-                        res[g.level] = [];
-                    }
-                    res[g.level].push(g);
-                    return res;
-                }, {}),
-            });
-        });
-        this.sorting = data.sort;
-        return data;
-    }
-    updateColumns(cols) {
-        // collect column by type and propert
-        const columnByKey = cols.reduce((res, c) => {
-            const type = column_utils.getColumnType(c);
-            if (!res[type]) {
-                res[type] = {};
-            }
-            res[type][c.prop] = c;
-            return res;
-        }, {});
-        // find indexes in source
-        const colByIndex = {};
-        for (const t in columnByKey) {
-            if (!columnByKey.hasOwnProperty(t)) {
-                continue;
-            }
-            const type = t;
-            const colsToUpdate = columnByKey[type];
-            const items = this.dataSources[type].store.get('source');
-            colByIndex[type] = {};
-            for (let i = 0; i < items.length; i++) {
-                const rgCol = items[i];
-                const colToUpdateIfExists = colsToUpdate === null || colsToUpdate === void 0 ? void 0 : colsToUpdate[rgCol.prop];
-                if (colToUpdateIfExists) {
-                    colByIndex[type][i] = colToUpdateIfExists;
-                }
-            }
-        }
-        for (const t in colByIndex) {
-            if (!colByIndex.hasOwnProperty(t)) {
-                continue;
-            }
-            const type = t;
-            index.setSourceByVirtualIndex(this.dataSources[type].store, colByIndex[type] || {});
-        }
-    }
-    updateColumn(column, index$1) {
-        const type = column_utils.getColumnType(column);
-        index.setSourceByVirtualIndex(this.dataSources[type].store, { [index$1]: column });
-    }
-    updateColumnSorting(column, index, sorting, additive) {
-        if (!additive) {
-            this.clearSorting();
-        }
-        column.order = sorting;
-        if (!this.sorting) {
-            this.sorting = {};
-        }
-        this.sorting[column.prop] = column;
-        this.updateColumn(column, index);
-        return column;
-    }
-    clearSorting() {
-        const types = index.reduce_1(this.sorting, (r, c) => {
-            const k = column_utils.getColumnType(c);
-            r[k] = true;
-            return r;
-        }, {});
-        index.each(types, (_, type) => {
-            const cols = this.dataSources[type].store.get('source');
-            index.each(cols, (c) => (c.order = undefined));
-            this.dataSources[type].setData({ source: [...cols] });
-        });
-        this.sorting = {};
-    }
-}
-
-/**
- * Data source provider
- */
-class DataProvider {
-    constructor(dimensionProvider) {
-        this.dimensionProvider = dimensionProvider;
-        this.stores = index.reduce_1(column_utils.rowTypes, (sources, k) => {
-            sources[k] = new index.DataStore(k);
-            return sources;
-        }, {});
-    }
-    setData(data, type = 'rgRow', disableVirtualRows = false, grouping, silent = false) {
-        // set rgRow data
-        this.stores[type].updateData([...data], grouping, silent);
-        // for pinned row no need virtual data
-        const noVirtual = type !== 'rgRow' || disableVirtualRows;
-        this.dimensionProvider.setData(data.length, type, noVirtual);
-        return data;
-    }
-    getModel(virtualIndex, type = 'rgRow') {
-        const store = this.stores[type].store;
-        return index.getSourceItem(store, virtualIndex);
-    }
-    setCellData({ type, rowIndex, prop, val }, mutate = true) {
-        const model = this.getModel(rowIndex, type);
-        model[prop] = val;
-        // apply data to source
-        index.setSourceByVirtualIndex(this.stores[type].store, { [rowIndex]: model }, mutate);
-    }
-    setRangeData(data, type) {
-        const items = {};
-        for (let rowIndex in data) {
-            const oldModel = (items[rowIndex] = index.getSourceItem(this.stores[type].store, parseInt(rowIndex, 10)));
-            if (!oldModel) {
-                continue;
-            }
-            for (let prop in data[rowIndex]) {
-                oldModel[prop] = data[rowIndex][prop];
-            }
-        }
-        // apply data to source
-        index.setSourceByVirtualIndex(this.stores[type].store, items);
-    }
-    refresh(type = 'all') {
-        if (column_utils.isRowType(type)) {
-            this.refreshItems(type);
-        }
-        column_utils.rowTypes.forEach((t) => this.refreshItems(t));
-    }
-    refreshItems(type = 'rgRow') {
-        const items = this.stores[type].store.get('items');
-        this.stores[type].setData({ items: [...items] });
-    }
-    setGrouping({ depth }, type = 'rgRow') {
-        this.stores[type].setData({ groupingDepth: depth });
-    }
-    setTrimmed(trimmed, type = 'rgRow') {
-        const store = this.stores[type];
-        store.addTrimmed(trimmed);
-        this.dimensionProvider.setTrimmed(trimmed, type);
-        if (type === 'rgRow') {
-            this.dimensionProvider.setData(index.getVisibleSourceItem(store.store).length, type);
-        }
-    }
-}
-
-/**
- * Dimension provider
- * Stores dimension information and custom sizes
- */
-class DimensionProvider {
-    constructor(viewports, config) {
-        this.viewports = viewports;
-        const sizeChanged = debounce.debounce_1((k) => config.realSizeChanged(k), index.RESIZE_INTERVAL);
-        this.stores = index.reduce_1([...column_utils.rowTypes, ...column_utils.columnTypes], (sources, k) => {
-            sources[k] = new column_utils.DimensionStore();
-            sources[k].store.onChange('realSize', () => sizeChanged(k));
-            return sources;
-        }, {});
-    }
-    /**
-     * Clear old sizes from dimension and viewports
-     * @param type - dimension type
-     * @param count - count of items
-     */
-    clearSize(t, count) {
-        this.stores[t].drop();
-        // after we done with drop trigger viewport recalculaction
-        this.viewports.stores[t].setOriginalSizes(this.stores[t].store.get('originItemSize'));
-        this.setItemCount(count, t);
-    }
-    /**
-     * Apply new custom sizes to dimension and view port
-     * @param type - dimension type
-     * @param sizes - new custom sizes
-     * @param keepOld - keep old sizes merge new with old
-     */
-    setCustomSizes(type, sizes, keepOld = false) {
-        let newSizes = sizes;
-        if (keepOld) {
-            const oldSizes = this.stores[type].store.get('sizes');
-            newSizes = Object.assign(Object.assign({}, oldSizes), sizes);
-        }
-        this.stores[type].setDimensionSize(newSizes);
-        this.updateViewport(type, true);
-    }
-    setItemCount(realCount, type) {
-        this.viewports.stores[type].setViewport({ realCount });
-        this.stores[type].setStore({ count: realCount });
-    }
-    /**
-     * Apply trimmed items
-     * @param trimmed - trimmed items
-     * @param type
-     */
-    setTrimmed(trimmed, type) {
-        const allTrimmed = index.gatherTrimmedItems(trimmed);
-        const dimStoreType = this.stores[type];
-        dimStoreType.setStore({ trimmed: allTrimmed });
-        this.updateViewport(type, true);
-    }
-    /**
-     * Sets dimension data and view port coordinate
-     * @param itemCount
-     * @param type - dimension type
-     * @param noVirtual - disable virtual data
-     */
-    setData(itemCount, type, noVirtual = false) {
-        this.setItemCount(itemCount, type);
-        // Virtualization will get disabled
-        if (noVirtual) {
-            const dimension = this.stores[type].getCurrentState();
-            this.viewports.stores[type].setViewport({
-                virtualSize: dimension.realSize,
-            });
-        }
-        this.updateViewport(type);
-    }
-    applyNewColumns(columns, disableVirtualX) {
-        for (let type of column_utils.columnTypes) {
-            // clear existing data
-            this.stores[type].drop();
-            const items = columns[type];
-            // for pinned col no need virtual data
-            const noVirtual = type !== 'rgCol' || disableVirtualX;
-            // setItemCount
-            this.stores[type].setStore({ count: items.length });
-            // setCustomSizes
-            const newSizes = column_utils.getColumnSizes(items);
-            this.stores[type].setDimensionSize(newSizes);
-            const vpUpdate = {
-                // this triggers drop on realCount change
-                realCount: items.length,
-            };
-            // Virtualization will get disabled
-            if (noVirtual) {
-                vpUpdate.virtualSize = this.stores[type].getCurrentState().realSize;
-            }
-            this.viewports.stores[type].setViewport(vpUpdate);
-            this.setViewPortCoordinate({
-                coordinate: this.viewports.stores[type].lastCoordinate,
-                type,
-            });
-        }
-    }
-    getFullSize() {
-        var _a, _b;
-        let x = 0;
-        let y = 0;
-        for (let type of column_utils.columnTypes) {
-            x += ((_a = this.stores[type]) === null || _a === void 0 ? void 0 : _a.store.get('realSize')) || 0;
-        }
-        for (let type of column_utils.rowTypes) {
-            y += ((_b = this.stores[type]) === null || _b === void 0 ? void 0 : _b.store.get('realSize')) || 0;
-        }
-        return { y, x };
-    }
-    updateViewport(type, force = false) {
-        this.setViewPortCoordinate({
-            coordinate: this.viewports.stores[type].lastCoordinate,
-            type,
-            force,
-        });
-    }
-    setViewPortCoordinate({ coordinate, type, force = false, }) {
-        const dimension = this.stores[type].getCurrentState();
-        this.viewports.stores[type].setViewPortCoordinate(coordinate, dimension, force);
-    }
-    getViewPortPos(e) {
-        const dimension = this.stores[e.dimension].getCurrentState();
-        const item = index.getItemByIndex(dimension, e.coordinate);
-        return item.start;
-    }
-    setSettings(data, dimensionType) {
-        let stores = [];
-        switch (dimensionType) {
-            case 'rgCol':
-                stores = column_utils.columnTypes;
-                break;
-            case 'rgRow':
-                stores = column_utils.rowTypes;
+// provide collapse data
+function doCollapse(pIndex, source) {
+    const model = source[pIndex];
+    const collapseValue = model[column_service.PSEUDO_GROUP_ITEM_VALUE];
+    const trimmed = {};
+    let i = pIndex + 1;
+    const total = source.length;
+    while (i < total) {
+        const currentModel = source[i];
+        if (column_service.isGrouping(currentModel)) {
+            const currentValue = currentModel[column_service.PSEUDO_GROUP_ITEM_VALUE];
+            if (!currentValue.length || !currentValue.startsWith(collapseValue + ',')) {
                 break;
+            }
+            currentModel[column_service.GROUP_EXPANDED] = false;
         }
-        for (let s of stores) {
-            this.stores[s].setStore(data);
-        }
-    }
-}
-
-class ViewportProvider {
-    constructor() {
-        this.stores = index.reduce_1([...column_utils.rowTypes, ...column_utils.columnTypes], (sources, k) => {
-            sources[k] = new rowHeaderUtils.ViewportStore(k);
-            return sources;
-        }, {});
-    }
-    setViewport(type, data) {
-        this.stores[type].setViewport(data);
+        trimmed[i++] = true;
     }
+    model[column_service.GROUP_EXPANDED] = false;
+    return { trimmed };
 }
-
 /**
- * Plugin module for revo-grid grid system
- * Add support for automatic column resize
+ *
+ * @param pIndex - physical index
+ * @param vIndex - virtual index, need to update item collection
+ * @param source - data source
+ * @param rowItemsIndexes - rgRow indexes
  */
-const LETTER_BLOCK_SIZE = 7;
-var ColumnAutoSizeMode;
-(function (ColumnAutoSizeMode) {
-    // increases column width on header click according the largest text value
-    ColumnAutoSizeMode["headerClickAutosize"] = "headerClickAutoSize";
-    // increases column width on data set and text edit, decreases performance
-    ColumnAutoSizeMode["autoSizeOnTextOverlap"] = "autoSizeOnTextOverlap";
-    // increases and decreases column width based on all items sizes, worst for performance
-    ColumnAutoSizeMode["autoSizeAll"] = "autoSizeAll";
-})(ColumnAutoSizeMode || (ColumnAutoSizeMode = {}));
-class AutoSizeColumnPlugin extends column_utils.BasePlugin {
-    constructor(revogrid, providers, config) {
-        super(revogrid, providers);
-        this.providers = providers;
-        this.config = config;
-        this.autoSizeColumns = null;
-        /** for edge case when no columns defined before data */
-        this.dataResolve = null;
-        this.dataReject = null;
-        this.letterBlockSize = (config === null || config === void 0 ? void 0 : config.letterBlockSize) || LETTER_BLOCK_SIZE;
-        // create test container to check text width
-        if (config === null || config === void 0 ? void 0 : config.preciseSize) {
-            this.precsizeCalculationArea = this.initiatePresizeElement();
-            revogrid.appendChild(this.precsizeCalculationArea);
-        }
-        const aftersourceset = ({ detail: { source }, }) => {
-            this.setSource(source);
-        };
-        const afteredit = ({ detail }) => {
-            this.afteredit(detail);
-        };
-        const afterEditAll = ({ detail }) => {
-            this.afterEditAll(detail);
-        };
-        const beforecolumnsset = ({ detail: { columns }, }) => {
-            this.columnSet(columns);
-        };
-        const headerDblClick = ({ detail }) => {
-            const type = column_utils.getColumnType(detail.column);
-            const size = this.getColumnSize(detail.index, type);
-            if (size) {
-                this.providers.dimension.setCustomSizes(type, {
-                    [detail.index]: size,
-                }, true);
-            }
-        };
-        this.addEventListener('beforecolumnsset', beforecolumnsset);
-        switch (config === null || config === void 0 ? void 0 : config.mode) {
-            case ColumnAutoSizeMode.autoSizeOnTextOverlap:
-                this.addEventListener('aftersourceset', aftersourceset);
-                this.addEventListener('afteredit', afteredit);
-                break;
-            case ColumnAutoSizeMode.autoSizeAll:
-                this.addEventListener('aftersourceset', aftersourceset);
-                this.addEventListener('afteredit', afterEditAll);
-                break;
-            default:
-                this.addEventListener('headerdblclick', headerDblClick);
-                break;
-        }
+function doExpand(vIndex, source, rowItemsIndexes) {
+    const physicalIndex = rowItemsIndexes[vIndex];
+    const model = source[physicalIndex];
+    const currentGroup = column_service.getParsedGroup(model[column_service.PSEUDO_GROUP_ITEM_ID]);
+    const trimmed = {};
+    // no group found
+    if (!currentGroup) {
+        return { trimmed };
     }
-    async setSource(source) {
-        let autoSize = this.autoSizeColumns;
-        if (this.dataReject) {
-            this.dataReject();
-            this.clearPromise();
-        }
-        /** If data set first and no column provided await until get one */
-        if (!autoSize) {
-            const request = new Promise((resolve, reject) => {
-                this.dataResolve = resolve;
-                this.dataReject = reject;
-            });
-            try {
-                autoSize = await request;
-            }
-            catch (e) {
-                return;
+    const groupItems = [];
+    model[column_service.GROUP_EXPANDED] = true;
+    let i = physicalIndex + 1;
+    const total = source.length;
+    let groupLevelOnly = 0;
+    // go through all rows
+    while (i < total) {
+        const currentModel = source[i];
+        const isGroup = column_service.isGrouping(currentModel);
+        // group found
+        if (isGroup) {
+            if (!column_service.isSameGroup(currentGroup, model, currentModel)) {
+                break;
             }
-        }
-        // calculate sizes
-        index.each(autoSize, (_v, type) => {
-            const sizes = {};
-            index.each(autoSize[type], rgCol => {
-                // calculate size
-                rgCol.size = sizes[rgCol.index] = source.reduce((prev, rgRow) => Math.max(prev, this.getLength(rgRow[rgCol.prop])), this.getLength(rgCol.name || ''));
-            });
-            this.providers.dimension.setCustomSizes(type, sizes, true);
-        });
-    }
-    getLength(len) {
-        var _a;
-        const padding = 15;
-        if (!len) {
-            return 0;
-        }
-        try {
-            const str = len.toString();
-            /**if exact calculation required proxy with html element, slow operation */
-            if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.preciseSize) {
-                this.precsizeCalculationArea.innerText = str;
-                return this.precsizeCalculationArea.scrollWidth + padding * 2;
+            else if (!groupLevelOnly) {
+                // if get group first it's group only level
+                groupLevelOnly = currentModel[column_service.GROUP_DEPTH];
             }
-            return str.length * this.letterBlockSize + padding * 2;
         }
-        catch (e) {
-            return 0;
-        }
-    }
-    afteredit(e) {
-        let data;
-        if (this.isRangeEdit(e)) {
-            data = e.data;
-        }
-        else {
-            data = { 0: { [e.prop]: e.val } };
+        // level 0 or same depth
+        if (!groupLevelOnly || (isGroup && groupLevelOnly === currentModel[column_service.GROUP_DEPTH])) {
+            trimmed[i] = false;
+            groupItems.push(i);
         }
-        index.each(this.autoSizeColumns, (columns, type) => {
-            const sizes = {};
-            index.each(columns, rgCol => {
-                var _a;
-                // calculate size
-                const size = index.reduce_1(data, (prev, rgRow) => {
-                    if (typeof rgRow[rgCol.prop] === 'undefined') {
-                        return prev;
-                    }
-                    return Math.max(prev || 0, this.getLength(rgRow[rgCol.prop]));
-                }, undefined);
-                if (size && ((_a = rgCol.size) !== null && _a !== void 0 ? _a : 0) < size) {
-                    rgCol.size = sizes[rgCol.index] = size;
-                }
-            });
-            this.providers.dimension.setCustomSizes(type, sizes, true);
-        });
+        i++;
     }
-    afterEditAll(e) {
-        const props = {};
-        if (this.isRangeEdit(e)) {
-            index.each(e.data, r => index.each(r, (_v, p) => (props[p] = true)));
-        }
-        else {
-            props[e.prop] = true;
-        }
-        index.each(this.autoSizeColumns, (columns, type) => {
-            const sizes = {};
-            index.each(columns, rgCol => {
-                if (props[rgCol.prop]) {
-                    const size = this.getColumnSize(rgCol.index, type);
-                    if (size) {
-                        sizes[rgCol.index] = size;
-                    }
-                }
-            });
-            this.providers.dimension.setCustomSizes(type, sizes, true);
-        });
+    const result = {
+        trimmed,
+    };
+    if (groupItems.length) {
+        const items = [...rowItemsIndexes];
+        items.splice(vIndex + 1, 0, ...groupItems);
+        result.items = items;
     }
-    getColumnSize(index$1, type) {
-        var _a, _b;
-        const rgCol = (_b = (_a = this.autoSizeColumns) === null || _a === void 0 ? void 0 : _a[type]) === null || _b === void 0 ? void 0 : _b[index$1];
-        if (!rgCol) {
-            return 0;
+    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;
         }
-        return index.reduce_1(this.providers.data.stores, (r, s) => {
-            const perStore = index.reduce_1(s.store.get('items'), (prev, _row, i) => {
-                const item = index.getSourceItem(s.store, i);
-                return Math.max(prev || 0, this.getLength(item === null || item === void 0 ? void 0 : item[rgCol.prop]));
-            }, 0);
-            return Math.max(r, perStore);
-        }, rgCol.size || 0);
-    }
-    columnSet(columns) {
-        var _a;
-        for (let t of column_utils.columnTypes) {
-            const type = t;
-            const cols = columns[type];
-            for (let i in cols) {
-                if (cols[i].autoSize || ((_a = this.config) === null || _a === void 0 ? void 0 : _a.allColumns)) {
-                    if (!this.autoSizeColumns) {
-                        this.autoSizeColumns = {};
-                    }
-                    if (!this.autoSizeColumns[type]) {
-                        this.autoSizeColumns[type] = {};
-                    }
-                    this.autoSizeColumns[type][i] = Object.assign(Object.assign({}, cols[i]), { index: parseInt(i, 10) });
+        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;
                 }
             }
         }
-        if (this.dataResolve) {
-            this.dataResolve(this.autoSizeColumns || {});
-            this.clearPromise();
-        }
-    }
-    clearPromise() {
-        this.dataResolve = null;
-        this.dataReject = null;
-    }
-    isRangeEdit(e) {
-        return !!e.data;
-    }
-    initiatePresizeElement() {
-        var _a;
-        const styleForFontTest = {
-            position: 'absolute',
-            fontSize: '14px',
-            height: '0',
-            width: '0',
-            whiteSpace: 'nowrap',
-            top: '0',
-            overflowX: 'scroll',
-        };
-        const el = document.createElement('div');
-        for (let s in styleForFontTest) {
-            el.style[s] = (_a = styleForFontTest[s]) !== null && _a !== void 0 ? _a : '';
-        }
-        el.classList.add('revo-test-container');
-        return el;
-    }
-    destroy() {
-        var _a;
-        super.destroy();
-        (_a = this.precsizeCalculationArea) === null || _a === void 0 ? void 0 : _a.remove();
     }
+    return trimemedOptionsToUpgrade;
 }
 
-const eq = (value, extra) => {
-    if (typeof value === 'undefined' || (value === null && !extra)) {
-        return true;
-    }
-    if (typeof value !== 'string') {
-        value = JSON.stringify(value);
-    }
-    const filterVal = extra === null || extra === void 0 ? void 0 : extra.toString().toLocaleLowerCase();
-    if ((filterVal === null || filterVal === void 0 ? void 0 : filterVal.length) === 0) {
-        return true;
-    }
-    return value.toLocaleLowerCase() === filterVal;
-};
-const notEq = (value, extra) => !eq(value, extra);
-notEq.extra = 'input';
-eq.extra = 'input';
-
-const gtThan = function (value, extra) {
-    let conditionValue;
-    if (typeof value === 'number' && typeof extra !== 'undefined' && extra !== null) {
-        conditionValue = parseFloat(extra === null || extra === void 0 ? void 0 : extra.toString());
-        return value > conditionValue;
+class GroupingRowPlugin extends column_drag_plugin.BasePlugin {
+    get hasProps() {
+        var _a, _b, _c;
+        return ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) && ((_c = (_b = this.options) === null || _b === void 0 ? void 0 : _b.props) === null || _c === void 0 ? void 0 : _c.length);
     }
-    return false;
-};
-gtThan.extra = 'input';
-
-const gtThanEq = function (value, extra) {
-    return eq(value, extra) || gtThan(value, extra);
-};
-gtThanEq.extra = 'input';
-
-const lt = function (value, extra) {
-    let conditionValue;
-    if (typeof value === 'number' && typeof extra !== 'undefined' && extra !== null) {
-        conditionValue = parseFloat(extra.toString());
-        return value < conditionValue;
+    get store() {
+        return this.providers.data.stores[column_service.GROUPING_ROW_TYPE].store;
     }
-    else {
-        return false;
+    // proxy for items get
+    get rowItems() {
+        return this.store.get('items');
     }
-};
-lt.extra = 'input';
-
-const lsEq = function (value, extra) {
-    return eq(value, extra) || lt(value, extra);
-};
-lsEq.extra = 'input';
-
-const set = (value) => !(value === '' || value === null || value === void 0);
-const notSet = (value) => !set(value);
-
-const beginsWith = (value, extra) => {
-    if (!value) {
-        return false;
+    get trimmed() {
+        return this.store.get('trimmed');
     }
-    if (!extra) {
-        return true;
+    constructor(revogrid, providers) {
+        super(revogrid, providers);
+        this.revogrid = revogrid;
+        this.providers = providers;
     }
-    if (typeof value !== 'string') {
-        value = JSON.stringify(value);
+    // befoce cell focus
+    onFocus(e) {
+        if (column_service.isGrouping(e.detail.model)) {
+            e.preventDefault();
+        }
     }
-    if (typeof extra !== 'string') {
-        extra = JSON.stringify(extra);
+    // expand event triggered
+    onExpand({ virtualIndex }) {
+        const { source } = this.getSource();
+        let newTrimmed = this.trimmed[TRIMMED_GROUPING];
+        let i = index.getPhysical(this.store, virtualIndex);
+        const model = source[i];
+        const prevExpanded = model[column_service.GROUP_EXPANDED];
+        if (!prevExpanded) {
+            const { trimmed, items } = doExpand(virtualIndex, source, this.rowItems);
+            newTrimmed = Object.assign(Object.assign({}, newTrimmed), trimmed);
+            if (items) {
+                index.setItems(this.store, items);
+            }
+        }
+        else {
+            const { trimmed } = doCollapse(i, source);
+            newTrimmed = Object.assign(Object.assign({}, newTrimmed), trimmed);
+            this.revogrid.clearFocus();
+        }
+        this.store.set('source', source);
+        this.revogrid.addTrimmed(newTrimmed, TRIMMED_GROUPING);
     }
-    return value.toLocaleLowerCase().indexOf(extra.toLocaleLowerCase()) === 0;
-};
-beginsWith.extra = 'input';
-
-const contains = (value, extra) => {
-    if (!extra) {
-        return true;
+    // get source based on proxy item collection to preserve rgRow order
+    getSource(withoutGrouping = false) {
+        const source = this.store.get('source');
+        const items = this.store.get('proxyItems');
+        let index = 0;
+        // order important here, expected parent is first, then others
+        return items.reduce((result, i) => {
+            const model = source[i];
+            if (!withoutGrouping) {
+                result.source.push(model);
+                return result;
+            }
+            // grouping filter
+            if (column_service.isGrouping(model)) {
+                if (model[column_service.GROUP_EXPANDED]) {
+                    result.prevExpanded[model[column_service.PSEUDO_GROUP_ITEM_VALUE]] = true;
+                }
+            }
+            else {
+                result.source.push(model);
+                result.oldNewIndexes[i] = index;
+                index++;
+            }
+            return result;
+        }, {
+            source: [],
+            prevExpanded: {},
+            oldNewIndexes: {},
+        });
     }
-    if (!value) {
+    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;
     }
-    if (extra) {
-        if (typeof value !== 'string') {
-            value = JSON.stringify(value);
+    setColumns({ columns }) {
+        for (let type of column_drag_plugin.columnTypes) {
+            if (this.setColumnGrouping(columns[type])) {
+                break;
+            }
         }
-        return value.toLocaleLowerCase().indexOf(extra.toString().toLowerCase()) > -1;
     }
-    return true;
-};
-const notContains = (value, extra) => {
-    return !contains(value, extra);
-};
-notContains.extra = 'input';
-contains.extra = 'input';
-
-const filterNames = {
-    none: 'None',
-    empty: 'Not set',
-    notEmpty: 'Set',
-    eq: 'Equal',
-    notEq: 'Not equal',
-    begins: 'Begins with',
-    contains: 'Contains',
-    notContains: 'Does not contain',
-    eqN: '=',
-    neqN: '!=',
-    gt: '>',
-    gte: '>=',
-    lt: '<',
-    lte: '<=',
-};
-const filterEntities = {
-    none: () => true,
-    empty: notSet,
-    notEmpty: set,
-    eq: eq,
-    notEq: notEq,
-    begins: beginsWith,
-    contains: contains,
-    notContains: notContains,
-    eqN: eq,
-    neqN: notEq,
-    gt: gtThan,
-    gte: gtThanEq,
-    lt: lt,
-    lte: lsEq,
-};
-const filterTypes = {
-    string: ['notEmpty', 'empty', 'eq', 'notEq', 'begins', 'contains', 'notContains'],
-    number: ['notEmpty', 'empty', 'eqN', 'neqN', 'gt', 'gte', 'lt', 'lte'],
-};
-
-const FILTER_TRIMMED_TYPE = 'filter';
-const FILTER_CONFIG_CHANGED_EVENT = 'filterconfigchanged';
-class FilterPlugin extends column_utils.BasePlugin {
-    constructor(revogrid, providers, config) {
-        var _a;
-        super(revogrid, providers);
-        this.revogrid = revogrid;
-        this.filterCollection = {};
-        this.multiFilterItems = {};
-        this.possibleFilters = Object.assign({}, filterTypes);
-        this.possibleFilterNames = Object.assign({}, filterNames);
-        this.possibleFilterEntities = Object.assign({}, filterEntities);
-        this.filterProp = filter_button.FILTER_PROP;
-        if (config) {
-            this.initConfig(config);
-        }
-        const headerclick = (e) => this.headerclick(e);
-        const aftersourceset = async () => {
-            const filterCollectionProps = Object.keys(this.filterCollection);
-            if (filterCollectionProps.length > 0) {
-                // handle old way of filtering by reworking FilterCollection to new MultiFilterItem
-                filterCollectionProps.forEach((prop, index) => {
-                    if (!this.multiFilterItems[prop]) {
-                        this.multiFilterItems[prop] = [
-                            {
-                                id: index,
-                                type: this.filterCollection[prop].type,
-                                value: this.filterCollection[prop].value,
-                                relation: 'and',
-                            },
-                        ];
-                    }
-                });
-            }
-            await this.runFiltering();
-        };
-        this.addEventListener('headerclick', headerclick);
-        this.addEventListener(FILTER_CONFIG_CHANGED_EVENT, ({ detail }) => {
-            if (!detail) {
-                this.clearFiltering();
+    // evaluate drag between groups
+    onDrag(e) {
+        const { from, to } = e.detail;
+        const isDown = to - from >= 0;
+        const { source } = this.getSource();
+        const items = this.rowItems;
+        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 (typeof detail === 'object') {
-                this.initConfig(detail);
-            }
-            aftersourceset();
-        });
-        this.addEventListener('aftersourceset', aftersourceset);
-        this.addEventListener('filter', ({ detail }) => this.onFilterChange(detail));
-        const existingNodes = this.revogrid.registerVNode.filter((n) => n.$tag$ !== 'revogr-filter-panel');
-        this.revogrid.registerVNode = [
-            ...existingNodes,
-            index$1.h("revogr-filter-panel", { filterItems: this.multiFilterItems, filterNames: this.possibleFilterNames, filterEntities: this.possibleFilterEntities, 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), disableDynamicFiltering: config === null || config === void 0 ? void 0 : config.disableDynamicFiltering, ref: e => (this.pop = e) }),
-        ];
-    }
-    initConfig(config) {
-        if (config.multiFilterItems) {
-            this.multiFilterItems = Object.assign({}, config.multiFilterItems);
-        }
-        if (config.customFilters) {
-            for (let cType in config.customFilters) {
-                const cFilter = config.customFilters[cType];
-                if (!this.possibleFilters[cFilter.columnFilterType]) {
-                    this.possibleFilters[cFilter.columnFilterType] = [];
+        }
+    }
+    beforeTrimmedApply(trimmed, type) {
+        /** Before filter apply remove grouping filtering */
+        if (type === column_drag_plugin.FILTER_TRIMMED_TYPE) {
+            const source = this.store.get('source');
+            for (let index in trimmed) {
+                if (trimmed[index] && column_service.isGrouping(source[index])) {
+                    trimmed[index] = false;
                 }
-                this.possibleFilters[cFilter.columnFilterType].push(cType);
-                this.possibleFilterEntities[cType] = cFilter.func;
-                this.possibleFilterNames[cType] = cFilter.name;
             }
         }
-        if (config.filterProp) {
-            this.filterProp = config.filterProp;
-        }
+    }
+    // subscribe to grid events to process them accordingly
+    subscribe() {
+        /** if grouping present and new data source arrived */
+        this.addEventListener('beforesourceset', ({ detail }) => this.onDataSet(detail));
+        this.addEventListener('beforecolumnsset', ({ detail }) => this.setColumns(detail));
         /**
-         * which filters has to be included/excluded
-         * convinient way to exclude system filters
+         * filter applied need to clear grouping and apply again
+         * based on new results can be new grouping
          */
-        const cfgInlcude = config.include;
-        if (cfgInlcude) {
-            const filters = {};
-            for (let t in this.possibleFilters) {
-                // validate filters, if appropriate function present
-                const newTypes = this.possibleFilters[t].filter(f => cfgInlcude.indexOf(f) > -1);
-                if (newTypes.length) {
-                    filters[t] = newTypes;
-                }
-            }
-            // if any valid filters provided show them
-            if (Object.keys(filters).length > 0) {
-                this.possibleFilters = filters;
-            }
-        }
-        if (config.collection) {
-            this.filterCollection = index.reduce_1(config.collection, (result, item, prop) => {
-                if (this.possibleFilterEntities[item.type]) {
-                    result[prop] = item;
-                }
-                else {
-                    console.warn(`${item.type} type is not found.`);
-                }
-                return result;
-            }, {});
-        }
-        if (config.localization) {
-            if (config.localization.filterNames) {
-                Object.entries(config.localization.filterNames).forEach(([k, v]) => {
-                    if (this.possibleFilterNames[k] != void 0) {
-                        this.possibleFilterNames[k] = v;
-                    }
-                });
-            }
-        }
+        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.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(column_service.GROUP_EXPAND_EVENT, ({ detail }) => this.onExpand(detail));
     }
-    async headerclick(e) {
-        var _a, _b, _c;
-        const el = (_a = e.detail.originalEvent) === null || _a === void 0 ? void 0 : _a.target;
-        if (!filter_button.isFilterBtn(el)) {
-            return;
-        }
-        e.preventDefault();
-        // close if same
-        const changes = await ((_b = this.pop) === null || _b === void 0 ? void 0 : _b.getChanges());
-        if (changes && (changes === null || changes === void 0 ? void 0 : changes.prop) === e.detail.prop) {
-            (_c = this.pop) === null || _c === void 0 ? void 0 : _c.show();
-            return;
-        }
-        if (!this.pop) {
+    /**
+     * Starts global source update with group clearing and applying new one
+     * Initiated when need to reapply grouping
+     */
+    doSourceUpdate(options) {
+        var _a;
+        if (!this.hasProps) {
             return;
         }
-        // filter button clicked, open filter dialog
-        const gridPos = this.revogrid.getBoundingClientRect();
-        const buttonPos = el.getBoundingClientRect();
-        const prop = e.detail.prop;
-        this.pop.filterTypes = this.getColumnFilter(e.detail.filter);
-        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 }));
-    }
-    getColumnFilter(type) {
-        let filterType = 'string';
-        if (!type) {
-            return { [filterType]: this.possibleFilters[filterType] };
-        }
-        // if custom column filter
-        if (this.isValidType(type)) {
-            filterType = type;
-            // if multiple filters applied
-        }
-        else if (typeof type === 'object' && type.length) {
-            return type.reduce((r, multiType) => {
-                if (this.isValidType(multiType)) {
-                    r[multiType] = this.possibleFilters[multiType];
-                }
-                return r;
-            }, {});
-        }
-        return { [filterType]: this.possibleFilters[filterType] };
-    }
-    isValidType(type) {
-        return !!(typeof type === 'string' && this.possibleFilters[type]);
-    }
-    // called on internal component change
-    async onFilterChange(filterItems) {
-        this.multiFilterItems = filterItems;
-        this.runFiltering();
+        /**
+         * 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 } = this.getSource(true);
+        /**
+         * 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) || [], Object.assign({ prevExpanded }, options));
+        // setup source
+        this.providers.data.setData(sourceWithGroups, column_service.GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, { depth, customRenderer: options === null || options === void 0 ? void 0 : options.groupLabelTemplate }, true);
+        this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexes !== null && oldNewIndexes !== void 0 ? oldNewIndexes : {}, oldNewIndexMap);
     }
     /**
-     * Triggers grid filtering
+     * Apply grouping on data set
+     * Clear grouping from source
+     * If source came from other plugin
      */
-    async doFiltering(collection, items, columns, filterItems) {
-        const columnsToUpdate = [];
-        columns.forEach(rgCol => {
-            const column = Object.assign({}, rgCol);
-            const hasFilter = filterItems[column.prop];
-            if (column[this.filterProp] && !hasFilter) {
-                delete column[this.filterProp];
-                columnsToUpdate.push(column);
-            }
-            if (!column[this.filterProp] && hasFilter) {
-                columnsToUpdate.push(column);
-                column[this.filterProp] = true;
-            }
-        });
-        const itemsToFilter = this.getRowFilter(items, filterItems);
-        // check is filter event prevented
-        const { defaultPrevented, detail } = this.emit('beforefiltertrimmed', {
-            collection,
-            itemsToFilter,
-            source: items,
-            filterItems,
-        });
-        if (defaultPrevented) {
+    onDataSet(data) {
+        var _a;
+        if (!this.hasProps || !(data === null || data === void 0 ? void 0 : data.source) || !data.source.length) {
             return;
         }
-        // check is trimmed event prevented
-        const isAddedEvent = await this.revogrid.addTrimmed(detail.itemsToFilter, FILTER_TRIMMED_TYPE);
-        if (isAddedEvent.defaultPrevented) {
+        const source = data.source.filter(s => !column_service.isGrouping(s));
+        const expanded = this.revogrid.grouping || {};
+        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup, } = column_service.gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], Object.assign({}, (expanded || {})));
+        data.source = sourceWithGroups;
+        this.providers.data.setGrouping({ depth });
+        this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexMap);
+    }
+    // apply grouping
+    setGrouping(options) {
+        // unsubscribe from all events when group applied
+        this.clearSubscriptions();
+        this.options = options;
+        // clear props, no grouping exists
+        if (!options.props || !Object.keys(options.props).length) {
+            this.clearGrouping();
             return;
         }
-        // applies the hasFilter to the columns to show filter icon
-        await this.revogrid.updateColumns(columnsToUpdate);
-        this.emit('afterfilterapply');
-    }
-    async clearFiltering() {
-        this.multiFilterItems = {};
-        await this.runFiltering();
-    }
-    async runFiltering() {
-        const collection = {};
-        // handle old filterCollection to return the first filter only (if any) from multiFilterItems
-        const filterProps = Object.keys(this.multiFilterItems);
-        for (const prop of filterProps) {
-            // check if we have any filter for a column
-            if (this.multiFilterItems[prop].length > 0) {
-                const firstFilterItem = this.multiFilterItems[prop][0];
-                collection[prop] = {
-                    filter: filterEntities[firstFilterItem.type],
-                    type: firstFilterItem.type,
-                    value: firstFilterItem.value,
-                };
-            }
+        // props exist and source inited
+        const { source } = this.getSource();
+        if (source.length) {
+            this.doSourceUpdate(Object.assign({}, options));
         }
-        this.filterCollection = collection;
-        const { source, columns } = await this.getData();
-        const { defaultPrevented, detail } = this.emit('beforefilterapply', {
-            collection: this.filterCollection,
-            source,
-            columns,
-            filterItems: this.multiFilterItems,
-        });
-        if (defaultPrevented) {
-            return;
+        // props exist and columns inited
+        for (let t of column_drag_plugin.columnTypes) {
+            if (this.setColumnGrouping(this.providers.column.getColumns(t))) {
+                this.providers.column.refreshByType(t);
+                break;
+            }
         }
-        this.doFiltering(detail.collection, detail.source, detail.columns, detail.filterItems);
-    }
-    async getData() {
-        return {
-            source: await this.revogrid.getSource(),
-            columns: await this.revogrid.getColumns(),
-        };
+        // if has any grouping subscribe to events again
+        this.subscribe();
     }
-    getRowFilter(rows, filterItems) {
-        const propKeys = Object.keys(filterItems);
-        const trimmed = {};
-        let propFilterSatisfiedCount = 0;
-        let lastFilterResults = [];
-        // each rows
-        rows.forEach((model, rowIndex) => {
-            // working on all props
-            for (const prop of propKeys) {
-                const propFilters = filterItems[prop];
-                propFilterSatisfiedCount = 0;
-                lastFilterResults = [];
-                // testing each filter for a prop
-                for (const [filterIndex, filterData] of propFilters.entries()) {
-                    // the filter LogicFunction based on the type
-                    const filter = this.possibleFilterEntities[filterData.type];
-                    // THE MAGIC OF FILTERING IS HERE
-                    if (filterData.relation === 'or') {
-                        lastFilterResults = [];
-                        if (filter(model[prop], filterData.value)) {
-                            continue;
-                        }
-                        propFilterSatisfiedCount++;
-                    }
-                    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(!filter(model[prop], 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) {
-                                lastFilterResults = [];
-                                continue;
-                            }
-                            // we need to add all of the lastFilterResults since we need to satisfy all
-                            propFilterSatisfiedCount += lastFilterResults.length;
-                            lastFilterResults = [];
-                        }
-                    }
-                } // end of propFilters forEach
-                // add to the list of removed/trimmed rows of filter condition is satisfied
-                if (propFilterSatisfiedCount === propFilters.length)
-                    trimmed[rowIndex] = true;
-            } // end of for-of propKeys
+    // clear grouping
+    clearGrouping() {
+        // clear columns
+        column_drag_plugin.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);
+            }
         });
-        return trimmed;
+        // clear rows
+        const { source, oldNewIndexes } = this.getSource(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.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);
     }
 }
 
-var baseGetTag = toNumber._baseGetTag,
+var baseGetTag = debounce._baseGetTag,
     isArray = index.isArray_1,
-    isObjectLike = toNumber.isObjectLike_1;
+    isObjectLike = debounce.isObjectLike_1;
 
 /** `Object#toString` result references. */
 var stringTag = '[object String]';
@@ -1300,7 +588,7 @@ var _stringSize = stringSize$1;
 
 var baseKeys = index._baseKeys,
     getTag = index._getTag,
-    isArrayLike = index.isArrayLike_1,
+    isArrayLike$1 = index.isArrayLike_1,
     isString = isString_1,
     stringSize = _stringSize;
 
@@ -1333,7 +621,7 @@ function size(collection) {
   if (collection == null) {
     return 0;
   }
-  if (isArrayLike(collection)) {
+  if (isArrayLike$1(collection)) {
     return isString(collection) ? stringSize(collection) : collection.length;
   }
   var tag = getTag(collection);
@@ -1354,7 +642,7 @@ var size_1 = size;
  *
  * Note: If you prevent an event, it will not proceed to the subsequent steps.
  */
-class SortingPlugin extends column_utils.BasePlugin {
+class SortingPlugin extends column_drag_plugin.BasePlugin {
     async runSorting(order, comparison) {
         var _a;
         await this.sort(order, comparison);
@@ -1380,7 +668,7 @@ class SortingPlugin extends column_utils.BasePlugin {
             const columns = (await this.revogrid.getColumns());
             const sortingFunc = {};
             for (let prop in order) {
-                const cmp = this.getComparer(column_utils.getColumnByProp(columns, prop), order[prop]);
+                const cmp = this.getComparer(column_drag_plugin.getColumnByProp(columns, prop), order[prop]);
                 sortingFunc[prop] = cmp;
             }
             this.runSorting(order, sortingFunc);
@@ -1566,742 +854,435 @@ class SortingPlugin extends column_utils.BasePlugin {
     }
 }
 
-/**
- * The base implementation of `_.clamp` which doesn't coerce arguments.
- *
- * @private
- * @param {number} number The number to clamp.
- * @param {number} [lower] The lower bound.
- * @param {number} upper The upper bound.
- * @returns {number} Returns the clamped number.
- */
-
-function baseClamp$1(number, lower, upper) {
-  if (number === number) {
-    if (upper !== undefined) {
-      number = number <= upper ? number : upper;
-    }
-    if (lower !== undefined) {
-      number = number >= lower ? number : lower;
-    }
-  }
-  return number;
-}
-
-var _baseClamp = baseClamp$1;
-
-var baseClamp = _baseClamp,
-    toInteger$1 = index.toInteger_1;
-
-/** Used as references for the maximum length and index of an array. */
-var MAX_ARRAY_LENGTH = 4294967295;
-
-/**
- * Converts `value` to an integer suitable for use as the length of an
- * array-like object.
- *
- * **Note:** This method is based on
- * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to convert.
- * @returns {number} Returns the converted integer.
- * @example
- *
- * _.toLength(3.2);
- * // => 3
- *
- * _.toLength(Number.MIN_VALUE);
- * // => 0
- *
- * _.toLength(Infinity);
- * // => 4294967295
- *
- * _.toLength('3.2');
- * // => 3
- */
-function toLength$1(value) {
-  return value ? baseClamp(toInteger$1(value), 0, MAX_ARRAY_LENGTH) : 0;
-}
-
-var toLength_1 = toLength$1;
-
-var toInteger = index.toInteger_1,
-    toLength = toLength_1;
+var baseIteratee = index._baseIteratee,
+    isArrayLike = index.isArrayLike_1,
+    keys = index.keys_1;
 
 /**
- * The base implementation of `_.fill` without an iteratee call guard.
+ * Creates a `_.find` or `_.findLast` function.
  *
  * @private
- * @param {Array} array The array to fill.
- * @param {*} value The value to fill `array` with.
- * @param {number} [start=0] The start position.
- * @param {number} [end=array.length] The end position.
- * @returns {Array} Returns `array`.
+ * @param {Function} findIndexFunc The function to find the collection index.
+ * @returns {Function} Returns the new find function.
  */
-function baseFill$1(array, value, start, end) {
-  var length = array.length;
-
-  start = toInteger(start);
-  if (start < 0) {
-    start = -start > length ? 0 : (length + start);
-  }
-  end = (end === undefined || end > length) ? length : toInteger(end);
-  if (end < 0) {
-    end += length;
-  }
-  end = start > end ? 0 : toLength(end);
-  while (start < end) {
-    array[start++] = value;
-  }
-  return array;
+function createFind$1(findIndexFunc) {
+  return function(collection, predicate, fromIndex) {
+    var iterable = Object(collection);
+    if (!isArrayLike(collection)) {
+      var iteratee = baseIteratee(predicate);
+      collection = keys(collection);
+      predicate = function(key) { return iteratee(iterable[key], key, iterable); };
+    }
+    var index = findIndexFunc(collection, predicate, fromIndex);
+    return index > -1 ? iterable[iteratee ? collection[index] : index] : undefined;
+  };
 }
 
-var _baseFill = baseFill$1;
+var _createFind = createFind$1;
 
-var baseFill = _baseFill,
-    isIterateeCall = index._isIterateeCall;
+var createFind = _createFind,
+    findIndex = index.findIndex_1;
 
 /**
- * Fills elements of `array` with `value` from `start` up to, but not
- * including, `end`.
- *
- * **Note:** This method mutates `array`.
+ * Iterates over elements of `collection`, returning the first element
+ * `predicate` returns truthy for. The predicate is invoked with three
+ * arguments: (value, index|key, collection).
  *
  * @static
  * @memberOf _
- * @since 3.2.0
- * @category Array
- * @param {Array} array The array to fill.
- * @param {*} value The value to fill `array` with.
- * @param {number} [start=0] The start position.
- * @param {number} [end=array.length] The end position.
- * @returns {Array} Returns `array`.
+ * @since 0.1.0
+ * @category Collection
+ * @param {Array|Object} collection The collection to inspect.
+ * @param {Function} [predicate=_.identity] The function invoked per iteration.
+ * @param {number} [fromIndex=0] The index to search from.
+ * @returns {*} Returns the matched element, else `undefined`.
  * @example
  *
- * var array = [1, 2, 3];
+ * var users = [
+ *   { 'user': 'barney',  'age': 36, 'active': true },
+ *   { 'user': 'fred',    'age': 40, 'active': false },
+ *   { 'user': 'pebbles', 'age': 1,  'active': true }
+ * ];
+ *
+ * _.find(users, function(o) { return o.age < 40; });
+ * // => object for 'barney'
  *
- * _.fill(array, 'a');
- * console.log(array);
- * // => ['a', 'a', 'a']
+ * // The `_.matches` iteratee shorthand.
+ * _.find(users, { 'age': 1, 'active': true });
+ * // => object for 'pebbles'
  *
- * _.fill(Array(3), 2);
- * // => [2, 2, 2]
+ * // The `_.matchesProperty` iteratee shorthand.
+ * _.find(users, ['active', false]);
+ * // => object for 'fred'
  *
- * _.fill([4, 6, 8, 10], '*', 1, 3);
- * // => [4, '*', '*', 10]
+ * // The `_.property` iteratee shorthand.
+ * _.find(users, 'active');
+ * // => object for 'barney'
  */
-function fill(array, value, start, end) {
-  var length = array == null ? 0 : array.length;
-  if (!length) {
-    return [];
-  }
-  if (start && typeof start != 'number' && isIterateeCall(array, value, start)) {
-    start = 0;
-    end = length;
-  }
-  return baseFill(array, value, start, end);
-}
+var find = createFind(findIndex);
 
-var fill_1 = fill;
+var find_1 = find;
 
-const INITIAL = {
-    mime: 'text/csv',
-    fileKind: 'csv',
-    // BOM signature
-    bom: true,
-    columnDelimiter: ',',
-    rowDelimiter: '\r\n',
-    encoding: '',
-};
-// The ASCII character code 13 is called a Carriage Return or CR.
-const CARRIAGE_RETURN = String.fromCharCode(13);
-// Chr(13) followed by a Chr(10) that compose a proper CRLF.
-const LINE_FEED = String.fromCharCode(10);
-const DOUBLE_QT = String.fromCharCode(34);
-const NO_BREAK_SPACE = String.fromCharCode(0xfeff);
-const escapeRegex = new RegExp('"', 'g');
-class ExportCsv {
-    constructor(options = {}) {
-        this.options = Object.assign(Object.assign({}, INITIAL), options);
-    }
-    doExport({ data, headers, props }) {
-        let result = this.options.bom ? NO_BREAK_SPACE : '';
-        // any header
-        if ((headers === null || headers === void 0 ? void 0 : headers.length) > 0) {
-            headers.forEach(header => {
-                // ignore empty
-                if (!header.length) {
-                    return;
-                }
-                result += this.prepareHeader(header, this.options.columnDelimiter);
-                result += this.options.rowDelimiter;
+class ColumnDataProvider {
+    get order() {
+        const order = {};
+        const sorting = this.sorting;
+        if (sorting) {
+            Object.keys(sorting).forEach((prop) => {
+                order[prop] = sorting[prop].order;
             });
         }
-        data.forEach((rgRow, index) => {
-            if (index > 0) {
-                result += this.options.rowDelimiter;
-            }
-            // support grouping
-            if (column_service.isGrouping(rgRow)) {
-                result += this.parseCell(column_service.getGroupingName(rgRow), this.options.columnDelimiter);
-                return;
-            }
-            result += props.map(p => this.parseCell(rgRow[p], this.options.columnDelimiter)).join(this.options.columnDelimiter);
-        });
-        return result;
+        return order;
     }
-    prepareHeader(columnHeaders, columnDelimiter) {
-        let result = '';
-        const newColumnHeaders = columnHeaders.map(v => this.parseCell(v, columnDelimiter, true));
-        result += newColumnHeaders.join(columnDelimiter);
-        return result;
+    get stores() {
+        return this.dataSources;
     }
-    parseCell(value, columnDelimiter, force = false) {
-        let escape = value;
-        if (typeof value !== 'string') {
-            escape = JSON.stringify(value);
-        }
-        const toEscape = [CARRIAGE_RETURN, DOUBLE_QT, LINE_FEED, columnDelimiter];
-        if (typeof escape === 'undefined') {
-            return '';
-        }
-        if (escape !== '' && (force || toEscape.some(i => escape.indexOf(i) >= 0))) {
-            return `"${escape.replace(escapeRegex, '""')}"`;
-        }
-        return escape;
+    constructor() {
+        this.sorting = null;
+        this.dataSources = column_drag_plugin.columnTypes.reduce((sources, k) => {
+            sources[k] = new index.DataStore(k);
+            return sources;
+        }, {});
     }
-}
-
-var ExportTypes;
-(function (ExportTypes) {
-    ExportTypes["csv"] = "csv";
-})(ExportTypes || (ExportTypes = {}));
-class ExportFilePlugin extends column_utils.BasePlugin {
-    /** Exports string */
-    async exportString(options = {}, t = ExportTypes.csv) {
-        const data = await this.beforeexport();
-        if (!data) {
-            return null;
-        }
-        return this.formatter(t, options).doExport(data);
-    }
-    /** Exports Blob */
-    async exportBlob(options = {}, t = ExportTypes.csv) {
-        return await this.getBlob(this.formatter(t, options));
-    }
-    /** Export file */
-    async exportFile(options = {}, t = ExportTypes.csv) {
-        const formatter = this.formatter(t, options);
-        // url
-        const URL = window.URL || window.webkitURL;
-        const a = document.createElement('a');
-        const { filename, fileKind } = formatter.options;
-        const name = `${filename}.${fileKind}`;
-        const blob = await this.getBlob(formatter);
-        const url = blob ? URL.createObjectURL(blob) : '';
-        a.style.display = 'none';
-        a.setAttribute('href', url);
-        a.setAttribute('download', name);
-        this.revogrid.appendChild(a);
-        a.dispatchEvent(new MouseEvent('click'));
-        this.revogrid.removeChild(a);
-        // delay for revoke, correct for some browsers
-        await index.timeout(120);
-        URL.revokeObjectURL(url);
-    }
-    /** Blob object */
-    async getBlob(formatter) {
-        const type = `${formatter.options.mime};charset=${formatter.options.encoding}`;
-        if (typeof Blob !== 'undefined') {
-            const data = await this.beforeexport();
-            if (!data) {
-                return null;
-            }
-            return new Blob([formatter.doExport(data)], { type });
-        }
-        return null;
+    column(c, pin) {
+        return this.getColumn(c, pin || 'rgCol');
     }
-    // before event
-    async beforeexport() {
-        let data = await this.getData();
-        const event = this.emit('beforeexport', { data });
-        if (event.defaultPrevented) {
-            return null;
-        }
-        return event.detail.data;
+    getColumn(virtualIndex, type) {
+        return index.getSourceItem(this.dataSources[type].store, virtualIndex);
     }
-    async getData() {
-        const data = await this.getSource();
-        const colSource = [];
-        const colPromises = [];
-        column_utils.columnTypes.forEach((t, i) => {
-            colPromises.push(this.getColPerSource(t).then(s => (colSource[i] = s)));
+    getRawColumns() {
+        return index.reduce_1(this.dataSources, (result, item, type) => {
+            result[type] = item.store.get('source');
+            return result;
+        }, {
+            rgCol: [],
+            colPinStart: [],
+            colPinEnd: [],
         });
-        await Promise.all(colPromises);
-        const columns = {
-            headers: [],
-            props: [],
-        };
-        for (let source of colSource) {
-            source.headers.forEach((h, i) => {
-                if (!columns.headers[i]) {
-                    columns.headers[i] = [];
-                }
-                columns.headers[i].push(...h);
-            });
-            columns.props.push(...source.props);
-        }
-        return Object.assign({ data }, columns);
-    }
-    async getColPerSource(t) {
-        const store = await this.revogrid.getColumnStore(t);
-        const source = store.get('source');
-        const virtualIndexes = store.get('items');
-        const depth = store.get('groupingDepth');
-        const groups = store.get('groups');
-        const colNames = [];
-        const colProps = [];
-        const visibleItems = virtualIndexes.reduce((r, v, virtualIndex) => {
-            const prop = source[v].prop;
-            colNames.push(source[v].name || '');
-            colProps.push(prop);
-            r[prop] = virtualIndex;
-            return r;
-        }, {});
-        const rows = this.getGroupHeaders(depth, groups, virtualIndexes, visibleItems);
-        rows.push(colNames);
-        return {
-            headers: rows,
-            props: colProps,
-        };
     }
-    getGroupHeaders(depth, groups, items, visibleItems) {
-        const rows = [];
-        const template = fill_1(new Array(items.length), '');
-        for (let d = 0; d < depth; d++) {
-            const rgRow = [...template];
-            rows.push(rgRow);
-            if (!groups[d]) {
-                continue;
-            }
-            const levelGroups = groups[d];
-            // add names of groups
-            levelGroups.forEach((group) => {
-                const minIndex = this.findGroupStartIndex(group.ids, visibleItems);
-                if (typeof minIndex === 'number') {
-                    rgRow[minIndex] = group.name;
-                }
-            });
+    getColumns(type = 'all') {
+        if (type !== 'all') {
+            return this.dataSources[type].store.get('source');
         }
-        return rows;
-    }
-    findGroupStartIndex(ids, visibleItems) {
-        let min;
-        ids.forEach(id => {
-            const current = visibleItems[id];
-            if (typeof current === 'number') {
-                if (typeof min !== 'number' || min > current) {
-                    min = current;
-                }
-            }
-        });
-        return min;
-    }
-    async getSource() {
-        const data = [];
-        const promisesData = [];
-        column_utils.rowTypes.forEach(t => {
-            const dataPart = [];
-            data.push(dataPart);
-            const promise = this.revogrid.getVisibleSource(t).then((d) => dataPart.push(...d));
-            promisesData.push(promise);
-        });
-        await Promise.all(promisesData);
-        return data.reduce((r, v) => {
-            r.push(...v);
+        return column_drag_plugin.columnTypes.reduce((r, t) => {
+            r.push(...this.dataSources[t].store.get('source'));
             return r;
         }, []);
     }
-    // get correct class for future multiple types support
-    formatter(type, options = {}) {
-        switch (type) {
-            case ExportTypes.csv:
-                return new ExportCsv(options);
-            default:
-                throw new Error('Unknown format');
-        }
+    getColumnIndexByProp(prop, type) {
+        return index.getSourceItemVirtualIndexByProp(this.dataSources[type].store, prop);
     }
-}
-
-// provide collapse data
-function doCollapse(pIndex, source) {
-    const model = source[pIndex];
-    const collapseValue = model[column_service.PSEUDO_GROUP_ITEM_VALUE];
-    const trimmed = {};
-    let i = pIndex + 1;
-    const total = source.length;
-    while (i < total) {
-        const currentModel = source[i];
-        if (column_service.isGrouping(currentModel)) {
-            const currentValue = currentModel[column_service.PSEUDO_GROUP_ITEM_VALUE];
-            if (!currentValue.length || !currentValue.startsWith(collapseValue + ',')) {
-                break;
-            }
-            currentModel[column_service.GROUP_EXPANDED] = false;
-        }
-        trimmed[i++] = true;
+    getColumnByProp(prop, type) {
+        const items = this.dataSources[type].store.get('source');
+        return find_1(items, { prop });
     }
-    model[column_service.GROUP_EXPANDED] = false;
-    return { trimmed };
-}
-/**
- *
- * @param pIndex - physical index
- * @param vIndex - virtual index, need to update item collection
- * @param source - data source
- * @param rowItemsIndexes - rgRow indexes
- */
-function doExpand(vIndex, source, rowItemsIndexes) {
-    const physicalIndex = rowItemsIndexes[vIndex];
-    const model = source[physicalIndex];
-    const currentGroup = column_service.getParsedGroup(model[column_service.PSEUDO_GROUP_ITEM_ID]);
-    const trimmed = {};
-    // no group found
-    if (!currentGroup) {
-        return { trimmed };
+    refreshByType(type) {
+        this.dataSources[type].refresh();
     }
-    const groupItems = [];
-    model[column_service.GROUP_EXPANDED] = true;
-    let i = physicalIndex + 1;
-    const total = source.length;
-    let groupLevelOnly = 0;
-    // go through all rows
-    while (i < total) {
-        const currentModel = source[i];
-        const isGroup = column_service.isGrouping(currentModel);
-        // group found
-        if (isGroup) {
-            if (!column_service.isSameGroup(currentGroup, model, currentModel)) {
-                break;
+    setColumns(data) {
+        column_drag_plugin.columnTypes.forEach(k => {
+            // set columns data
+            this.dataSources[k].updateData(data.columns[k], {
+                // max depth level
+                depth: data.maxLevel,
+                // groups
+                groups: data.columnGrouping[k].reduce((res, g) => {
+                    if (!res[g.level]) {
+                        res[g.level] = [];
+                    }
+                    res[g.level].push(g);
+                    return res;
+                }, {}),
+            });
+        });
+        this.sorting = data.sort;
+        return data;
+    }
+    updateColumns(cols) {
+        // collect column by type and propert
+        const columnByKey = cols.reduce((res, c) => {
+            const type = column_drag_plugin.getColumnType(c);
+            if (!res[type]) {
+                res[type] = {};
             }
-            else if (!groupLevelOnly) {
-                // if get group first it's group only level
-                groupLevelOnly = currentModel[column_service.GROUP_DEPTH];
+            res[type][c.prop] = c;
+            return res;
+        }, {});
+        // find indexes in source
+        const colByIndex = {};
+        for (const t in columnByKey) {
+            if (!columnByKey.hasOwnProperty(t)) {
+                continue;
+            }
+            const type = t;
+            const colsToUpdate = columnByKey[type];
+            const items = this.dataSources[type].store.get('source');
+            colByIndex[type] = {};
+            for (let i = 0; i < items.length; i++) {
+                const rgCol = items[i];
+                const colToUpdateIfExists = colsToUpdate === null || colsToUpdate === void 0 ? void 0 : colsToUpdate[rgCol.prop];
+                if (colToUpdateIfExists) {
+                    colByIndex[type][i] = colToUpdateIfExists;
+                }
             }
         }
-        // level 0 or same depth
-        if (!groupLevelOnly || (isGroup && groupLevelOnly === currentModel[column_service.GROUP_DEPTH])) {
-            trimmed[i] = false;
-            groupItems.push(i);
+        for (const t in colByIndex) {
+            if (!colByIndex.hasOwnProperty(t)) {
+                continue;
+            }
+            const type = t;
+            index.setSourceByVirtualIndex(this.dataSources[type].store, colByIndex[type] || {});
         }
-        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;
-                }
-            }
+    updateColumn(column, index$1) {
+        const type = column_drag_plugin.getColumnType(column);
+        index.setSourceByVirtualIndex(this.dataSources[type].store, { [index$1]: column });
+    }
+    updateColumnSorting(column, index, sorting, additive) {
+        if (!additive) {
+            this.clearSorting();
+        }
+        column.order = sorting;
+        if (!this.sorting) {
+            this.sorting = {};
         }
+        this.sorting[column.prop] = column;
+        this.updateColumn(column, index);
+        return column;
+    }
+    clearSorting() {
+        const types = index.reduce_1(this.sorting, (r, c) => {
+            const k = column_drag_plugin.getColumnType(c);
+            r[k] = true;
+            return r;
+        }, {});
+        index.each(types, (_, type) => {
+            const cols = this.dataSources[type].store.get('source');
+            index.each(cols, (c) => (c.order = undefined));
+            this.dataSources[type].setData({ source: [...cols] });
+        });
+        this.sorting = {};
     }
-    return trimemedOptionsToUpgrade;
 }
 
-class GroupingRowPlugin extends column_utils.BasePlugin {
-    get hasProps() {
-        var _a, _b, _c;
-        return ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) && ((_c = (_b = this.options) === null || _b === void 0 ? void 0 : _b.props) === null || _c === void 0 ? void 0 : _c.length);
-    }
-    get store() {
-        return this.providers.data.stores[column_service.GROUPING_ROW_TYPE].store;
-    }
-    // proxy for items get
-    get rowItems() {
-        return this.store.get('items');
+/**
+ * Data source provider
+ */
+class DataProvider {
+    constructor(dimensionProvider) {
+        this.dimensionProvider = dimensionProvider;
+        this.stores = index.reduce_1(column_drag_plugin.rowTypes, (sources, k) => {
+            sources[k] = new index.DataStore(k);
+            return sources;
+        }, {});
     }
-    get trimmed() {
-        return this.store.get('trimmed');
+    setData(data, type = 'rgRow', disableVirtualRows = false, grouping, silent = false) {
+        // set rgRow data
+        this.stores[type].updateData([...data], grouping, silent);
+        // for pinned row no need virtual data
+        const noVirtual = type !== 'rgRow' || disableVirtualRows;
+        this.dimensionProvider.setData(data.length, type, noVirtual);
+        return data;
     }
-    constructor(revogrid, providers) {
-        super(revogrid, providers);
-        this.revogrid = revogrid;
-        this.providers = providers;
+    getModel(virtualIndex, type = 'rgRow') {
+        const store = this.stores[type].store;
+        return index.getSourceItem(store, virtualIndex);
     }
-    // befoce cell focus
-    onFocus(e) {
-        if (column_service.isGrouping(e.detail.model)) {
-            e.preventDefault();
-        }
+    setCellData({ type, rowIndex, prop, val }, mutate = true) {
+        const model = this.getModel(rowIndex, type);
+        model[prop] = val;
+        // apply data to source
+        index.setSourceByVirtualIndex(this.stores[type].store, { [rowIndex]: model }, mutate);
     }
-    // expand event triggered
-    onExpand({ virtualIndex }) {
-        const { source } = this.getSource();
-        let newTrimmed = this.trimmed[TRIMMED_GROUPING];
-        let i = index.getPhysical(this.store, virtualIndex);
-        const model = source[i];
-        const prevExpanded = model[column_service.GROUP_EXPANDED];
-        if (!prevExpanded) {
-            const { trimmed, items } = doExpand(virtualIndex, source, this.rowItems);
-            newTrimmed = Object.assign(Object.assign({}, newTrimmed), trimmed);
-            if (items) {
-                index.setItems(this.store, items);
+    setRangeData(data, type) {
+        const items = {};
+        for (let rowIndex in data) {
+            const oldModel = (items[rowIndex] = index.getSourceItem(this.stores[type].store, parseInt(rowIndex, 10)));
+            if (!oldModel) {
+                continue;
+            }
+            for (let prop in data[rowIndex]) {
+                oldModel[prop] = data[rowIndex][prop];
             }
         }
-        else {
-            const { trimmed } = doCollapse(i, source);
-            newTrimmed = Object.assign(Object.assign({}, newTrimmed), trimmed);
-            this.revogrid.clearFocus();
+        // apply data to source
+        index.setSourceByVirtualIndex(this.stores[type].store, items);
+    }
+    refresh(type = 'all') {
+        if (column_drag_plugin.isRowType(type)) {
+            this.refreshItems(type);
         }
-        this.store.set('source', source);
-        this.revogrid.addTrimmed(newTrimmed, TRIMMED_GROUPING);
+        column_drag_plugin.rowTypes.forEach((t) => this.refreshItems(t));
     }
-    // get source based on proxy item collection to preserve rgRow order
-    getSource(withoutGrouping = false) {
-        const source = this.store.get('source');
-        const items = this.store.get('proxyItems');
-        let index = 0;
-        // order important here, expected parent is first, then others
-        return items.reduce((result, i) => {
-            const model = source[i];
-            if (!withoutGrouping) {
-                result.source.push(model);
-                return result;
-            }
-            // grouping filter
-            if (column_service.isGrouping(model)) {
-                if (model[column_service.GROUP_EXPANDED]) {
-                    result.prevExpanded[model[column_service.PSEUDO_GROUP_ITEM_VALUE]] = true;
-                }
-            }
-            else {
-                result.source.push(model);
-                result.oldNewIndexes[i] = index;
-                index++;
-            }
-            return result;
-        }, {
-            source: [],
-            prevExpanded: {},
-            oldNewIndexes: {},
-        });
+    refreshItems(type = 'rgRow') {
+        const items = this.stores[type].store.get('items');
+        this.stores[type].setData({ items: [...items] });
     }
-    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;
+    setGrouping({ depth }, type = 'rgRow') {
+        this.stores[type].setData({ groupingDepth: depth });
     }
-    setColumns({ columns }) {
-        for (let type of column_utils.columnTypes) {
-            if (this.setColumnGrouping(columns[type])) {
-                break;
-            }
+    setTrimmed(trimmed, type = 'rgRow') {
+        const store = this.stores[type];
+        store.addTrimmed(trimmed);
+        this.dimensionProvider.setTrimmed(trimmed, type);
+        if (type === 'rgRow') {
+            this.dimensionProvider.setData(index.getVisibleSourceItem(store.store).length, type);
         }
     }
-    // evaluate drag between groups
-    onDrag(e) {
-        const { from, to } = e.detail;
-        const isDown = to - from >= 0;
-        const { source } = this.getSource();
-        const items = this.rowItems;
-        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;
-            }
-        }
+}
+
+/**
+ * Dimension provider
+ * Stores dimension information and custom sizes
+ */
+class DimensionProvider {
+    constructor(viewports, config) {
+        this.viewports = viewports;
+        const sizeChanged = debounce.debounce_1((k) => config.realSizeChanged(k), index.RESIZE_INTERVAL);
+        this.stores = index.reduce_1([...column_drag_plugin.rowTypes, ...column_drag_plugin.columnTypes], (sources, k) => {
+            sources[k] = new column_drag_plugin.DimensionStore();
+            sources[k].store.onChange('realSize', () => sizeChanged(k));
+            return sources;
+        }, {});
     }
-    beforeTrimmedApply(trimmed, type) {
-        /** Before filter apply remove grouping filtering */
-        if (type === FILTER_TRIMMED_TYPE) {
-            const source = this.store.get('source');
-            for (let index in trimmed) {
-                if (trimmed[index] && column_service.isGrouping(source[index])) {
-                    trimmed[index] = false;
-                }
-            }
+    /**
+     * Clear old sizes from dimension and viewports
+     * @param type - dimension type
+     * @param count - count of items
+     */
+    clearSize(t, count) {
+        this.stores[t].drop();
+        // after we done with drop trigger viewport recalculaction
+        this.viewports.stores[t].setOriginalSizes(this.stores[t].store.get('originItemSize'));
+        this.setItemCount(count, t);
+    }
+    /**
+     * Apply new custom sizes to dimension and view port
+     * @param type - dimension type
+     * @param sizes - new custom sizes
+     * @param keepOld - keep old sizes merge new with old
+     */
+    setCustomSizes(type, sizes, keepOld = false) {
+        let newSizes = sizes;
+        if (keepOld) {
+            const oldSizes = this.stores[type].store.get('sizes');
+            newSizes = Object.assign(Object.assign({}, oldSizes), sizes);
         }
+        this.stores[type].setDimensionSize(newSizes);
+        this.updateViewport(type, true);
     }
-    // subscribe to grid events to process them accordingly
-    subscribe() {
-        /** if grouping present and new data source arrived */
-        this.addEventListener('beforesourceset', ({ detail }) => 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', () => 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(column_service.GROUP_EXPAND_EVENT, ({ detail }) => this.onExpand(detail));
+    setItemCount(realCount, type) {
+        this.viewports.stores[type].setViewport({ realCount });
+        this.stores[type].setStore({ count: realCount });
+    }
+    /**
+     * Apply trimmed items
+     * @param trimmed - trimmed items
+     * @param type
+     */
+    setTrimmed(trimmed, type) {
+        const allTrimmed = index.gatherTrimmedItems(trimmed);
+        const dimStoreType = this.stores[type];
+        dimStoreType.setStore({ trimmed: allTrimmed });
+        this.updateViewport(type, true);
     }
     /**
-     * Starts global source update with group clearing and applying new one
-     * Initiated when need to reapply grouping
+     * Sets dimension data and view port coordinate
+     * @param itemCount
+     * @param type - dimension type
+     * @param noVirtual - disable virtual data
      */
-    doSourceUpdate(options) {
-        var _a;
-        if (!this.hasProps) {
-            return;
+    setData(itemCount, type, noVirtual = false) {
+        this.setItemCount(itemCount, type);
+        // Virtualization will get disabled
+        if (noVirtual) {
+            const dimension = this.stores[type].getCurrentState();
+            this.viewports.stores[type].setViewport({
+                virtualSize: dimension.realSize,
+            });
         }
-        /**
-         * 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 } = this.getSource(true);
-        /**
-         * 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) || [], Object.assign({ prevExpanded }, options));
-        // setup source
-        this.providers.data.setData(sourceWithGroups, column_service.GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, { depth, customRenderer: options === null || options === void 0 ? void 0 : options.groupLabelTemplate }, true);
-        this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexes !== null && oldNewIndexes !== void 0 ? oldNewIndexes : {}, oldNewIndexMap);
+        this.updateViewport(type);
     }
-    /**
-     * Apply grouping on data set
-     * Clear grouping from source
-     * If source came from other plugin
-     */
-    onDataSet(data) {
-        var _a;
-        if (!this.hasProps || !(data === null || data === void 0 ? void 0 : data.source) || !data.source.length) {
-            return;
+    applyNewColumns(columns, disableVirtualX) {
+        for (let type of column_drag_plugin.columnTypes) {
+            // clear existing data
+            this.stores[type].drop();
+            const items = columns[type];
+            // for pinned col no need virtual data
+            const noVirtual = type !== 'rgCol' || disableVirtualX;
+            // setItemCount
+            this.stores[type].setStore({ count: items.length });
+            // setCustomSizes
+            const newSizes = column_drag_plugin.getColumnSizes(items);
+            this.stores[type].setDimensionSize(newSizes);
+            const vpUpdate = {
+                // this triggers drop on realCount change
+                realCount: items.length,
+            };
+            // Virtualization will get disabled
+            if (noVirtual) {
+                vpUpdate.virtualSize = this.stores[type].getCurrentState().realSize;
+            }
+            this.viewports.stores[type].setViewport(vpUpdate);
+            this.setViewPortCoordinate({
+                coordinate: this.viewports.stores[type].lastCoordinate,
+                type,
+            });
         }
-        const source = data.source.filter(s => !column_service.isGrouping(s));
-        const expanded = this.revogrid.grouping || {};
-        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup, } = column_service.gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], Object.assign({}, (expanded || {})));
-        data.source = sourceWithGroups;
-        this.providers.data.setGrouping({ depth });
-        this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexMap);
     }
-    // apply grouping
-    setGrouping(options) {
-        // unsubscribe from all events when group applied
-        this.clearSubscriptions();
-        this.options = options;
-        // clear props, no grouping exists
-        if (!options.props || !Object.keys(options.props).length) {
-            this.clearGrouping();
-            return;
-        }
-        // props exist and source inited
-        const { source } = this.getSource();
-        if (source.length) {
-            this.doSourceUpdate(Object.assign({}, options));
+    getFullSize() {
+        var _a, _b;
+        let x = 0;
+        let y = 0;
+        for (let type of column_drag_plugin.columnTypes) {
+            x += ((_a = this.stores[type]) === null || _a === void 0 ? void 0 : _a.store.get('realSize')) || 0;
         }
-        // props exist and columns inited
-        for (let t of column_utils.columnTypes) {
-            if (this.setColumnGrouping(this.providers.column.getColumns(t))) {
-                this.providers.column.refreshByType(t);
-                break;
-            }
+        for (let type of column_drag_plugin.rowTypes) {
+            y += ((_b = this.stores[type]) === null || _b === void 0 ? void 0 : _b.store.get('realSize')) || 0;
         }
-        // if has any grouping subscribe to events again
-        this.subscribe();
+        return { y, x };
     }
-    // clear grouping
-    clearGrouping() {
-        // clear columns
-        column_utils.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);
-            }
+    updateViewport(type, force = false) {
+        this.setViewPortCoordinate({
+            coordinate: this.viewports.stores[type].lastCoordinate,
+            type,
+            force,
         });
-        // clear rows
-        const { source, oldNewIndexes } = this.getSource(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.trimmed, firstLevelMap, secondLevelMap);
-        for (let type in trimemedOptionsToUpgrade) {
-            this.revogrid.addTrimmed(trimemedOptionsToUpgrade[type], type);
+    setViewPortCoordinate({ coordinate, type, force = false, }) {
+        const dimension = this.stores[type].getCurrentState();
+        this.viewports.stores[type].setViewPortCoordinate(coordinate, dimension, force);
+    }
+    getViewPortPos(e) {
+        const dimension = this.stores[e.dimension].getCurrentState();
+        const item = index.getItemByIndex(dimension, e.coordinate);
+        return item.start;
+    }
+    setSettings(data, dimensionType) {
+        let stores = [];
+        switch (dimensionType) {
+            case 'rgCol':
+                stores = column_drag_plugin.columnTypes;
+                break;
+            case 'rgRow':
+                stores = column_drag_plugin.rowTypes;
+                break;
         }
-        // const emptyGroups = this.filterOutEmptyGroups(trimemedOptionsToUpgrade, childrenByGroup);
-        // setup trimmed data for grouping
-        this.revogrid.addTrimmed(Object.assign({}, trimmedGroup), TRIMMED_GROUPING);
+        for (let s of stores) {
+            this.stores[s].setStore(data);
+        }
+    }
+}
+
+class ViewportProvider {
+    constructor() {
+        this.stores = index.reduce_1([...column_drag_plugin.rowTypes, ...column_drag_plugin.columnTypes], (sources, k) => {
+            sources[k] = new rowHeaderUtils.ViewportStore(k);
+            return sources;
+        }, {});
+    }
+    setViewport(type, data) {
+        this.stores[type].setViewport(data);
     }
 }
 
@@ -2345,7 +1326,7 @@ class ViewportService {
         // Transform data from stores and apply it to different components
         const columns = [];
         let x = 0; // we increase x only if column present
-        column_utils.columnTypes.forEach(val => {
+        column_drag_plugin.columnTypes.forEach(val => {
             const colStore = config.columnProvider.stores[val].store;
             // only columns that have data show
             if (!colStore.get('items').length) {
@@ -2432,17 +1413,17 @@ class ViewportService {
     /** Collect Row data */
     dataViewPort(data) {
         const slots = {
-            rowPinStart: column_service.HEADER_SLOT,
-            rgRow: column_service.CONTENT_SLOT,
-            rowPinEnd: column_service.FOOTER_SLOT,
+            rowPinStart: viewport_helpers.HEADER_SLOT,
+            rgRow: viewport_helpers.CONTENT_SLOT,
+            rowPinEnd: viewport_helpers.FOOTER_SLOT,
         };
         // y position for selection
         let y = 0;
-        return column_utils.rowTypes.reduce((result, type) => {
+        return column_drag_plugin.rowTypes.reduce((result, type) => {
             // filter out empty sources, we still need to return source to keep slot working
             const isPresent = data.viewports[type].store.get('realCount') || type === 'rgRow';
-            const rgCol = Object.assign(Object.assign({}, data), { position: Object.assign(Object.assign({}, data.position), { y: isPresent ? y : selection_helpers.EMPTY_INDEX }) });
-            const partition = column_service.viewportDataPartition(rgCol, type, slots[type], type !== 'rgRow');
+            const rgCol = Object.assign(Object.assign({}, data), { position: Object.assign(Object.assign({}, data.position), { y: isPresent ? y : column_service.EMPTY_INDEX }) });
+            const partition = viewport_helpers.viewportDataPartition(rgCol, type, slots[type], type !== 'rgRow');
             result.push(partition);
             if (isPresent) {
                 y++;
@@ -2568,9 +1549,9 @@ class GridScrollingService {
             if (elKey === key) {
                 continue;
             }
-            if (column_utils.columnTypes.includes(key) &&
+            if (column_drag_plugin.columnTypes.includes(key) &&
                 (elKey === 'headerRow' ||
-                    column_utils.columnTypes.includes(elKey))) {
+                    column_drag_plugin.columnTypes.includes(elKey))) {
                 for (let el of this.elements[elKey]) {
                     await ((_a = el.changeScroll) === null || _a === void 0 ? void 0 : _a.call(el, e, true));
                 }
@@ -2656,95 +1637,6 @@ const OrderRenderer = ({ ref }) => {
         index$1.h("div", { class: "drag-position", ref: e => (service.rgRow = e) })));
 };
 
-class StretchColumn extends column_utils.BasePlugin {
-    constructor(revogrid, providers) {
-        super(revogrid, providers);
-        this.providers = providers;
-        this.stretchedColumn = null;
-        // calculate scroll bar size for current user session
-        this.scrollSize = index.getScrollbarSize(document);
-        // subscribe to column changes
-        const beforecolumnapplied = ({ detail: { columns }, }) => this.applyStretch(columns);
-        this.addEventListener('beforecolumnapplied', beforecolumnapplied);
-    }
-    setScroll({ type, hasScroll }) {
-        var _a;
-        if (type === 'rgRow' &&
-            this.stretchedColumn &&
-            ((_a = this.stretchedColumn) === null || _a === void 0 ? void 0 : _a.initialSize) === this.stretchedColumn.size) {
-            if (hasScroll) {
-                this.stretchedColumn.size -= this.scrollSize;
-                this.apply();
-                this.dropChanges();
-            }
-        }
-    }
-    activateChanges() {
-        const setScroll = ({ detail }) => this.setScroll(detail);
-        this.addEventListener('scrollchange', setScroll);
-    }
-    dropChanges() {
-        this.stretchedColumn = null;
-        this.removeEventListener('scrollchange');
-    }
-    apply() {
-        if (!this.stretchedColumn) {
-            return;
-        }
-        const type = 'rgCol';
-        const sizes = this.providers.dimension.stores[type].store.get('sizes');
-        this.providers.dimension.setCustomSizes(type, Object.assign(Object.assign({}, sizes), { [this.stretchedColumn.index]: this.stretchedColumn.size }), true);
-    }
-    /**
-     * Apply stretch changes
-     */
-    applyStretch(columns) {
-        // unsubscribe from all events
-        this.dropChanges();
-        // calculate grid size
-        let sizeDifference = this.revogrid.clientWidth - 1;
-        index.each(columns, (_, type) => {
-            const realSize = this.providers.dimension.stores[type].store.get('realSize');
-            sizeDifference -= realSize;
-        });
-        if (this.revogrid.rowHeaders) {
-            const itemsLength = this.providers.data.stores.rgRow.store.get('source').length;
-            const header = this.revogrid.rowHeaders;
-            const rowHeaderSize = rowHeaderUtils.calculateRowHeaderSize(itemsLength, typeof header === 'object' ? header : undefined);
-            if (rowHeaderSize) {
-                sizeDifference -= rowHeaderSize;
-            }
-        }
-        if (sizeDifference > 0) {
-            // currently plugin accepts last column only
-            const index = columns.rgCol.length - 1;
-            const last = columns.rgCol[index];
-            /**
-             * has column
-             * no auto size applied
-             * size for column shouldn't be defined
-             */
-            const colSize = (last === null || last === void 0 ? void 0 : last.size) || this.revogrid.colSize || 0;
-            const size = sizeDifference + colSize - 1;
-            if (last && !last.autoSize && colSize < size) {
-                this.stretchedColumn = {
-                    initialSize: size,
-                    index,
-                    size,
-                };
-                this.apply();
-                this.activateChanges();
-            }
-        }
-    }
-}
-/**
- * Check plugin type is Stretch
- */
-function isStretchPlugin(plugin) {
-    return !!plugin.applyStretch;
-}
-
 const rowDefinitionByType = (newVal = []) => {
     const result = {};
     for (const v of newVal) {
@@ -2775,228 +1667,6 @@ const rowDefinitionRemoveByType = (oldVal = []) => {
     return result;
 };
 
-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',
-        });
-    }
-    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 ColumnPlugin extends column_utils.BasePlugin {
-    constructor(revogrid, providers) {
-        super(revogrid, providers);
-        this.revogrid = revogrid;
-        this.providers = providers;
-        this.moveFunc = debounce.debounce_1((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 } = dispatcher.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_utils.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 = index.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 = index.getItemByPosition(this.staticDragData.cols, x);
-            this.orderUi.autoscroll(x, dragData.elRect.width);
-            this.orderUi.showHandler(rgCol.end + dragData.scrollOffset, dragData.gridRect.width);
-        }
-    }
-    move(e) {
-        dispatcher.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 = index.getItemByPosition(this.staticDragData.cols, relativePos);
-            const store = this.providers.column.stores[this.dragData.type].store;
-            const items = [...store.get('items')];
-            // prevent position change if needed
-            const { defaultPrevented: stopDrag } = dispatcher.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]] }));
-            if (!stopDrag) {
-                // 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);
-            }
-            dispatcher.dispatch(this.revogrid, DRAG_END, this.dragData);
-        }
-        this.clearOrder();
-    }
-    clearLocalSubscriptions() {
-        index.each(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();
-    }
-    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,
-        };
-    }
-    getDimension(type) {
-        return this.providers.dimension.stores[type].getCurrentState();
-    }
-}
-function getLeftRelative(absoluteX, gridPos, offset) {
-    return absoluteX - gridPos - offset;
-}
-
 function isMobileDevice() {
     return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || navigator.maxTouchPoints > 0;
 }
@@ -3022,7 +1692,7 @@ function isMobileDevice() {
  * Note: The WCAG Plugin should be added as the last plugin in the list of plugins, as it modifies the grid's
  * default behavior and may conflict with other plugins if added earlier.
  */
-class WCAGPlugin extends column_utils.BasePlugin {
+class WCAGPlugin extends column_drag_plugin.BasePlugin {
     constructor(revogrid, providers) {
         super(revogrid, providers);
         revogrid.setAttribute('dir', 'ltr');
@@ -3076,7 +1746,7 @@ class WCAGPlugin extends column_utils.BasePlugin {
     }
 }
 
-const revoGridStyleCss = ".revo-drag-icon{width:11px;opacity:0.8}.revo-drag-icon::before{content:\"::\"}.revo-alt-icon{-webkit-mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");width:11px;height:11px;background-size:cover;background-repeat:no-repeat}.arrow-down{position:absolute;right:5px;top:0}.arrow-down svg{width:8px;margin-top:5px;margin-left:5px;opacity:0.4}.cell-value-wrapper{margin-right:10px;overflow:hidden;text-overflow:ellipsis}.revo-button{position:relative;overflow:hidden;color:#fff;background-color:#6200ee;height:34px;line-height:34px;padding:0 15px;outline:0;border:0;border-radius:7px;box-sizing:border-box;cursor:pointer}.revo-button.green{background-color:#009037;border:1px solid #00772d}.revo-button.red{background-color:#E0662E;border:1px solid #d55920}.revo-button:disabled,.revo-button[disabled]{cursor:not-allowed !important;filter:opacity(0.35) !important}.revo-button.light{border:1px solid #cedefa;line-height:32px;background:none;color:#000;box-shadow:none}revo-grid[theme=default],revo-grid:not([theme]){border:1px solid #cecece;font-size:12px}revo-grid[theme=default] revogr-header,revo-grid:not([theme]) revogr-header{text-align:center;line-height:30px;background-color:#f8f9fa}revo-grid[theme=default] revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{box-shadow:none}revo-grid[theme=default] revogr-header .header-rgRow,revo-grid[theme=default] revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{text-transform:uppercase;font-size:12px;color:#000}revo-grid[theme=default] revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow{height:30px;box-shadow:0 -1px 0 0 #cecece inset}revo-grid[theme=default] revogr-header .rgHeaderCell,revo-grid:not([theme]) revogr-header .rgHeaderCell{box-shadow:-1px 0 0 0 #cecece inset, 0 -1px 0 0 #cecece, 0 -1px 0 0 #cecece inset}revo-grid[theme=default] revogr-header .rgHeaderCell.focused-cell,revo-grid:not([theme]) revogr-header .rgHeaderCell.focused-cell{background:rgba(233, 234, 237, 0.5)}revo-grid[theme=default] .rowHeaders,revo-grid:not([theme]) .rowHeaders{background-color:#f8f9fa}revo-grid[theme=default] .rowHeaders revogr-data .rgCell,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell{color:#000}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:first-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:first-child{box-shadow:0 -1px 0 0 #cecece inset}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:not(:first-child),revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child){box-shadow:0 -1px 0 0 #cecece inset, 1px 0 0 0 #cecece inset}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:last-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:last-child{border-right:1px solid #cecece}revo-grid[theme=default] .rowHeaders revogr-data revogr-header,revo-grid:not([theme]) .rowHeaders revogr-data revogr-header{box-shadow:0 -1px 0 0 #cecece inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child{box-shadow:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #cecece inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 #cecece inset, -1px 0 0 0 #cecece inset}revo-grid[theme=default] revogr-viewport-scroll.colPinEnd,revo-grid[theme=default] revogr-viewport-scroll.colPinEnd revogr-header,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd revogr-header{box-shadow:1px 0 0 #cecece inset}revo-grid[theme=default] .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset, 0 -1px 0 0 #e2e3e3 inset}revo-grid[theme=default] revogr-data,revo-grid:not([theme]) revogr-data{text-align:center}revo-grid[theme=default] revogr-data .revo-draggable,revo-grid:not([theme]) revogr-data .revo-draggable{float:left}revo-grid[theme=default] revogr-data .rgRow,revo-grid:not([theme]) revogr-data .rgRow{line-height:27px}revo-grid[theme=default] revogr-data .rgRow.focused-rgRow,revo-grid:not([theme]) revogr-data .rgRow.focused-rgRow{background-color:rgba(233, 234, 237, 0.5)}revo-grid[theme=default] revogr-data .rgCell,revo-grid:not([theme]) revogr-data .rgCell{box-shadow:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset}revo-grid[theme=default] revogr-data .rgCell.disabled,revo-grid:not([theme]) revogr-data .rgCell.disabled{background-color:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset}revo-grid[theme=material]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}revo-grid[theme=material] revogr-header{line-height:50px;font-weight:600;text-align:left}revo-grid[theme=material] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=material] revogr-header .header-rgRow{height:50px}revo-grid[theme=material] revogr-data{text-align:left}revo-grid[theme=material] revogr-data .rgRow{line-height:42px}revo-grid[theme=material] revogr-data .rgCell{padding:0 15px}revo-grid[theme=material] .rowHeaders{background-color:#f7faff}revo-grid[theme=material] .rowHeaders revogr-data .rgCell{color:#757a82}revo-grid[theme=material] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #f1f1f1, 0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-header .rgHeaderCell.sortable:hover{background-color:#f1f1f1}revo-grid[theme=material] revogr-header .rgHeaderCell.focused-cell{background:rgba(233, 234, 237, 0.5)}revo-grid[theme=material] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #f1f1f1}revo-grid[theme=material] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #f1f1f1}revo-grid[theme=material] revogr-data .rgRow{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-data .rgRow.focused-rgRow{background-color:rgba(233, 234, 237, 0.5)}revo-grid[theme=material] revogr-data .rgCell{color:rgba(0, 0, 0, 0.87)}revo-grid[theme=material] revogr-data .rgCell.disabled{background-color:#f7f7f7}revo-grid[theme=darkMaterial]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#d8d8d8}revo-grid[theme=darkMaterial] revogr-header{line-height:50px;font-weight:600;text-align:left}revo-grid[theme=darkMaterial] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=darkMaterial] revogr-header .header-rgRow{height:50px}revo-grid[theme=darkMaterial] revogr-data{text-align:left}revo-grid[theme=darkMaterial] revogr-data .rgRow{line-height:42px}revo-grid[theme=darkMaterial] revogr-data .rgCell{padding:0 15px}revo-grid[theme=darkMaterial] .rowHeaders{background-color:rgba(40, 39, 43, 0.8)}revo-grid[theme=darkMaterial] .rowHeaders revogr-data .rgCell{color:rgba(216, 216, 216, 0.8)}revo-grid[theme=darkMaterial] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #404040, 0 -1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-header .rgHeaderCell.sortable:hover{background-color:rgba(64, 64, 64, 0.5)}revo-grid[theme=darkMaterial] revogr-header .rgHeaderCell.focused-cell{background:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkMaterial] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #404040}revo-grid[theme=darkMaterial] revogr-data .rgCell{color:rgba(216, 216, 216, 0.9)}revo-grid[theme=darkMaterial] revogr-data .rgRow{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-data .rgRow.focused-rgRow{background-color:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkMaterial] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #404040}revo-grid[theme=darkCompact]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#d8d8d8}revo-grid[theme=darkCompact] revogr-header{line-height:45px;font-weight:600;text-align:left}revo-grid[theme=darkCompact] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=darkCompact] revogr-header .header-rgRow{height:45px}revo-grid[theme=darkCompact] revogr-data{text-align:left}revo-grid[theme=darkCompact] revogr-data .rgRow{line-height:32px}revo-grid[theme=darkCompact] revogr-data .rgCell{padding:0 15px}revo-grid[theme=darkCompact] .rowHeaders{background-color:rgba(40, 39, 43, 0.8)}revo-grid[theme=darkCompact] .rowHeaders revogr-data .rgCell{color:rgba(216, 216, 216, 0.8)}revo-grid[theme=darkCompact] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #404040, 0 -1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-header .rgHeaderCell.sortable:hover{background-color:rgba(64, 64, 64, 0.5)}revo-grid[theme=darkCompact] revogr-header .rgHeaderCell.focused-cell{background:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkCompact] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #404040}revo-grid[theme=darkCompact] revogr-data .rgCell{color:rgba(216, 216, 216, 0.9)}revo-grid[theme=darkCompact] revogr-data .rgRow{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-data .rgRow.focused-rgRow{background-color:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkCompact] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #404040}revo-grid[theme=compact]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}revo-grid[theme=compact] revogr-header{line-height:45px;font-weight:600;text-align:left}revo-grid[theme=compact] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=compact] revogr-header .header-rgRow{height:45px}revo-grid[theme=compact] revogr-data{text-align:left}revo-grid[theme=compact] revogr-data .rgRow{line-height:32px}revo-grid[theme=compact] revogr-data .rgCell{padding:0 15px}revo-grid[theme=compact] .rowHeaders{background-color:#f7faff}revo-grid[theme=compact] .rowHeaders revogr-data .rgCell{color:#757a82}revo-grid[theme=compact] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #f1f1f1, 0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-header .rgHeaderCell.sortable:hover{background-color:#f1f1f1}revo-grid[theme=compact] revogr-header .rgHeaderCell.focused-cell{background:rgba(233, 234, 237, 0.5)}revo-grid[theme=compact] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #f1f1f1}revo-grid[theme=compact] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #f1f1f1}revo-grid[theme=compact] revogr-data .rgRow{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-data .rgRow.focused-rgRow{background-color:rgba(233, 234, 237, 0.5)}revo-grid[theme=compact] revogr-data .rgCell{color:rgba(0, 0, 0, 0.87)}revo-grid[theme=compact] revogr-data .rgCell.disabled{background-color:#f7f7f7}revo-grid[theme=compact] revo-dropdown .rv-dr-root{padding:0px 9px}revo-grid{display:block;height:100%;min-height:300px;font-family:Helvetica, Arial, Sans-Serif, serif;font-size:14px;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;width:100%;height:100%}revo-grid .attribution{position:absolute;top:0;left:0;right:0;z-index:100;width:0;height:0;border-left:4px solid rgba(38, 106, 232, 0.6);border-top:4px solid rgba(38, 106, 232, 0.6);border-bottom:4px solid transparent;border-right:4px solid transparent;cursor:pointer}revo-grid .attribution .value{position:absolute;top:0;left:0;background-color:rgba(255, 255, 255, 0.9);padding:4px;border-radius:4px;box-shadow:0 1px 10px rgba(0, 0, 0, 0.2);white-space:nowrap;text-decoration:none;color:black;letter-spacing:0.3px;font-size:11px;opacity:0;width:4px;overflow:hidden;transition:opacity 0.5s ease-in-out, width 0.3s ease-in-out}revo-grid .attribution:hover .value{width:63px;opacity:1}revo-grid.column-draggable.column-drag-start:hover,revo-grid.column-draggable.column-drag-start *:hover{cursor:grabbing}revo-grid .footer-wrapper,revo-grid .header-wrapper{width:100%}revo-grid .footer-wrapper revogr-data,revo-grid .header-wrapper revogr-data{z-index:3}revo-grid revo-dropdown{width:100%}revo-grid revo-dropdown .rv-dr-root{max-height:100%}revo-grid revo-dropdown.shrink label{opacity:0}revo-grid .viewports{max-width:100%;display:flex;flex-direction:row;align-items:flex-start;flex-grow:1}revo-grid .main-viewport{flex-grow:1;height:0;display:flex;justify-content:space-between;flex-direction:row}revo-grid .draggable{position:fixed;height:30px;line-height:30px;background:#fff;border-radius:3px;display:block;z-index:100;margin-top:5px;margin-right:-20px;box-shadow:0 4px 20px 0 rgba(0, 0, 0, 0.15);padding-left:20px;padding-right:5px}revo-grid .draggable.hidden{display:none}revo-grid .draggable .revo-alt-icon{background-color:black;position:absolute;left:5px;top:10px}revo-grid .draggable-wrapper.hidden{display:none}revo-grid .drag-position{position:absolute;left:0;right:0;height:1px;z-index:2;background:gray;pointer-events:none}revo-grid .drag-position-y{position:absolute;top:0;left:0;bottom:0;width:1px;z-index:2;background:gray;pointer-events:none}revo-grid .drag-auto-scroll-y{pointer-events:none;position:absolute;left:0;top:0;height:50px;width:1px}revo-grid .clipboard{position:absolute;left:0;top:0}revo-grid revogr-scroll-virtual{position:relative}revo-grid revogr-scroll-virtual.vertical,revo-grid revogr-scroll-virtual.horizontal{z-index:3}";
+const revoGridStyleCss = ".revo-drag-icon{width:11px;opacity:0.8}.revo-drag-icon::before{content:\"::\"}.revo-alt-icon{-webkit-mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");width:11px;height:11px;background-size:cover;background-repeat:no-repeat}.arrow-down{position:absolute;right:5px;top:0}.arrow-down svg{width:8px;margin-top:5px;margin-left:5px;opacity:0.4}.cell-value-wrapper{margin-right:10px;overflow:hidden;text-overflow:ellipsis}.revo-button{position:relative;overflow:hidden;color:#fff;background-color:#6200ee;height:34px;line-height:34px;padding:0 15px;outline:0;border:0;border-radius:7px;box-sizing:border-box;cursor:pointer}.revo-button.green{background-color:#009037;border:1px solid #00772d}.revo-button.red{background-color:#E0662E;border:1px solid #d55920}.revo-button:disabled,.revo-button[disabled]{cursor:not-allowed !important;filter:opacity(0.35) !important}.revo-button.light{border:1px solid #cedefa;line-height:32px;background:none;color:#000;box-shadow:none}revo-grid[theme=default],revo-grid:not([theme]){border:1px solid #cecece;font-size:12px}revo-grid[theme=default] revogr-header,revo-grid:not([theme]) revogr-header{text-align:center;line-height:30px;background-color:#f8f9fa}revo-grid[theme=default] revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{box-shadow:none}revo-grid[theme=default] revogr-header .header-rgRow,revo-grid[theme=default] revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{text-transform:uppercase;font-size:12px;color:#000}revo-grid[theme=default] revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow{height:30px;box-shadow:0 -1px 0 0 #cecece inset}revo-grid[theme=default] revogr-header .rgHeaderCell,revo-grid:not([theme]) revogr-header .rgHeaderCell{box-shadow:-1px 0 0 0 #cecece inset, 0 -1px 0 0 #cecece, 0 -1px 0 0 #cecece inset}revo-grid[theme=default] revogr-header .rgHeaderCell.focused-cell,revo-grid:not([theme]) revogr-header .rgHeaderCell.focused-cell{background:rgba(233, 234, 237, 0.5)}revo-grid[theme=default] .rowHeaders,revo-grid:not([theme]) .rowHeaders{background-color:#f8f9fa}revo-grid[theme=default] .rowHeaders revogr-data .rgCell,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell{color:#000}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:first-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:first-child{box-shadow:0 -1px 0 0 #cecece inset}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:not(:first-child),revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child){box-shadow:0 -1px 0 0 #cecece inset, 1px 0 0 0 #cecece inset}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:last-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:last-child{border-right:1px solid #cecece}revo-grid[theme=default] .rowHeaders revogr-data revogr-header,revo-grid:not([theme]) .rowHeaders revogr-data revogr-header{box-shadow:0 -1px 0 0 #cecece inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child{box-shadow:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #cecece inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 #cecece inset, -1px 0 0 0 #cecece inset}revo-grid[theme=default] revogr-viewport-scroll.colPinEnd,revo-grid[theme=default] revogr-viewport-scroll.colPinEnd revogr-header,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd revogr-header{box-shadow:1px 0 0 #cecece inset}revo-grid[theme=default] .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset, 0 -1px 0 0 #e2e3e3 inset}revo-grid[theme=default] revogr-data,revo-grid:not([theme]) revogr-data{text-align:center}revo-grid[theme=default] revogr-data .revo-draggable,revo-grid:not([theme]) revogr-data .revo-draggable{float:left}revo-grid[theme=default] revogr-data .rgRow,revo-grid:not([theme]) revogr-data .rgRow{line-height:27px}revo-grid[theme=default] revogr-data .rgRow.focused-rgRow,revo-grid:not([theme]) revogr-data .rgRow.focused-rgRow{background-color:rgba(233, 234, 237, 0.5)}revo-grid[theme=default] revogr-data .rgCell,revo-grid:not([theme]) revogr-data .rgCell{box-shadow:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset}revo-grid[theme=default] revogr-data .rgCell.disabled,revo-grid:not([theme]) revogr-data .rgCell.disabled{background-color:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset}revo-grid[theme=material]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}revo-grid[theme=material] revogr-header{line-height:50px;font-weight:600;text-align:left}revo-grid[theme=material] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=material] revogr-header .header-rgRow{height:50px}revo-grid[theme=material] revogr-data{text-align:left}revo-grid[theme=material] revogr-data .rgRow{line-height:42px}revo-grid[theme=material] revogr-data .rgCell{padding:0 15px}revo-grid[theme=material] .rowHeaders{background-color:#f7faff}revo-grid[theme=material] .rowHeaders revogr-data .rgCell{color:#757a82}revo-grid[theme=material] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #f1f1f1, 0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-header .rgHeaderCell.sortable:hover{background-color:#f1f1f1}revo-grid[theme=material] revogr-header .rgHeaderCell.focused-cell{background:rgba(233, 234, 237, 0.5)}revo-grid[theme=material] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #f1f1f1}revo-grid[theme=material] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #f1f1f1}revo-grid[theme=material] revogr-data .rgRow{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-data .rgRow.focused-rgRow{background-color:rgba(233, 234, 237, 0.5)}revo-grid[theme=material] revogr-data .rgCell{color:rgba(0, 0, 0, 0.87)}revo-grid[theme=material] revogr-data .rgCell.disabled{background-color:#f7f7f7}revo-grid[theme=darkMaterial]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#d8d8d8}revo-grid[theme=darkMaterial] revogr-header{line-height:50px;font-weight:600;text-align:left}revo-grid[theme=darkMaterial] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=darkMaterial] revogr-header .header-rgRow{height:50px}revo-grid[theme=darkMaterial] revogr-data{text-align:left}revo-grid[theme=darkMaterial] revogr-data .rgRow{line-height:42px}revo-grid[theme=darkMaterial] revogr-data .rgCell{padding:0 15px}revo-grid[theme=darkMaterial] .rowHeaders{background-color:rgba(40, 39, 43, 0.8)}revo-grid[theme=darkMaterial] .rowHeaders revogr-data .rgCell{color:rgba(216, 216, 216, 0.8)}revo-grid[theme=darkMaterial] revogr-edit{background-color:#28272b}revo-grid[theme=darkMaterial] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #404040, 0 -1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-header .rgHeaderCell.sortable:hover{background-color:rgba(64, 64, 64, 0.5)}revo-grid[theme=darkMaterial] revogr-header .rgHeaderCell.focused-cell{background:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkMaterial] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #404040}revo-grid[theme=darkMaterial] revogr-data .rgCell{color:rgba(216, 216, 216, 0.9)}revo-grid[theme=darkMaterial] revogr-data .rgRow{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-data .rgRow.focused-rgRow{background-color:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkMaterial] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #404040}revo-grid[theme=darkCompact]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#d8d8d8}revo-grid[theme=darkCompact] revogr-header{line-height:45px;font-weight:600;text-align:left}revo-grid[theme=darkCompact] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=darkCompact] revogr-header .header-rgRow{height:45px}revo-grid[theme=darkCompact] revogr-data{text-align:left}revo-grid[theme=darkCompact] revogr-data .rgRow{line-height:32px}revo-grid[theme=darkCompact] revogr-data .rgCell{padding:0 15px}revo-grid[theme=darkCompact] .rowHeaders{background-color:rgba(40, 39, 43, 0.8)}revo-grid[theme=darkCompact] .rowHeaders revogr-data .rgCell{color:rgba(216, 216, 216, 0.8)}revo-grid[theme=darkCompact] revogr-edit{background-color:#28272b}revo-grid[theme=darkCompact] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #404040, 0 -1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-header .rgHeaderCell.sortable:hover{background-color:rgba(64, 64, 64, 0.5)}revo-grid[theme=darkCompact] revogr-header .rgHeaderCell.focused-cell{background:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkCompact] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #404040}revo-grid[theme=darkCompact] revogr-data .rgCell{color:rgba(216, 216, 216, 0.9)}revo-grid[theme=darkCompact] revogr-data .rgRow{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-data .rgRow.focused-rgRow{background-color:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkCompact] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #404040}revo-grid[theme=compact]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}revo-grid[theme=compact] revogr-header{line-height:45px;font-weight:600;text-align:left}revo-grid[theme=compact] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=compact] revogr-header .header-rgRow{height:45px}revo-grid[theme=compact] revogr-data{text-align:left}revo-grid[theme=compact] revogr-data .rgRow{line-height:32px}revo-grid[theme=compact] revogr-data .rgCell{padding:0 15px}revo-grid[theme=compact] .rowHeaders{background-color:#f7faff}revo-grid[theme=compact] .rowHeaders revogr-data .rgCell{color:#757a82}revo-grid[theme=compact] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #f1f1f1, 0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-header .rgHeaderCell.sortable:hover{background-color:#f1f1f1}revo-grid[theme=compact] revogr-header .rgHeaderCell.focused-cell{background:rgba(233, 234, 237, 0.5)}revo-grid[theme=compact] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #f1f1f1}revo-grid[theme=compact] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #f1f1f1}revo-grid[theme=compact] revogr-data .rgRow{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-data .rgRow.focused-rgRow{background-color:rgba(233, 234, 237, 0.5)}revo-grid[theme=compact] revogr-data .rgCell{color:rgba(0, 0, 0, 0.87)}revo-grid[theme=compact] revogr-data .rgCell.disabled{background-color:#f7f7f7}revo-grid[theme=compact] revo-dropdown .rv-dr-root{padding:0px 9px}revo-grid{display:block;height:100%;min-height:300px;font-family:Helvetica, Arial, Sans-Serif, serif;font-size:14px;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;width:100%;height:100%}revo-grid .attribution{position:absolute;top:0;left:0;right:0;z-index:100;width:0;height:0;border-left:4px solid rgba(38, 106, 232, 0.6);border-top:4px solid rgba(38, 106, 232, 0.6);border-bottom:4px solid transparent;border-right:4px solid transparent;cursor:pointer}revo-grid .attribution .value{position:absolute;top:0;left:0;background-color:rgba(255, 255, 255, 0.9);padding:4px;border-radius:4px;box-shadow:0 1px 10px rgba(0, 0, 0, 0.2);white-space:nowrap;text-decoration:none;color:black;letter-spacing:0.3px;font-size:11px;opacity:0;width:4px;overflow:hidden;transition:opacity 0.5s ease-in-out, width 0.3s ease-in-out}revo-grid .attribution:hover .value{width:63px;opacity:1}revo-grid.column-draggable.column-drag-start:hover,revo-grid.column-draggable.column-drag-start *:hover{cursor:grabbing}revo-grid .footer-wrapper,revo-grid .header-wrapper{width:100%}revo-grid .footer-wrapper revogr-data,revo-grid .header-wrapper revogr-data{z-index:3}revo-grid revo-dropdown{width:100%}revo-grid revo-dropdown .rv-dr-root{max-height:100%}revo-grid revo-dropdown.shrink label{opacity:0}revo-grid .viewports{max-width:100%;display:flex;flex-direction:row;align-items:flex-start;flex-grow:1}revo-grid .main-viewport{flex-grow:1;height:0;display:flex;justify-content:space-between;flex-direction:row}revo-grid .draggable{position:fixed;height:30px;line-height:30px;background:#fff;border-radius:3px;display:block;z-index:100;margin-top:5px;margin-right:-20px;box-shadow:0 4px 20px 0 rgba(0, 0, 0, 0.15);padding-left:20px;padding-right:5px}revo-grid .draggable.hidden{display:none}revo-grid .draggable .revo-alt-icon{background-color:black;position:absolute;left:5px;top:10px}revo-grid .draggable-wrapper.hidden{display:none}revo-grid .drag-position{position:absolute;left:0;right:0;height:1px;z-index:2;background:gray;pointer-events:none}revo-grid .drag-position-y{position:absolute;top:0;left:0;bottom:0;width:1px;z-index:2;background:gray;pointer-events:none}revo-grid .drag-auto-scroll-y{pointer-events:none;position:absolute;left:0;top:0;height:50px;width:1px}revo-grid .clipboard{position:absolute;left:0;top:0}revo-grid revogr-scroll-virtual{position:relative}revo-grid revogr-scroll-virtual.vertical,revo-grid revogr-scroll-virtual.horizontal{z-index:3}";
 const RevoGridStyle0 = revoGridStyleCss;
 
 const RevoGridComponent = class {
@@ -3244,7 +1914,7 @@ const RevoGridComponent = class {
     /**  Open editor for cell. */
     async setCellEdit(rgRow, prop, rowSource = 'rgRow') {
         var _a;
-        const rgCol = column_utils.getColumnByProp(this.columns, prop);
+        const rgCol = column_drag_plugin.getColumnByProp(this.columns, prop);
         if (!rgCol) {
             return;
         }
@@ -3468,7 +2138,7 @@ const RevoGridComponent = class {
         this.columnChanged(this.columns);
     }
     columnChanged(newVal = []) {
-        const columnGather = column_utils.getColumns(newVal, 0, this.columnTypes);
+        const columnGather = column_drag_plugin.getColumns(newVal, 0, this.columnTypes);
         this.beforecolumnsset.emit(columnGather);
         this.dimensionProvider.applyNewColumns(columnGather.columns, this.disableVirtualX);
         this.beforecolumnapplied.emit(columnGather);
@@ -3603,7 +2273,7 @@ const RevoGridComponent = class {
         if (isStretch === 'false') {
             isStretch = false;
         }
-        let stretch = this.internalPlugins.filter(p => isStretchPlugin(p))[0];
+        let stretch = this.internalPlugins.filter(p => column_drag_plugin.isStretchPlugin(p))[0];
         if ((typeof isStretch === 'boolean' && isStretch) || isStretch === 'true') {
             if (!stretch) {
                 const pluginData = {
@@ -3613,9 +2283,9 @@ const RevoGridComponent = class {
                     viewport: this.viewportProvider,
                     selection: this.selectionStoreConnector,
                 };
-                this.internalPlugins.push(new StretchColumn(this.element, pluginData));
+                this.internalPlugins.push(new column_drag_plugin.StretchColumn(this.element, pluginData));
             }
-            else if (isStretchPlugin(stretch)) {
+            else if (column_drag_plugin.isStretchPlugin(stretch)) {
                 stretch.applyStretch(this.columnProvider.getRawColumns());
             }
         }
@@ -3658,24 +2328,24 @@ const RevoGridComponent = class {
         }
         // register auto size plugin
         if (this.autoSizeColumn) {
-            this.internalPlugins.push(new AutoSizeColumnPlugin(this.element, pluginData, typeof this.autoSizeColumn === 'object'
+            this.internalPlugins.push(new column_drag_plugin.AutoSizeColumnPlugin(this.element, pluginData, typeof this.autoSizeColumn === 'object'
                 ? this.autoSizeColumn
                 : undefined));
         }
         // register filter plugin
         if (this.filter) {
-            this.internalPlugins.push(new FilterPlugin(this.element, pluginData, typeof this.filter === 'object' ? this.filter : undefined));
+            this.internalPlugins.push(new column_drag_plugin.FilterPlugin(this.element, pluginData, typeof this.filter === 'object' ? this.filter : undefined));
         }
         // register export plugin
         if (this.exporting) {
-            this.internalPlugins.push(new ExportFilePlugin(this.element, pluginData));
+            this.internalPlugins.push(new column_drag_plugin.ExportFilePlugin(this.element, pluginData));
         }
         // register sorting plugin
         this.internalPlugins.push(new SortingPlugin(this.element, pluginData));
         // register grouping plugin
         this.internalPlugins.push(new GroupingRowPlugin(this.element, pluginData));
         if (this.canMoveColumns) {
-            this.internalPlugins.push(new ColumnPlugin(this.element, pluginData));
+            this.internalPlugins.push(new column_drag_plugin.ColumnPlugin(this.element, pluginData));
         }
         // register user plugins
         (_a = this.plugins) === null || _a === void 0 ? void 0 : _a.forEach(p => this.internalPlugins.push(new p(this.element, pluginData)));
@@ -3708,7 +2378,7 @@ const RevoGridComponent = class {
             realSizeChanged: (k) => this.contentsizechanged.emit(k),
         });
         this.columnProvider = new ColumnDataProvider();
-        this.selectionStoreConnector = new selection_helpers.SelectionStoreConnector();
+        this.selectionStoreConnector = new column_service.SelectionStoreConnector();
         this.dataProvider = new DataProvider(this.dimensionProvider);
         // #endregion
         this.registerOutsideVNodes(this.registerVNode);
@@ -3781,7 +2451,7 @@ const RevoGridComponent = class {
             const headerProperties = Object.assign(Object.assign({}, view.headerProp), { type: view.type, additionalData: this.additionalData, viewportCol: view.viewportCol, selectionStore: view.columnSelectionStore, canResize: this.resize, readonly: this.readonly, columnFilter: !!this.filter });
             // Column headers
             const dataViews = [
-                index$1.h("revogr-header", Object.assign({ key: '31f0cebc08d5e9222d058c138079ee1d6c228ed2' }, headerProperties, { slot: column_service.HEADER_SLOT })),
+                index$1.h("revogr-header", Object.assign({ key: '31f0cebc08d5e9222d058c138079ee1d6c228ed2' }, headerProperties, { slot: viewport_helpers.HEADER_SLOT })),
             ];
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
@@ -3791,7 +2461,7 @@ const RevoGridComponent = class {
                         if (!event.defaultPrevented) {
                             this.selectionStoreConnector.setEdit(detail.val);
                         }
-                    } }), index$1.h("revogr-data", Object.assign({}, data, { colType: view.type, key: key, readonly: this.readonly, range: this.range, rowClass: this.rowClass, rowSelectionStore: data.rowSelectionStore, additionalData: this.additionalData, jobsBeforeRender: this.jobsBeforeRender, slot: column_service.DATA_SLOT }), index$1.h("slot", { name: `data-${view.type}-${data.type}` })), index$1.h("revogr-temp-range", { selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }), index$1.h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, focusTemplate: this.focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }, index$1.h("slot", { name: `focus-${view.type}-${data.type}` }))));
+                    } }), index$1.h("revogr-data", Object.assign({}, data, { colType: view.type, key: key, readonly: this.readonly, range: this.range, rowClass: this.rowClass, rowSelectionStore: data.rowSelectionStore, additionalData: this.additionalData, jobsBeforeRender: this.jobsBeforeRender, slot: viewport_helpers.DATA_SLOT }), index$1.h("slot", { name: `data-${view.type}-${data.type}` })), index$1.h("revogr-temp-range", { selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }), index$1.h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, focusTemplate: this.focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }, index$1.h("slot", { name: `focus-${view.type}-${data.type}` }))));
                 dataViews.push(dataView);
             });
             // Add viewport scroll in the end