@revolist/revogrid 4.9.9 → 4.9.11

package/standalone/revo-grid.js

@@ -2,23 +2,23 @@
  * Built by Revolist OU ❤️
  */
 import { h, proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, Host } from '@stencil/core/internal/client';
-import { r as reduce_1, c as calculateDimensionData, e as each, a as getItemByIndex, g as getItemByPosition } from './dimension.helpers.js';
-import { i as createStore, h as setStore, j as isArray_1, _ as _baseIteratee, k as isArrayLike_1, l as keys_1, m as findIndex_1, D as DataStore, b as getSourceItem, e as getSourceItemVirtualIndexByProp, s as setSourceByVirtualIndex, a as getVisibleSourceItem, f as gatherTrimmedItems, n as _baseProperty, o as _baseKeys, r as range_1, q as toInteger_1, u as _isIterateeCall, g as getPhysical, d as setItems } from './data.store.js';
+import { r as reduce_1, c as calculateDimensionData, e as each, g as getItemByPosition, a as getItemByIndex } from './dimension.helpers.js';
+import { i as createStore, h as setStore, j as isArray_1, b as getSourceItem, k as toInteger_1, _ as _isIterateeCall, g as getPhysical, d as setItems, l as _baseProperty, m as _baseKeys, n as isArrayLike_1, r as range_1, o as _baseIteratee, q as keys_1, u as findIndex_1, D as DataStore, e as getSourceItemVirtualIndexByProp, s as setSourceByVirtualIndex, a as getVisibleSourceItem, f as gatherTrimmedItems } from './data.store.js';
 import { _ as _getTag } from './_stringToPath.js';
 import { _ as _baseGetTag, i as isObjectLike_1 } from './isObjectLike.js';
 import { b as isGrouping, d as getGroupingName, G as GROUP_EXPANDED, e as getParsedGroup, f as isSameGroup, h as GROUP_DEPTH, P as PSEUDO_GROUP_ITEM_VALUE, j as PSEUDO_GROUP_ITEM_ID, k as GROUPING_ROW_TYPE, l as PSEUDO_GROUP_COLUMN, m as GROUP_EXPAND_EVENT, o as gatherGrouping, p as isGroupingColumn, E as EMPTY_INDEX, q as SelectionStoreConnector } from './column.service.js';
 import { d as debounce_1 } from './debounce.js';
 import { R as RESIZE_INTERVAL } from './consts.js';
-import { V as ViewportStore, f as calculateRowHeaderSize, h as defineCustomElement$6 } from './revogr-row-headers2.js';
-import { t as timeout, g as getScrollbarSize } from './index2.js';
+import { f as calculateRowHeaderSize, V as ViewportStore, h as defineCustomElement$6 } from './revogr-row-headers2.js';
+import { g as getScrollbarSize, t as timeout } from './index2.js';
 import { F as FILTER_PROP, i as isFilterBtn } from './filter.button.js';
 import { v as viewportDataPartition, H as HEADER_SLOT, C as CONTENT_SLOT, F as FOOTER_SLOT, D as DATA_SLOT, d as defineCustomElement$3 } from './revogr-viewport-scroll2.js';
-import { d as dispatch, O as ON_COLUMN_CLICK, b as defineCustomElement$9 } from './revogr-header2.js';
+import { d as dispatch, O as ON_COLUMN_CLICK, c as defineCustomElement$9 } from './revogr-header2.js';
 import { g as getPropertyFromEvent } from './selection.utils.js';
 import { d as defineCustomElement$e } from './revogr-attribution2.js';
 import { d as defineCustomElement$d } from './revogr-clipboard2.js';
 import { d as defineCustomElement$c } from './revogr-data2.js';
-import { m as defineCustomElement$b } from './revogr-edit2.js';
+import { l as defineCustomElement$b } from './revogr-edit2.js';
 import { d as defineCustomElement$a } from './revogr-focus2.js';
 import { d as defineCustomElement$8 } from './revogr-order-editor2.js';
 import { d as defineCustomElement$7 } from './revogr-overlay-selection2.js';
@@ -414,1083 +414,1701 @@ function getColumnByProp(columns, prop) {
     return findColumn(columns, prop);
 }
 
-var baseIteratee = _baseIteratee,
-    isArrayLike$1 = isArrayLike_1,
-    keys = 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.
+ * Plugin module for revo-grid grid system
+ * Add support for automatic column resize
  */
-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); };
+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 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 = 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;
+        }
     }
-    var index = findIndexFunc(collection, predicate, fromIndex);
-    return index > -1 ? iterable[iteratee ? collection[index] : index] : undefined;
-  };
-}
-
-var _createFind = createFind$1;
-
-var createFind = _createFind,
-    findIndex = 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;
+    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;
+            }
         }
-        return order;
-    }
-    get stores() {
-        return this.dataSources;
-    }
-    constructor() {
-        this.sorting = null;
-        this.dataSources = columnTypes.reduce((sources, k) => {
-            sources[k] = new DataStore(k);
-            return sources;
-        }, {});
-    }
-    column(c, pin) {
-        return this.getColumn(c, pin || 'rgCol');
-    }
-    getColumn(virtualIndex, type) {
-        return getSourceItem(this.dataSources[type].store, virtualIndex);
-    }
-    getRawColumns() {
-        return reduce_1(this.dataSources, (result, item, type) => {
-            result[type] = item.store.get('source');
-            return result;
-        }, {
-            rgCol: [],
-            colPinStart: [],
-            colPinEnd: [],
+        // calculate sizes
+        each(autoSize, (_v, type) => {
+            const sizes = {};
+            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);
         });
     }
-    getColumns(type = 'all') {
-        if (type !== 'all') {
-            return this.dataSources[type].store.get('source');
+    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;
+            }
+            return str.length * this.letterBlockSize + padding * 2;
+        }
+        catch (e) {
+            return 0;
         }
-        return columnTypes.reduce((r, t) => {
-            r.push(...this.dataSources[t].store.get('source'));
-            return r;
-        }, []);
-    }
-    getColumnIndexByProp(prop, type) {
-        return 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) {
-        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] = [];
+    afteredit(e) {
+        let data;
+        if (this.isRangeEdit(e)) {
+            data = e.data;
+        }
+        else {
+            data = { 0: { [e.prop]: e.val } };
+        }
+        each(this.autoSizeColumns, (columns, type) => {
+            const sizes = {};
+            each(columns, rgCol => {
+                var _a;
+                // calculate size
+                const size = reduce_1(data, (prev, rgRow) => {
+                    if (typeof rgRow[rgCol.prop] === 'undefined') {
+                        return prev;
                     }
-                    res[g.level].push(g);
-                    return res;
-                }, {}),
+                    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);
         });
-        this.sorting = data.sort;
-        return data;
     }
-    updateColumns(cols) {
-        // collect column by type and propert
-        const columnByKey = cols.reduce((res, c) => {
-            const type = 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;
-            }
+    afterEditAll(e) {
+        const props = {};
+        if (this.isRangeEdit(e)) {
+            each(e.data, r => each(r, (_v, p) => (props[p] = true)));
+        }
+        else {
+            props[e.prop] = true;
+        }
+        each(this.autoSizeColumns, (columns, type) => {
+            const sizes = {};
+            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);
+        });
+    }
+    getColumnSize(index, 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];
+        if (!rgCol) {
+            return 0;
+        }
+        return reduce_1(this.providers.data.stores, (r, s) => {
+            const perStore = reduce_1(s.store.get('items'), (prev, _row, i) => {
+                const item = 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 columnTypes) {
             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;
+            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) });
                 }
             }
         }
