@revolist/revogrid 4.9.41 → 4.9.42

package/standalone/revo-grid.js

@@ -2,16 +2,15 @@
  * Built by Revolist OU ❤️
  */
 import { h, proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, Host } from '@stencil/core/internal/client';
-import { r as reduce, m as baseEach, e as getColumnType, o as isGrouping, p as getGroupingName, d as getCellDataParsed, G as GROUP_EXPANDED, q as getParsedGroup, s as isSameGroup, t as GROUP_DEPTH, P as PSEUDO_GROUP_ITEM_VALUE, u as PSEUDO_GROUP_ITEM_ID, v as GROUPING_ROW_TYPE, w as PSEUDO_GROUP_COLUMN, x as GROUP_EXPAND_EVENT, y as gatherGrouping, z as isGroupingColumn, h as isColGrouping, l as getColumnByProp, f as getColumnSizes, E as EMPTY_INDEX, j as getColumns, A as SelectionStoreConnector } from './column.service.js';
-import { j as createStore, i as setStore, k as isArray, b as getSourceItem, l as toInteger, m as isIterateeCall, g as getPhysical, e as setItems, n as baseProperty, o as isArrayLike, q as getTag, r as baseKeys, D as DataStore, f as getSourceItemVirtualIndexByProp, d as setSourceByPhysicalIndex, s as setSourceByVirtualIndex, a as getVisibleSourceItem, h as gatherTrimmedItems } from './data.store.js';
-import { i as identity } from './identity.js';
+import { x as reduce, y as baseEach, r as getColumnType, h as isGrouping, f as getGroupingName, q as getCellDataParsed, G as GROUP_EXPANDED, k as getParsedGroup, P as PSEUDO_GROUP_ITEM_ID, l as isSameGroup, z as GROUP_DEPTH, A as PSEUDO_GROUP_ITEM_VALUE, w as getColumnByProp, p as getCellRaw, B as GROUPING_ROW_TYPE, b as getSource, C as PSEUDO_GROUP_COLUMN, e as gatherGrouping, j as isGroupingColumn, d as getExpanded, t as isColGrouping, s as getColumnSizes, E as EMPTY_INDEX, u as getColumns, D as SelectionStoreConnector } from './column.service.js';
+import './platform.js';
+import { j as createStore, i as setStore, k as identity, l as isArray, b as getSourceItem, m as toInteger, n as isIterateeCall, o as baseProperty, q as isArrayLike, r as getTag, u as baseKeys, g as getPhysical, e as setItems, D as DataStore, f as getSourceItemVirtualIndexByProp, d as setSourceByPhysicalIndex, s as setSourceByVirtualIndex, a as getVisibleSourceItem, h as gatherTrimmedItems } from './data.store.js';
 import { d as debounce } from './debounce.js';
 import { R as RESIZE_INTERVAL } from './consts.js';
 import { c as calculateDimensionData, g as getItemByPosition, a as getItemByIndex } from './dimension.helpers.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 { b as FILTER_PROP, i as isFilterBtn } from './filter.button.js';
-import './platform.js';
 import { i as isObjectLike, b as baseGetTag } from './toNumber.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';
@@ -93,37 +92,6 @@ function getTheme(theme) {
     return DEFAULT_THEME;
 }
 
-/**
- * Storing pre-calculated
- * Dimension information and sizes
- */
-const trimmedPlugin = (store) => {
-    let trimmedSize = {};
-    const setTrimmed = (sizes, trimmed) => {
-        const newSize = Object.assign({}, sizes);
-        trimmedSize = {};
-        for (const [index, v] of Object.entries(trimmed)) {
-            const i = index;
-            if (v && newSize[i]) {
-                trimmedSize[i] = newSize[i];
-                delete newSize[i];
-            }
-        }
-        store.setDimensionSize(newSize);
-    };
-    return {
-        set(key, val) {
-            switch (key) {
-                case 'trimmed':
-                    const trim = val;
-                    const sizes = store.store.get('sizes');
-                    // recover trimmed, apply new trim
-                    setTrimmed(Object.assign(Object.assign({}, sizes), trimmedSize), trim);
-                    break;
-            }
-        },
-    };
-};
 /**
  * Plugin which recalculates realSize on changes of sizes, originItemSize and count
  */
@@ -139,7 +107,7 @@ const recalculateRealSizePlugin = (storeService) => {
             switch (k) {
                 case 'count':
                 case 'sizes':
-                case 'originItemSize':
+                case 'originItemSize': {
                     // recalculate realSize
                     let realSize = 0;
                     const count = storeService.store.get('count');
@@ -150,19 +118,81 @@ const recalculateRealSizePlugin = (storeService) => {
                     }
                     storeService.setStore({ realSize });
                     break;
+                }
+            }
+        },
+    };
+};
+
+/**
+ * Plugin for trimming
+ *
+ * 1.a. Retrieves the previous sizes value. Saves the resulting trimmed data as a new sizes value.
+ * 1.b. Stores a reference to the trimmed data to prevent further changes.
+ * 2. Removes multiple and shifts the data based on the trimmed value.
+ */
+const trimmedPlugin = (storeService) => {
+    let trimmingObject = null;
+    let trimmedPreviousSizes = null;
+    return {
+        set(key, val) {
+            switch (key) {
+                case 'sizes': {
+                    // prevent changes after trimming
+                    if (trimmingObject && trimmingObject === val) {
+                        trimmingObject = null;
+                        return;
+                    }
+                    trimmedPreviousSizes = null;
+                    break;
+                }
+                case 'trimmed': {
+                    const trim = val;
+                    if (!trimmedPreviousSizes) {
+                        trimmedPreviousSizes = storeService.store.get('sizes');
+                    }
+                    trimmingObject = removeMultipleAndShift(trimmedPreviousSizes, trim || {});
+                    // save a reference to the trimmed object to prevent changes after trimming
+                    storeService.setSizes(trimmingObject);
+                    break;
+                }
             }
         },
     };
 };
