@revolist/revogrid 4.9.41 → 4.9.42

package/dist/collection/components/revoGrid/revo-grid.js

@@ -9,49 +9,51 @@ import DimensionProvider from "../../services/dimension.provider";
 import ViewportProvider from "../../services/viewport.provider";
 import ThemeService from "../../themeManager/theme.service";
 import { timeout } from "../../utils";
-import AutoSize from "../../plugins/column.auto-size.plugin";
+import { AutoSizeColumnPlugin, } from "../../plugins/column.auto-size.plugin";
 import { FilterPlugin, } from "../../plugins/filter/filter.plugin";
-import SortingPlugin from "../../plugins/sorting/sorting.plugin";
-import ExportFilePlugin from "../../plugins/export/export.plugin";
-import GroupingRowPlugin from "../../plugins/groupingRow/grouping.row.plugin";
+import { SortingPlugin } from "../../plugins/sorting/sorting.plugin";
+import { ExportFilePlugin } from "../../plugins/export/export.plugin";
+import { GroupingRowPlugin } from "../../plugins/groupingRow/grouping.row.plugin";
 import ViewportService from "./viewport.service";
 import { DATA_SLOT, HEADER_SLOT } from "./viewport.helpers";
 import GridScrollingService from "./viewport.scrolling.service";
-import SelectionStoreConnector from "../../services/selection.store.connector";
+import { SelectionStoreConnector } from "../../services/selection.store.connector";
 import OrderRenderer from "../order/order-renderer";
-import StretchColumn, { isStretchPlugin, } from "../../plugins/column.stretch.plugin";
+import { StretchColumn, isStretchPlugin, } from "../../plugins/column.stretch.plugin";
 import { rowDefinitionByType, rowDefinitionRemoveByType } from "./grid.helpers";
-import ColumnPlugin from "../../plugins/moveColumn/column.drag.plugin";
+import { ColumnMovePlugin } from "../../plugins/moveColumn/column.drag.plugin";
 import { getPropertyFromEvent } from "../../utils/events";
 import { isMobileDevice } from "../../utils/mobile";
 import { getColumnByProp, getColumns } from "../../utils/column.utils";
 import { WCAGPlugin } from "../../plugins/wcag";