-        for (const t in colByIndex) {
-            if (!colByIndex.hasOwnProperty(t)) {
-                continue;
-            }
-            const type = t;
-            setSourceByVirtualIndex(this.dataSources[type].store, colByIndex[type] || {});
+        if (this.dataResolve) {
+            this.dataResolve(this.autoSizeColumns || {});
+            this.clearPromise();
         }
     }
-    updateColumn(column, index) {
-        const type = getColumnType(column);
-        setSourceByVirtualIndex(this.dataSources[type].store, { [index]: column });
+    clearPromise() {
+        this.dataResolve = null;
+        this.dataReject = null;
     }
-    updateColumnSorting(column, index, sorting, additive) {
-        if (!additive) {
-            this.clearSorting();
-        }
-        column.order = sorting;
-        if (!this.sorting) {
-            this.sorting = {};
+    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 : '';
         }
-        this.sorting[column.prop] = column;
-        this.updateColumn(column, index);
-        return column;
+        el.classList.add('revo-test-container');
+        return el;
     }
-    clearSorting() {
-        const types = reduce_1(this.sorting, (r, c) => {
-            const k = getColumnType(c);
-            r[k] = true;
-            return r;
-        }, {});
-        each(types, (_, type) => {
-            const cols = this.dataSources[type].store.get('source');
-            each(cols, (c) => (c.order = undefined));
-            this.dataSources[type].setData({ source: [...cols] });
-        });
-        this.sorting = {};
+    destroy() {
+        var _a;
+        super.destroy();
+        (_a = this.precsizeCalculationArea) === null || _a === void 0 ? void 0 : _a.remove();
     }
 }
 
-/**
- * Data source provider
- */
-class DataProvider {
-    constructor(dimensionProvider) {
-        this.dimensionProvider = dimensionProvider;
-        this.stores = reduce_1(rowTypes, (sources, k) => {
-            sources[k] = new 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 getSourceItem(store, virtualIndex);
-    }
-    setCellData({ type, rowIndex, prop, val }, mutate = true) {
-        const model = this.getModel(rowIndex, type);
-        model[prop] = val;
-        // apply data to source
-        setSourceByVirtualIndex(this.stores[type].store, { [rowIndex]: model }, mutate);
+class StretchColumn extends BasePlugin {
+    constructor(revogrid, providers) {
+        super(revogrid, providers);
+        this.providers = providers;
+        this.stretchedColumn = null;
+        // calculate scroll bar size for current user session
+        this.scrollSize = getScrollbarSize(document);
+        // subscribe to column changes
+        const beforecolumnapplied = ({ detail: { columns }, }) => this.applyStretch(columns);
+        this.addEventListener('beforecolumnapplied', beforecolumnapplied);
     }
-    setRangeData(data, type) {
-        const items = {};
-        for (let rowIndex in data) {
-            const oldModel = (items[rowIndex] = getSourceItem(this.stores[type].store, parseInt(rowIndex, 10)));
-            if (!oldModel) {
-                continue;
-            }
-            for (let prop in data[rowIndex]) {
-                oldModel[prop] = data[rowIndex][prop];
+    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();
             }
         }
-        // apply data to source
-        setSourceByVirtualIndex(this.stores[type].store, items);
-    }
-    refresh(type = 'all') {
-        if (isRowType(type)) {
-            this.refreshItems(type);
-        }
-        rowTypes.forEach((t) => this.refreshItems(t));
     }
-    refreshItems(type = 'rgRow') {
-        const items = this.stores[type].store.get('items');
-        this.stores[type].setData({ items: [...items] });
+    activateChanges() {
+        const setScroll = ({ detail }) => this.setScroll(detail);
+        this.addEventListener('scrollchange', setScroll);
     }
-    setGrouping({ depth }, type = 'rgRow') {
-        this.stores[type].setData({ groupingDepth: depth });
+    dropChanges() {
+        this.stretchedColumn = null;
+        this.removeEventListener('scrollchange');
     }
-    setTrimmed(trimmed, type = 'rgRow') {
-        const store = this.stores[type];
-        store.addTrimmed(trimmed);
-        this.dimensionProvider.setTrimmed(trimmed, type);
-        if (type === 'rgRow') {
-            this.dimensionProvider.setData(getVisibleSourceItem(store.store).length, type);
+    apply() {
+        if (!this.stretchedColumn) {
+            return;
         }
-    }
-}
-
-/**
- * Dimension provider
- * Stores dimension information and custom sizes
- */
-class DimensionProvider {
-    constructor(viewports, config) {
-        this.viewports = viewports;
-        const sizeChanged = debounce_1((k) => config.realSizeChanged(k), RESIZE_INTERVAL);
-        this.stores = reduce_1([...rowTypes, ...columnTypes], (sources, k) => {
-            sources[k] = new 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);
+        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 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
+     * Apply stretch changes
      */
-    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);
+    applyStretch(columns) {
+        // unsubscribe from all events
+        this.dropChanges();
+        // calculate grid size
+        let sizeDifference = this.revogrid.clientWidth - 1;
+        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 = calculateRowHeaderSize(itemsLength, typeof header === 'object' ? header : undefined);
+            if (rowHeaderSize) {
+                sizeDifference -= rowHeaderSize;
+            }
         }
-        this.stores[type].setDimensionSize(newSizes);
-        this.updateViewport(type, true);
+        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;
+}
+
+/**
+ * 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 = 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 = toInteger_1,
+    toLength = toLength_1;
+
+/**
+ * The base implementation of `_.fill` without an iteratee call guard.
+ *
+ * @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`.
+ */
+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;
+}
+
+var _baseFill = baseFill$1;
+
+var baseFill = _baseFill,
+    isIterateeCall = _isIterateeCall;
+
+/**
+ * Fills elements of `array` with `value` from `start` up to, but not
+ * including, `end`.
+ *
+ * **Note:** This method mutates `array`.
+ *
+ * @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`.
+ * @example
+ *
+ * var array = [1, 2, 3];
+ *
+ * _.fill(array, 'a');
+ * console.log(array);
+ * // => ['a', 'a', 'a']
+ *
+ * _.fill(Array(3), 2);
+ * // => [2, 2, 2]
+ *
+ * _.fill([4, 6, 8, 10], '*', 1, 3);
+ * // => [4, '*', '*', 10]
+ */
+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 fill_1 = fill;
+
+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;
+            });
+        }
+        data.forEach((rgRow, index) => {
+            if (index > 0) {
+                result += this.options.rowDelimiter;
+            }
+            // support grouping
+            if (isGrouping(rgRow)) {
+                result += this.parseCell(getGroupingName(rgRow), this.options.columnDelimiter);
+                return;
+            }
+            result += props.map(p => this.parseCell(rgRow[p], this.options.columnDelimiter)).join(this.options.columnDelimiter);
+        });
+        return result;
+    }
+    prepareHeader(columnHeaders, columnDelimiter) {
+        let result = '';
+        const newColumnHeaders = columnHeaders.map(v => this.parseCell(v, columnDelimiter, true));
+        result += newColumnHeaders.join(columnDelimiter);
+        return result;
+    }
+    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;
+    }
+}
+
+var ExportTypes;
+(function (ExportTypes) {
+    ExportTypes["csv"] = "csv";
+})(ExportTypes || (ExportTypes = {}));
+class ExportFilePlugin extends 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 timeout(120);
+        URL.revokeObjectURL(url);
     }
-    setItemCount(realCount, type) {
-        this.viewports.stores[type].setViewport({ realCount });
-        this.stores[type].setStore({ count: realCount });
+    /** 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;
     }
-    /**
-     * Apply trimmed items
-     * @param trimmed - trimmed items
-     * @param type
-     */
-    setTrimmed(trimmed, type) {
-        const allTrimmed = gatherTrimmedItems(trimmed);
-        const dimStoreType = this.stores[type];
-        dimStoreType.setStore({ trimmed: allTrimmed });
-        this.updateViewport(type, true);
+    // before event
+    async beforeexport() {
+        let data = await this.getData();
+        const event = this.emit('beforeexport', { data });
+        if (event.defaultPrevented) {
+            return null;
+        }
+        return event.detail.data;
     }
-    /**
-     * 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,
+    async getData() {
+        const data = await this.getSource();
+        const colSource = [];
+        const colPromises = [];
+        columnTypes.forEach((t, i) => {
+            colPromises.push(this.getColPerSource(t).then(s => (colSource[i] = s)));
+        });
+        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);
         }
-        this.updateViewport(type);
+        return Object.assign({ data }, columns);
     }
-    applyNewColumns(columns, disableVirtualX) {
-        for (let type of 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 = 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;
+    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;
             }
-            this.viewports.stores[type].setViewport(vpUpdate);
-            this.setViewPortCoordinate({
-                coordinate: this.viewports.stores[type].lastCoordinate,
-                type,
+            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;
+                }
             });
         }
+        return rows;
     }
-    getFullSize() {
-        var _a, _b;
-        let x = 0;
-        let y = 0;
-        for (let type of columnTypes) {
-            x += ((_a = this.stores[type]) === null || _a === void 0 ? void 0 : _a.store.get('realSize')) || 0;
-        }
-        for (let type of rowTypes) {
-            y += ((_b = this.stores[type]) === null || _b === void 0 ? void 0 : _b.store.get('realSize')) || 0;
-        }
-        return { y, x };
+    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;
     }
-    updateViewport(type, force = false) {
-        this.setViewPortCoordinate({
-            coordinate: this.viewports.stores[type].lastCoordinate,
-            type,
-            force,
+    async getSource() {
+        const data = [];
+        const promisesData = [];
+        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 r;
+        }, []);
     }
-    setViewPortCoordinate({ coordinate, type, force = false, }) {
-        const dimension = this.stores[type].getCurrentState();
-        this.viewports.stores[type].setViewPortCoordinate(coordinate, dimension, force);
+    // 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');
+        }
     }
-    getViewPortPos(e) {
-        const dimension = this.stores[e.dimension].getCurrentState();
-        const item = getItemByIndex(dimension, e.coordinate);
-        return item.start;
+}
+
+const eq = (value, extra) => {
+    if (typeof value === 'undefined' || (value === null && !extra)) {
+        return true;
     }
-    setSettings(data, dimensionType) {
-        let stores = [];
-        switch (dimensionType) {
-            case 'rgCol':
-                stores = columnTypes;
-                break;
-            case 'rgRow':
-                stores = rowTypes;
-                break;
-        }
-        for (let s of stores) {
-            this.stores[s].setStore(data);
-        }
+    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;
+    }
+    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;
+    }
+    else {
+        return false;
+    }
+};
+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;
+    }
+    if (!extra) {
+        return true;
     }
-}
+    if (typeof value !== 'string') {
+        value = JSON.stringify(value);
+    }
+    if (typeof extra !== 'string') {
+        extra = JSON.stringify(extra);
+    }
+    return value.toLocaleLowerCase().indexOf(extra.toLocaleLowerCase()) === 0;
+};
+beginsWith.extra = 'input';
 
-class ViewportProvider {
-    constructor() {
-        this.stores = reduce_1([...rowTypes, ...columnTypes], (sources, k) => {
-            sources[k] = new ViewportStore(k);
-            return sources;
-        }, {});
+const contains = (value, extra) => {
+    if (!extra) {
+        return true;
     }
-    setViewport(type, data) {
-        this.stores[type].setViewport(data);
+    if (!value) {
+        return false;
     }
-}
+    if (extra) {
+        if (typeof value !== 'string') {
+            value = JSON.stringify(value);
+        }
+        return value.toLocaleLowerCase().indexOf(extra.toString().toLowerCase()) > -1;
+    }
+    return true;
+};
+const notContains = (value, extra) => {
+    return !contains(value, extra);
+};
+notContains.extra = 'input';
+contains.extra = 'input';
 
-/**
- * Plugin module for revo-grid grid system
- * Add support for automatic column resize
- */
-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 BasePlugin {
+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 BasePlugin {
     constructor(revogrid, providers, config) {
+        var _a;
         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);
+        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_PROP;
+        if (config) {
+            this.initConfig(config);
         }
-        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 = getColumnType(detail.column);
-            const size = this.getColumnSize(detail.index, type);
-            if (size) {
-                this.providers.dimension.setCustomSizes(type, {
-                    [detail.index]: size,
-                }, true);
+        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('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;
-        }
+        this.addEventListener('headerclick', headerclick);
+        this.addEventListener(FILTER_CONFIG_CHANGED_EVENT, ({ detail }) => {
+            if (!detail) {
+                this.clearFiltering();
+                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,
+            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) }),
+        ];
     }
-    async setSource(source) {
-        let autoSize = this.autoSizeColumns;
-        if (this.dataReject) {
-            this.dataReject();
-            this.clearPromise();
+    initConfig(config) {
+        if (config.multiFilterItems) {
+            this.multiFilterItems = Object.assign({}, config.multiFilterItems);
         }
-        /** 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;
+        if (config.customFilters) {
+            for (let cType in config.customFilters) {
+                const cFilter = config.customFilters[cType];
+                if (!this.possibleFilters[cFilter.columnFilterType]) {
+                    this.possibleFilters[cFilter.columnFilterType] = [];
+                }
+                this.possibleFilters[cFilter.columnFilterType].push(cType);
+                this.possibleFilterEntities[cType] = cFilter.func;
+                this.possibleFilterNames[cType] = cFilter.name;
             }
-            catch (e) {
-                return;
+        }
+        if (config.filterProp) {
+            this.filterProp = config.filterProp;
+        }
+        /**
+         * which filters has to be included/excluded
+         * convinient way to exclude system filters
+         */
+        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 = 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;
+                    }
+                });
             }
         }
-        // calculate sizes
-        each(autoSize, (_v, type) => {
-            const sizes = {};
-            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;
+    async headerclick(e) {
+        var _a, _b, _c;
+        const el = (_a = e.detail.originalEvent) === null || _a === void 0 ? void 0 : _a.target;
+        if (!isFilterBtn(el)) {
+            return;
         }
-        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;
-            }
-            return str.length * this.letterBlockSize + padding * 2;
+        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;
         }
-        catch (e) {
-            return 0;
+        if (!this.pop) {
+            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 }));
     }
-    afteredit(e) {
-        let data;
-        if (this.isRangeEdit(e)) {
-            data = e.data;
+    getColumnFilter(type) {
+        let filterType = 'string';
+        if (!type) {
+            return { [filterType]: this.possibleFilters[filterType] };
         }
-        else {
-            data = { 0: { [e.prop]: e.val } };
+        // if custom column filter
+        if (this.isValidType(type)) {
+            filterType = type;
+            // if multiple filters applied
         }
-        each(this.autoSizeColumns, (columns, type) => {
-            const sizes = {};
-            each(columns, rgCol => {
-                var _a;
-                // calculate size
-                const size = 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;
+        else if (typeof type === 'object' && type.length) {
+            return type.reduce((r, multiType) => {
+                if (this.isValidType(multiType)) {
+                    r[multiType] = this.possibleFilters[multiType];
                 }
-            });
-            this.providers.dimension.setCustomSizes(type, sizes, true);
-        });
+                return r;
+            }, {});
+        }
+        return { [filterType]: this.possibleFilters[filterType] };
     }
-    afterEditAll(e) {
-        const props = {};
-        if (this.isRangeEdit(e)) {
-            each(e.data, r => each(r, (_v, p) => (props[p] = true)));
+    isValidType(type) {
+        return !!(typeof type === 'string' && this.possibleFilters[type]);
+    }
+    // called on internal component change
+    async onFilterChange(filterItems) {
+        this.multiFilterItems = filterItems;
+        this.runFiltering();
+    }
+    /**
+     * Triggers grid filtering
+     */
+    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) {
+            return;
         }
-        else {
-            props[e.prop] = true;
+        // check is trimmed event prevented
+        const isAddedEvent = await this.revogrid.addTrimmed(detail.itemsToFilter, FILTER_TRIMMED_TYPE);
+        if (isAddedEvent.defaultPrevented) {
+            return;
         }
-        each(this.autoSizeColumns, (columns, type) => {
-            const sizes = {};
-            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);
-        });
+        // applies the hasFilter to the columns to show filter icon
+        await this.revogrid.updateColumns(columnsToUpdate);
+        this.emit('afterfilterapply');
     }
-    getColumnSize(index, 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];
-        if (!rgCol) {
-            return 0;
+    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,
+                };
+            }
         }
-        return reduce_1(this.providers.data.stores, (r, s) => {
-            const perStore = reduce_1(s.store.get('items'), (prev, _row, i) => {
-                const item = 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);
+        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;
+        }
+        this.doFiltering(detail.collection, detail.source, detail.columns, detail.filterItems);
     }
-    columnSet(columns) {
-        var _a;
-        for (let t of 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 = {};
+    async getData() {
+        return {
+            source: await this.revogrid.getSource(),
+            columns: await this.revogrid.getColumns(),
+        };
+    }
+    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++;
                     }
-                    if (!this.autoSizeColumns[type]) {
-                        this.autoSizeColumns[type] = {};
+                    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 = [];
+                        }
                     }
-                    this.autoSizeColumns[type][i] = Object.assign(Object.assign({}, cols[i]), { index: parseInt(i, 10) });
-                }
+                } // 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
+        });
+        return trimmed;
+    }
+}
+
+// provide collapse data
+function doCollapse(pIndex, source) {
+    const model = source[pIndex];
+    const collapseValue = model[PSEUDO_GROUP_ITEM_VALUE];
+    const trimmed = {};
+    let i = pIndex + 1;
+    const total = source.length;
+    while (i < total) {
+        const currentModel = source[i];
+        if (isGrouping(currentModel)) {
+            const currentValue = currentModel[PSEUDO_GROUP_ITEM_VALUE];
+            if (!currentValue.length || !currentValue.startsWith(collapseValue + ',')) {
+                break;
             }
+            currentModel[GROUP_EXPANDED] = false;
         }
-        if (this.dataResolve) {
-            this.dataResolve(this.autoSizeColumns || {});
-            this.clearPromise();
-        }
-    }
-    clearPromise() {
-        this.dataResolve = null;
-        this.dataReject = null;
+        trimmed[i++] = true;
     }
-    isRangeEdit(e) {
-        return !!e.data;
+    model[GROUP_EXPANDED] = false;
+    return { trimmed };
+}
+/**
+ *
+ * @param pIndex - physical index
+ * @param vIndex - virtual index, need to update item collection
+ * @param source - data source
+ * @param rowItemsIndexes - rgRow indexes
+ */
+function doExpand(vIndex, source, rowItemsIndexes) {
+    const physicalIndex = rowItemsIndexes[vIndex];
+    const model = source[physicalIndex];
+    const currentGroup = getParsedGroup(model[PSEUDO_GROUP_ITEM_ID]);
+    const trimmed = {};
+    // no group found
+    if (!currentGroup) {
+        return { trimmed };
     }
-    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 : '';
+    const groupItems = [];
+    model[GROUP_EXPANDED] = true;
+    let i = physicalIndex + 1;
+    const total = source.length;
+    let groupLevelOnly = 0;
+    // go through all rows
+    while (i < total) {
+        const currentModel = source[i];
+        const isGroup = isGrouping(currentModel);
+        // group found
+        if (isGroup) {
+            if (!isSameGroup(currentGroup, model, currentModel)) {
+                break;
+            }
+            else if (!groupLevelOnly) {
+                // if get group first it's group only level
+                groupLevelOnly = currentModel[GROUP_DEPTH];
+            }
         }
-        el.classList.add('revo-test-container');
-        return el;
+        // level 0 or same depth
+        if (!groupLevelOnly || (isGroup && groupLevelOnly === currentModel[GROUP_DEPTH])) {
+            trimmed[i] = false;
+            groupItems.push(i);
+        }
+        i++;
     }
-    destroy() {
-        var _a;
-        super.destroy();
-        (_a = this.precsizeCalculationArea) === null || _a === void 0 ? void 0 : _a.remove();
+    const result = {
+        trimmed,
+    };
+    if (groupItems.length) {
+        const items = [...rowItemsIndexes];
+        items.splice(vIndex + 1, 0, ...groupItems);
+        result.items = items;
     }
+    return result;
 }
 
-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;
-    }
-    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;
-    }
-    else {
-        return false;
-    }
-};
-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;
-    }
-    if (!extra) {
-        return true;
-    }
-    if (typeof value !== 'string') {
-        value = JSON.stringify(value);
-    }
-    if (typeof extra !== 'string') {
-        extra = JSON.stringify(extra);
-    }
-    return value.toLocaleLowerCase().indexOf(extra.toLocaleLowerCase()) === 0;
-};
-beginsWith.extra = 'input';
-
-const contains = (value, extra) => {
-    if (!extra) {
-        return true;
-    }
-    if (!value) {
-        return false;
-    }
-    if (extra) {
-        if (typeof value !== 'string') {
-            value = JSON.stringify(value);
+const TRIMMED_GROUPING = 'grouping';
+/**
+ * Prepare trimming updated indexes for grouping
+ * @param initiallyTrimed
+ * @param firstLevelMap
+ * @param secondLevelMap
+ */
+function processDoubleConversionTrimmed(initiallyTrimed, firstLevelMap, secondLevelMap) {
+    const trimemedOptionsToUpgrade = {};
+    /**
+     * go through all groups except grouping
+     */
+    for (let type in initiallyTrimed) {
+        if (type === TRIMMED_GROUPING) {
+            continue;
+        }
+        const items = initiallyTrimed[type];
+        const newItems = {};
+        for (let initialIndex in items) {
+            /**
+             * if item exists we find it in collection
+             * we support 2 level of conversions
+             */
+            let newConversionIndex = firstLevelMap[initialIndex];
+            if (secondLevelMap) {
+                newConversionIndex = secondLevelMap[newConversionIndex];
+            }
+            /**
+             * if item was trimmed previously
+             * trimming makes sense to apply
+             */
+            if (items[initialIndex]) {
+                newItems[newConversionIndex] = true;
+                /**
+                 * If changes present apply changes to new source
+                 */
+                if (newConversionIndex !== parseInt(initialIndex, 10)) {
+                    trimemedOptionsToUpgrade[type] = newItems;
+                }
+            }
         }
-        return 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'],
-};
+    return trimemedOptionsToUpgrade;
+}
 
-const FILTER_TRIMMED_TYPE = 'filter';
-const FILTER_CONFIG_CHANGED_EVENT = 'filterconfigchanged';
-class FilterPlugin extends BasePlugin {
-    constructor(revogrid, providers, config) {
-        var _a;
+class GroupingRowPlugin extends 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[GROUPING_ROW_TYPE].store;
+    }
+    // proxy for items get
+    get rowItems() {
+        return this.store.get('items');
+    }
+    get trimmed() {
+        return this.store.get('trimmed');
+    }
+    constructor(revogrid, providers) {
         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_PROP;
-        if (config) {
-            this.initConfig(config);
+        this.providers = providers;
+    }
+    // befoce cell focus
+    onFocus(e) {
+        if (isGrouping(e.detail.model)) {
+            e.preventDefault();
         }
-        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',
-                            },
-                        ];
-                    }
-                });
+    }
+    // expand event triggered
+    onExpand({ virtualIndex }) {
+        const { source } = this.getSource();
+        let newTrimmed = this.trimmed[TRIMMED_GROUPING];
+        let i = getPhysical(this.store, virtualIndex);
+        const model = source[i];
+        const prevExpanded = model[GROUP_EXPANDED];
+        if (!prevExpanded) {
+            const { trimmed, items } = doExpand(virtualIndex, source, this.rowItems);
+            newTrimmed = Object.assign(Object.assign({}, newTrimmed), trimmed);
+            if (items) {
+                setItems(this.store, items);
             }
-            await this.runFiltering();
-        };
-        this.addEventListener('headerclick', headerclick);
-        this.addEventListener(FILTER_CONFIG_CHANGED_EVENT, ({ detail }) => {
-            if (!detail) {
-                this.clearFiltering();
-                return;
+        }
+        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);
+    }
+    // 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;
             }