+function removeMultipleAndShift(items, toRemove) {
+    const newItems = {};
+    const sortedIndexes = Object.keys(items || {})
+        .map(Number)
+        .sort((a, b) => a - b);
+    const lastIndex = sortedIndexes[sortedIndexes.length - 1];
+    let shift = 0;
+    for (let i = 0; i <= lastIndex; i++) {
+        if (toRemove[i] !== undefined) {
+            shift++;
+            // skip already removed
+            if (items[i] !== undefined) {
+                continue;
+            }
+        }
+        if (items[i] !== undefined) {
+            newItems[i - shift] = items[i];
+        }
+    }
+    return newItems;
+}
+
+/**
+ * Storing pre-calculated
+ * Dimension information and sizes
+ */
 function initialBase() {
     return {
         indexes: [],
         count: 0,
-        // plugin support
-        trimmed: {},
-        // size operations, this provider stores only changed sizes, not all of them
-        // same as indexes but for sizes and positions
-        // item index to size
+        // hidden items
+        trimmed: null,
+        // virtual item index to size
         sizes: {},
         // order in indexes[] to coordinate
         positionIndexToItem: {},
@@ -182,8 +212,14 @@ class DimensionStore {
     constructor(type) {
         this.type = type;
         this.store = createStore(initialState());
-        this.store.use(trimmedPlugin(this));
-        this.store.use(recalculateRealSizePlugin(this));
+        this.store.use(trimmedPlugin({
+            store: this.store,
+            setSizes: this.setDimensionSize.bind(this),
+        }));
+        this.store.use(recalculateRealSizePlugin({
+            store: this.store,
+            setStore: this.setStore.bind(this),
+        }));
     }
     getCurrentState() {
         const state = initialState();
@@ -208,9 +244,40 @@ class DimensionStore {
      * Generates new indexes based on sizes
      * @param sizes - sizes to set
      */
-    setDimensionSize(sizes) {
+    setDimensionSize(sizes = {}) {
         const dimensionData = calculateDimensionData(this.store.get('originItemSize'), sizes);
-        setStore(this.store, dimensionData);
+        setStore(this.store, Object.assign(Object.assign({}, dimensionData), { sizes }));
+    }
+    updateSizesPositionByIndexes(newItemsOrder, prevItemsOrder = []) {
+        // Move custom sizes to new order
+        const customSizes = Object.assign({}, this.store.get('sizes'));
+        if (!Object.keys(customSizes).length) {
+            return;
+        }
+        // Step 1: Create a map of original indices, but allow duplicates by storing arrays of indices
+        const originalIndices = {};
+        prevItemsOrder.forEach((physIndex, virtIndex) => {
+            if (!originalIndices[physIndex]) {
+                originalIndices[physIndex] = [];
+            }
+            originalIndices[physIndex].push(virtIndex); // Store all indices for each value
+        });
+        // Step 2: Create new sizes based on new item order
+        const newSizes = {};
+        newItemsOrder.forEach((physIndex, virtIndex) => {
+            const indices = originalIndices[physIndex]; // Get all original indices for this value
+            if (indices && indices.length > 0) {
+                const originalIndex = indices.shift(); // Get the first available original index
+                if (originalIndex !== undefined && originalIndex !== virtIndex && customSizes[originalIndex]) {
+                    newSizes[virtIndex] = customSizes[originalIndex];
+                    delete customSizes[originalIndex];
+                }
+            }
+        });
+        // Step 3: Set new sizes if there are changes
+        if (Object.keys(newSizes).length) {
+            this.setDimensionSize(Object.assign(Object.assign({}, customSizes), newSizes));
+        }
     }
 }
 
@@ -1137,6 +1204,7 @@ const notContains = (value, extra) => {
 notContains.extra = 'input';
 contains.extra = 'input';
 
+// filter.indexed.ts
 const filterCoreFunctionsIndexedByType = {
     none: () => true,
     empty: notSet,
@@ -1174,19 +1242,25 @@ const filterNames = {
     lte: '<=',
 };
 
+// filter.plugin.tsx
 const FILTER_TRIMMED_TYPE = 'filter';
 const FILTER_CONFIG_CHANGED_EVENT = 'filterconfigchanged';
 const FILTE_PANEL = 'revogr-filter-panel';
 /**
  * @typedef ColumnFilterConfig
  * @type {object}
- * @property {FilterCollection|undefined} collection - preserved filter data
+ *
+ * @property {MultiFilterItem|undefined} multiFilterItems - data for multi filtering with relation
+ *
+ * @property {Record<ColumnProp, FilterCollectionItem>|undefined} collection - preserved filter data, relation for filters will be applied as 'and'
+ *
  * @property {string[]|undefined} include - filters to be included, if defined everything else out of scope will be ignored
+ *
  * @property {Record<string, CustomFilter>|undefined} customFilters - hash map of {FilterType:CustomFilter}.
+ *
  * @property {FilterLocalization|undefined} localization - translation for filter popup captions.
- * @property {MultiFilterItem|undefined} multiFilterItems - data for multi filtering.
+ *
  * @property {boolean|undefined} disableDynamicFiltering - disables dynamic filtering. A way to apply filters on Save only.
- * A way to define your own filter types per column
  */
 /**
  * @internal
@@ -1196,8 +1270,17 @@ class FilterPlugin extends BasePlugin {
         var _a;
         super(revogrid, providers);
         this.revogrid = revogrid;
+        this.config = config;
         this.filterCollection = {};
         this.multiFilterItems = {};
+        /**
+         * Filter types
+         * @example
+         * {
+         *    string: ['contains', 'beginswith'],
+         *    number: ['eqN', 'neqN', 'gt']
+         *  }
+         */
         this.filterByType = Object.assign({}, filterTypes);
         this.filterNameIndexByType = Object.assign({}, filterNames);
         this.filterFunctionsIndexedByType = Object.assign({}, filterCoreFunctionsIndexedByType);
@@ -1208,8 +1291,8 @@ class FilterPlugin extends BasePlugin {
         const existingNodes = this.revogrid.registerVNode.filter(n => typeof n === 'object' && n.$tag$ !== FILTE_PANEL);
         this.revogrid.registerVNode = [
             ...existingNodes,
-            h("revogr-filter-panel", { filterItems: this.multiFilterItems, filterNames: this.filterNameIndexByType, filterEntities: this.filterFunctionsIndexedByType, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: e => this.onFilterChange(e.detail), onResetChange: e => this.onFilterReset(e.detail), disableDynamicFiltering: config === null || config === void 0 ? void 0 : config.disableDynamicFiltering, ref: e => (this.pop = e) },
-                " ",
+            h("revogr-filter-panel", { filterNames: this.filterNameIndexByType, filterEntities: this.filterFunctionsIndexedByType, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: e => this.onFilterChange(e.detail), onResetChange: e => this.onFilterReset(e.detail), disableDynamicFiltering: config === null || config === void 0 ? void 0 : config.disableDynamicFiltering, ref: e => (this.pop = e) },
+                ' ',
                 this.extraContent()),
         ];
         const aftersourceset = async () => {
@@ -1229,11 +1312,17 @@ class FilterPlugin extends BasePlugin {
                     }
                 });
             }
+            if (Object.keys(this.multiFilterItems).length === 0) {
+                return;
+            }
             await this.runFiltering(this.multiFilterItems);
         };
-        this.addEventListener('headerclick', (e) => this.headerclick(e));
+        this.addEventListener('headerclick', e => this.headerclick(e));
         this.addEventListener(FILTER_CONFIG_CHANGED_EVENT, ({ detail }) => {
-            if (!detail) {
+            if (!detail ||
+                (typeof detail === 'object' &&
+                    (!detail.multiFilterItems ||
+                        !Object.keys(detail.multiFilterItems).length))) {
                 this.clearFiltering();
                 return;
             }
@@ -1245,6 +1334,9 @@ class FilterPlugin extends BasePlugin {
         this.addEventListener('aftersourceset', aftersourceset);
         this.addEventListener('filter', ({ detail }) => this.onFilterChange(detail));
     }
+    beforeshow(_) {
+        // used as hook for filter panel
+    }
     extraContent() {
         return null;
     }
@@ -1252,6 +1344,9 @@ class FilterPlugin extends BasePlugin {
         if (config.multiFilterItems) {
             this.multiFilterItems = Object.assign({}, config.multiFilterItems);
         }
+        else {
+            this.multiFilterItems = {};
+        }
         // Add custom filters
         if (config.customFilters) {
             for (let customFilterType in config.customFilters) {
@@ -1259,8 +1354,11 @@ class FilterPlugin extends BasePlugin {
                 if (!this.filterByType[cFilter.columnFilterType]) {
                     this.filterByType[cFilter.columnFilterType] = [];
                 }
+                // add custom filter type
                 this.filterByType[cFilter.columnFilterType].push(customFilterType);
+                // add custom filter function
                 this.filterFunctionsIndexedByType[customFilterType] = cFilter.func;
+                // add custom filter name
                 this.filterNameIndexByType[customFilterType] = cFilter.name;
             }
         }
@@ -1270,7 +1368,7 @@ class FilterPlugin extends BasePlugin {
         }
         /**
          * which filters has to be included/excluded
-         * convinient way to exclude system filters
+         * convenient way to exclude system filters
          */
         const cfgInlcude = config.include;
         if (cfgInlcude) {
@@ -1288,15 +1386,11 @@ class FilterPlugin extends BasePlugin {
             }
         }
         if (config.collection) {
-            this.filterCollection = reduce(config.collection, (result, item, prop) => {
-                if (this.filterFunctionsIndexedByType[item.type]) {
-                    result[prop] = item;
-                }
-                else {
-                    console.warn(`${item.type} type is not found.`);
-                }
-                return result;
-            }, {});
+            const filtersWithFilterFunctionPresent = Object.entries(config.collection).filter(([, item]) => this.filterFunctionsIndexedByType[item.type]);
+            this.filterCollection = Object.fromEntries(filtersWithFilterFunctionPresent);
+        }
+        else {
+            this.filterCollection = {};
         }
         if (config.localization) {
             if (config.localization.filterNames) {
@@ -1309,18 +1403,12 @@ class FilterPlugin extends BasePlugin {
         }
     }
     async headerclick(e) {
-        var _a, _b, _c;
+        var _a, _b;
         const el = (_a = e.detail.originalEvent) === null || _a === void 0 ? void 0 : _a.target;
         if (!isFilterBtn(el)) {
             return;
         }
         e.preventDefault();
-        // close if same
-        const changes = await ((_b = this.pop) === null || _b === void 0 ? void 0 : _b.getChanges());
-        if (changes && (changes === null || changes === void 0 ? void 0 : changes.prop) === e.detail.prop) {
-            (_c = this.pop) === null || _c === void 0 ? void 0 : _c.show();
-            return;
-        }
         if (!this.pop) {
             return;
         }
@@ -1328,7 +1416,9 @@ class FilterPlugin extends BasePlugin {
         const gridPos = this.revogrid.getBoundingClientRect();
         const buttonPos = el.getBoundingClientRect();
         const prop = e.detail.prop;
-        this.pop.show(Object.assign(Object.assign({}, this.filterCollection[prop]), { x: buttonPos.x - gridPos.x, y: buttonPos.y - gridPos.y + buttonPos.height, autoCorrect: true, prop, filterTypes: this.getColumnFilter(e.detail.filter) }));
+        const data = Object.assign(Object.assign(Object.assign({}, e.detail), this.filterCollection[prop]), { x: buttonPos.x - gridPos.x, y: buttonPos.y - gridPos.y + buttonPos.height, autoCorrect: true, filterTypes: this.getColumnFilter(e.detail.filter), filterItems: this.multiFilterItems, extraContent: this.extraHyperContent });
+        (_b = this.beforeshow) === null || _b === void 0 ? void 0 : _b.call(this, data);
+        this.pop.show(data);
     }
     getColumnFilter(type) {
         let filterType = 'string';
@@ -1412,7 +1502,11 @@ class FilterPlugin extends BasePlugin {
         }
         // applies the hasFilter to the columns to show filter icon
         this.providers.column.updateColumns(columnsToUpdate);
-        this.emit('afterfilterapply');
+        this.emit('afterfilterapply', {
+            multiFilterItems: filterItems,
+            source,
+            collection,
+        });
     }
     async clearFiltering() {
         this.multiFilterItems = {};
@@ -1427,7 +1521,6 @@ class FilterPlugin extends BasePlugin {
             if (multiFilterItems[prop].length > 0) {
                 const firstFilterItem = multiFilterItems[prop][0];
                 collection[prop] = {
-                    filter: this.filterFunctionsIndexedByType[firstFilterItem.type],
                     type: firstFilterItem.type,
                     value: firstFilterItem.value,
                 };
@@ -1454,67 +1547,83 @@ class FilterPlugin extends BasePlugin {
     getRowFilter(rows, filterItems, columnByProp) {
         const propKeys = Object.keys(filterItems);
         const trimmed = {};
-        let propFilterSatisfiedCount = 0;
-        let lastFilterResults = [];
         // each rows
-        rows.forEach((model, rowIndex) => {
+        for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
             // check filter by column properties
             for (const prop of propKeys) {
-                const propFilters = filterItems[prop];
-                // reset the count of satisfied filters
-                propFilterSatisfiedCount = 0;
+                // add to the list of removed/trimmed rows of filter condition is satisfied
+                if (this.shouldTrimRow(filterItems[prop], prop, columnByProp[prop], rows[rowIndex])) {
+                    trimmed[rowIndex] = true;
+                }
+            } // end of for-of propKeys
+        }
+        return trimmed;
+    }
+    shouldTrimRow(propFilters, prop, column, model = {}) {
+        // reset the count of satisfied filters
+        let propFilterSatisfiedCount = 0;
+        // reset the array of last filter results
+        let lastFilterResults = [];
+        // testing each filter for a prop
+        for (const [filterIndex, filterData] of propFilters.entries()) {
+            // the filter LogicFunction based on the type
+            const filterFunc = this.filterFunctionsIndexedByType[filterData.type];
+            // THE MAGIC OF FILTERING IS HERE
+            // If there is no column but user wants to filter by a property
+            const value = column ? getCellDataParsed(model, column) : model[prop];
+            // OR relation
+            if (filterData.relation === 'or') {
                 // reset the array of last filter results
                 lastFilterResults = [];
-                // testing each filter for a prop
-                for (const [filterIndex, filterData] of propFilters.entries()) {
-                    // the filter LogicFunction based on the type
-                    const filterFunc = this.filterFunctionsIndexedByType[filterData.type];
-                    // THE MAGIC OF FILTERING IS HERE
-                    const column = columnByProp[prop];
-                    // If there is no column but user wants to filter by a property
-                    const value = column ? getCellDataParsed(model, columnByProp[prop]) : model[prop];
-                    // OR relation
-                    if (filterData.relation === 'or') {
+                // if the filter is satisfied, continue to the next filter
+                if (filterFunc(value, filterData.value)) {
+                    continue;
+                }
+                // if the filter is not satisfied, count it
+                propFilterSatisfiedCount++;
+                // AND relation
+            }
+            else {
+                // 'and' relation will need to know the next filter
+                // so we save this current filter to include it in the next filter
+                lastFilterResults.push(!filterFunc(value, filterData.value));
+                if (isFinalAndFilter(filterIndex, propFilters)) {
+                    // let's just continue since for sure propFilterSatisfiedCount cannot be satisfied
+                    if (allAndConditionsSatisfied(lastFilterResults)) {
                         // reset the array of last filter results
                         lastFilterResults = [];
-                        // if the filter is satisfied, continue to the next filter
-                        if (filterFunc(value, filterData.value)) {
-                            continue;
-                        }
-                        // if the filter is not satisfied, count it
-                        propFilterSatisfiedCount++;
-                        // AND relation
-                    }
-                    else {
-                        // 'and' relation will need to know the next filter
-                        // so we save this current filter to include it in the next filter
-                        lastFilterResults.push(!filterFunc(value, filterData.value));
-                        // check first if we have a filter on the next index to pair it with this current filter
-                        const nextFilterData = propFilters[filterIndex + 1];
-                        // stop the sequence if there is no next filter or if the next filter is not an 'and' relation
-                        if (!nextFilterData || nextFilterData.relation !== 'and') {
-                            // let's just continue since for sure propFilterSatisfiedCount cannot be satisfied
-                            if (lastFilterResults.indexOf(true) === -1) {
-                                // reset the array of last filter results
-                                lastFilterResults = [];
-                                continue;
-                            }
-                            // we need to add all of the lastFilterResults since we need to satisfy all
-                            propFilterSatisfiedCount += lastFilterResults.length;
-                            // reset the array of last filter results
-                            lastFilterResults = [];
-                        }
+                        continue;
                     }
-                } // end of propFilters forEach
-                // add to the list of removed/trimmed rows of filter condition is satisfied
-                if (propFilterSatisfiedCount === propFilters.length) {
-                    trimmed[rowIndex] = true;
+                    // we need to add all of the lastFilterResults since we need to satisfy all
+                    propFilterSatisfiedCount += lastFilterResults.length;
+                    // reset the array of last filter results
+                    lastFilterResults = [];
                 }
-            } // end of for-of propKeys
-        });
-        return trimmed;
+            }
+        } // end of propFilters forEach
+        return propFilterSatisfiedCount === propFilters.length;
     }
 }
+/**
+ * Checks if the current filter is the final one in an AND sequence.
+ * @param index - Current filter index in the list.
+ * @param filters - Array of filters for the property.
+ * @returns True if this is the last AND condition; false otherwise.
+ */
+function isFinalAndFilter(index, filters) {
+    const nextFilter = filters[index + 1]; // Get the next filter in the list.
+    // Return true if there's no next filter or if the next filter defined and is not part of the AND sequence.
+    return !nextFilter || (!!nextFilter.relation && nextFilter.relation !== 'and');
+}
+/**
+ * Determines if all conditions in an AND sequence are satisfied.
+ * @param pendingResults - An array of results from the AND conditions.
+ * @returns True if all conditions are satisfied; false otherwise.
+ */
+function allAndConditionsSatisfied(pendingResults) {
+    // Check if there are any failed conditions in the pending results.
+    return !pendingResults.includes(true);
+}
 
 // provide collapse data
 function doCollapse(pIndex, source) {
@@ -1635,852 +1744,880 @@ function processDoubleConversionTrimmed(initiallyTrimed, firstLevelMap, secondLe
     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;
-    }
-    // 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.providers = providers;
-    }
-    // befoce cell focus
-    onFocus(e) {
-        if (isGrouping(e.detail.model)) {
-            e.preventDefault();
-        }
-    }
-    // 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);
-            }
-        }
-        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;
-            }
-            // 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: {},
-        });
-    }
-    setColumnGrouping(cols) {
-        // if 0 column as holder
-        if (cols === null || cols === void 0 ? void 0 : cols.length) {
-            cols[0][PSEUDO_GROUP_COLUMN] = true;
-            return true;
-        }
-        return false;
-    }
-    setColumns({ columns }) {
-        for (let type of columnTypes) {
-            if (this.setColumnGrouping(columns[type])) {
-                break;
-            }
-        }
-    }
-    // evaluate drag between groups
-    onDrag(e) {
-        const { from, to } = e.detail;
-        const isDown = to - from >= 0;
-        const { source } = 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;
-                }
-            }
-        }
-    }
-    // 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;
-        }
-        /**
-         * 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);
-    }
-    /**
-     * 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;
+/** `Object#toString` result references. */
+var stringTag = '[object String]';
+
+/**
+ * Checks if `value` is classified as a `String` primitive or object.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a string, else `false`.
+ * @example
+ *
+ * _.isString('abc');
+ * // => true
+ *
+ * _.isString(1);
+ * // => false
+ */
+function isString(value) {
+  return typeof value == 'string' ||
+    (!isArray(value) && isObjectLike(value) && baseGetTag(value) == stringTag);
+}
+
+/**
+ * Gets the size of an ASCII `string`.
+ *
+ * @private
+ * @param {string} string The string inspect.
+ * @returns {number} Returns the string size.
+ */
+var asciiSize = baseProperty('length');
+
+const asciiSize$1 = asciiSize;
+
+/** Used to compose unicode character classes. */
+var rsAstralRange$1 = '\\ud800-\\udfff',
+    rsComboMarksRange$1 = '\\u0300-\\u036f',
+    reComboHalfMarksRange$1 = '\\ufe20-\\ufe2f',
+    rsComboSymbolsRange$1 = '\\u20d0-\\u20ff',
+    rsComboRange$1 = rsComboMarksRange$1 + reComboHalfMarksRange$1 + rsComboSymbolsRange$1,
+    rsVarRange$1 = '\\ufe0e\\ufe0f';
+
+/** Used to compose unicode capture groups. */
+var rsZWJ$1 = '\\u200d';
+
+/** Used to detect strings with [zero-width joiners or code points from the astral planes](http://eev.ee/blog/2015/09/12/dark-corners-of-unicode/). */
+var reHasUnicode = RegExp('[' + rsZWJ$1 + rsAstralRange$1  + rsComboRange$1 + rsVarRange$1 + ']');
+
+/**
+ * Checks if `string` contains Unicode symbols.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {boolean} Returns `true` if a symbol is found, else `false`.
+ */
+function hasUnicode(string) {
+  return reHasUnicode.test(string);
+}
+
+/** Used to compose unicode character classes. */
+var rsAstralRange = '\\ud800-\\udfff',
+    rsComboMarksRange = '\\u0300-\\u036f',
+    reComboHalfMarksRange = '\\ufe20-\\ufe2f',
+    rsComboSymbolsRange = '\\u20d0-\\u20ff',
+    rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange,
+    rsVarRange = '\\ufe0e\\ufe0f';
+
+/** Used to compose unicode capture groups. */
+var rsAstral = '[' + rsAstralRange + ']',
+    rsCombo = '[' + rsComboRange + ']',
+    rsFitz = '\\ud83c[\\udffb-\\udfff]',
+    rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')',
+    rsNonAstral = '[^' + rsAstralRange + ']',
+    rsRegional = '(?:\\ud83c[\\udde6-\\uddff]){2}',
+    rsSurrPair = '[\\ud800-\\udbff][\\udc00-\\udfff]',
+    rsZWJ = '\\u200d';
+
+/** Used to compose unicode regexes. */
+var reOptMod = rsModifier + '?',
+    rsOptVar = '[' + rsVarRange + ']?',
+    rsOptJoin = '(?:' + rsZWJ + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*',
+    rsSeq = rsOptVar + reOptMod + rsOptJoin,
+    rsSymbol = '(?:' + [rsNonAstral + rsCombo + '?', rsCombo, rsRegional, rsSurrPair, rsAstral].join('|') + ')';
+
+/** Used to match [string symbols](https://mathiasbynens.be/notes/javascript-unicode). */
+var reUnicode = RegExp(rsFitz + '(?=' + rsFitz + ')|' + rsSymbol + rsSeq, 'g');
+
+/**
+ * Gets the size of a Unicode `string`.
+ *
+ * @private
+ * @param {string} string The string inspect.
+ * @returns {number} Returns the string size.
+ */
+function unicodeSize(string) {
+  var result = reUnicode.lastIndex = 0;
+  while (reUnicode.test(string)) {
+    ++result;
+  }
+  return result;
+}
+
+/**
+ * Gets the number of symbols in `string`.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {number} Returns the string size.
+ */
+function stringSize(string) {
+  return hasUnicode(string)
+    ? unicodeSize(string)
+    : asciiSize$1(string);
+}
+
+/** `Object#toString` result references. */
+var mapTag = '[object Map]',
+    setTag = '[object Set]';
+
+/**
+ * Gets the size of `collection` by returning its length for array-like
+ * values or the number of own enumerable string keyed properties for objects.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Collection
+ * @param {Array|Object|string} collection The collection to inspect.
+ * @returns {number} Returns the collection size.
+ * @example
+ *
+ * _.size([1, 2, 3]);
+ * // => 3
+ *
+ * _.size({ 'a': 1, 'b': 2 });
+ * // => 2
+ *
+ * _.size('pebbles');
+ * // => 7
+ */
+function size(collection) {
+  if (collection == null) {
+    return 0;
+  }
+  if (isArrayLike(collection)) {
+    return isString(collection) ? stringSize(collection) : collection.length;
+  }
+  var tag = getTag(collection);
+  if (tag == mapTag || tag == setTag) {
+    return collection.size;
+  }
+  return baseKeys(collection).length;
+}
+
+function sortIndexByItems(indexes, source, sortingFunc = {}) {
+    // if no sorting - return unsorted indexes
+    if (Object.entries(sortingFunc).length === 0) {
+        // Unsorted indexes
+        return [...Array(indexes.length).keys()];
+    }
+    //
+    /**
+     * go through all indexes and align in new order
+     * performs a multi-level sorting by applying multiple comparison functions to determine the order of the items based on different properties.
+     */
+    return indexes.sort((a, b) => {
+        const itemA = source[a];
+        const itemB = source[b];
+        for (const [prop, cmp] of Object.entries(sortingFunc)) {
+            if (isGrouping(itemA)) {
+                if (itemA['__rvgr-prop'] !== prop) {
+                    return 0;
+                }
+            }
+            if (isGrouping(itemB)) {
+                if (itemB['__rvgr-prop'] !== prop) {
+                    return 0;
+                }
+            }
+            /**
+             * If the comparison function returns a non-zero value (sorted), it means that the items should be sorted based on the given property. In such a case, the function immediately returns the sorted value, indicating the order in which the items should be arranged.
+             * If none of the comparison functions result in a non-zero value, indicating that the items are equal or should remain in the same order, the function eventually returns 0.
+             */
+            const sorted = cmp === null || cmp === void 0 ? void 0 : cmp(prop, itemA, itemB);
+            if (sorted) {
+                return sorted;
             }
         }
-        // if has any grouping subscribe to events again
-        this.subscribe();
+        return 0;
+    });
+}
+
+/**
+ * Lifecycle
+ * 1. @event `beforesorting` - Triggered when sorting just starts. Nothing has happened yet. This can be triggered from a column or from the source. If the type is from rows, the column will be undefined.
+ * 1.1. @event `beforesourcesortingapply` - Triggered before the sorting data is applied to the data source. You can prevent this event, and the data will not be sorted.
+ * 2. @method `updateColumnSorting` - Updates the column sorting icon on the grid and the column itself, but the data remains untouched.
+ * 3. @event `beforesortingapply` - Triggered before the sorting data is applied to the data source. You can prevent this event, and the data will not be sorted. This event is only called from a column sorting click.
+ * 4. @event `aftersortingapply` - Triggered after sorting has been applied and completed. This event occurs for both row and column sorting.
+ *
+ * Note: If you prevent an event, it will not proceed to the subsequent steps.
+ */
+class SortingPlugin extends BasePlugin {
+    runSorting(order, comparison, ignoreViewportUpdate) {
+        var _a;
+        this.sort(order, comparison, undefined, ignoreViewportUpdate);
+        (_a = this.sortingPromise) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.sortingPromise = null;
     }
-    // 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;
+    constructor(revogrid, providers, config) {
+        super(revogrid, providers);
+        this.revogrid = revogrid;
+        this.sortingPromise = null;
+        this.postponeSort = debounce((order, comparison, ignoreViewportUpdate) => this.runSorting(order, comparison, ignoreViewportUpdate), 50);
+        const setConfig = (cfg) => {
+            var _a;
+            if (cfg) {
+                const sortingFunc = {};
+                const order = {};
+                (_a = cfg.columns) === null || _a === void 0 ? void 0 : _a.forEach(col => {
+                    sortingFunc[col.prop] = this.getComparer(col, col.order);
+                    order[col.prop] = col.order;
+                });
+                // // set sorting
+                this.sorting = order;
+                this.sortingFunc = sortingFunc;
+            }
+        };
+        setConfig(config);
+        this.addEventListener('sortingconfigchanged', ({ detail }) => {
+            config = detail;
+            setConfig(detail);
+            this.startSorting(this.sorting, this.sortingFunc);
+        });
+        this.addEventListener('beforeanysource', ({ detail: { type }, }) => {
+            // if sorting was provided - sort data
+            if (!!this.sorting && this.sortingFunc) {
+                const event = this.emit('beforesourcesortingapply', { type, sorting: this.sorting });
+                if (event.defaultPrevented) {
+                    return;
                 }
-            });
-            // if column store had grouping clear and refresh
-            if (deleted) {
-                this.providers.column.refreshByType(t);
+                this.startSorting(this.sorting, this.sortingFunc);
             }
         });
-        // 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);
+        this.addEventListener('aftercolumnsset', ({ detail: { order }, }) => {
+            // if config provided - do nothing, read from config
+            if (config) {
+                return;
+            }
+            const columns = this.providers.column.getColumns();
+            const sortingFunc = {};
+            for (let prop in order) {
+                const cmp = this.getComparer(getColumnByProp(columns, prop), order[prop]);
+                sortingFunc[prop] = cmp;
+            }
+            // set sorting
+            this.sorting = order;
+            this.sortingFunc = order && sortingFunc;
+        });
+        this.addEventListener('beforeheaderclick', (e) => {
+            var _a, _b, _c, _d;
+            if (e.defaultPrevented) {
+                return;
+            }
+            if (!((_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.column) === null || _b === void 0 ? void 0 : _b.sortable)) {
+                return;
+            }
+            this.headerclick(e.detail.column, e.detail.index, (_d = (_c = e.detail) === null || _c === void 0 ? void 0 : _c.originalEvent) === null || _d === void 0 ? void 0 : _d.shiftKey);
+        });
     }
-    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);
+    startSorting(order, sortingFunc, ignoreViewportUpdate) {
+        if (!this.sortingPromise) {
+            // add job before render
+            this.revogrid.jobsBeforeRender.push(new Promise(resolve => {
+                this.sortingPromise = resolve;
+            }));
+        }
+        this.postponeSort(order, sortingFunc, ignoreViewportUpdate);
+    }
+    getComparer(column, order) {
+        var _a, _b;
+        const cellCmp = ((_a = column === null || column === void 0 ? void 0 : column.cellCompare) === null || _a === void 0 ? void 0 : _a.bind({ order })) || ((_b = this.defaultCellCompare) === null || _b === void 0 ? void 0 : _b.bind({ column, order }));
+        if (order == 'asc') {
+            return cellCmp;
+        }
+        if (order == 'desc') {
+            return this.descCellCompare(cellCmp);
+        }
+        return undefined;
+    }
+    /**
+     * Apply sorting to data on header click
+     * If additive - add to existing sorting, multiple columns can be sorted
+     */
+    headerclick(column, index, additive) {
+        var _a, _b;
+        let order = this.getNextOrder(column.order);
+        const beforeEvent = this.emit('beforesorting', { column, order, additive });
+        if (beforeEvent.defaultPrevented) {
+            return;
+        }
+        order = beforeEvent.detail.order;
+        const newCol = this.providers.column.updateColumnSorting(beforeEvent.detail.column, index, order, additive);
+        // apply sort data
+        const beforeApplyEvent = this.emit('beforesortingapply', {
+            column: newCol,
+            order,
+            additive,
+        });
+        if (beforeApplyEvent.defaultPrevented) {
+            return;
+        }
+        const cmp = this.getComparer(beforeApplyEvent.detail.column, beforeApplyEvent.detail.order);
+        if (beforeApplyEvent.detail.additive && this.sorting) {
+            const sorting = {};
+            const sortingFunc = {};
+            this.sorting = Object.assign(Object.assign({}, this.sorting), sorting);
+            // extend sorting function with new sorting for multiple columns sorting
+            this.sortingFunc = Object.assign(Object.assign({}, this.sortingFunc), sortingFunc);
+            if (column.prop in sorting && size(sorting) > 1 && order === undefined) {
+                delete sorting[column.prop];
+                delete sortingFunc[column.prop];
+            }
+            else {
+                sorting[column.prop] = order;
+                sortingFunc[column.prop] = cmp;
+            }
+        }
+        else {
+            if (order) {
+                // reset sorting
+                this.sorting = { [column.prop]: order };
+                this.sortingFunc = { [column.prop]: cmp };
+            }
+            else {
+                (_a = this.sorting) === null || _a === void 0 ? true : delete _a[column.prop];
+                (_b = this.sortingFunc) === null || _b === void 0 ? true : delete _b[column.prop];
+            }
         }
-        // const emptyGroups = this.filterOutEmptyGroups(trimemedOptionsToUpgrade, childrenByGroup);
-        // setup trimmed data for grouping
-        this.revogrid.addTrimmed(Object.assign({}, trimmedGroup), TRIMMED_GROUPING);
-    }
-}
-
-const COLUMN_DRAG_CLASS = 'column-drag-start';
-class ColumnOrderHandler {
-    constructor() {
-        this.offset = 0;
+        this.startSorting(this.sorting, this.sortingFunc);
     }
-    renderAutoscroll(_, parent) {
-        if (!parent) {
-            return;
+    /**
+     * Sort items by sorting function
+     * @requires proxyItems applied to row store
+     * @requires source applied to row store
+     *
+     * @param sorting - per column sorting
+     * @param data - this.stores['rgRow'].store.get('source')
+     */
+    sort(sorting, sortingFunc, types = rowTypes, ignoreViewportUpdate = false) {
+        // if no sorting - reset
+        if (!Object.keys(sorting || {}).length) {
+            for (let type of types) {
+                const storeService = this.providers.data.stores[type];
+                // row data
+                const source = storeService.store.get('source');
+                // row indexes
+                const proxyItems = storeService.store.get('proxyItems');
+                // row indexes
+                const newItemsOrder = Array.from({ length: source.length }, (_, i) => i); // recover indexes range(0, source.length)
+                this.providers.dimension.updateSizesPositionByNewDataIndexes(type, newItemsOrder, proxyItems);
+                storeService.setData({ proxyItems: newItemsOrder, source: [...source], });
+            }
         }
-        this.autoscrollEl = document.createElement('div');
-        this.autoscrollEl.classList.add('drag-auto-scroll-y');
-        parent.appendChild(this.autoscrollEl);
-    }
-    autoscroll(pos, dataContainerSize, direction = 'translateX') {
-        if (!this.autoscrollEl) {
-            return;
+        else {
+            for (let type of types) {
+                const storeService = this.providers.data.stores[type];
+                // row data
+                const source = storeService.store.get('source');
+                // row indexes
+                const proxyItems = storeService.store.get('proxyItems');
+                const newItemsOrder = sortIndexByItems([...proxyItems], source, sortingFunc);
+                // take row indexes before trim applied and proxy items
+                const prevItems = storeService.store.get('items');
+                storeService.setData({
+                    proxyItems: newItemsOrder,
+                    source: [...source],
+                });
+                // take currently visible row indexes
+                const newItems = storeService.store.get('items');
+                if (!ignoreViewportUpdate) {
+                    this.providers.dimension
+                        .updateSizesPositionByNewDataIndexes(type, newItems, prevItems);
+                }
+            }
         }
-        const helperOffset = 10;
-        // calculate current y position inside of the grid active holder
-        // 3 - size of element + border
-        const maxScroll = Math.min(pos + helperOffset, dataContainerSize - 3);
-        this.autoscrollEl.style.transform = `${direction}(${maxScroll}px)`;
-        this.autoscrollEl.scrollIntoView({
-            block: 'nearest',
-            inline: 'nearest',
-        });
+        this.emit('aftersortingapply');
     }
-    start(e, { dataEl, gridRect, scrollEl, gridEl }, dir = 'left') {
-        gridEl.classList.add(COLUMN_DRAG_CLASS);
-        const scrollContainerRect = scrollEl.getBoundingClientRect();
-        if (scrollContainerRect) {
-            this.offset = scrollContainerRect[dir] - gridRect[dir];
-        }
-        this.renderAutoscroll(e, dataEl);
+    defaultCellCompare(prop, a, b) {
+        const aRaw = this.column ? getCellRaw(a, this.column) : a === null || a === void 0 ? void 0 : a[prop];
+        const bRaw = this.column ? getCellRaw(b, this.column) : b === null || b === void 0 ? void 0 : b[prop];
+        const av = aRaw === null || aRaw === void 0 ? void 0 : aRaw.toString().toLowerCase();
+        const bv = bRaw === null || bRaw === void 0 ? void 0 : bRaw.toString().toLowerCase();
+        return av == bv ? 0 : av > bv ? 1 : -1;
     }
-    stop(gridEl) {
-        var _a;
-        gridEl.classList.remove(COLUMN_DRAG_CLASS);
-        if (this.element) {
-            this.element.hidden = true;
-        }
-        this.offset = 0;
-        (_a = this.autoscrollEl) === null || _a === void 0 ? void 0 : _a.remove();
-        this.autoscrollEl = undefined;
+    descCellCompare(cmp) {
+        return (prop, a, b) => {
+            return -1 * cmp(prop, a, b);
+        };
     }
-    showHandler(pos, size, direction = 'translateX') {
-        if (!this.element) {
-            return;
-        }
-        // do not allow overcross top of the scrollable area, header excluded
-        if (this.offset) {
-            pos = Math.max(pos, this.offset);
+    getNextOrder(currentOrder) {
+        switch (currentOrder) {
+            case undefined:
+                return 'asc';
+            case 'asc':
+                return 'desc';
+            case 'desc':
+                return undefined;
         }
-        // can not be bigger then grid end
-        pos = Math.min(pos, size);
-        this.element.style.transform = `${direction}(${pos}px)`;
-        this.element.hidden = false;
-    }
-    render() {
-        const el = this.element = document.createElement('div');
-        el.classList.add('drag-position-y');
-        el.hidden = true;
-        return el;
     }
 }
 
-/**
- * Plugin for column manual move
- */
-const COLUMN_CLICK = 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 {
+class GroupingRowPlugin extends BasePlugin {
+    getStore(type = GROUPING_ROW_TYPE) {
+        return this.providers.data.stores[type].store;
+    }
     constructor(revogrid, providers) {
         super(revogrid, providers);
         this.revogrid = revogrid;
         this.providers = providers;
-        this.moveFunc = debounce((e) => this.doMove(e), 5);
-        this.staticDragData = null;
-        this.dragData = null;
-        this.localSubscriptions = {};
-        this.orderUi = new ColumnOrderHandler();
-        revogrid.appendChild(this.orderUi.render());
-        revogrid.classList.add('column-draggable');
-        // Register events
-        this.localSubscriptions['mouseleave'] = {
-            target: document,
-            callback: (e) => this.onMouseOut(e),
-        };
-        this.localSubscriptions['mouseup'] = {
-            target: document,
-            callback: (e) => this.onMouseUp(e),
-        };
-        this.localSubscriptions['mousemove'] = {
-            target: document,
-            callback: (e) => this.move(e),
-        };
-        this.addEventListener(COLUMN_CLICK, ({ detail }) => this.dragStart(detail));
     }
-    dragStart({ event, data }) {
-        if (event.defaultPrevented) {
-            return;
-        }
-        const { defaultPrevented } = dispatch(this.revogrid, DRAG_START, data);
-        // check if allowed to drag particulat column
-        if (defaultPrevented) {
-            return;
+    // befoce cell focus
+    onFocus(e) {
+        if (isGrouping(e.detail.model)) {
+            e.preventDefault();
         }
-        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;
+    }
+    // expand event triggered
+    onExpand({ virtualIndex }) {
+        const { source } = getSource(this.getStore().get('source'), this.getStore().get('proxyItems'));
+        let newTrimmed = this.getStore().get('trimmed')[TRIMMED_GROUPING];
+        let i = getPhysical(this.getStore(), virtualIndex);
+        const isExpanded = getExpanded(source[i]);
+        if (!isExpanded) {
+            const { trimmed, items } = doExpand(virtualIndex, source, this.getStore().get('items'));
+            newTrimmed = Object.assign(Object.assign({}, newTrimmed), trimmed);
+            if (items) {
+                setItems(this.getStore(), items);
+            }
         }
-        // no grouping drag and no row header column drag
-        if (isColGrouping(data) || data.providers.type === 'rowHeaders') {
-            return;
+        else {
+            const { trimmed } = doCollapse(i, source);
+            newTrimmed = Object.assign(Object.assign({}, newTrimmed), trimmed);
+            this.revogrid.clearFocus();
         }
-        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));
+        this.getStore().set('source', source);
+        this.revogrid.addTrimmed(newTrimmed, TRIMMED_GROUPING);
     }
-    doMove(e) {
-        if (!this.staticDragData) {
-            return;
+    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;
         }
-        const dragData = (this.dragData = this.getData(this.staticDragData));
-        if (!dragData) {
-            return;
+        return false;
+    }
+    setColumns({ columns }) {
+        for (let type of columnTypes) {
+            if (this.setColumnGrouping(columns[type])) {
+                break;
+            }
         }
-        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);
+    }
+    // evaluate drag between groups
+    onDrag(e) {
+        const { from, to } = e.detail;
+        const isDown = to - from >= 0;
+        const { source } = getSource(this.getStore().get('source'), this.getStore().get('proxyItems'));
+        const items = this.getStore().get('items');
+        let i = isDown ? from : to;
+        const end = isDown ? to : from;
+        for (; i < end; i++) {
+            const model = source[items[i]];
+            const isGroup = isGrouping(model);
+            if (isGroup) {
+                e.preventDefault();
+                return;
+            }
         }
     }
-    move(e) {
-        dispatch(this.revogrid, MOVE, e);
-        // then do move
-        this.moveFunc(e);
+    beforeTrimmedApply(trimmed, type) {
+        /** Before filter apply remove grouping filtering */
+        if (type === FILTER_TRIMMED_TYPE) {
+            const source = this.getStore().get('source');
+            for (let index in trimmed) {
+                if (trimmed[index] && isGrouping(source[index])) {
+                    trimmed[index] = false;
+                }
+            }
+        }
     }
-    onMouseOut(_) {
-        this.clearOrder();
+    isSortingRunning() {
+        const sortingPlugin = this.providers.plugins.getByClass(SortingPlugin);
+        return !!(sortingPlugin === null || sortingPlugin === void 0 ? void 0 : sortingPlugin.sortingPromise);
     }
-    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;
+    // subscribe to grid events to process them accordingly
+    subscribe() {
+        /** if grouping present and new data source arrived */
+        this.addEventListener('beforesourceset', ({ detail }) => {
+            var _a, _b, _c;
+            if (!(((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.length) && ((_c = detail === null || detail === void 0 ? void 0 : detail.source) === null || _c === void 0 ? void 0 : _c.length))) {
+                return;
+            }
+            // if sorting is running don't apply grouping, wait for sorting, then it'll apply in @aftersortingapply
+            if (this.isSortingRunning()) {
+                return;
             }
-            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);
+            this.onDataSet(detail);
+        });
+        this.addEventListener('beforecolumnsset', ({ detail }) => {
+            this.setColumns(detail);
+        });
+        /**
+         * filter applied need to clear grouping and apply again
+         * based on new results can be new grouping
+         */
+        this.addEventListener('beforetrimmed', ({ detail: { trimmed, trimmedType } }) => this.beforeTrimmedApply(trimmed, trimmedType));
+        /**
+         * sorting applied need to clear grouping and apply again
+         * based on new results whole grouping order will changed
+         */
+        this.addEventListener('aftersortingapply', () => {
+            var _a, _b;
+            if (!((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.length)) {
+                return;
             }
-            dispatch(this.revogrid, DRAG_END, this.dragData);
-        }
-        this.clearOrder();
-    }
-    clearLocalSubscriptions() {
-        forEach(this.localSubscriptions, ({ target, callback }, key) => target.removeEventListener(key, callback));
+            this.doSourceUpdate(Object.assign({}, this.options));
+        });
+        /**
+         * Apply logic for focus inside of grouping
+         * We can't focus on grouping rows, navigation only inside of groups for now
+         */
+        this.addEventListener('beforecellfocus', e => this.onFocus(e));
+        /**
+         * Prevent rgRow drag outside the group
+         */
+        this.addEventListener('roworderchanged', e => this.onDrag(e));
+        /**
+         * When grouping expand icon was clicked
+         */
+        this.addEventListener('groupexpandclick', e => this.onExpand(e.detail));
     }
-    clearOrder() {
-        this.staticDragData = null;
-        this.dragData = null;
-        this.clearLocalSubscriptions();
-        this.orderUi.stop(this.revogrid);
+    /**
+     * Starts global source update with group clearing and applying new one
+     * Initiated when need to reapply grouping
+     */
+    doSourceUpdate(options) {
+        var _a;
+        /**
+         * Get source without grouping
+         * @param newOldIndexMap - provides us mapping with new indexes vs old indexes, we would use it for trimmed mapping
+         */
+        const { source, prevExpanded, oldNewIndexes } = getSource(this.getStore().get('source'), this.getStore().get('proxyItems'), true);
+        const expanded = Object.assign({ prevExpanded }, options);
+        /**
+         * Group again
+         * @param oldNewIndexMap - provides us mapping with new indexes vs old indexes
+         */
+        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup, } = gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], expanded);
+        const customRenderer = options === null || options === void 0 ? void 0 : options.groupLabelTemplate;
+        // setup source
+        this.providers.data.setData(sourceWithGroups, GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, { depth, customRenderer }, true);
+        this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexes !== null && oldNewIndexes !== void 0 ? oldNewIndexes : {}, oldNewIndexMap);
     }
     /**
-     * Clearing subscription
+     * Apply grouping on data set
+     * Clear grouping from source
+     * If source came from other plugin
      */
-    clearSubscriptions() {
-        super.clearSubscriptions();
-        this.clearLocalSubscriptions();
+    onDataSet(data) {
+        var _a, _b;
+        let preservedExpanded = {};
+        if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.preserveGroupingOnUpdate) !== false) {
+            let { prevExpanded } = getSource(this.getStore().get('source'), this.getStore().get('proxyItems'), true);
+            preservedExpanded = prevExpanded;
+        }
+        const source = data.source.filter(s => !isGrouping(s));
+        const options = Object.assign(Object.assign({}, (this.revogrid.grouping || {})), { prevExpanded: preservedExpanded });
+        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup, } = gatherGrouping(source, ((_b = this.options) === null || _b === void 0 ? void 0 : _b.props) || [], options);
+        data.source = sourceWithGroups;
+        this.providers.data.setGrouping({ depth });
+        this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexMap);
     }
-    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,
-        };
+    /**
+     * Externam call to apply grouping. Called by revogrid when prop changed.
+     */
+    setGrouping(options) {
+        var _a, _b;
+        // unsubscribe from all events when group applied
+        this.clearSubscriptions();
+        this.options = options;
+        // clear props, no grouping exists
+        if (!((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.length)) {
+            this.clearGrouping();
+            return;
+        }
+        // props exist and source inited
+        const { source } = getSource(this.getStore().get('source'), this.getStore().get('proxyItems'));
+        if (source.length) {
+            this.doSourceUpdate(Object.assign({}, options));
+        }
+        // props exist and columns inited
+        for (let t of columnTypes) {
+            if (this.setColumnGrouping(this.providers.column.getColumns(t))) {
+                this.providers.column.refreshByType(t);
+                break;
+            }
+        }
+        // if has any grouping subscribe to events again
+        this.subscribe();
     }
-    getDimension(type) {
-        return this.providers.dimension.stores[type].getCurrentState();
+    // clear grouping
+    clearGrouping() {
+        // clear columns
+        columnTypes.forEach(t => {
+            const cols = this.providers.column.getColumns(t);
+            let deleted = false;
+            cols.forEach(c => {
+                if (isGroupingColumn(c)) {
+                    delete c[PSEUDO_GROUP_COLUMN];
+                    deleted = true;
+                }
+            });
+            // if column store had grouping clear and refresh
+            if (deleted) {
+                this.providers.column.refreshByType(t);
+            }
+        });
+        // clear rows
+        const { source, oldNewIndexes } = getSource(this.getStore().get('source'), this.getStore().get('proxyItems'), true);
+        this.providers.data.setData(source, GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, undefined, true);
+        this.updateTrimmed(undefined, undefined, oldNewIndexes);
+    }
+    updateTrimmed(trimmedGroup = {}, _childrenByGroup = {}, firstLevelMap = {}, secondLevelMap) {
+        // map previously trimmed data
+        const trimemedOptionsToUpgrade = processDoubleConversionTrimmed(this.getStore().get('trimmed'), firstLevelMap, secondLevelMap);
+        for (let type in trimemedOptionsToUpgrade) {
+            this.revogrid.addTrimmed(trimemedOptionsToUpgrade[type], type);
+        }
+        // const emptyGroups = this.filterOutEmptyGroups(trimemedOptionsToUpgrade, childrenByGroup);
+        // setup trimmed data for grouping
+        this.revogrid.addTrimmed(Object.assign({}, trimmedGroup), TRIMMED_GROUPING);
     }
 }
-function getLeftRelative(absoluteX, gridPos, offset) {
-    return absoluteX - gridPos - offset;
-}
-
-/** `Object#toString` result references. */
-var stringTag = '[object String]';
-
-/**
- * Checks if `value` is classified as a `String` primitive or object.
- *
- * @static
- * @since 0.1.0
- * @memberOf _
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a string, else `false`.
- * @example
- *
- * _.isString('abc');
- * // => true
- *
- * _.isString(1);
- * // => false
- */
-function isString(value) {
-  return typeof value == 'string' ||
-    (!isArray(value) && isObjectLike(value) && baseGetTag(value) == stringTag);
-}
-
-/**
- * Gets the size of an ASCII `string`.
- *
- * @private
- * @param {string} string The string inspect.
- * @returns {number} Returns the string size.
- */
-var asciiSize = baseProperty('length');
-
-const asciiSize$1 = asciiSize;
-
-/** Used to compose unicode character classes. */
-var rsAstralRange$1 = '\\ud800-\\udfff',
-    rsComboMarksRange$1 = '\\u0300-\\u036f',
-    reComboHalfMarksRange$1 = '\\ufe20-\\ufe2f',
-    rsComboSymbolsRange$1 = '\\u20d0-\\u20ff',
-    rsComboRange$1 = rsComboMarksRange$1 + reComboHalfMarksRange$1 + rsComboSymbolsRange$1,
-    rsVarRange$1 = '\\ufe0e\\ufe0f';
-
-/** Used to compose unicode capture groups. */
-var rsZWJ$1 = '\\u200d';
-
-/** Used to detect strings with [zero-width joiners or code points from the astral planes](http://eev.ee/blog/2015/09/12/dark-corners-of-unicode/). */
-var reHasUnicode = RegExp('[' + rsZWJ$1 + rsAstralRange$1  + rsComboRange$1 + rsVarRange$1 + ']');
-
-/**
- * Checks if `string` contains Unicode symbols.
- *
- * @private
- * @param {string} string The string to inspect.
- * @returns {boolean} Returns `true` if a symbol is found, else `false`.
- */
-function hasUnicode(string) {
-  return reHasUnicode.test(string);
-}
-
-/** Used to compose unicode character classes. */
-var rsAstralRange = '\\ud800-\\udfff',
-    rsComboMarksRange = '\\u0300-\\u036f',
-    reComboHalfMarksRange = '\\ufe20-\\ufe2f',
-    rsComboSymbolsRange = '\\u20d0-\\u20ff',
-    rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange,
-    rsVarRange = '\\ufe0e\\ufe0f';
-
-/** Used to compose unicode capture groups. */
-var rsAstral = '[' + rsAstralRange + ']',
-    rsCombo = '[' + rsComboRange + ']',
-    rsFitz = '\\ud83c[\\udffb-\\udfff]',
-    rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')',
-    rsNonAstral = '[^' + rsAstralRange + ']',
-    rsRegional = '(?:\\ud83c[\\udde6-\\uddff]){2}',
-    rsSurrPair = '[\\ud800-\\udbff][\\udc00-\\udfff]',
-    rsZWJ = '\\u200d';
-
-/** Used to compose unicode regexes. */
-var reOptMod = rsModifier + '?',
-    rsOptVar = '[' + rsVarRange + ']?',
-    rsOptJoin = '(?:' + rsZWJ + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*',
-    rsSeq = rsOptVar + reOptMod + rsOptJoin,
-    rsSymbol = '(?:' + [rsNonAstral + rsCombo + '?', rsCombo, rsRegional, rsSurrPair, rsAstral].join('|') + ')';
-
-/** Used to match [string symbols](https://mathiasbynens.be/notes/javascript-unicode). */
-var reUnicode = RegExp(rsFitz + '(?=' + rsFitz + ')|' + rsSymbol + rsSeq, 'g');
-
-/**
- * Gets the size of a Unicode `string`.
- *
- * @private
- * @param {string} string The string inspect.
- * @returns {number} Returns the string size.
- */
-function unicodeSize(string) {
-  var result = reUnicode.lastIndex = 0;
-  while (reUnicode.test(string)) {
-    ++result;
-  }
-  return result;
-}
-
-/**
- * Gets the number of symbols in `string`.
- *
- * @private
- * @param {string} string The string to inspect.
- * @returns {number} Returns the string size.
- */
-function stringSize(string) {
-  return hasUnicode(string)
-    ? unicodeSize(string)
-    : asciiSize$1(string);
-}
-
-/** `Object#toString` result references. */
-var mapTag = '[object Map]',
-    setTag = '[object Set]';
 
-/**
- * Gets the size of `collection` by returning its length for array-like
- * values or the number of own enumerable string keyed properties for objects.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Collection
- * @param {Array|Object|string} collection The collection to inspect.
- * @returns {number} Returns the collection size.
- * @example
- *
- * _.size([1, 2, 3]);
- * // => 3
- *
- * _.size({ 'a': 1, 'b': 2 });
- * // => 2
- *
- * _.size('pebbles');
- * // => 7
- */
-function size(collection) {
-  if (collection == null) {
-    return 0;
-  }
-  if (isArrayLike(collection)) {
-    return isString(collection) ? stringSize(collection) : collection.length;
-  }
-  var tag = getTag(collection);
-  if (tag == mapTag || tag == setTag) {
-    return collection.size;
-  }
-  return baseKeys(collection).length;
+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;
+    }
 }
 
 /**
- * Lifecycle
- * 1. @event `beforesorting` - Triggered when sorting just starts. Nothing has happened yet. This can be triggered from a column or from the source. If the type is from rows, the column will be undefined.
- * 2. @method `updateColumnSorting` - Updates the column sorting icon on the grid and the column itself, but the data remains untouched.
- * 3. @event `beforesortingapply` - Triggered before the sorting data is applied to the data source. You can prevent this event, and the data will not be sorted. This event is only called from a column sorting click.
- * 4. @event `aftersortingapply` - Triggered after sorting has been applied and completed. This event occurs for both row and column sorting.
- *
- * Note: If you prevent an event, it will not proceed to the subsequent steps.
+ * Plugin for column manual move
  */
-class SortingPlugin extends BasePlugin {
-    runSorting(order, comparison) {
-        var _a;
-        this.sort(order, comparison);
-        (_a = this.sortingPromise) === null || _a === void 0 ? void 0 : _a.call(this);
-        this.sortingPromise = null;
-    }
+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 ColumnMovePlugin extends BasePlugin {
     constructor(revogrid, providers) {
         super(revogrid, providers);
         this.revogrid = revogrid;
-        this.sortingPromise = null;
-        this.postponeSort = debounce((order, comparison) => this.runSorting(order, comparison), 50);
-        const beforeanysource = ({ detail: { type }, }) => {
-            // if sorting was provided - sort data
-            if (!!this.sorting && this.sortingFunc) {
-                const beforeEvent = this.emit('beforesorting', { type });
-                if (beforeEvent.defaultPrevented) {
-                    return;
-                }
-                this.startSorting(this.sorting, this.sortingFunc);
-            }
+        this.providers = providers;
+        this.moveFunc = debounce((e) => this.doMove(e), 5);
+        this.staticDragData = null;
+        this.dragData = null;
+        this.localSubscriptions = {};
+        this.orderUi = new ColumnOrderHandler();
+        revogrid.appendChild(this.orderUi.render());
+        revogrid.classList.add('column-draggable');
+        // Register events
+        this.localSubscriptions['mouseleave'] = {
+            target: document,
+            callback: (e) => this.onMouseOut(e),
         };
-        const aftercolumnsset = ({ detail: { order }, }) => {
-            const columns = this.providers.column.getColumns();
-            const sortingFunc = {};
-            for (let prop in order) {
-                const cmp = this.getComparer(getColumnByProp(columns, prop), order[prop]);
-                sortingFunc[prop] = cmp;
-            }
-            this.runSorting(order, sortingFunc);
+        this.localSubscriptions['mouseup'] = {
+            target: document,
+            callback: (e) => this.onMouseUp(e),
         };
-        const headerclick = (e) => {
-            var _a, _b;
-            if (e.defaultPrevented) {
-                return;
-            }
-            if (!e.detail.column.sortable) {
-                return;
-            }
-            this.headerclick(e.detail.column, e.detail.index, (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.originalEvent) === null || _b === void 0 ? void 0 : _b.shiftKey);
+        this.localSubscriptions['mousemove'] = {
+            target: document,
+            callback: (e) => this.move(e),
         };
-        this.addEventListener('beforeanysource', beforeanysource);
-        this.addEventListener('aftercolumnsset', aftercolumnsset);
-        this.addEventListener('beforeheaderclick', headerclick);
+        this.addEventListener(COLUMN_CLICK, ({ detail }) => this.dragStart(detail));
     }
-    startSorting(order, sortingFunc) {
-        if (!this.sortingPromise) {
-            this.revogrid.jobsBeforeRender.push(new Promise(resolve => {
-                this.sortingPromise = resolve;
-            }));
+    dragStart({ event, data }) {
+        if (event.defaultPrevented) {
+            return;
         }
-        this.postponeSort(order, sortingFunc);
-    }
-    getComparer(column, order) {
-        var _a;
-        const cellCmp = ((_a = column === null || column === void 0 ? void 0 : column.cellCompare) === null || _a === void 0 ? void 0 : _a.bind({ order })) || this.defaultCellCompare;
-        if (order == 'asc') {
-            return cellCmp;
+        const { defaultPrevented } = dispatch(this.revogrid, DRAG_START, data);
+        // check if allowed to drag particulat column
+        if (defaultPrevented) {
+            return;
         }
-        if (order == 'desc') {
-            return this.descCellCompare(cellCmp);
+        this.clearOrder();
+        const { mouseleave, mouseup, mousemove } = this.localSubscriptions;
+        mouseleave.target.addEventListener('mouseleave', mouseleave.callback);
+        mouseup.target.addEventListener('mouseup', mouseup.callback);
+        const dataEl = event.target.closest('revogr-header');
+        const scrollEl = event.target.closest('revogr-viewport-scroll');
+        if (!dataEl || !scrollEl) {
+            return;
         }
-        return undefined;
-    }
-    /**
-     * Apply sorting to data on header click
-     * If additive - add to existing sorting, multiple columns can be sorted
-     */
-    headerclick(column, index, additive) {
-        var _a, _b;
-        let order = this.getNextOrder(column.order);
-        const beforeEvent = this.emit('beforesorting', { column, order, additive });
-        if (beforeEvent.defaultPrevented) {
+        // no grouping drag and no row header column drag
+        if (isColGrouping(data) || data.providers.type === 'rowHeaders') {
             return;
         }
-        order = beforeEvent.detail.order;
-        const newCol = this.providers.column.updateColumnSorting(beforeEvent.detail.column, index, order, additive);
-        // apply sort data
-        const beforeApplyEvent = this.emit('beforesortingapply', {
-            column: newCol,
-            order,
-            additive,
-        });
-        if (beforeApplyEvent.defaultPrevented) {
+        const 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;
         }
-        order = beforeApplyEvent.detail.order;
-        const cmp = this.getComparer(column, order);
-        if (additive && this.sorting) {
-            const sorting = {};
-            const sortingFunc = {};
-            this.sorting = Object.assign(Object.assign({}, this.sorting), sorting);
-            // extend sorting function with new sorting for multiple columns sorting
-            this.sortingFunc = Object.assign(Object.assign({}, this.sortingFunc), sortingFunc);
-            if (column.prop in sorting && size(sorting) > 1 && order === undefined) {
-                delete sorting[column.prop];
-                delete sortingFunc[column.prop];
-            }
-            else {
-                sorting[column.prop] = order;
-                sortingFunc[column.prop] = cmp;
-            }
+        const dragData = (this.dragData = this.getData(this.staticDragData));
+        if (!dragData) {
+            return;
         }
-        else {
-            if (order) {
-                // reset sorting
-                this.sorting = { [column.prop]: order };
-                this.sortingFunc = { [column.prop]: cmp };
-            }
-            else {
-                (_a = this.sorting) === null || _a === void 0 ? true : delete _a[column.prop];
-                (_b = this.sortingFunc) === null || _b === void 0 ? true : delete _b[column.prop];
+        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);
+            // prevent position change if out of bounds
+            if (rgCol.itemIndex >= this.staticDragData.cols.count) {
+                return;
             }
+            this.orderUi.showHandler(rgCol.end + dragData.scrollOffset, dragData.gridRect.width);
         }
-        this.startSorting(this.sorting, this.sortingFunc);
     }
-    /**
-     * Sort items by sorting function
-     * @requires proxyItems applied to row store
-     * @requires source applied to row store
-     *
-     * @param sorting - per column sorting
-     * @param data - this.stores['rgRow'].store.get('source')
-     */
-    sort(sorting, sortingFunc, types = rowTypes) {
-        // if no sorting - reset
-        if (!size(sorting)) {
-            this.sorting = undefined;
-            this.sortingFunc = undefined;
-            for (let type of types) {
-                const storeService = this.providers.data.stores[type];
-                // row data
-                const source = storeService.store.get('source');
-                // row indexes
-                const proxyItems = storeService.store.get('proxyItems');
-                // row indexes
-                const newItemsOrder = storeService.store.get('items'); // recover indexes range(0, source.length)
-                this.providers.dimension.updateSizesPositionByNewDataIndexes(type, newItemsOrder, proxyItems);
-                storeService.setData({ proxyItems: newItemsOrder, source: [...source] });
+    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;
             }
-        }
-        else {
-            // set sorting
-            this.sorting = sorting;
-            this.sortingFunc = sortingFunc;
-            for (let type of types) {
-                const storeService = this.providers.data.stores[type];
-                // row data
-                const source = storeService.store.get('source');
-                // row indexes
-                const proxyItems = storeService.store.get('proxyItems');
-                const newItemsOrder = this.sortIndexByItems([...proxyItems], source, sortingFunc);
-                this.providers.dimension.updateSizesPositionByNewDataIndexes(type, newItemsOrder, proxyItems);
-                storeService.setData({
-                    proxyItems: newItemsOrder,
-                    source: [...source],
-                });
+            const newPosition = getItemByPosition(this.staticDragData.cols, relativePos);
+            const store = this.providers.column.stores[this.dragData.type].store;
+            const newItems = [...store.get('items')];
+            // prevent position change if needed
+            const { defaultPrevented: stopDrag } = dispatch(this.revogrid, BEFORE_DRAG_END, Object.assign(Object.assign({}, this.staticDragData), { startPosition: this.staticDragData.startItem, newPosition, newItem: store.get('source')[newItems[this.staticDragData.startItem.itemIndex]] }));
+            if (!stopDrag) {
+                const prevItems = [...newItems];
+                // todo: if move item out of group remove item from group
+                const toMove = newItems.splice(this.staticDragData.startItem.itemIndex, 1);
+                newItems.splice(newPosition.itemIndex, 0, ...toMove);
+                store.set('items', newItems);
+                this.providers.dimension.updateSizesPositionByNewDataIndexes(this.dragData.type, newItems, prevItems);
             }
+            dispatch(this.revogrid, DRAG_END, this.dragData);
         }
-        this.emit('aftersortingapply');
+        this.clearOrder();
     }
-    defaultCellCompare(prop, a, b) {
-        var _a, _b;
-        const av = (_a = a === null || a === void 0 ? void 0 : a[prop]) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
-        const bv = (_b = b === null || b === void 0 ? void 0 : b[prop]) === null || _b === void 0 ? void 0 : _b.toString().toLowerCase();
-        return av == bv ? 0 : av > bv ? 1 : -1;
+    clearLocalSubscriptions() {
+        forEach(this.localSubscriptions, ({ target, callback }, key) => target.removeEventListener(key, callback));
     }
-    descCellCompare(cmp) {
-        return (prop, a, b) => {
-            return -1 * cmp(prop, a, b);
-        };
+    clearOrder() {
+        this.staticDragData = null;
+        this.dragData = null;
+        this.clearLocalSubscriptions();
+        this.orderUi.stop(this.revogrid);
     }
-    sortIndexByItems(indexes, source, sortingFunc = {}) {
-        // if no sorting - return unsorted indexes
-        if (Object.entries(sortingFunc).length === 0) {
-            // Unsorted indexes
-            return [...Array(indexes.length).keys()];
-        }
-        //
-        /**
-         * go through all indexes and align in new order
-         * performs a multi-level sorting by applying multiple comparison functions to determine the order of the items based on different properties.
-         */
-        return indexes.sort((a, b) => {
-            for (const [prop, cmp] of Object.entries(sortingFunc)) {
-                const itemA = source[a];
-                const itemB = source[b];
-                /**
-                 * If the comparison function returns a non-zero value (sorted), it means that the items should be sorted based on the given property. In such a case, the function immediately returns the sorted value, indicating the order in which the items should be arranged.
-                 * If none of the comparison functions result in a non-zero value, indicating that the items are equal or should remain in the same order, the function eventually returns 0.
-                 */
-                const sorted = cmp === null || cmp === void 0 ? void 0 : cmp(prop, itemA, itemB);
-                if (sorted) {
-                    return sorted;
-                }
-            }
-            return 0;
-        });
+    /**
+     * Clearing subscription
+     */
+    clearSubscriptions() {
+        super.clearSubscriptions();
+        this.clearLocalSubscriptions();
     }
-    getNextOrder(currentOrder) {
-        switch (currentOrder) {
-            case undefined:
-                return 'asc';
-            case 'asc':
-                return 'desc';
-            case 'desc':
-                return undefined;
-        }
+    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;
+}
 
 class ColumnDataProvider {
     get order() {
@@ -2504,8 +2641,8 @@ class ColumnDataProvider {
             return sources;
         }, {});
     }
-    column(c, pin) {
-        return this.getColumn(c, pin || 'rgCol');
+    column(c, type = 'rgCol') {
+        return this.getColumn(c, type);
     }
     getColumn(virtualIndex, type) {
         return getSourceItem(this.dataSources[type].store, virtualIndex);
@@ -2537,6 +2674,9 @@ class ColumnDataProvider {
     refreshByType(type) {
         this.dataSources[type].refresh();
     }
+    /**
+     * Main method to set columns
+     */
     setColumns(data) {
         columnTypes.forEach(k => {
             // set columns data
@@ -2631,6 +2771,8 @@ class ColumnDataProvider {
 
 /**
  * Data source provider
+ *
+ * @dependsOn DimensionProvider
  */
 class DataProvider {
     constructor(dimensionProvider) {
@@ -2653,13 +2795,22 @@ class DataProvider {
         return getSourceItem(store, virtualIndex);
     }
     changeOrder({ rowType = 'rgRow', from, to }) {
-        const service = this.stores[rowType];
-        const items = [...service.store.get('items')];
-        const prevItems = [...items];
-        const toMove = items.splice(from, 1);
-        items.splice(to, 0, ...toMove);
-        this.dimensionProvider.updateSizesPositionByNewDataIndexes(rowType, items, prevItems);
-        service.setData({ items });
+        const storeService = this.stores[rowType];
+        // take currently visible row indexes
+        const newItemsOrder = [...storeService.store.get('proxyItems')];
+        const prevItems = storeService.store.get('items');
+        // take out
+        const toMove = newItemsOrder.splice(newItemsOrder.indexOf(prevItems[from]), // get index in proxy
+        1);
+        // insert before
+        newItemsOrder.splice(newItemsOrder.indexOf(prevItems[to]), // get index in proxy
+        0, ...toMove);
+        storeService.setData({
+            proxyItems: newItemsOrder,
+        });
+        // take currently visible row indexes
+        const newItems = storeService.store.get('items');
+        this.dimensionProvider.updateSizesPositionByNewDataIndexes(rowType, newItems, prevItems);
     }
     setCellData({ type, rowIndex, prop, val }, mutate = true) {
         const model = this.getModel(rowIndex, type);
@@ -2705,6 +2856,8 @@ class DataProvider {
 /**
  * Dimension provider
  * Stores dimension information and custom sizes
+ *
+ * @dependsOn ViewportProvider
  */
 class DimensionProvider {
     constructor(viewports, config) {
@@ -2740,7 +2893,11 @@ class DimensionProvider {
             newSizes = Object.assign(Object.assign({}, oldSizes), sizes);
         }
         this.stores[type].setDimensionSize(newSizes);
-        this.updateViewport(type, true);
+        this.setViewPortCoordinate({
+            coordinate: this.viewports.stores[type].lastCoordinate,
+            type,
+            force: true,
+        });
     }
     setItemCount(realCount, type) {
         this.viewports.stores[type].setViewport({ realCount });
@@ -2755,10 +2912,14 @@ class DimensionProvider {
         const allTrimmed = gatherTrimmedItems(trimmed);
         const dimStoreType = this.stores[type];
         dimStoreType.setStore({ trimmed: allTrimmed });
-        this.updateViewport(type, true);
+        this.setViewPortCoordinate({
+            coordinate: this.viewports.stores[type].lastCoordinate,
+            type,
+            force: true,
+        });
     }
     /**
-     * Sets dimension data and view port coordinate
+     * Sets dimension data and viewport coordinate
      * @param itemCount
      * @param type - dimension type
      * @param noVirtual - disable virtual data
@@ -2772,18 +2933,23 @@ class DimensionProvider {
                 virtualSize: dimension.realSize,
             });
         }
-        this.updateViewport(type);
+        this.setViewPortCoordinate({
+            coordinate: this.viewports.stores[type].lastCoordinate,
+            type,
+        });
     }
     /**
      * Applies new columns to the dimension provider
      * @param columns - new columns data
      * @param disableVirtualX - disable virtual data for X axis
      */
-    applyNewColumns(columns, disableVirtualX) {
+    applyNewColumns(columns, disableVirtualX, keepOld = false) {
         // Apply new columns to dimension provider
         for (let type of columnTypes) {
-            // Clear existing data in the dimension provider
-            this.stores[type].drop();
+            if (!keepOld) {
+                // Clear existing data in the dimension provider
+                this.stores[type].drop();
+            }
             // Get the new columns for the current type
             const items = columns[type];
             // Determine if virtual data should be disabled for the current type
@@ -2810,6 +2976,10 @@ class DimensionProvider {
             });
         }
     }
+    /**
+     * Gets the full size of the grid by summing up the sizes of all dimensions
+     * Goes through all dimensions columnTypes (x) and rowTypes (y) and sums up their sizes
+     */
     getFullSize() {
         var _a, _b;
         let x = 0;
@@ -2822,13 +2992,6 @@ class DimensionProvider {
         }
         return { y, x };
     }
-    updateViewport(type, force = false) {
-        this.setViewPortCoordinate({
-            coordinate: this.viewports.stores[type].lastCoordinate,
-            type,
-            force,
-        });
-    }
     setViewPortCoordinate({ coordinate, type, force = false, }) {
         const dimension = this.stores[type].getCurrentState();
         this.viewports.stores[type].setViewPortCoordinate(coordinate, dimension, force);
@@ -2854,25 +3017,12 @@ class DimensionProvider {
     }
     updateSizesPositionByNewDataIndexes(type, newItemsOrder, prevItemsOrder = []) {
         // Move custom sizes to new order
-        const dimService = this.stores[type];
-        const customSizes = Object.assign({}, dimService.store.get('sizes'));
-        if (Object.keys(customSizes).length) {
-            const originalIndices = new Map();
-            prevItemsOrder.forEach((value, index) => {
-                originalIndices.set(value, index);
-            });
-            const newSizes = {};
-            newItemsOrder.forEach((value, newIndex) => {
-                const originalIndex = originalIndices.get(value);
-                if (originalIndex !== newIndex && customSizes[originalIndex]) {
-                    newSizes[newIndex] = customSizes[originalIndex];
-                    delete customSizes[originalIndex];
-                }
-            });
-            if (Object.keys(newSizes).length) {
-                this.setCustomSizes(type, Object.assign(Object.assign({}, customSizes), newSizes));
-            }
-        }
+        this.stores[type].updateSizesPositionByIndexes(newItemsOrder, prevItemsOrder);
+        this.setViewPortCoordinate({
+            coordinate: this.viewports.stores[type].lastCoordinate,
+            type,
+            force: true,
+        });
     }
 }
 
@@ -2949,15 +3099,15 @@ class ViewportService {
             if (val === 'rgCol') {
                 column.onResizeviewport = (e) => {
                     var _a;
-                    if (config.disableVirtualY && e.detail.dimension === 'rgRow') {
-                        return;
-                    }
-                    else if (config.disableVirtualX && e.detail.dimension === 'rgCol') {
-                        return;
+                    const vpState = {
+                        clientSize: e.detail.size,
+                    };
+                    // virtual size will be handled by dimension provider if disabled
+                    if ((e.detail.dimension === 'rgRow' && !config.disableVirtualY)
+                        || (e.detail.dimension === 'rgCol' && !config.disableVirtualX)) {
+                        vpState.virtualSize = e.detail.size;
                     }
-                    (_a = config.viewportProvider) === null || _a === void 0 ? void 0 : _a.setViewport(e.detail.dimension, {
-                        virtualSize: e.detail.size,
-                    });
+                    (_a = config.viewportProvider) === null || _a === void 0 ? void 0 : _a.setViewport(e.detail.dimension, vpState);
                 };
             }
             const colData = gatherColumnData(column);
@@ -2969,7 +3119,7 @@ class ViewportService {
                 segmentSelection.setLastCell(rgRow.lastCell);
                 // register selection store for Row
                 const rowSelectionStore = this.registerRow(rgRow.position.y, rgRow.type);
-                const rowDef = Object.assign(Object.assign({ colType: val }, rgRow), { rowSelectionStore, segmentSelectionStore: segmentSelection.store, ref: (e) => config.selectionStoreConnector.registerSection(e), onSetrange: e => {
+                const rowDef = Object.assign(Object.assign({ colType: val }, rgRow), { rowSelectionStore, selectionStore: segmentSelection.store, ref: (e) => config.selectionStoreConnector.registerSection(e), onSetrange: e => {
                         segmentSelection.setRangeArea(e.detail);
                     }, onSettemprange: e => segmentSelection.setTempArea(e.detail), onFocuscell: e => {
                         // todo: multi focus
@@ -3356,7 +3506,85 @@ 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:32px;line-height:32px;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:30px;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}";
+/**
+ * Plugin service
+ * Manages plugins
+ */
+class PluginService {
+    constructor() {
+        /**
+         * Plugins
+         * Define plugins collection
+         */
+        this.internalPlugins = [];
+    }
+    /**
+     * Get all plugins
+     */
+    get() {
+        return [...this.internalPlugins];
+    }
+    /**
+     * Add plugin to collection
+     */
+    add(plugin) {
+        this.internalPlugins.push(plugin);
+    }
+    /**
+     * Add user plugins and create
+     */
+    addUserPluginsAndCreate(element, plugins = [], prevPlugins, pluginData) {
+        if (!pluginData) {
+            return;
+        }
+        // Step 1: Identify plugins to remove, compare new and old plugins
+        const pluginsToRemove = (prevPlugins === null || prevPlugins === void 0 ? void 0 : prevPlugins.filter(prevPlugin => !plugins.some(userPlugin => userPlugin === prevPlugin))) || [];
+        // Step 2: Remove old plugins
+        pluginsToRemove.forEach(plugin => {
+            var _a, _b;
+            const index = this.internalPlugins.findIndex(createdPlugin => createdPlugin instanceof plugin);
+            if (index !== -1) {
+                (_b = (_a = this.internalPlugins[index]).destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+                this.internalPlugins.splice(index, 1); // Remove the plugin
+            }
+        });
+        // Step 3: Register user plugins
+        plugins === null || plugins === void 0 ? void 0 : plugins.forEach(userPlugin => {
+            // check if plugin already exists, if so, skip
+            const existingPlugin = this.internalPlugins.find(createdPlugin => createdPlugin instanceof userPlugin);
+            if (existingPlugin) {
+                return;
+            }
+            this.add(new userPlugin(element, pluginData));
+        });
+    }
+    /**
+     * Get plugin by class
+     */
+    getByClass(pluginClass) {
+        return this.internalPlugins.find(p => p instanceof pluginClass);
+    }
+    /**
+     * Remove plugin
+     */
+    remove(plugin) {
+        var _a, _b;
+        const index = this.internalPlugins.indexOf(plugin);
+        if (index > -1) {
+            (_b = (_a = this.internalPlugins[index]).destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.internalPlugins.splice(index, 1);
+        }
+    }
+    /**
+     * Remove all plugins
+     */
+    destroy() {
+        this.internalPlugins.forEach(p => { var _a; return (_a = p.destroy) === null || _a === void 0 ? void 0 : _a.call(p); });
+        this.internalPlugins = [];
+    }
+}
+
+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:#4545ff;height:32px;line-height:32px;padding:0 15px;outline:0;border:0;border-radius:7px;box-sizing:border-box;cursor:pointer}.revo-button.green{background-color:#009037}.revo-button.red{background-color:#E0662E}.revo-button:disabled,.revo-button[disabled]{cursor:not-allowed !important;filter:opacity(0.35) !important}.revo-button.outline{border:1px solid #dbdbdb;line-height:30px;background:none;color:#000;box-shadow:none}revo-grid[theme^=dark] .revo-button.outline{border:1px solid #404040;color:#d8d8d8}revo-grid[theme=default],revo-grid:not([theme]){border:1px solid #cecece;font-size:12px}revo-grid[theme=default] .rowHeaders revogr-header,revo-grid:not([theme]) .rowHeaders revogr-header{box-shadow:-1px 0 0 0 #cecece inset}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;bottom:0;left:0;right:0;z-index:1000;width:0;height:0;border-left:4px solid rgba(38, 106, 232, 0.9);border-bottom:4px solid rgba(38, 106, 232, 0.9);border-top:4px solid transparent;border-right:4px solid transparent;cursor:pointer}revo-grid .attribution .value{position:absolute;bottom: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 {
@@ -3371,8 +3599,9 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         this.beforerange = createEvent(this, "beforerange", 7);
         this.afterfocus = createEvent(this, "afterfocus", 7);
         this.roworderchanged = createEvent(this, "roworderchanged", 7);
-        this.beforesortingapply = createEvent(this, "beforesortingapply", 7);
         this.beforesorting = createEvent(this, "beforesorting", 7);
+        this.beforesourcesortingapply = createEvent(this, "beforesourcesortingapply", 7);
+        this.beforesortingapply = createEvent(this, "beforesortingapply", 7);
         this.rowdragstart = createEvent(this, "rowdragstart", 7);
         this.headerclick = createEvent(this, "headerclick", 7);
         this.beforecellfocus = createEvent(this, "beforecellfocus", 7);
@@ -3394,20 +3623,18 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         this.aftercolumnresize = createEvent(this, "aftercolumnresize", 7);
         this.beforerowdefinition = createEvent(this, "beforerowdefinition", 7);
         this.filterconfigchanged = createEvent(this, "filterconfigchanged", 7);
+        this.sortingconfigchanged = createEvent(this, "sortingconfigchanged", 7);
         this.rowheaderschanged = createEvent(this, "rowheaderschanged", 7);
         this.beforegridrender = createEvent(this, "beforegridrender", 7);
         this.aftergridrender = createEvent(this, "aftergridrender", 7);
         this.aftergridinit = createEvent(this, "aftergridinit", 7);
         this.additionaldatachanged = createEvent(this, "additionaldatachanged", 7);
         this.afterthemechanged = createEvent(this, "afterthemechanged", 7);
+        this.created = createEvent(this, "created", 7);
         this.extraElements = [];
+        this.pluginService = new PluginService();
         this.viewport = null;
         this.isInited = false;
-        /**
-         * Plugins
-         * Define plugins collection
-         */
-        this.internalPlugins = [];
         this.rowHeaders = undefined;
         this.frameSize = 1;
         this.rowSize = 0;
@@ -3430,6 +3657,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         this.rowClass = '';
         this.autoSizeColumn = false;
         this.filter = false;
+        this.sorting = undefined;
         this.focusTemplate = undefined;
         this.canMoveColumns = false;
         this.trimmedRows = {};
@@ -3457,15 +3685,31 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         this.dataProvider.refresh(type);
     }
     /**
-     * Sets data at specified cell.
+     * Refreshes data at specified cell.
      * Useful for performance optimization.
      * No viewport update will be triggered.
+     *
+     * @example
+     * const grid = document.querySelector('revo-grid');
+     * grid.setDataAt({ row: 0, col: 0, val: 'test' }); // refresh
      */
-    async setDataAt(data) {
-        const dataElement = this.element.querySelector(`revogr-data[type="${data.rowType}"][col-type="${data.colType}"]`);
+    async setDataAt({ row, col, colType = 'rgCol', rowType = 'rgRow', val, skipDataUpdate = false }) {
+        var _a;
+        if (this.dataProvider && this.columnProvider && !skipDataUpdate) {
+            const columnProp = (_a = this.columnProvider.getColumn(col, colType)) === null || _a === void 0 ? void 0 : _a.prop;
+            if (typeof columnProp !== 'undefined') {
+                this.dataProvider.setCellData({
+                    type: rowType,
+                    rowIndex: row,
+                    prop: columnProp,
+                    val,
+                }, false);
+            }
+        }
+        const dataElement = this.element.querySelector(`revogr-data[type="${rowType}"][col-type="${colType}"]`);
         return dataElement === null || dataElement === void 0 ? void 0 : dataElement.updateCell({
-            row: data.row,
-            col: data.col,
+            row,
+            col,
         });
     }
     /**
@@ -3633,19 +3877,19 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
      * Clear current grid focus. Grid has no longer focus on it.
      */
     async clearFocus() {
-        var _a;
+        var _a, _b;
         const focused = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getFocused();
         const event = this.beforefocuslost.emit(focused);
         if (event.defaultPrevented) {
             return;
         }
-        this.selectionStoreConnector.clearAll();
+        (_b = this.selectionStoreConnector) === null || _b === void 0 ? void 0 : _b.clearAll();
     }
     /**
      * Get all active plugins instances
      */
     async getPlugins() {
-        return [...this.internalPlugins];
+        return this.pluginService.get();
     }
     /**
      * Get the currently focused cell.
@@ -3672,6 +3916,15 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         var _a, _b;
         return (_b = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getSelectedRange()) !== null && _b !== void 0 ? _b : null;
     }
+    /**
+     * Refresh extra elements. Triggers re-rendering of extra elements and functions.
+     * Part of extraElements and registerVNode methods.
+     * Useful for plugins.
+     */
+    async refreshExtraElements() {
+        var _a;
+        (_a = this.extraService) === null || _a === void 0 ? void 0 : _a.refresh();
+    }
     mousedownHandle(event) {
         const screenX = getPropertyFromEvent(event, 'screenX');
         const screenY = getPropertyFromEvent(event, 'screenY');
@@ -3800,7 +4053,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         // Column format change will trigger column structure update
         this.columnChanged(this.columns);
     }
-    columnChanged(newVal = []) {
+    columnChanged(newVal = [], _prevVal = undefined, __watchName = 'columns', init = false) {
         if (!this.dimensionProvider || !this.columnProvider) {
             return;
         }
@@ -3809,7 +4062,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         if (beforeSetEvent.defaultPrevented) {
             return;
         }
-        this.dimensionProvider.applyNewColumns(beforeSetEvent.detail.columns, this.disableVirtualX);
+        this.dimensionProvider.applyNewColumns(beforeSetEvent.detail.columns, this.disableVirtualX, init);
         const beforeApplyEvent = this.beforecolumnapplied.emit(columnGather);
         if (beforeApplyEvent.defaultPrevented) {
             return;
@@ -3865,7 +4118,9 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
                 break;
             case 'source':
                 type = 'rgRow';
-                /** applied for source only for cross compatability between plugins */
+                /**
+                 * Applied for source only for cross compatability between plugins
+                 */
                 const beforesourceset = this.beforesourceset.emit({
                     type,
                     source: newVal,
@@ -3879,7 +4134,9 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         });
         const newSource = [...beforesourceset.detail.source];
         this.dataProvider.setData(newSource, type, this.disableVirtualY);
-        /** applied for source only for cross compatability between plugins */
+        /**
+         * Applied for source only for cross compatability between plugins
+         */
         if (watchName === 'source') {
             this.aftersourceset.emit({
                 type,
@@ -3938,15 +4195,8 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
      * Grouping
      */
     groupingChanged(newVal = {}) {
-        let grPlugin;
-        for (let p of this.internalPlugins) {
-            const isGrouping = p;
-            if (!!isGrouping.setGrouping) {
-                grPlugin = isGrouping;
-                break;
-            }
-        }
-        grPlugin === null || grPlugin === void 0 ? void 0 : grPlugin.setGrouping(newVal || {});
+        var _a;
+        (_a = this.pluginService.getByClass(GroupingRowPlugin)) === null || _a === void 0 ? void 0 : _a.setGrouping(newVal || {});
     }
     /**
      * Stretch Plugin Apply
@@ -3958,30 +4208,29 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         if (isStretch === 'false') {
             isStretch = false;
         }
-        let stretch = this.internalPlugins.filter(p => isStretchPlugin(p))[0];
+        const pluginData = this.getPluginData();
+        if (!pluginData) {
+            return;
+        }
+        const stretch = this.pluginService.getByClass(StretchColumn);
         if ((typeof isStretch === 'boolean' && isStretch) || isStretch === 'true') {
             if (!stretch) {
-                const pluginData = {
-                    data: this.dataProvider,
-                    column: this.columnProvider,
-                    dimension: this.dimensionProvider,
-                    viewport: this.viewportProvider,
-                    selection: this.selectionStoreConnector,
-                };
-                this.internalPlugins.push(new StretchColumn(this.element, pluginData));
+                this.pluginService.add(new StretchColumn(this.element, pluginData));
             }
             else if (isStretchPlugin(stretch)) {
                 stretch.applyStretch(this.columnProvider.getRawColumns());
             }
         }
         else if (stretch) {
-            const index = this.internalPlugins.indexOf(stretch);
-            this.internalPlugins.splice(index, 1);
+            this.pluginService.remove(stretch);
         }
     }
     applyFilter(cfg) {
         this.filterconfigchanged.emit(cfg);
     }
+    applySorting(cfg) {
+        this.sortingconfigchanged.emit(cfg);
+    }
     rowHeadersChange(rowHeaders) {
         this.rowheaderschanged.emit(rowHeaders);
     }
@@ -3989,26 +4238,16 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
      * Register external VNodes
      */
     registerOutsideVNodes(elements = []) {
-        this.extraElements = [...this.extraElements, ...elements];
+        this.extraElements = elements;
     }
     additionalDataChanged(data) {
         this.additionaldatachanged.emit(data);
     }
-    pluginsChanged(plugins = [], _prevPlugins) {
-        // pass data provider to plugins
-        const pluginData = this.getPluginData();
-        if (!pluginData) {
-            return;
-        }
-        // todo: remove old plugins if any was removed based on _prevPlugins
-        // register user plugins
-        plugins === null || plugins === void 0 ? void 0 : plugins.forEach(userPlugin => {
-            const existingPlugin = this.internalPlugins.find(createdPlugin => createdPlugin instanceof userPlugin);
-            if (existingPlugin) {
-                return;
-            }
-            this.internalPlugins.push(new userPlugin(this.element, pluginData));
-        });
+    /**
+     * User can add plugins via plugins property
+     */
+    pluginsChanged(plugins = [], prevPlugins) {
+        this.pluginService.addUserPluginsAndCreate(this.element, plugins, prevPlugins, this.getPluginData());
     }
     // #endregion
     // #region Plugins
@@ -4020,35 +4259,39 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         if (!pluginData) {
             return;
         }
+        // register system plugins
+        this.setCorePlugins(pluginData);
+        // register user plugins
+        this.pluginsChanged(this.plugins);
+    }
+    setCorePlugins(pluginData) {
         if (this.accessible) {
-            this.internalPlugins.push(new WCAGPlugin(this.element, pluginData));
+            this.pluginService.add(new WCAGPlugin(this.element, pluginData));
         }
         // register auto size plugin
         if (this.autoSizeColumn) {
-            this.internalPlugins.push(new AutoSizeColumnPlugin(this.element, pluginData, typeof this.autoSizeColumn === 'object'
+            this.pluginService.add(new AutoSizeColumnPlugin(this.element, pluginData, typeof this.autoSizeColumn === 'object'
                 ? this.autoSizeColumn
                 : undefined));
         }
         // register filter plugin
         if (this.filter) {
-            this.internalPlugins.push(new FilterPlugin(this.element, pluginData, typeof this.filter === 'object' ? this.filter : undefined));
+            this.pluginService.add(new FilterPlugin(this.element, pluginData, typeof this.filter === 'object' ? this.filter : undefined));
         }
         // register export plugin
         if (this.exporting) {
-            this.internalPlugins.push(new ExportFilePlugin(this.element, pluginData));
+            this.pluginService.add(new ExportFilePlugin(this.element, pluginData));
         }
         // register sorting plugin
-        this.internalPlugins.push(new SortingPlugin(this.element, pluginData));
+        this.pluginService.add(new SortingPlugin(this.element, pluginData));
         // register grouping plugin
-        this.internalPlugins.push(new GroupingRowPlugin(this.element, pluginData));
+        this.pluginService.add(new GroupingRowPlugin(this.element, pluginData));
         if (this.canMoveColumns) {
-            this.internalPlugins.push(new ColumnPlugin(this.element, pluginData));
+            this.pluginService.add(new ColumnMovePlugin(this.element, pluginData));
         }
-        // register user plugins
-        this.pluginsChanged(this.plugins);
     }
     getPluginData() {
-        if (!this.dimensionProvider || !this.dataProvider || !this.columnProvider || !this.viewportProvider) {
+        if (!this.dimensionProvider || !this.dataProvider || !this.columnProvider || !this.viewportProvider || !this.selectionStoreConnector) {
             return;
         }
         // pass data provider to plugins
@@ -4058,12 +4301,12 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
             dimension: this.dimensionProvider,
             viewport: this.viewportProvider,
             selection: this.selectionStoreConnector,
+            plugins: this.pluginService,
         };
         return pluginData;
     }
     removePlugins() {
-        this.internalPlugins.forEach(p => { var _a; return (_a = p.destroy) === null || _a === void 0 ? void 0 : _a.call(p); });
-        this.internalPlugins = [];
+        this.pluginService.destroy();
     }
     // #endregion
     // if reconnect to dom we need to set up plugins
@@ -4071,6 +4314,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         if (this.isInited) {
             this.setPlugins();
         }
+        this.created.emit();
     }
     /**
      * Called once just after the component is first connected to the DOM.
@@ -4098,7 +4342,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         // set data
         this.applyStretch(this.stretch);
         this.themeChanged(this.theme, undefined, undefined, true);
-        this.columnChanged(this.columns);
+        this.columnChanged(this.columns, undefined, undefined, true);
         this.dataSourceChanged(this.source, undefined, 'source');
         this.dataSourceChanged(this.pinnedTopSource, undefined, 'pinnedTopSource');
         this.dataSourceChanged(this.pinnedBottomSource, undefined, 'pinnedBottomSource');
@@ -4106,7 +4350,10 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
             this.trimmedRowsChanged(this.trimmedRows);
         }
         this.rowDefChanged(this.rowDefinitions);
-        this.groupingChanged(this.grouping);
+        // init grouping
+        if (this.grouping && Object.keys(this.grouping).length > 0) {
+            this.groupingChanged(this.grouping);
+        }
         // init scrolling service
         this.scrollingService = new GridScrollingService((e) => {
             var _a;
@@ -4131,7 +4378,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         this.aftergridrender.emit();
     }
     render() {
-        if (!this.dimensionProvider || !this.dataProvider || !this.columnProvider || !this.viewportProvider) {
+        if (!this.dimensionProvider || !this.dataProvider || !this.columnProvider || !this.viewportProvider || !this.selectionStoreConnector) {
             return;
         }
         const contentHeight = this.dimensionProvider.stores['rgRow'].store.get('realSize');
@@ -4174,12 +4421,13 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
                 const key = `${data.type}_${view.type}`;
-                const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { isMobileDevice: isMobile, selectionStore: data.segmentSelectionStore, onSelectall: () => this.selectionStoreConnector.selectAll(), editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => this.selectionStoreConnector.beforeNextFocusCell(e.detail), onCanceledit: () => this.selectionStoreConnector.setEdit(false), onSetedit: ({ detail }) => {
+                const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: ({ detail }) => {
+                        var _a;
                         const event = this.beforeeditstart.emit(detail);
                         if (!event.defaultPrevented) {
-                            this.selectionStoreConnector.setEdit(detail.val);
+                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(detail.val);
                         }
-                    } }), h("revogr-data", Object.assign({}, data, { colType: view.type, key: key, readonly: this.readonly, range: this.range, rowClass: this.rowClass, rowSelectionStore: data.rowSelectionStore, additionalData: this.additionalData, jobsBeforeRender: this.jobsBeforeRender, slot: DATA_SLOT }), h("slot", { name: `data-${view.type}-${data.type}` })), h("revogr-temp-range", { selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }), h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, focusTemplate: this.focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }, h("slot", { name: `focus-${view.type}-${data.type}` }))));
+                    } }), h("revogr-data", Object.assign({}, data, { colType: view.type, key: key, readonly: this.readonly, range: this.range, rowClass: this.rowClass, rowSelectionStore: data.rowSelectionStore, additionalData: this.additionalData, jobsBeforeRender: this.jobsBeforeRender, slot: DATA_SLOT }), h("slot", { name: `data-${view.type}-${data.type}` })), h("revogr-temp-range", { selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }), h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, focusTemplate: this.focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }, h("slot", { name: `focus-${view.type}-${data.type}` }))));
                 dataViews.push(dataView);
             });
             // Add viewport scroll in the end
@@ -4191,15 +4439,16 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         const typeCol = 'rgCol';
         const viewports = this.viewportProvider.stores;
         const dimensions = this.dimensionProvider.stores;
-        return (h(Host, null, this.hideAttribution ? null : (h("revogr-attribution", { class: "attribution" })), h("div", { class: "main-viewport", onClick: (e) => {
+        return (h(Host, null, this.hideAttribution ? null : (h("revogr-attribution", { class: "attribution" })), h("slot", { name: "header" }), h("div", { class: "main-viewport", onClick: (e) => {
                 var _a;
                 if (e.currentTarget === e.target) {
                     (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.clearEdit();
                 }
-            } }, h("div", { class: "viewports" }, h("slot", { name: "viewport" }), viewportSections, h("revogr-scroll-virtual", { class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), h(OrderRenderer, { ref: e => (this.orderService = e) }))), h("revogr-scroll-virtual", { class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), h("revogr-extra", { nodes: this.extraElements })));
+            } }, h("div", { class: "viewports" }, h("slot", { name: "viewport" }), viewportSections, h("revogr-scroll-virtual", { class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), h(OrderRenderer, { ref: e => (this.orderService = e) }))), h("revogr-scroll-virtual", { class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), h("revogr-extra", { ref: el => (this.extraService = el), nodes: this.extraElements }), h("slot", { name: "footer" })));
     }
     disconnectedCallback() {
-        // Remove all plugins, to avoid memory leaks and unexpected behaviour when the component is removed
+        // Remove all plugins, to avoid memory leaks
+        // and unexpected behaviour when the component is removed
         this.removePlugins();
     }
     get element() { return this; }
@@ -4218,6 +4467,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         "grouping": ["groupingChanged"],
         "stretch": ["applyStretch"],
         "filter": ["applyFilter"],
+        "sorting": ["applySorting"],
         "rowHeaders": ["rowHeadersChange"],
         "registerVNode": ["registerOutsideVNodes"],
         "additionalData": ["additionalDataChanged"],
@@ -4247,6 +4497,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         "rowClass": [513, "row-class"],
         "autoSizeColumn": [4, "auto-size-column"],
         "filter": [4],
+        "sorting": [16],
         "focusTemplate": [16],
         "canMoveColumns": [4, "can-move-columns"],
         "trimmedRows": [16],
@@ -4281,7 +4532,8 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         "getPlugins": [64],
         "getFocused": [64],
         "getContentSize": [64],
-        "getSelectedRange": [64]
+        "getSelectedRange": [64],
+        "refreshExtraElements": [64]
     }, [[5, "touchstart", "mousedownHandle"], [5, "mousedown", "mousedownHandle"], [5, "touchend", "mouseupHandle"], [5, "mouseup", "mouseupHandle"], [0, "rowdragstartinit", "onRowDragStarted"], [0, "rowdragendinit", "onRowDragEnd"], [0, "roworderchange", "onRowOrderChange"], [0, "rowdragmoveinit", "onRowDrag"], [0, "rowdragmousemove", "onRowMouseMove"], [0, "celleditapply", "onCellEdit"], [0, "rangeeditapply", "onRangeEdit"], [0, "selectionchangeinit", "onRangeChanged"], [0, "rowdropinit", "onRowDropped"], [0, "beforeheaderclick", "onHeaderClick"], [0, "beforecellfocusinit", "onCellFocus"]], {
         "columnTypes": ["columnTypesChanged"],
         "columns": ["columnChanged"],
@@ -4297,6 +4549,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         "grouping": ["groupingChanged"],
         "stretch": ["applyStretch"],
         "filter": ["applyFilter"],
+        "sorting": ["applySorting"],
         "rowHeaders": ["rowHeadersChange"],
         "registerVNode": ["registerOutsideVNodes"],
         "additionalData": ["additionalDataChanged"],
@@ -4389,6 +4642,6 @@ function defineCustomElement$1() {
 const RevoGrid = RevoGridComponent;
 const defineCustomElement = defineCustomElement$1;
 
-export { BasePlugin as B, DimensionStore as D, FILTER_TRIMMED_TYPE as F, RevoGrid, isStretchPlugin as a, FILTER_CONFIG_CHANGED_EVENT as b, columnTypes as c, FILTE_PANEL as d, defineCustomElement, FilterPlugin as e, filterCoreFunctionsIndexedByType as f, getTheme as g, filterTypes as h, isRowType as i, filterNames as j, getLeftRelative as k, rowTypes as r };
+export { AutoSizeColumnPlugin as A, BasePlugin as B, ColumnMovePlugin as C, DimensionStore as D, ExportFilePlugin as E, FILTER_TRIMMED_TYPE as F, GroupingRowPlugin as G, RevoGrid, StretchColumn as S, isStretchPlugin as a, ExportCsv as b, columnTypes as c, FILTER_CONFIG_CHANGED_EVENT as d, defineCustomElement, FILTE_PANEL as e, FilterPlugin as f, getTheme as g, filterCoreFunctionsIndexedByType as h, isRowType as i, filterTypes as j, filterNames as k, getLeftRelative as l, SortingPlugin as m, rowTypes as r };
 
 //# sourceMappingURL=revo-grid.js.map