+import { PluginService } from "./plugin.service";
 /**
  * Revogrid - High-performance, customizable grid library for managing large datasets.
+ * ### Events guide
+ *
+ * For a comprehensive events guide, check the [Events API Page](./events.md).
+ * All events propagate to the root level of the grid. [Dependency tree](#Dependencies).
+ *
+ * ### Type definitions
  *
- * :::tip
  * Read [type definition file](https://github.com/revolist/revogrid/blob/master/src/interfaces.d.ts) for the full interface information.
+ *
  * All complex property types such as `ColumnRegular`, `ColumnProp`, `ColumnDataSchemaModel` can be found there.
- * :::
  *
- * :::tip
- * For a comprehensive events guide, check the [dependency tree](#Dependencies).
- * All events propagate to the root level of the grid.
- * :::
+ * ### HTMLRevoGridElement
  *
  * @slot data-{column-type}-{row-type}. @example data-rgCol-rgRow - main data slot. Applies extra elements in <revogr-data />.
  * @slot focus-{column-type}-{row-type}. @example focus-rgCol-rgRow - focus layer for main data. Applies extra elements in <revogr-focus />.
- */
+ * @slot viewport - Viewport slot.
+ * @slot header - Header slot.
+ * @slot footer - Footer slot.
+*/
 export class RevoGridComponent {
     constructor() {
         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;
@@ -74,6 +76,7 @@ export class RevoGridComponent {
         this.rowClass = '';
         this.autoSizeColumn = false;
         this.filter = false;
+        this.sorting = undefined;
         this.focusTemplate = undefined;
         this.canMoveColumns = false;
         this.trimmedRows = {};
@@ -101,15 +104,31 @@ export class RevoGridComponent {
         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,
         });
     }
     /**
@@ -277,19 +296,19 @@ export class RevoGridComponent {
      * 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.
@@ -316,6 +335,15 @@ export class RevoGridComponent {
         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');
@@ -444,7 +472,7 @@ export class RevoGridComponent {
         // 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;
         }
@@ -453,7 +481,7 @@ export class RevoGridComponent {
         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;
@@ -509,7 +537,9 @@ export class RevoGridComponent {
                 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,
@@ -523,7 +553,9 @@ export class RevoGridComponent {
         });
         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,
@@ -582,15 +614,8 @@ export class RevoGridComponent {
      * 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
@@ -602,30 +627,29 @@ export class RevoGridComponent {
         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);
     }
@@ -633,26 +657,16 @@ export class RevoGridComponent {
      * 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
@@ -664,35 +678,39 @@ export class RevoGridComponent {
         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 AutoSize(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
@@ -702,12 +720,12 @@ export class RevoGridComponent {
             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
@@ -715,6 +733,7 @@ export class RevoGridComponent {
         if (this.isInited) {
             this.setPlugins();
         }
+        this.created.emit();
     }
     /**
      * Called once just after the component is first connected to the DOM.
@@ -742,7 +761,7 @@ export class RevoGridComponent {
         // 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');
@@ -750,7 +769,10 @@ export class RevoGridComponent {
             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;
@@ -775,7 +797,7 @@ export class RevoGridComponent {
         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');
@@ -818,12 +840,13 @@ export class RevoGridComponent {
             // 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
@@ -835,15 +858,16 @@ export class RevoGridComponent {
         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();
     }
     static get is() { return "revo-grid"; }
@@ -1199,7 +1223,7 @@ export class RevoGridComponent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom grid plugins.\nHas to be predefined during first grid init.\nEvery plugin should be inherited from BasePlugin."
+                    "text": "Custom grid plugins. Can be added or removed at runtime.\nEvery plugin should be inherited from BasePlugin class.\n\nFor more details check [Plugin guide](https://rv-grid.com/guide/plugin/)"
                 },
                 "defaultValue": "[]"
             },
@@ -1296,7 +1320,7 @@ export class RevoGridComponent {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean | ColumnFilterConfig",
-                    "resolved": "boolean | { collection?: FilterCollection | undefined; include?: string[] | undefined; customFilters?: Record<string, CustomFilter<any, LogicFunctionExtraParam>> | undefined; filterProp?: string | undefined; localization?: FilterLocalization | undefined; multiFilterItems?: MultiFilterItem | undefined; disableDynamicFiltering?: boolean | undefined; }",
+                    "resolved": "boolean | { collection?: Record<ColumnProp, FilterCollectionItem> | undefined; include?: string[] | undefined; customFilters?: Record<string, CustomFilter<any, LogicFunctionExtraParam>> | undefined; filterProp?: string | undefined; localization?: FilterLocalization | undefined; multiFilterItems?: MultiFilterItem | undefined; disableDynamicFiltering?: boolean | undefined; }",
                     "references": {
                         "ColumnFilterConfig": {
                             "location": "import",
@@ -1315,6 +1339,27 @@ export class RevoGridComponent {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "sorting": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SortingConfig",
+                    "resolved": "undefined | { columns?: { prop: ColumnProp; order: Order; cellCompare?: CellCompareFunc | undefined; }[] | undefined; }",
+                    "references": {
+                        "SortingConfig": {
+                            "location": "import",
+                            "path": "../../plugins",
+                            "id": "src/plugins/index.ts::SortingConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternative way to set sorting.\n`{columns: [{prop: 'name', order: 'asc'}]}`"
+                }
+            },
             "focusTemplate": {
                 "type": "unknown",
                 "mutable": false,
@@ -1398,7 +1443,7 @@ export class RevoGridComponent {
                 "mutable": false,
                 "complexType": {
                     "original": "GroupingOptions",
-                    "resolved": "{ props?: ColumnProp[] | undefined; expandedAll?: boolean | undefined; groupLabelTemplate?: GroupLabelTemplateFunc | undefined; }",
+                    "resolved": "{ props?: ColumnProp[] | undefined; prevExpanded?: Record<string, boolean> | undefined; expandedAll?: boolean | undefined; preserveGroupingOnUpdate?: boolean | undefined; groupLabelTemplate?: GroupLabelTemplateFunc | undefined; } & ExpandedOptions",
                     "references": {
                         "GroupingOptions": {
                             "location": "import",
@@ -1529,13 +1574,18 @@ export class RevoGridComponent {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "(VNode | (() => VNode))[]",
-                    "resolved": "(VNode | (() => VNode))[]",
+                    "original": "(\n    | VNode\n    | ((c: ExtraNodeFuncConfig) => VNode)\n  )[]",
+                    "resolved": "(VNode | ((c: ExtraNodeFuncConfig) => VNode))[]",
                     "references": {
                         "VNode": {
                             "location": "import",
                             "path": "@stencil/core",
                             "id": "node_modules::VNode"
+                        },
+                        "ExtraNodeFuncConfig": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ExtraNodeFuncConfig"
                         }
                     }
                 },
@@ -1543,7 +1593,7 @@ export class RevoGridComponent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Register new virtual node inside of grid.\nUsed for additional items creation such as plugin elements.\nShould be set before grid render inside of plugins."
+                    "text": "Register new virtual node inside of grid.\nUsed for additional items creation such as plugin elements.\nShould be set before grid render inside of plugins.\nCan return VNode result of h() function or a function that returns VNode.\nFunction can be used for performance improvement and additional renders."
                 },
                 "defaultValue": "[]"
             },
@@ -1600,11 +1650,11 @@ export class RevoGridComponent {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "This event is triggered before the data is edited.\nTo prevent the default behavior of editing data and use your own implementation, call `e.preventDefault()`.\nTo override the edit result with your own value, set the `e.val` property to your desired value."
+                    "text": "Before the data is edited.\nTo prevent the default behavior of editing data and use your own implementation, call `e.preventDefault()`.\nTo override the edit result with your own value, set the `e.val` property to your desired value."
                 },
                 "complexType": {
                     "original": "BeforeSaveDataDetails",
-                    "resolved": "{ prop: ColumnProp; model: DataType; val?: string | undefined; rowIndex: number; colIndex: number; colType: DimensionCols; type: DimensionRows; }",
+                    "resolved": "BeforeSaveDataDetails",
                     "references": {
                         "BeforeSaveDataDetails": {
                             "location": "import",
@@ -1621,11 +1671,11 @@ export class RevoGridComponent {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "This event is triggered before applying range data, specifically when a range selection occurs.\nTo customize the data and prevent the default edit data from being set, you can call `e.preventDefault()`."
+                    "text": "Before applying range data, specifically when a range selection occurs.\nTo customize the data and prevent the default edit data from being set, you can call `e.preventDefault()`."
                 },
                 "complexType": {
                     "original": "BeforeRangeSaveDataDetails",
-                    "resolved": "{ data: DataLookup; models: Partial<DataLookup>; type: DimensionRows; }",
+                    "resolved": "{ data: DataLookup; models: Partial<DataLookup>; type: DimensionRows; newRange: RangeArea | null; oldRange: RangeArea | null; }",
                     "references": {
                         "BeforeRangeSaveDataDetails": {
                             "location": "import",
@@ -1642,11 +1692,11 @@ export class RevoGridComponent {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Triggered after data applied or range changed."
+                    "text": "After data applied or range changed."
                 },
                 "complexType": {
                     "original": "AfterEditEvent",
-                    "resolved": "{ data: DataLookup; models: Partial<DataLookup>; type: DimensionRows; } | { prop: ColumnProp; model: DataType; val?: string | undefined; rowIndex: number; colIndex: number; colType: DimensionCols; type: DimensionRows; }",
+                    "resolved": "BeforeSaveDataDetails | { data: DataLookup; models: Partial<DataLookup>; type: DimensionRows; newRange: RangeArea | null; oldRange: RangeArea | null; }",
                     "references": {
                         "AfterEditEvent": {
                             "location": "import",
@@ -1663,11 +1713,11 @@ export class RevoGridComponent {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "This event is triggered before autofill is applied.\nTo prevent the default behavior of applying the edit data, you can call `e.preventDefault()`."
+                    "text": "Before autofill is applied.\nTo prevent the default behavior of applying the edit data, you can call `e.preventDefault()`."
                 },
                 "complexType": {
                     "original": "ChangedRange",
-                    "resolved": "{ type: DimensionRows; colType: DimensionCols; newRange: RangeArea; oldRange: RangeArea; mapping: OldNewRangeMapping; newData: { [key: number]: DataType; }; }",
+                    "resolved": "{ type: DimensionRows; colType: DimensionCols; newRange: RangeArea; oldRange: RangeArea; mapping: OldNewRangeMapping; newData: { [newRowIndex: number]: DataType; }; }",
                     "references": {
                         "ChangedRange": {
                             "location": "import",
@@ -1684,11 +1734,11 @@ export class RevoGridComponent {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Triggered before range applied.\nUse e.preventDefault() to prevent range."
+                    "text": "Before autofill is applied. Runs before beforeautofill event.\nUse e.preventDefault() to prevent range."
                 },
                 "complexType": {
                     "original": "ChangedRange",
-                    "resolved": "{ type: DimensionRows; colType: DimensionCols; newRange: RangeArea; oldRange: RangeArea; mapping: OldNewRangeMapping; newData: { [key: number]: DataType; }; }",
+                    "resolved": "{ type: DimensionRows; colType: DimensionCols; newRange: RangeArea; oldRange: RangeArea; mapping: OldNewRangeMapping; newData: { [newRowIndex: number]: DataType; }; }",
                     "references": {
                         "ChangedRange": {
                             "location": "import",
@@ -1705,7 +1755,7 @@ export class RevoGridComponent {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Triggered after focus render finished.\nCan be used to access a focus element through `event.target`.\nThis is just a duplicate of `afterfocus` from `revogr-focus.tsx`."
+                    "text": "After focus render finished.\nCan be used to access a focus element through `event.target`.\nThis is just a duplicate of `afterfocus` from `revogr-focus.tsx`."
                 },
                 "complexType": {
                     "original": "FocusAfterRenderEvent",
@@ -1726,7 +1776,7 @@ export class RevoGridComponent {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "This event is triggered before the order of `rgRow` is applied.\nTo prevent the default behavior of changing the order of `rgRow`, you can call `e.preventDefault()`."
+                    "text": "Before the order of `rgRow` is applied.\nTo prevent the default behavior of changing the order of `rgRow`, you can call `e.preventDefault()`."
                 },
                 "complexType": {
                     "original": "{ from: number; to: number }",
@@ -1734,14 +1784,14 @@ export class RevoGridComponent {
                     "references": {}
                 }
             }, {
-                "method": "beforesortingapply",
-                "name": "beforesortingapply",
+                "method": "beforesorting",
+                "name": "beforesorting",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Triggered by sorting.plugin.ts\nBefore sorting apply.\nUse e.preventDefault() to prevent sorting data change."
+                    "text": "By `sorting.plugin.ts`\n<br>Triggered immediately after header click.\n<br>First in sorting event sequence. Ff this event stops no other event called.\n<br>Use `e.preventDefault()` to prevent sorting."
                 },
                 "complexType": {
                     "original": "{\n    column: ColumnRegular;\n    order: 'desc' | 'asc';\n    additive: boolean;\n  }",
@@ -1755,14 +1805,40 @@ export class RevoGridComponent {
                     }
                 }
             }, {
-                "method": "beforesorting",
-                "name": "beforesorting",
+                "method": "beforesourcesortingapply",
+                "name": "beforesourcesortingapply",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Triggered by sorting.plugin.ts\nBefore sorting event.\nInitial sorting triggered, if this event stops no other event called.\nUse e.preventDefault() to prevent sorting."
+                    "text": "By `sorting.plugin.ts`\n<br>Same as `beforesorting` but triggered after `beforeanysource` (when source is changed).\n<br>Use `e.preventDefault()` to prevent sorting data change."
+                },
+                "complexType": {
+                    "original": "{\n    type: DimensionRows;\n    sorting?: SortingOrder;\n  }",
+                    "resolved": "{ type: DimensionRows; sorting?: SortingOrder | undefined; }",
+                    "references": {
+                        "DimensionRows": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::DimensionRows"
+                        },
+                        "SortingOrder": {
+                            "location": "import",
+                            "path": "../../plugins",
+                            "id": "src/plugins/index.ts::SortingOrder"
+                        }
+                    }
+                }
+            }, {
+                "method": "beforesortingapply",
+                "name": "beforesortingapply",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "By `sorting.plugin.ts`\n<br> After `beforesorting`\n<br>Triggered after column data updated with new sorting order.\n<br>Use `e.preventDefault()` to prevent sorting data change."
                 },
                 "complexType": {
                     "original": "{\n    column: ColumnRegular;\n    order: 'desc' | 'asc';\n    additive: boolean;\n  }",
@@ -1786,13 +1862,13 @@ export class RevoGridComponent {
                     "text": "This event is triggered when the row order change is started.\nTo prevent the default behavior of changing the row order, you can call `e.preventDefault()`.\nTo change the item name at the start of the row order change, you can set `e.text` to the desired new name."
                 },
                 "complexType": {
-                    "original": "{\n    pos: PositionItem;\n    text: string;\n  }",
-                    "resolved": "{ pos: PositionItem; text: string; }",
+                    "original": "RowDragStartDetails",
+                    "resolved": "{ cell: Cell; text: string; pos: PositionItem; event: MouseEvent; rowType: DimensionRows; model: any; }",
                     "references": {
-                        "PositionItem": {
+                        "RowDragStartDetails": {
                             "location": "import",
                             "path": "@type",
-                            "id": "src/types/index.ts::PositionItem"
+                            "id": "src/types/index.ts::RowDragStartDetails"
                         }
                     }
                 }
@@ -1825,11 +1901,11 @@ export class RevoGridComponent {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "This event is triggered before the cell focus is changed.\nTo prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`."
+                    "text": "Before the cell focus is changed.\nTo prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`."
                 },
                 "complexType": {
                     "original": "BeforeSaveDataDetails",
-                    "resolved": "{ prop: ColumnProp; model: DataType; val?: string | undefined; rowIndex: number; colIndex: number; colType: DimensionCols; type: DimensionRows; }",
+                    "resolved": "BeforeSaveDataDetails",
                     "references": {
                         "BeforeSaveDataDetails": {
                             "location": "import",
@@ -1846,7 +1922,7 @@ export class RevoGridComponent {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "This event is triggered before the grid focus is lost.\nTo prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`."
+                    "text": "Before the grid focus is lost.\nTo prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`."
                 },
                 "complexType": {
                     "original": "FocusedData | null",
@@ -2046,13 +2122,22 @@ export class RevoGridComponent {
                     "text": "Emitted before applying a filter to the data source.\nUse e.preventDefault() to prevent cell focus change.\nModify if you need to change filters."
                 },
                 "complexType": {
-                    "original": "{ collection: FilterCollection }",
-                    "resolved": "{ collection: FilterCollection; }",
+                    "original": "{ collection: Record<ColumnProp, FilterCollectionItem> }",
+                    "resolved": "{ collection: Record<ColumnProp, FilterCollectionItem>; }",
                     "references": {
-                        "FilterCollection": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "ColumnProp": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ColumnProp"
+                        },
+                        "FilterCollectionItem": {
                             "location": "import",
                             "path": "../../plugins/filter/filter.types",
-                            "id": "src/plugins/filter/filter.types.ts::FilterCollection"
+                            "id": "src/plugins/filter/filter.types.ts::FilterCollectionItem"
                         }
                     }
                 }
@@ -2067,17 +2152,22 @@ export class RevoGridComponent {
                     "text": "Emitted before applying a filter to the data source.\nUse e.preventDefault() to prevent the default behavior of trimming values and applying the filter.\nModify the `collection` property if you want to change the filters.\nModify the `itemsToFilter` property if you want to filter the indexes for trimming."
                 },
                 "complexType": {
-                    "original": "{\n    collection: FilterCollection;\n    itemsToFilter: Record<number, boolean>;\n  }",
-                    "resolved": "{ collection: FilterCollection; itemsToFilter: Record<number, boolean>; }",
+                    "original": "{\n    collection: Record<ColumnProp, FilterCollectionItem>;\n    itemsToFilter: Record<number, boolean>;\n  }",
+                    "resolved": "{ collection: Record<ColumnProp, FilterCollectionItem>; itemsToFilter: Record<number, boolean>; }",
                     "references": {
-                        "FilterCollection": {
-                            "location": "import",
-                            "path": "../../plugins/filter/filter.types",
-                            "id": "src/plugins/filter/filter.types.ts::FilterCollection"
-                        },
                         "Record": {
                             "location": "global",
                             "id": "global::Record"
+                        },
+                        "ColumnProp": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ColumnProp"
+                        },
+                        "FilterCollectionItem": {
+                            "location": "import",
+                            "path": "../../plugins/filter/filter.types",
+                            "id": "src/plugins/filter/filter.types.ts::FilterCollectionItem"
                         }
                     }
                 }
@@ -2170,7 +2260,7 @@ export class RevoGridComponent {
                 },
                 "complexType": {
                     "original": "BeforeSaveDataDetails",
-                    "resolved": "{ prop: ColumnProp; model: DataType; val?: string | undefined; rowIndex: number; colIndex: number; colType: DimensionCols; type: DimensionRows; }",
+                    "resolved": "BeforeSaveDataDetails",
                     "references": {
                         "BeforeSaveDataDetails": {
                             "location": "import",
@@ -2230,6 +2320,27 @@ export class RevoGridComponent {
                     "resolved": "any",
                     "references": {}
                 }
+            }, {
+                "method": "sortingconfigchanged",
+                "name": "sortingconfigchanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the sorting configuration is changed"
+                },
+                "complexType": {
+                    "original": "SortingConfig",
+                    "resolved": "{ columns?: { prop: ColumnProp; order: Order; cellCompare?: CellCompareFunc | undefined; }[] | undefined; }",
+                    "references": {
+                        "SortingConfig": {
+                            "location": "import",
+                            "path": "../../plugins",
+                            "id": "src/plugins/index.ts::SortingConfig"
+                        }
+                    }
+                }
             }, {
                 "method": "rowheaderschanged",
                 "name": "rowheaderschanged",
@@ -2326,6 +2437,21 @@ export class RevoGridComponent {
                         }
                     }
                 }
+            }, {
+                "method": "created",
+                "name": "created",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emmited after grid created"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -2358,10 +2484,10 @@ export class RevoGridComponent {
             },
             "setDataAt": {
                 "complexType": {
-                    "signature": "(data: { row: number; col: number; } & AllDimensionType) => Promise<void | undefined>",
+                    "signature": "({ row, col, colType, rowType, val, skipDataUpdate }: { row: number; col: number; val?: any; skipDataUpdate?: boolean; } & AllDimensionType) => Promise<void | undefined>",
                     "parameters": [{
-                            "name": "data",
-                            "type": "{ row: number; col: number; } & AllDimensionType",
+                            "name": "__0",
+                            "type": "{ row: number; col: number; val?: any; skipDataUpdate?: boolean | undefined; } & AllDimensionType",
                             "docs": ""
                         }],
                     "references": {
@@ -2382,8 +2508,11 @@ export class RevoGridComponent {
                     "return": "Promise<void | undefined>"
                 },
                 "docs": {
-                    "text": "Sets data at specified cell.\nUseful for performance optimization.\nNo viewport update will be triggered.",
-                    "tags": []
+                    "text": "Refreshes data at specified cell.\nUseful for performance optimization.\nNo viewport update will be triggered.",
+                    "tags": [{
+                            "name": "example",
+                            "text": "const grid = document.querySelector('revo-grid');\ngrid.setDataAt({ row: 0, col: 0, val: 'test' }); // refresh"
+                        }]
                 }
             },
             "scrollToRow": {
@@ -2713,8 +2842,8 @@ export class RevoGridComponent {
                         },
                         "Observable": {
                             "location": "import",
-                            "path": "../../utils/store.utils",
-                            "id": "src/utils/store.utils.ts::Observable"
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
                         },
                         "DSourceState": {
                             "location": "import",
@@ -2757,8 +2886,8 @@ export class RevoGridComponent {
                         },
                         "Observable": {
                             "location": "import",
-                            "path": "../../utils/store.utils",
-                            "id": "src/utils/store.utils.ts::Observable"
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
                         },
                         "DSourceState": {
                             "location": "import",
@@ -2979,6 +3108,23 @@ export class RevoGridComponent {
                     "text": "Get the currently selected Range.",
                     "tags": []
                 }
+            },
+            "refreshExtraElements": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Refresh extra elements. Triggers re-rendering of extra elements and functions.\nPart of extraElements and registerVNode methods.\nUseful for plugins.",
+                    "tags": []
+                }
             }
         };
     }
@@ -3026,6 +3172,9 @@ export class RevoGridComponent {
             }, {
                 "propName": "filter",
                 "methodName": "applyFilter"
+            }, {
+                "propName": "sorting",
+                "methodName": "applySorting"
             }, {
                 "propName": "rowHeaders",
                 "methodName": "rowHeadersChange"