-            if (typeof detail === 'object') {
-                this.initConfig(detail);
+            // grouping filter
+            if (isGrouping(model)) {
+                if (model[GROUP_EXPANDED]) {
+                    result.prevExpanded[model[PSEUDO_GROUP_ITEM_VALUE]] = true;
+                }
             }
-            aftersourceset();
+            else {
+                result.source.push(model);
+                result.oldNewIndexes[i] = index;
+                index++;
+            }
+            return result;
+        }, {
+            source: [],
+            prevExpanded: {},
+            oldNewIndexes: {},
         });
-        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,
-            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);
+    setColumnGrouping(cols) {
+        // if 0 column as holder
+        if (cols === null || cols === void 0 ? void 0 : cols.length) {
+            cols[0][PSEUDO_GROUP_COLUMN] = true;
+            return true;
         }
-        if (config.customFilters) {
-            for (let cType in config.customFilters) {
-                const cFilter = config.customFilters[cType];
-                if (!this.possibleFilters[cFilter.columnFilterType]) {
-                    this.possibleFilters[cFilter.columnFilterType] = [];
+        return false;
+    }
+    setColumns({ columns }) {
+        for (let type of columnTypes) {
+            if (this.setColumnGrouping(columns[type])) {
+                break;
+            }
+        }
+    }
+    // evaluate drag between groups
+    onDrag(e) {
+        const { from, to } = e.detail;
+        const isDown = to - from >= 0;
+        const { source } = 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 = isGrouping(model);
+            if (isGroup) {
+                e.preventDefault();
+                return;
+            }
+        }
+    }
+    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] && 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));
+        /**
+         * 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(GROUP_EXPAND_EVENT, ({ detail }) => this.onExpand(detail));
+    }
+    /**
+     * 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;
         }
         /**
-         * which filters has to be included/excluded
-         * convinient way to exclude system filters
+         * Get source without grouping
+         * @param newOldIndexMap - provides us mapping with new indexes vs old indexes, we would use it for trimmed mapping
          */
