@revolist/revogrid 4.9.41 → 4.9.42

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

@@ -2,15 +2,15 @@
  * Built by Revolist OU ❤️
  */
 import { h, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-a61f225b.js';
-import { G as isGrouping, J as GROUP_EXPANDED, K as getParsedGroup, L as isSameGroup, M as GROUP_DEPTH, P as PSEUDO_GROUP_ITEM_VALUE, N as PSEUDO_GROUP_ITEM_ID, O as GROUPING_ROW_TYPE, g as getPhysical, e as setItems, Q as PSEUDO_GROUP_COLUMN, R as GROUP_EXPAND_EVENT, T as gatherGrouping, U as isGroupingColumn, B as isArray, V as baseProperty, W as isArrayLike, X as getTag, Y as baseKeys, y as getColumnByProp, D as DataStore, b as getSourceItem, A as reduce, f as getSourceItemVirtualIndexByProp, d as setSourceByPhysicalIndex, s as setSourceByVirtualIndex, r as getColumnType, a as getVisibleSourceItem, h as gatherTrimmedItems, u as getColumnSizes, Z as EMPTY_INDEX, w as getColumns, _ as SelectionStoreConnector } from './column.service-751345b2.js';
-import { B as BasePlugin, c as columnTypes, F as FILTER_TRIMMED_TYPE, r as rowTypes, k as forEach, i as isRowType, D as DimensionStore, a as isStretchPlugin, S as StretchColumn, A as AutoSizeColumnPlugin, e as FilterPlugin, E as ExportFilePlugin, C as ColumnPlugin } from './column.drag.plugin-3cc77986.js';
-import { c as isObjectLike, b as baseGetTag, d as debounce } from './debounce-72878ced.js';
-import { a as getItemByIndex, R as RESIZE_INTERVAL, t as timeout } from './index-1dcad6ef.js';
-import { V as ViewportStore } from './row-header-utils-3dfbb81f.js';
+import { x as reduce, r as getColumnType, s as getColumnSizes, E as EMPTY_INDEX, w as getColumnByProp, u as getColumns, F as SelectionStoreConnector } from './column.service-a6a7c415.js';
+import { c as columnTypes, m as forEach, r as rowTypes, i as isRowType, D as DimensionStore, B as BasePlugin, G as GroupingRowPlugin, S as StretchColumn, a as isStretchPlugin, A as AutoSizeColumnPlugin, f as FilterPlugin, E as ExportFilePlugin, l as SortingPlugin, C as ColumnMovePlugin } from './column.drag.plugin-50f49fa9.js';
+import { D as DataStore, b as getSourceItem, f as getSourceItemVirtualIndexByProp, d as setSourceByPhysicalIndex, s as setSourceByVirtualIndex, a as getVisibleSourceItem, h as gatherTrimmedItems, k as getItemByIndex, R as RESIZE_INTERVAL, u as timeout } from './dimension.helpers-d0d709c4.js';
+import { d as debounce } from './debounce-b3166f78.js';
+import { V as ViewportStore } from './viewport.store-afa8c4fe.js';
 import { v as viewportDataPartition, H as HEADER_SLOT, C as CONTENT_SLOT, F as FOOTER_SLOT, D as DATA_SLOT } from './viewport.helpers-7e7f9dad.js';
 import { g as getPropertyFromEvent } from './events-cf0893a3.js';
 import './filter.button-d40ab17b.js';
-import './header-cell-renderer-32d2ed96.js';
+import './header-cell-renderer-36ecbdef.js';
 
 class ThemeCompact {
     constructor() {
@@ -77,750 +77,6 @@ function getTheme(theme) {
     return DEFAULT_THEME;
 }
 
-// provide collapse data
-function doCollapse(pIndex, source) {
-    const model = source[pIndex];
-    const collapseValue = model[PSEUDO_GROUP_ITEM_VALUE];
-    const trimmed = {};
-    let i = pIndex + 1;
-    const total = source.length;
-    while (i < total) {
-        const currentModel = source[i];
-        if (isGrouping(currentModel)) {
-            const currentValue = currentModel[PSEUDO_GROUP_ITEM_VALUE];
-            if (!currentValue.length || !currentValue.startsWith(collapseValue + ',')) {
-                break;
-            }
-            currentModel[GROUP_EXPANDED] = false;
-        }
-        trimmed[i++] = true;
-    }
-    model[GROUP_EXPANDED] = false;
-    return { trimmed };
-}
-/**
- *
- * @param pIndex - physical index
- * @param vIndex - virtual index, need to update item collection
- * @param source - data source
- * @param rowItemsIndexes - rgRow indexes
- */
-function doExpand(vIndex, source, rowItemsIndexes) {
-    const physicalIndex = rowItemsIndexes[vIndex];
-    const model = source[physicalIndex];
-    const currentGroup = getParsedGroup(model[PSEUDO_GROUP_ITEM_ID]);
-    const trimmed = {};
-    // no group found
-    if (!currentGroup) {
-        return { trimmed };
-    }
-    const groupItems = [];
-    model[GROUP_EXPANDED] = true;
-    let i = physicalIndex + 1;
-    const total = source.length;
-    let groupLevelOnly = 0;
-    // go through all rows
-    while (i < total) {
-        const currentModel = source[i];
-        const isGroup = isGrouping(currentModel);
-        // group found
-        if (isGroup) {
-            if (!isSameGroup(currentGroup, model, currentModel)) {
-                break;
-            }
-            else if (!groupLevelOnly) {
-                // if get group first it's group only level
-                groupLevelOnly = currentModel[GROUP_DEPTH];
-            }
-        }
-        // level 0 or same depth
-        if (!groupLevelOnly || (isGroup && groupLevelOnly === currentModel[GROUP_DEPTH])) {
-            trimmed[i] = false;
-            groupItems.push(i);
-        }
-        i++;
-    }
-    const result = {
-        trimmed,
-    };
-    if (groupItems.length) {
-        const items = [...rowItemsIndexes];
-        items.splice(vIndex + 1, 0, ...groupItems);
-        result.items = items;
-    }
-    return result;
-}
-
-const TRIMMED_GROUPING = 'grouping';
-/**
- * Prepare trimming updated indexes for grouping
- * @param initiallyTrimed
- * @param firstLevelMap
- * @param secondLevelMap
- */
-function processDoubleConversionTrimmed(initiallyTrimed, firstLevelMap, secondLevelMap) {
-    const trimemedOptionsToUpgrade = {};
-    /**
-     * go through all groups except grouping
-     */
-    for (let type in initiallyTrimed) {
-        if (type === TRIMMED_GROUPING) {
-            continue;
-        }
-        const items = initiallyTrimed[type];
-        const newItems = {};
-        for (let initialIndex in items) {
-            /**
-             * if item exists we find it in collection
-             * we support 2 level of conversions
-             */
-            let newConversionIndex = firstLevelMap[initialIndex];
-            if (secondLevelMap) {
-                newConversionIndex = secondLevelMap[newConversionIndex];
-            }
-            /**
-             * if item was trimmed previously
-             * trimming makes sense to apply
-             */
-            if (items[initialIndex]) {
-                newItems[newConversionIndex] = true;
-                /**
-                 * If changes present apply changes to new source
-                 */
-                if (newConversionIndex !== parseInt(initialIndex, 10)) {
-                    trimemedOptionsToUpgrade[type] = newItems;
-                }
-            }
-        }
-    }
-    return trimemedOptionsToUpgrade;
-}
-
-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;
-            }
-        }
-        // if has any grouping subscribe to events again
-        this.subscribe();
-    }
-    // clear grouping
-    clearGrouping() {
-        // clear columns
-        columnTypes.forEach(t => {
-            const cols = this.providers.column.getColumns(t);
-            let deleted = false;
-            cols.forEach(c => {
-                if (isGroupingColumn(c)) {
-                    delete c[PSEUDO_GROUP_COLUMN];
-                    deleted = true;
-                }
-            });
-            // if column store had grouping clear and refresh
-            if (deleted) {
-                this.providers.column.refreshByType(t);
-            }
-        });
-        // clear rows
-        const { source, oldNewIndexes } = this.getSource(true);
-        this.providers.data.setData(source, GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, undefined, true);
-        this.updateTrimmed(undefined, undefined, oldNewIndexes);
-    }
-    updateTrimmed(trimmedGroup = {}, _childrenByGroup = {}, firstLevelMap = {}, secondLevelMap) {
-        // map previously trimmed data
-        const trimemedOptionsToUpgrade = processDoubleConversionTrimmed(this.trimmed, firstLevelMap, secondLevelMap);
-        for (let type in trimemedOptionsToUpgrade) {
-            this.revogrid.addTrimmed(trimemedOptionsToUpgrade[type], type);
-        }
-        // const emptyGroups = this.filterOutEmptyGroups(trimemedOptionsToUpgrade, childrenByGroup);
-        // setup trimmed data for grouping
-        this.revogrid.addTrimmed(Object.assign({}, trimmedGroup), TRIMMED_GROUPING);
-    }
-}
-
-/** `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;
-}
-
-/**
- * Lifecycle
- * 1. @event `beforesorting` - Triggered when sorting just starts. Nothing has happened yet. This can be triggered from a column or from the source. If the type is from rows, the column will be undefined.
- * 2. @method `updateColumnSorting` - Updates the column sorting icon on the grid and the column itself, but the data remains untouched.
- * 3. @event `beforesortingapply` - Triggered before the sorting data is applied to the data source. You can prevent this event, and the data will not be sorted. This event is only called from a column sorting click.
- * 4. @event `aftersortingapply` - Triggered after sorting has been applied and completed. This event occurs for both row and column sorting.
- *
- * Note: If you prevent an event, it will not proceed to the subsequent steps.
- */
-class SortingPlugin extends BasePlugin {
-    runSorting(order, comparison) {
-        var _a;
-        this.sort(order, comparison);
-        (_a = this.sortingPromise) === null || _a === void 0 ? void 0 : _a.call(this);
-        this.sortingPromise = null;
-    }
-    constructor(revogrid, providers) {
-        super(revogrid, providers);
-        this.revogrid = revogrid;
-        this.sortingPromise = null;
-        this.postponeSort = debounce((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);
-            }
-        };
-        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);
-        };
-        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.addEventListener('beforeanysource', beforeanysource);
-        this.addEventListener('aftercolumnsset', aftercolumnsset);
-        this.addEventListener('beforeheaderclick', headerclick);
-    }
-    startSorting(order, sortingFunc) {
-        if (!this.sortingPromise) {
-            this.revogrid.jobsBeforeRender.push(new Promise(resolve => {
-                this.sortingPromise = resolve;
-            }));
-        }
-        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;
-        }
-        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;
-        }
-        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;
-            }
-        }
-        else {
-            if (order) {
-                // reset sorting
-                this.sorting = { [column.prop]: order };
-                this.sortingFunc = { [column.prop]: cmp };
-            }
-            else {
-                (_a = this.sorting) === null || _a === void 0 ? true : delete _a[column.prop];
-                (_b = this.sortingFunc) === null || _b === void 0 ? true : delete _b[column.prop];
-            }
-        }
-        this.startSorting(this.sorting, this.sortingFunc);
-    }
-    /**
-     * Sort items by sorting function
-     * @requires proxyItems applied to row store
-     * @requires source applied to row store
-     *
-     * @param sorting - per column sorting
-     * @param data - this.stores['rgRow'].store.get('source')
-     */
-    sort(sorting, sortingFunc, types = rowTypes) {
-        // 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] });
-            }
-        }
-        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],
-                });
-            }
-        }
-        this.emit('aftersortingapply');
-    }
-    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;
-    }
-    descCellCompare(cmp) {
-        return (prop, a, b) => {
-            return -1 * cmp(prop, a, b);
-        };
-    }
-    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;
-        });
-    }
-    getNextOrder(currentOrder) {
-        switch (currentOrder) {
-            case undefined:
-                return 'asc';
-            case 'asc':
-                return 'desc';
-            case 'desc':
-                return undefined;
-        }
-    }
-}
-
 class ColumnDataProvider {
     get order() {
         const order = {};
@@ -843,8 +99,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);
@@ -876,6 +132,9 @@ class ColumnDataProvider {
     refreshByType(type) {
         this.dataSources[type].refresh();
     }
+    /**
+     * Main method to set columns
+     */
     setColumns(data) {
         columnTypes.forEach(k => {
             // set columns data
@@ -970,6 +229,8 @@ class ColumnDataProvider {
 
 /**
  * Data source provider
+ *
+ * @dependsOn DimensionProvider
  */
 class DataProvider {
     constructor(dimensionProvider) {
@@ -992,13 +253,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);
@@ -1044,6 +314,8 @@ class DataProvider {
 /**
  * Dimension provider
  * Stores dimension information and custom sizes
+ *
+ * @dependsOn ViewportProvider
  */
 class DimensionProvider {
     constructor(viewports, config) {
@@ -1079,7 +351,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 });
@@ -1094,10 +370,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
@@ -1111,18 +391,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
@@ -1149,6 +434,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;
@@ -1161,13 +450,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);
@@ -1193,25 +475,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,
+        });
     }
 }
 
@@ -1288,15 +557,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);
@@ -1308,7 +577,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
@@ -1695,7 +964,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 = class {
@@ -1709,8 +1056,9 @@ const RevoGridComponent = class {
         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);
@@ -1732,20 +1080,18 @@ const RevoGridComponent = class {
         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;
@@ -1768,6 +1114,7 @@ const RevoGridComponent = class {
         this.rowClass = '';
         this.autoSizeColumn = false;
         this.filter = false;
+        this.sorting = undefined;
         this.focusTemplate = undefined;
         this.canMoveColumns = false;
         this.trimmedRows = {};
@@ -1795,15 +1142,31 @@ const RevoGridComponent = class {
         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,
         });
     }
     /**
@@ -1971,19 +1334,19 @@ const RevoGridComponent = class {
      * 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.
@@ -2010,6 +1373,15 @@ const RevoGridComponent = class {
         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');
@@ -2138,7 +1510,7 @@ const RevoGridComponent = class {
         // 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;
         }
@@ -2147,7 +1519,7 @@ const RevoGridComponent = class {
         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;
@@ -2203,7 +1575,9 @@ const RevoGridComponent = class {
                 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,
@@ -2217,7 +1591,9 @@ const RevoGridComponent = class {
         });
         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,
@@ -2276,15 +1652,8 @@ const RevoGridComponent = class {
      * 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
@@ -2296,30 +1665,29 @@ const RevoGridComponent = class {
         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);
     }
@@ -2327,26 +1695,16 @@ const RevoGridComponent = class {
      * 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
@@ -2358,35 +1716,39 @@ const RevoGridComponent = class {
         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
@@ -2396,12 +1758,12 @@ const RevoGridComponent = class {
             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
@@ -2409,6 +1771,7 @@ const RevoGridComponent = class {
         if (this.isInited) {
             this.setPlugins();
         }
+        this.created.emit();
     }
     /**
      * Called once just after the component is first connected to the DOM.
@@ -2436,7 +1799,7 @@ const RevoGridComponent = class {
         // 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');
@@ -2444,7 +1807,10 @@ const RevoGridComponent = class {
             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;
@@ -2469,7 +1835,7 @@ const RevoGridComponent = class {
         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');
@@ -2512,12 +1878,13 @@ const RevoGridComponent = class {
             // 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
@@ -2529,15 +1896,16 @@ const RevoGridComponent = class {
         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 getElement(this); }
@@ -2556,6 +1924,7 @@ const RevoGridComponent = class {
         "grouping": ["groupingChanged"],
         "stretch": ["applyStretch"],
         "filter": ["applyFilter"],
+        "sorting": ["applySorting"],
         "rowHeaders": ["rowHeadersChange"],
         "registerVNode": ["registerOutsideVNodes"],
         "additionalData": ["additionalDataChanged"],