-        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;
+        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, } = gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], Object.assign({ prevExpanded }, options));
+        // setup source
+        this.providers.data.setData(sourceWithGroups, 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);
+    }
+    /**
+     * 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;
+        }
+        const source = data.source.filter(s => !isGrouping(s));
+        const expanded = this.revogrid.grouping || {};
+        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup, } = 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));
+        }
+        // props exist and columns inited
+        for (let t of columnTypes) {
+            if (this.setColumnGrouping(this.providers.column.getColumns(t))) {
+                this.providers.column.refreshByType(t);
+                break;
             }
         }
-        if (config.collection) {
-            this.filterCollection = reduce_1(config.collection, (result, item, prop) => {
-                if (this.possibleFilterEntities[item.type]) {
-                    result[prop] = item;
-                }
-                else {
-                    console.warn(`${item.type} type is not found.`);
+        // if has any grouping subscribe to events again
+        this.subscribe();
+    }
+    // clear grouping
+    clearGrouping() {
+        // clear columns
+        columnTypes.forEach(t => {
+            const cols = this.providers.column.getColumns(t);
+            let deleted = false;
+            cols.forEach(c => {
+                if (isGroupingColumn(c)) {
+                    delete c[PSEUDO_GROUP_COLUMN];
+                    deleted = true;
                 }
-                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;
-                    }
-                });
+            });
+            // if column store had grouping clear and refresh
+            if (deleted) {
+                this.providers.column.refreshByType(t);
             }
+        });
+        // clear rows
+        const { source, oldNewIndexes } = this.getSource(true);
+        this.providers.data.setData(source, GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, undefined, true);
+        this.updateTrimmed(undefined, undefined, oldNewIndexes);
+    }
+    updateTrimmed(trimmedGroup = {}, _childrenByGroup = {}, firstLevelMap = {}, secondLevelMap) {
+        // map previously trimmed data
+        const trimemedOptionsToUpgrade = processDoubleConversionTrimmed(this.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);
     }
-    async headerclick(e) {
-        var _a, _b, _c;
-        const el = (_a = e.detail.originalEvent) === null || _a === void 0 ? void 0 : _a.target;
-        if (!isFilterBtn(el)) {
+}
+
+const COLUMN_DRAG_CLASS = 'column-drag-start';
+class ColumnOrderHandler {
+    constructor() {
+        this.offset = 0;
+    }
+    renderAutoscroll(_, parent) {
+        if (!parent) {
             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();
+        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;
         }
-        if (!this.pop) {
-            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];
         }
-        // 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 }));
+        this.renderAutoscroll(e, dataEl);
     }
-    getColumnFilter(type) {
-        let filterType = 'string';
-        if (!type) {
-            return { [filterType]: this.possibleFilters[filterType] };
+    stop(gridEl) {
+        var _a;
+        gridEl.classList.remove(COLUMN_DRAG_CLASS);
+        if (this.element) {
+            this.element.hidden = true;
         }
-        // if custom column filter
-        if (this.isValidType(type)) {
-            filterType = type;
-            // if multiple filters applied
+        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;
         }
-        else if (typeof type === 'object' && type.length) {
-            return type.reduce((r, multiType) => {
-                if (this.isValidType(multiType)) {
-                    r[multiType] = this.possibleFilters[multiType];
-                }
-                return r;
-            }, {});
+        // do not allow overcross top of the scrollable area, header excluded
+        if (this.offset) {
+            pos = Math.max(pos, this.offset);
         }
-        return { [filterType]: this.possibleFilters[filterType] };
+        // can not be bigger then grid end
+        pos = Math.min(pos, size);
+        this.element.style.transform = `${direction}(${pos}px)`;
+        this.element.hidden = false;
     }
-    isValidType(type) {
-        return !!(typeof type === 'string' && this.possibleFilters[type]);
+    render() {
+        const el = this.element = document.createElement('div');
+        el.classList.add('drag-position-y');
+        el.hidden = true;
+        return el;
     }
-    // called on internal component change
-    async onFilterChange(filterItems) {
-        this.multiFilterItems = filterItems;
-        this.runFiltering();
+}
+
+/**
+ * Plugin for column manual move
+ */
+const COLUMN_CLICK = 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 BasePlugin {
+    constructor(revogrid, providers) {
+        super(revogrid, providers);
+        this.revogrid = revogrid;
+        this.providers = providers;
+        this.moveFunc = 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));
     }
-    /**
-     * Triggers grid filtering
-     */
-    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,
-        });
+    dragStart({ event, data }) {
+        if (event.defaultPrevented) {
+            return;
+        }
+        const { defaultPrevented } = dispatch(this.revogrid, DRAG_START, data);
+        // check if allowed to drag particulat column
         if (defaultPrevented) {
             return;
         }
-        // check is trimmed event prevented
-        const isAddedEvent = await this.revogrid.addTrimmed(detail.itemsToFilter, FILTER_TRIMMED_TYPE);
-        if (isAddedEvent.defaultPrevented) {
+        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 (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 = 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;
         }
-        // applies the hasFilter to the columns to show filter icon
-        await this.revogrid.updateColumns(columnsToUpdate);
-        this.emit('afterfilterapply');
+        const start = this.staticDragData.startPos;
+        if (Math.abs(start - e.x) > 10) {
+            const x = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);
+            const rgCol = getItemByPosition(this.staticDragData.cols, x);
+            this.orderUi.autoscroll(x, dragData.elRect.width);
+            this.orderUi.showHandler(rgCol.end + dragData.scrollOffset, dragData.gridRect.width);
+        }
     }
-    async clearFiltering() {
-        this.multiFilterItems = {};
-        await this.runFiltering();
+    move(e) {
+        dispatch(this.revogrid, MOVE, e);
+        // then do move
+        this.moveFunc(e);
     }
-    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,
-                };
+    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 = 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 } = 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);
+            }
+            dispatch(this.revogrid, DRAG_END, this.dragData);
         }
-        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;
-        }
-        this.doFiltering(detail.collection, detail.source, detail.columns, detail.filterItems);
+        this.clearOrder();
     }
-    async getData() {
+    clearLocalSubscriptions() {
+        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 {
-            source: await this.revogrid.getSource(),
-            columns: await this.revogrid.getColumns(),
+            elRect,
+            gridRect,
+            type: data.pin || 'rgCol',
+            scrollOffset,
         };
     }
-    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
-        });
-        return trimmed;
+    getDimension(type) {
+        return this.providers.dimension.stores[type].getCurrentState();
     }
 }
+function getLeftRelative(absoluteX, gridPos, offset) {
+    return absoluteX - gridPos - offset;
+}
 
 var baseGetTag = _baseGetTag,
     isArray = isArray_1,
@@ -1631,7 +2249,7 @@ var _stringSize = stringSize$1;
 
 var baseKeys = _baseKeys,
     getTag = _getTag,
-    isArrayLike = isArrayLike_1,
+    isArrayLike$1 = isArrayLike_1,
     isString = isString_1,
     stringSize = _stringSize;
 
@@ -1664,7 +2282,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);
@@ -1897,742 +2515,435 @@ class SortingPlugin extends 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 = 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 = toInteger_1,
-    toLength = toLength_1;
+var baseIteratee = _baseIteratee,
+    isArrayLike = isArrayLike_1,
+    keys = 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 = _isIterateeCall;
+var createFind = _createFind,
+    findIndex = 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 }
+ * ];
  *
- * _.fill(array, 'a');
- * console.log(array);
- * // => ['a', 'a', 'a']
+ * _.find(users, function(o) { return o.age < 40; });
+ * // => object for 'barney'
  *
- * _.fill(Array(3), 2);
- * // => [2, 2, 2]
+ * // The `_.matches` iteratee shorthand.
+ * _.find(users, { 'age': 1, 'active': true });
+ * // => object for 'pebbles'
  *
- * _.fill([4, 6, 8, 10], '*', 1, 3);
- * // => [4, '*', '*', 10]
+ * // The `_.matchesProperty` iteratee shorthand.
+ * _.find(users, ['active', false]);
+ * // => object for 'fred'
+ *
+ * // 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 fill_1 = fill;
+var find = createFind(findIndex);
 
-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;
-            });
-        }
-        data.forEach((rgRow, index) => {
-            if (index > 0) {
-                result += this.options.rowDelimiter;
-            }
-            // support grouping
-            if (isGrouping(rgRow)) {
-                result += this.parseCell(getGroupingName(rgRow), this.options.columnDelimiter);
-                return;
-            }
-            result += props.map(p => this.parseCell(rgRow[p], this.options.columnDelimiter)).join(this.options.columnDelimiter);
-        });
-        return result;
-    }
-    prepareHeader(columnHeaders, columnDelimiter) {
-        let result = '';
-        const newColumnHeaders = columnHeaders.map(v => this.parseCell(v, columnDelimiter, true));
-        result += newColumnHeaders.join(columnDelimiter);
-        return result;
-    }
-    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;
-    }
-}
+var find_1 = find;
 
-var ExportTypes;
-(function (ExportTypes) {
-    ExportTypes["csv"] = "csv";
-})(ExportTypes || (ExportTypes = {}));
-class ExportFilePlugin extends 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 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;
-    }
-    // before event
-    async beforeexport() {
-        let data = await this.getData();
-        const event = this.emit('beforeexport', { data });
-        if (event.defaultPrevented) {
-            return null;
-        }
-        return event.detail.data;
-    }
-    async getData() {
-        const data = await this.getSource();
-        const colSource = [];
-        const colPromises = [];
-        columnTypes.forEach((t, i) => {
-            colPromises.push(this.getColPerSource(t).then(s => (colSource[i] = s)));
-        });
-        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;
-                }
+class ColumnDataProvider {
+    get order() {
+        const order = {};
+        const sorting = this.sorting;
+        if (sorting) {
+            Object.keys(sorting).forEach((prop) => {
+                order[prop] = sorting[prop].order;
             });
         }
-        return rows;
+        return order;
     }
-    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;
+    get stores() {
+        return this.dataSources;
     }
-    async getSource() {
-        const data = [];
-        const promisesData = [];
-        rowTypes.forEach(t => {
-            const dataPart = [];
-            data.push(dataPart);
-            const promise = this.revogrid.getVisibleSource(t).then((d) => dataPart.push(...d));
-            promisesData.push(promise);
+    constructor() {
+        this.sorting = null;
+        this.dataSources = columnTypes.reduce((sources, k) => {
+            sources[k] = new DataStore(k);
+            return sources;
+        }, {});
+    }
+    column(c, pin) {
+        return this.getColumn(c, pin || 'rgCol');
+    }
+    getColumn(virtualIndex, type) {
+        return getSourceItem(this.dataSources[type].store, virtualIndex);
+    }
+    getRawColumns() {
+        return reduce_1(this.dataSources, (result, item, type) => {
+            result[type] = item.store.get('source');
+            return result;
+        }, {
+            rgCol: [],
+            colPinStart: [],
+            colPinEnd: [],
         });
-        await Promise.all(promisesData);
-        return data.reduce((r, v) => {
-            r.push(...v);
+    }
+    getColumns(type = 'all') {
+        if (type !== 'all') {
+            return this.dataSources[type].store.get('source');
+        }
+        return 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 getSourceItemVirtualIndexByProp(this.dataSources[type].store, prop);
     }
-}
-
-// provide collapse data
-function doCollapse(pIndex, source) {
-    const model = source[pIndex];
-    const collapseValue = model[PSEUDO_GROUP_ITEM_VALUE];
-    const trimmed = {};
-    let i = pIndex + 1;
-    const total = source.length;
-    while (i < total) {
-        const currentModel = source[i];
-        if (isGrouping(currentModel)) {
-            const currentValue = currentModel[PSEUDO_GROUP_ITEM_VALUE];
-            if (!currentValue.length || !currentValue.startsWith(collapseValue + ',')) {
-                break;
-            }
-            currentModel[GROUP_EXPANDED] = false;
-        }
-        trimmed[i++] = true;
+    getColumnByProp(prop, type) {
+        const items = this.dataSources[type].store.get('source');
+        return find_1(items, { prop });
     }
-    model[GROUP_EXPANDED] = false;
-    return { trimmed };
-}
-/**
- *
- * @param pIndex - physical index
- * @param vIndex - virtual index, need to update item collection
- * @param source - data source
- * @param rowItemsIndexes - rgRow indexes
- */
-function doExpand(vIndex, source, rowItemsIndexes) {
-    const physicalIndex = rowItemsIndexes[vIndex];
-    const model = source[physicalIndex];
-    const currentGroup = getParsedGroup(model[PSEUDO_GROUP_ITEM_ID]);
-    const trimmed = {};
-    // no group found
-    if (!currentGroup) {
-        return { trimmed };
+    refreshByType(type) {
+        this.dataSources[type].refresh();
     }
-    const groupItems = [];
-    model[GROUP_EXPANDED] = true;
-    let i = physicalIndex + 1;
-    const total = source.length;
-    let groupLevelOnly = 0;
-    // go through all rows
-    while (i < total) {
-        const currentModel = source[i];
-        const isGroup = isGrouping(currentModel);
-        // group found
-        if (isGroup) {
-            if (!isSameGroup(currentGroup, model, currentModel)) {
-                break;
+    setColumns(data) {
+        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 = getColumnType(c);
+            if (!res[type]) {
+                res[type] = {};
             }
-            else if (!groupLevelOnly) {
-                // if get group first it's group only level
-                groupLevelOnly = currentModel[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[GROUP_DEPTH])) {
-            trimmed[i] = false;
-            groupItems.push(i);
+        for (const t in colByIndex) {
+            if (!colByIndex.hasOwnProperty(t)) {
+                continue;
+            }
+            const type = t;
+            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;
+    updateColumn(column, index) {
+        const type = getColumnType(column);
+        setSourceByVirtualIndex(this.dataSources[type].store, { [index]: column });
     }
-    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;
+    updateColumnSorting(column, index, sorting, additive) {
+        if (!additive) {
+            this.clearSorting();
         }
-        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;
-                }
-            }
+        column.order = sorting;
+        if (!this.sorting) {
+            this.sorting = {};
         }
+        this.sorting[column.prop] = column;
+        this.updateColumn(column, index);
+        return column;
     }
-    return trimemedOptionsToUpgrade;
-}
-
-class GroupingRowPlugin extends 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[GROUPING_ROW_TYPE].store;
+    clearSorting() {
+        const types = reduce_1(this.sorting, (r, c) => {
+            const k = getColumnType(c);
+            r[k] = true;
+            return r;
+        }, {});
+        each(types, (_, type) => {
+            const cols = this.dataSources[type].store.get('source');
+            each(cols, (c) => (c.order = undefined));
+            this.dataSources[type].setData({ source: [...cols] });
+        });
+        this.sorting = {};
     }
-    // proxy for items get
-    get rowItems() {
-        return this.store.get('items');
+}
+
+/**
+ * Data source provider
+ */
+class DataProvider {
+    constructor(dimensionProvider) {
+        this.dimensionProvider = dimensionProvider;
+        this.stores = reduce_1(rowTypes, (sources, k) => {
+            sources[k] = new 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 getSourceItem(store, virtualIndex);
     }
-    // befoce cell focus
-    onFocus(e) {
-        if (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
+        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 = getPhysical(this.store, virtualIndex);
-        const model = source[i];
-        const prevExpanded = model[GROUP_EXPANDED];
-        if (!prevExpanded) {
-            const { trimmed, items } = doExpand(virtualIndex, source, this.rowItems);
-            newTrimmed = Object.assign(Object.assign({}, newTrimmed), trimmed);
-            if (items) {
-                setItems(this.store, items);
+    setRangeData(data, type) {
+        const items = {};
+        for (let rowIndex in data) {
+            const oldModel = (items[rowIndex] = 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
+        setSourceByVirtualIndex(this.stores[type].store, items);
+    }
+    refresh(type = 'all') {
+        if (isRowType(type)) {
+            this.refreshItems(type);
         }
-        this.store.set('source', source);
-        this.revogrid.addTrimmed(newTrimmed, TRIMMED_GROUPING);
+        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 (isGrouping(model)) {
-                if (model[GROUP_EXPANDED]) {
-                    result.prevExpanded[model[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][PSEUDO_GROUP_COLUMN] = true;
-            return true;
-        }
-        return false;
+    setGrouping({ depth }, type = 'rgRow') {
+        this.stores[type].setData({ groupingDepth: depth });
     }
-    setColumns({ columns }) {
-        for (let type of 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(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 = 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_1((k) => config.realSizeChanged(k), RESIZE_INTERVAL);
+        this.stores = reduce_1([...rowTypes, ...columnTypes], (sources, k) => {
+            sources[k] = new 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] && 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(GROUP_EXPAND_EVENT, ({ detail }) => this.onExpand(detail));
+    setItemCount(realCount, type) {
+        this.viewports.stores[type].setViewport({ realCount });
+        this.stores[type].setStore({ count: realCount });
     }
     /**
-     * Starts global source update with group clearing and applying new one
-     * Initiated when need to reapply grouping
+     * Apply trimmed items
+     * @param trimmed - trimmed items
+     * @param type
      */
-    doSourceUpdate(options) {
-        var _a;
-        if (!this.hasProps) {
-            return;
-        }
-        /**
-         * 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, } = gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], Object.assign({ prevExpanded }, options));
-        // setup source
-        this.providers.data.setData(sourceWithGroups, 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);
+    setTrimmed(trimmed, type) {
+        const allTrimmed = gatherTrimmedItems(trimmed);
+        const dimStoreType = this.stores[type];
+        dimStoreType.setStore({ trimmed: allTrimmed });
+        this.updateViewport(type, true);
     }
     /**
-     * Apply grouping on data set
-     * Clear grouping from source
-     * If source came from other plugin
+     * Sets dimension data and view port coordinate
+     * @param itemCount
+     * @param type - dimension type
+     * @param noVirtual - disable virtual data
      */
-    onDataSet(data) {
-        var _a;
-        if (!this.hasProps || !(data === null || data === void 0 ? void 0 : data.source) || !data.source.length) {
-            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,
+            });
         }
-        const source = data.source.filter(s => !isGrouping(s));
-        const expanded = this.revogrid.grouping || {};
-        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup, } = 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);
+        this.updateViewport(type);
     }
-    // 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;
+    applyNewColumns(columns, disableVirtualX) {
+        for (let type of 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 = 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,
+            });
         }
-        // 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 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 columnTypes) {
-            if (this.setColumnGrouping(this.providers.column.getColumns(t))) {
-                this.providers.column.refreshByType(t);
-                break;
-            }
+        for (let type of 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
-        columnTypes.forEach(t => {
-            const cols = this.providers.column.getColumns(t);
-            let deleted = false;
-            cols.forEach(c => {
-                if (isGroupingColumn(c)) {
-                    delete c[PSEUDO_GROUP_COLUMN];
-                    deleted = true;
-                }
-            });
-            // if column store had grouping clear and refresh
-            if (deleted) {
-                this.providers.column.refreshByType(t);
-            }
+    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, 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 = getItemByIndex(dimension, e.coordinate);
+        return item.start;
+    }
+    setSettings(data, dimensionType) {
+        let stores = [];
+        switch (dimensionType) {
+            case 'rgCol':
+                stores = columnTypes;
+                break;
+            case 'rgRow':
+                stores = 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 = reduce_1([...rowTypes, ...columnTypes], (sources, k) => {
+            sources[k] = new ViewportStore(k);
+            return sources;
+        }, {});
+    }
+    setViewport(type, data) {
+        this.stores[type].setViewport(data);
     }
 }
 
@@ -2955,126 +3266,37 @@ class OrdererService {
         this.move(pos);
         this.moveTip({ x: event.x, y: event.y });
         (_a = this.el) === null || _a === void 0 ? void 0 : _a.classList.remove('hidden');
-    }
-    end() {
-        var _a;
-        (_a = this.el) === null || _a === void 0 ? void 0 : _a.classList.add('hidden');
-    }
-    move(pos) {
-        this.moveElement(pos.end - this.parentY);
-    }
-    moveTip({ x, y }) {
-        if (!this.draggable) {
-            return;
-        }
-        this.draggable.style.left = `${x}px`;
-        this.draggable.style.top = `${y}px`;
-    }
-    moveElement(y) {
-        if (!this.rgRow) {
-            return;
-        }
-        this.rgRow.style.transform = `translateY(${y}px)`;
-    }
-}
-const OrderRenderer = ({ ref }) => {
-    const service = new OrdererService();
-    ref(service);
-    return (h("div", { class: "draggable-wrapper hidden", ref: e => (service.el = e) },
-        h("div", { class: "draggable", ref: el => (service.draggable = el) },
-            h("span", { class: "revo-alt-icon" }),
-            h("span", { ref: e => (service.text = e) })),
-        h("div", { class: "drag-position", ref: e => (service.rgRow = e) })));
-};
-
-class StretchColumn extends BasePlugin {
-    constructor(revogrid, providers) {
-        super(revogrid, providers);
-        this.providers = providers;
-        this.stretchedColumn = null;
-        // calculate scroll bar size for current user session
-        this.scrollSize = 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;
-        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 = 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();
-            }
+    }
+    end() {
+        var _a;
+        (_a = this.el) === null || _a === void 0 ? void 0 : _a.classList.add('hidden');
+    }
+    move(pos) {
+        this.moveElement(pos.end - this.parentY);
+    }
+    moveTip({ x, y }) {
+        if (!this.draggable) {
+            return;
         }
+        this.draggable.style.left = `${x}px`;
+        this.draggable.style.top = `${y}px`;
+    }
+    moveElement(y) {
+        if (!this.rgRow) {
+            return;
+        }
+        this.rgRow.style.transform = `translateY(${y}px)`;
     }
 }
-/**
- * Check plugin type is Stretch
- */
-function isStretchPlugin(plugin) {
-    return !!plugin.applyStretch;
-}
+const OrderRenderer = ({ ref }) => {
+    const service = new OrdererService();
+    ref(service);
+    return (h("div", { class: "draggable-wrapper hidden", ref: e => (service.el = e) },
+        h("div", { class: "draggable", ref: el => (service.draggable = el) },
+            h("span", { class: "revo-alt-icon" }),
+            h("span", { ref: e => (service.text = e) })),
+        h("div", { class: "drag-position", ref: e => (service.rgRow = e) })));
+};
 
 const rowDefinitionByType = (newVal = []) => {
     const result = {};
@@ -3106,228 +3328,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 = 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 BasePlugin {
-    constructor(revogrid, providers) {
-        super(revogrid, providers);
-        this.revogrid = revogrid;
-        this.providers = providers;
-        this.moveFunc = 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 } = 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 (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 = 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 = getItemByPosition(this.staticDragData.cols, x);
-            this.orderUi.autoscroll(x, dragData.elRect.width);
-            this.orderUi.showHandler(rgCol.end + dragData.scrollOffset, dragData.gridRect.width);
-        }
-    }
-    move(e) {
-        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 = 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 } = 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);
-            }
-            dispatch(this.revogrid, DRAG_END, this.dragData);
-        }
-        this.clearOrder();
-    }
-    clearLocalSubscriptions() {
-        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;
 }
@@ -3407,7 +3407,7 @@ class WCAGPlugin extends 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 = /*@__PURE__*/ proxyCustomElement(class RevoGridComponent extends HTMLElement$1 {
@@ -4326,6 +4326,6 @@ function defineCustomElement$1() {
 const RevoGrid = RevoGridComponent;
 const defineCustomElement = defineCustomElement$1;
 
-export { BasePlugin as B, DimensionStore as D, RevoGrid, ThemeService as T, getColumnSizes as a, isColGrouping as b, columnTypes as c, getColumns as d, defineCustomElement, gatherGroup as e, getColumnByProp as f, getColumnType as g, isRowType as i, rowTypes as r };
+export { BasePlugin as B, DimensionStore as D, FILTER_TRIMMED_TYPE as F, RevoGrid, ThemeService as T, isStretchPlugin as a, FILTER_CONFIG_CHANGED_EVENT as b, columnTypes as c, FilterPlugin as d, defineCustomElement, getColumnType as e, getColumnSizes as f, getLeftRelative as g, isColGrouping as h, isRowType as i, getColumns as j, gatherGroup as k, getColumnByProp as l, rowTypes as r };
 
 //# sourceMappingURL=revo-grid.js.map