@revolist/revogrid 4.9.13 → 4.9.17

package/hydrate/index.js

@@ -2439,55 +2439,6 @@ class Clipboard {
     }; }
 }
 
-const FILTER_BUTTON_CLASS = 'rv-filter';
-const FILTER_BUTTON_ACTIVE = 'active';
-const FILTER_PROP = 'hasFilter';
-const AND_OR_BUTTON = 'and-or-button';
-const TRASH_BUTTON = 'trash-button';
-const FilterButton = ({ column }) => {
-    return (hAsync("span", null,
-        hAsync("button", { class: {
-                [FILTER_BUTTON_CLASS]: true,
-                [FILTER_BUTTON_ACTIVE]: column && !!column[FILTER_PROP],
-            } },
-            hAsync("svg", { class: "filter-img", viewBox: "0 0 64 64" },
-                hAsync("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" },
-                    hAsync("path", { d: "M43,48 L43,56 L21,56 L21,48 L43,48 Z M53,28 L53,36 L12,36 L12,28 L53,28 Z M64,8 L64,16 L0,16 L0,8 L64,8 Z", fill: "currentColor" }))))));
-};
-const TrashButton = () => {
-    return (hAsync("div", { class: { [TRASH_BUTTON]: true } },
-        hAsync("svg", { class: "trash-img", viewBox: "0 0 24 24" },
-            hAsync("path", { fill: "currentColor", d: "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" }))));
-};
-const AndOrButton = ({ text }) => {
-    return hAsync("button", { class: { [AND_OR_BUTTON]: true, 'light revo-button': true } }, text);
-};
-function isFilterBtn(e) {
-    if (e.classList.contains(FILTER_BUTTON_CLASS)) {
-        return true;
-    }
-    return e === null || e === void 0 ? void 0 : e.closest(`.${FILTER_BUTTON_CLASS}`);
-}
-
-(function closest() {
-    if (!Element.prototype.matches) {
-        Element.prototype.matches =
-            Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
-    }
-    if (!Element.prototype.closest) {
-        Element.prototype.closest = function (s) {
-            let el = this;
-            do {
-                if (Element.prototype.matches.call(el, s)) {
-                    return el;
-                }
-                el = el.parentElement || el.parentNode;
-            } while (el !== null && el.nodeType === 1);
-            return null;
-        };
-    }
-})();
-
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 /**
@@ -3029,6 +2980,55 @@ function debounce$2(func, wait, options) {
 
 var debounce_1 = debounce$2;
 
+const FILTER_BUTTON_CLASS = 'rv-filter';
+const FILTER_BUTTON_ACTIVE = 'active';
+const FILTER_PROP = 'hasFilter';
+const AND_OR_BUTTON = 'and-or-button';
+const TRASH_BUTTON = 'trash-button';
+const FilterButton = ({ column }) => {
+    return (hAsync("span", null,
+        hAsync("button", { class: {
+                [FILTER_BUTTON_CLASS]: true,
+                [FILTER_BUTTON_ACTIVE]: column && !!column[FILTER_PROP],
+            } },
+            hAsync("svg", { class: "filter-img", viewBox: "0 0 64 64" },
+                hAsync("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" },
+                    hAsync("path", { d: "M43,48 L43,56 L21,56 L21,48 L43,48 Z M53,28 L53,36 L12,36 L12,28 L53,28 Z M64,8 L64,16 L0,16 L0,8 L64,8 Z", fill: "currentColor" }))))));
+};
+const TrashButton = () => {
+    return (hAsync("div", { class: { [TRASH_BUTTON]: true } },
+        hAsync("svg", { class: "trash-img", viewBox: "0 0 24 24" },
+            hAsync("path", { fill: "currentColor", d: "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" }))));
+};
+const AndOrButton = ({ text }) => {
+    return hAsync("button", { class: { [AND_OR_BUTTON]: true, 'light revo-button': true } }, text);
+};
+function isFilterBtn(e) {
+    if (e.classList.contains(FILTER_BUTTON_CLASS)) {
+        return true;
+    }
+    return e === null || e === void 0 ? void 0 : e.closest(`.${FILTER_BUTTON_CLASS}`);
+}
+
+(function closest() {
+    if (!Element.prototype.matches) {
+        Element.prototype.matches =
+            Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+    }
+    if (!Element.prototype.closest) {
+        Element.prototype.closest = function (s) {
+            let el = this;
+            do {
+                if (Element.prototype.matches.call(el, s)) {
+                    return el;
+                }
+                el = el.parentElement || el.parentNode;
+            } while (el !== null && el.nodeType === 1);
+            return null;
+        };
+    }
+})();
+
 const filterStyleCss = ".revo-drag-icon{width:11px;opacity:0.8}.revo-drag-icon::before{content:\"::\"}.revo-alt-icon{-webkit-mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");width:11px;height:11px;background-size:cover;background-repeat:no-repeat}.arrow-down{position:absolute;right:5px;top:0}.arrow-down svg{width:8px;margin-top:5px;margin-left:5px;opacity:0.4}.cell-value-wrapper{margin-right:10px;overflow:hidden;text-overflow:ellipsis}.revo-button{position:relative;overflow:hidden;color:#fff;background-color:#6200ee;height:34px;line-height:34px;padding:0 15px;outline:0;border:0;border-radius:7px;box-sizing:border-box;cursor:pointer}.revo-button.green{background-color:#009037;border:1px solid #00772d}.revo-button.red{background-color:#E0662E;border:1px solid #d55920}.revo-button:disabled,.revo-button[disabled]{cursor:not-allowed !important;filter:opacity(0.35) !important}.revo-button.light{border:1px solid #cedefa;line-height:32px;background:none;color:#000;box-shadow:none}revogr-filter-panel{position:absolute;display:block;top:0;left:0;z-index:100;opacity:1;transform:none;background-color:#fff;transform-origin:62px 0px;box-shadow:0 5px 18px -2px rgba(0, 0, 0, 0.2);padding:10px;border-radius:4px;min-width:220px;text-align:left}revogr-filter-panel .filter-holder>div{display:flex;flex-direction:column}revogr-filter-panel label{font-size:13px;display:block;padding:8px 0}revogr-filter-panel select{width:100%}revogr-filter-panel input[type=text]{border:0;min-height:34px;margin:5px 0;background:#f3f3f3;border-radius:5px;padding:0 10px;box-sizing:border-box;width:100%}revogr-filter-panel button{margin-top:10px;margin-right:5px}revogr-filter-panel .filter-actions{text-align:right;margin-right:-5px}.rgHeaderCell:hover .rv-filter{transition:opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.rgHeaderCell:hover .rv-filter,.rgHeaderCell .rv-filter.active{opacity:1}.rgHeaderCell .rv-filter{height:24px;width:24px;background:none;border:0;opacity:0;visibility:visible;cursor:pointer;border-radius:4px}.rgHeaderCell .rv-filter.active{color:#10224a}.rgHeaderCell .rv-filter .filter-img{color:gray;width:11px}.select-css{display:block;font-family:sans-serif;font-weight:600;color:#444;line-height:1.3;padding:0.6em 1.4em 0.5em 0.8em;width:100%;max-width:100%;box-sizing:border-box;margin:0;border:1px solid #f1f1f1;box-shadow:transparent;border-radius:0.5em;appearance:none;background-color:#fff;background-image:url(\"data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E\"), linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);background-repeat:no-repeat, repeat;background-position:right 0.7em top 50%, 0 0;background-size:0.65em auto, 100%;}.select-css::-ms-expand{display:none}.select-css:hover{border-color:rgb(197, 197, 197)}.select-css:focus{border-color:#f1f1f1;box-shadow:0 0 1px 3px rgba(59, 153, 252, 0.7);box-shadow:0 0 0 3px -moz-mac-focusring;color:#222;outline:none}.select-css option{font-weight:normal}.select-css:disabled,.select-css[aria-disabled=true]{color:gray;background-image:url(\"data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E\"), linear-gradient(to bottom, #ffffff 0%, #ffffff 100%)}.select-css:disabled:hover,.select-css[aria-disabled=true]{border-color:#f1f1f1}.multi-filter-list{margin-top:5px;margin-bottom:5px}.multi-filter-list div{white-space:nowrap}.multi-filter-list .multi-filter-list-action{display:flex;justify-content:space-between;align-items:center}.multi-filter-list .and-or-button{margin:0 0 0 10px;min-width:58px;cursor:pointer}.multi-filter-list .trash-button{margin:0 0 -2px 6px;cursor:pointer;width:22px;height:100%;font-size:16px}.multi-filter-list .trash-button .trash-img{width:1em}.add-filter-divider{display:block;margin:0 -10px 10px -10px;border-bottom:1px solid #d9d9d9;height:10px}.select-input{display:flex;justify-content:space-between;align-items:center}";
 var RevogrFilterPanelStyle0 = filterStyleCss;
 
@@ -3066,7 +3066,6 @@ class FilterPanel {
         this.currentFilterType = defaultType;
         this.changes = undefined;
         this.filterItems = {};
-        this.filterTypes = {};
         this.filterNames = {};
         this.filterEntities = {};
         this.filterCaptions = undefined;
@@ -3092,7 +3091,9 @@ class FilterPanel {
         }
         this.currentFilterId = -1;
         const isOutside = !path.includes(this.element);
-        if (e.target instanceof HTMLElement && isOutside && !isFilterBtn(e.target)) {
+        if (e.target instanceof HTMLElement &&
+            isOutside &&
+            !isFilterBtn(e.target)) {
             this.changes = undefined;
         }
     }
@@ -3116,15 +3117,19 @@ class FilterPanel {
         }
     }
     renderSelectOptions(type, isDefaultTypeRemoved = false) {
-        var _a;
+        if (!this.changes) {
+            return;
+        }
         const options = [];
-        const prop = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.prop;
+        const prop = this.changes.prop;
         if (!isDefaultTypeRemoved) {
             const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
-            options.push(hAsync("option", { selected: this.currentFilterType === defaultType, value: defaultType }, prop && this.filterItems[prop] && this.filterItems[prop].length > 0 ? capts.add : this.filterNames[defaultType]));
+            options.push(hAsync("option", { selected: this.currentFilterType === defaultType, value: defaultType }, prop && this.filterItems[prop] && this.filterItems[prop].length > 0
+                ? capts.add
+                : this.filterNames[defaultType]));
         }
-        for (let gIndex in this.filterTypes) {
-            options.push(...this.filterTypes[gIndex].map(k => (hAsync("option", { value: k, selected: type === k }, this.filterNames[k]))));
+        for (let gIndex in this.changes.filterTypes) {
+            options.push(...this.changes.filterTypes[gIndex].map(k => (hAsync("option", { value: k, selected: type === k }, this.filterNames[k]))));
             options.push(hAsync("option", { disabled: true }));
         }
         return options;
@@ -3175,8 +3180,10 @@ class FilterPanel {
             top: `${this.changes.y}px`,
         };
         const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
-        return (hAsync(Host, { style: style, ref: (el) => { var _a; ((_a = this.changes) === null || _a === void 0 ? void 0 : _a.autoCorrect) && this.autoCorrect(el); } }, hAsync("label", null, capts.title), hAsync("div", { class: "filter-holder" }, this.getFilterItemsList()), hAsync("div", { class: "add-filter" }, hAsync("select", { id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))), hAsync("div", { class: "filter-actions" }, this.disableDynamicFiltering &&
-            hAsync("button", { id: "revo-button-save", "aria-label": "save", class: "revo-button green", onClick: () => this.onSave() }, capts.save), hAsync("button", { id: "revo-button-reset", "aria-label": "reset", class: "revo-button light", onClick: () => this.onReset() }, capts.reset), hAsync("button", { id: "revo-button-cancel", "aria-label": "cancel", class: "revo-button light", onClick: () => this.onCancel() }, capts.cancel))));
+        return (hAsync(Host, { style: style, ref: el => {
+                var _a;
+                ((_a = this.changes) === null || _a === void 0 ? void 0 : _a.autoCorrect) && this.autoCorrect(el);
+            } }, hAsync("label", null, capts.title), hAsync("div", { class: "filter-holder" }, this.getFilterItemsList()), hAsync("div", { class: "add-filter" }, hAsync("select", { id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))), hAsync("div", { class: "filter-actions" }, this.disableDynamicFiltering && (hAsync("button", { id: "revo-button-save", "aria-label": "save", class: "revo-button green", onClick: () => this.onSave() }, capts.save)), hAsync("button", { id: "revo-button-reset", "aria-label": "reset", class: "revo-button light", onClick: () => this.onReset() }, capts.reset), hAsync("button", { id: "revo-button-cancel", "aria-label": "cancel", class: "revo-button light", onClick: () => this.onCancel() }, capts.cancel))));
     }
     onFilterTypeChange(e, prop, index) {
         if (!(e.target instanceof HTMLSelectElement)) {
@@ -3314,7 +3321,6 @@ class FilterPanel {
         "$tagName$": "revogr-filter-panel",
         "$members$": {
             "filterItems": [16],
-            "filterTypes": [16],
             "filterNames": [16],
             "filterEntities": [16],
             "filterCaptions": [16],
@@ -5240,15 +5246,15 @@ var isFunction = isFunction_1,
  * _.isArrayLike(_.noop);
  * // => false
  */
-function isArrayLike$5(value) {
+function isArrayLike$4(value) {
   return value != null && isLength$1(value.length) && !isFunction(value);
 }
 
-var isArrayLike_1 = isArrayLike$5;
+var isArrayLike_1 = isArrayLike$4;
 
 var arrayLikeKeys = _arrayLikeKeys,
     baseKeys$1 = _baseKeys,
-    isArrayLike$4 = isArrayLike_1;
+    isArrayLike$3 = isArrayLike_1;
 
 /**
  * Creates an array of the own enumerable property names of `object`.
@@ -5278,15 +5284,15 @@ var arrayLikeKeys = _arrayLikeKeys,
  * _.keys('hi');
  * // => ['0', '1']
  */
-function keys$4(object) {
-  return isArrayLike$4(object) ? arrayLikeKeys(object) : baseKeys$1(object);
+function keys$3(object) {
+  return isArrayLike$3(object) ? arrayLikeKeys(object) : baseKeys$1(object);
 }
 
-var keys_1 = keys$4;
+var keys_1 = keys$3;
 
 var baseGetAllKeys = _baseGetAllKeys,
     getSymbols = _getSymbols,
-    keys$3 = keys_1;
+    keys$2 = keys_1;
 
 /**
  * Creates an array of own enumerable property names and symbols of `object`.
@@ -5296,7 +5302,7 @@ var baseGetAllKeys = _baseGetAllKeys,
  * @returns {Array} Returns the array of property names and symbols.
  */
 function getAllKeys$1(object) {
-  return baseGetAllKeys(object, keys$3, getSymbols);
+  return baseGetAllKeys(object, keys$2, getSymbols);
 }
 
 var _getAllKeys = getAllKeys$1;
@@ -5676,7 +5682,7 @@ function isStrictComparable$2(value) {
 var _isStrictComparable = isStrictComparable$2;
 
 var isStrictComparable$1 = _isStrictComparable,
-    keys$2 = keys_1;
+    keys$1 = keys_1;
 
 /**
  * Gets the property names, values, and compare flags of `object`.
@@ -5686,7 +5692,7 @@ var isStrictComparable$1 = _isStrictComparable,
  * @returns {Array} Returns the match data of `object`.
  */
 function getMatchData$1(object) {
-  var result = keys$2(object),
+  var result = keys$1(object),
       length = result.length;
 
   while (length--) {
@@ -6323,7 +6329,7 @@ var baseMatches = _baseMatches,
  * @param {*} [value=_.identity] The value to convert to an iteratee.
  * @returns {Function} Returns the iteratee.
  */
-function baseIteratee$4(value) {
+function baseIteratee$3(value) {
   // Don't store the `typeof` result in a variable to avoid a JIT bug in Safari 9.
   // See https://bugs.webkit.org/show_bug.cgi?id=156034 for more details.
   if (typeof value == 'function') {
@@ -6340,7 +6346,7 @@ function baseIteratee$4(value) {
   return property(value);
 }
 
-var _baseIteratee = baseIteratee$4;
+var _baseIteratee = baseIteratee$3;
 
 var toNumber = toNumber_1;
 
@@ -6423,7 +6429,7 @@ function toInteger$4(value) {
 var toInteger_1 = toInteger$4;
 
 var baseFindIndex = _baseFindIndex,
-    baseIteratee$3 = _baseIteratee,
+    baseIteratee$2 = _baseIteratee,
     toInteger$3 = toInteger_1;
 
 /* Built-in method references for those with the same name as other `lodash` methods. */
@@ -6464,7 +6470,7 @@ var nativeMax$1 = Math.max;
  * _.findIndex(users, 'active');
  * // => 2
  */
-function findIndex$1(array, predicate, fromIndex) {
+function findIndex(array, predicate, fromIndex) {
   var length = array == null ? 0 : array.length;
   if (!length) {
     return -1;
@@ -6473,10 +6479,10 @@ function findIndex$1(array, predicate, fromIndex) {
   if (index < 0) {
     index = nativeMax$1(length + index, 0);
   }
-  return baseFindIndex(array, baseIteratee$3(predicate), index);
+  return baseFindIndex(array, baseIteratee$2(predicate), index);
 }
 
-var findIndex_1 = findIndex$1;
+var findIndex_1 = findIndex;
 
 /* Built-in method references for those with the same name as other `lodash` methods. */
 
@@ -6509,7 +6515,7 @@ function baseRange$1(start, end, step, fromRight) {
 var _baseRange = baseRange$1;
 
 var eq$1 = eq_1,
-    isArrayLike$3 = isArrayLike_1,
+    isArrayLike$2 = isArrayLike_1,
     isIndex = _isIndex,
     isObject$1 = isObject_1;
 
@@ -6529,7 +6535,7 @@ function isIterateeCall$3(value, index, object) {
   }
   var type = typeof index;
   if (type == 'number'
-        ? (isArrayLike$3(object) && isIndex(index, object.length))
+        ? (isArrayLike$2(object) && isIndex(index, object.length))
         : (type == 'string' && index in object)
       ) {
     return eq$1(object[index], value);
@@ -7037,7 +7043,7 @@ var baseFor$1 = createBaseFor();
 var _baseFor = baseFor$1;
 
 var baseFor = _baseFor,
-    keys$1 = keys_1;
+    keys = keys_1;
 
 /**
  * The base implementation of `_.forOwn` without support for iteratee shorthands.
@@ -7048,12 +7054,12 @@ var baseFor = _baseFor,
  * @returns {Object} Returns `object`.
  */
 function baseForOwn$1(object, iteratee) {
-  return object && baseFor(object, iteratee, keys$1);
+  return object && baseFor(object, iteratee, keys);
 }
 
 var _baseForOwn = baseForOwn$1;
 
-var isArrayLike$2 = isArrayLike_1;
+var isArrayLike$1 = isArrayLike_1;
 
 /**
  * Creates a `baseEach` or `baseEachRight` function.
@@ -7068,7 +7074,7 @@ function createBaseEach$1(eachFunc, fromRight) {
     if (collection == null) {
       return collection;
     }
-    if (!isArrayLike$2(collection)) {
+    if (!isArrayLike$1(collection)) {
       return eachFunc(collection, iteratee);
     }
     var length = collection.length,
@@ -7128,7 +7134,7 @@ var _baseReduce = baseReduce$1;
 
 var arrayReduce = _arrayReduce,
     baseEach$2 = _baseEach,
-    baseIteratee$2 = _baseIteratee,
+    baseIteratee$1 = _baseIteratee,
     baseReduce = _baseReduce,
     isArray$3 = isArray_1;
 
@@ -7173,7 +7179,7 @@ function reduce(collection, iteratee, accumulator) {
   var func = isArray$3(collection) ? arrayReduce : baseReduce,
       initAccum = arguments.length < 3;
 
-  return func(collection, baseIteratee$2(iteratee), accumulator, initAccum, baseEach$2);
+  return func(collection, baseIteratee$1(iteratee), accumulator, initAccum, baseEach$2);
 }
 
 var reduce_1 = reduce;
@@ -8648,138 +8654,426 @@ class OrderEditor {
     }; }
 }
 
-const GROUP_DEPTH = `${GRID_INTERNALS}-depth`;
-const PSEUDO_GROUP_ITEM = `${GRID_INTERNALS}-name`;
-const PSEUDO_GROUP_ITEM_ID = `${GRID_INTERNALS}-id`;
-const PSEUDO_GROUP_ITEM_VALUE = `${GRID_INTERNALS}-value`;
-const PSEUDO_GROUP_COLUMN = `${GRID_INTERNALS}-column`;
-const GROUP_EXPANDED = `${GRID_INTERNALS}-expanded`;
-const GROUP_ORIGINAL_INDEX = `${GRID_INTERNALS}-original-index`;
-const GROUP_EXPAND_BTN = `group-expand`;
-const GROUP_EXPAND_EVENT = `groupexpandclick`;
-const GROUPING_ROW_TYPE = 'rgRow';
-
-function getGroupValueDefault(item, prop) {
-    return item[prop] || null;
-}
-/**
- * Gather data for grouping
- * @param array - flat data array
- * @param groupIds - ids of groups
- * @param expanded - potentially expanded items if present
- */
-function gatherGrouping(array, groupIds, { prevExpanded, expandedAll, getGroupValue = getGroupValueDefault, }) {
-    const groupedItems = new Map();
-    array.forEach((item, originalIndex) => {
-        const groupLevelValues = groupIds.map(groupId => getGroupValue(item, groupId));
-        const lastLevelValue = groupLevelValues.pop();
-        let currentGroupLevel = groupedItems;
-        groupLevelValues.forEach(value => {
-            if (!currentGroupLevel.has(value)) {
-                currentGroupLevel.set(value, new Map());
-            }
-            currentGroupLevel = currentGroupLevel.get(value);
-        });
-        if (!currentGroupLevel.has(lastLevelValue)) {
-            currentGroupLevel.set(lastLevelValue, []);
-        }
-        const lastLevelItems = currentGroupLevel.get(lastLevelValue);
-        lastLevelItems.push(Object.assign(Object.assign({}, item), { [GROUP_ORIGINAL_INDEX]: originalIndex }));
-    });
-    let itemIndex = -1;
-    const groupingDepth = groupIds.length;
-    // collapse all groups in the beginning
-    const trimmed = {};
-    // index mapping
-    const oldNewIndexMap = {};
-    // check if group header exists
-    const pseudoGroupTest = {};
-    const sourceWithGroups = [];
-    function flattenGroupMaps(groupedValues, parentIds, isExpanded) {
-        const depth = parentIds.length;
-        groupedValues.forEach((innerGroupedValues, groupId) => {
-            const levelIds = [...parentIds, groupId];
-            const mergedIds = levelIds.join(',');
-            const isGroupExpanded = isExpanded && (!!expandedAll || !!(prevExpanded === null || prevExpanded === void 0 ? void 0 : prevExpanded[mergedIds]));
-            sourceWithGroups.push({
-                [PSEUDO_GROUP_ITEM]: groupId,
-                [GROUP_DEPTH]: depth,
-                [PSEUDO_GROUP_ITEM_ID]: JSON.stringify(levelIds),
-                [PSEUDO_GROUP_ITEM_VALUE]: mergedIds,
-                [GROUP_EXPANDED]: isGroupExpanded,
-            });
-            itemIndex += 1;
-            if (!isGroupExpanded && depth) {
-                trimmed[itemIndex] = true;
-            }
-            if (Array.isArray(innerGroupedValues)) {
-                innerGroupedValues.forEach(value => {
-                    itemIndex += 1;
-                    if (!isGroupExpanded) {
-                        trimmed[itemIndex] = true;
-                    }
-                    oldNewIndexMap[value[GROUP_ORIGINAL_INDEX]] = itemIndex;
-                    const pseudoGroupTestIds = levelIds.map((_value, index) => levelIds.slice(0, index + 1).join(','));
-                    pseudoGroupTestIds.forEach(pseudoGroupTestId => {
-                        if (!pseudoGroupTest[pseudoGroupTestId]) {
-                            pseudoGroupTest[pseudoGroupTestId] = [];
-                        }
-                        pseudoGroupTest[pseudoGroupTestId].push(itemIndex);
-                    });
-                });
-                sourceWithGroups.push(...innerGroupedValues);
-            }
-            else {
-                flattenGroupMaps(innerGroupedValues, levelIds, isGroupExpanded);
-            }
-        });
+function getCellData(val) {
+    if (typeof val === 'undefined' || val === null) {
+        return '';
     }
-    flattenGroupMaps(groupedItems, [], true);
-    return {
-        sourceWithGroups, // updates source mirror
-        depth: groupingDepth, // largest depth for grouping
-        trimmed, // used for expand/collapse grouping values
-        oldNewIndexMap, // used for mapping old values to new
-        childrenByGroup: pseudoGroupTest, // used to get child items in group
-    };
-}
-function getGroupingName(rgRow) {
-    return rgRow && rgRow[PSEUDO_GROUP_ITEM];
-}
-function isGrouping(rgRow) {
-    return typeof (rgRow === null || rgRow === void 0 ? void 0 : rgRow[PSEUDO_GROUP_ITEM]) !== 'undefined';
+    return val;
 }
-function isGroupingColumn(column) {
-    return column && typeof column[PSEUDO_GROUP_COLUMN] !== 'undefined';
+function getCellDataParsed(model, column) {
+    const val = column.cellParser ? column.cellParser(model, column) : model[column.prop];
+    return getCellData(val);
 }
-function measureEqualDepth(groupA, groupB) {
-    const ln = groupA.length;
-    let i = 0;
-    for (; i < ln; i++) {
-        if (groupA[i] !== groupB[i]) {
-            return i;
-        }
+function getColumnType(rgCol) {
+    if (rgCol.pin) {
+        return rgCol.pin;
     }
-    return i;
+    return 'rgCol';
 }
-function getParsedGroup(id) {
-    const parseGroup = JSON.parse(id);
-    // extra precaution and type safeguard
-    if (!Array.isArray(parseGroup)) {
-        return null;
+function getColumnSizes(cols) {
+    const res = {};
+    for (const [i, c] of cols.entries()) {
+        if (c.size) {
+            res[i] = c.size;
+        }
     }
-    return parseGroup;
+    return res;
 }
-// check if items is child of current clicked group
-function isSameGroup(currentGroup, currentModel, nextModel) {
-    const nextGroup = getParsedGroup(nextModel[PSEUDO_GROUP_ITEM_ID]);
-    if (!nextGroup) {
-        return false;
-    }
-    const depth = measureEqualDepth(currentGroup, nextGroup);
-    return currentModel[GROUP_DEPTH] < depth;
+/**
+ * Check if column is grouping column
+ */
+function isColGrouping(colData) {
+    return !!colData.children;
 }
-
+/**
+ * This function is used to create a collection of columns.
+ */
+function getColumns(columns, level = 0, types) {
+    const collection = {
+        // columns as they are in stores per type
+        columns: {
+            rgCol: [],
+            colPinStart: [],
+            colPinEnd: [],
+        },
+        // columns indexed by prop for quick access
+        columnByProp: {},
+        // column grouping
+        columnGrouping: {
+            rgCol: [],
+            colPinStart: [],
+            colPinEnd: [],
+        },
+        // max depth level for column grouping
+        maxLevel: level,
+        // sorting
+        sort: {},
+    };
+    return reduce_1(columns, (res, colData) => {
+        // Grouped column
+        if (isColGrouping(colData)) {
+            return gatherGroup(res, colData, getColumns(colData.children, level + 1, types), level);
+        }
+        // Regular column
+        const regularColumn = Object.assign(Object.assign({}, (colData.columnType && types && types[colData.columnType])), colData);
+        // Regular column, no Pin
+        if (!regularColumn.pin) {
+            res.columns.rgCol.push(regularColumn);
+            // Pin
+        }
+        else {
+            res.columns[regularColumn.pin].push(regularColumn);
+        }
+        if (regularColumn.order) {
+            res.sort[regularColumn.prop] = regularColumn;
+        }
+        // it's possible that some columns have same prop, but better to avoid it
+        if (!res.columnByProp[regularColumn.prop]) {
+            res.columnByProp[regularColumn.prop] = [];
+        }
+        res.columnByProp[regularColumn.prop].push(regularColumn);
+        // trigger setup hook if present
+        regularColumn.beforeSetup && regularColumn.beforeSetup(regularColumn);
+        return res;
+    }, collection);
+}
+function gatherGroup(res, colData, collection, level = 0) {
+    // group template
+    const group = Object.assign(Object.assign({}, colData), { level, ids: [] });
+    // check columns for update
+    for (let k in collection.columns) {
+        const key = k;
+        const resultItem = res.columns[key];
+        const collectionItem = collection.columns[key];
+        // if column data
+        if (isArray_1(resultItem) && isArray_1(collectionItem)) {
+            // fill columns
+            resultItem.push(...collectionItem);
+            // fill grouping
+            if (collectionItem.length) {
+                res.columnGrouping[key].push(Object.assign(Object.assign({}, group), { ids: collectionItem.map(item => item.prop) }));
+            }
+        }
+    }
+    // merge column groupings
+    for (let k in collection.columnGrouping) {
+        const key = k;
+        const collectionItem = collection.columnGrouping[key];
+        res.columnGrouping[key].push(...collectionItem);
+    }
+    res.maxLevel = Math.max(res.maxLevel, collection.maxLevel);
+    res.sort = Object.assign(Object.assign({}, res.sort), collection.sort);
+    return res;
+}
+function findColumn(columns, prop) {
+    for (const c of columns) {
+        if (isColGrouping(c)) {
+            const found = findColumn(c.children, prop);
+            if (found) {
+                return found;
+            }
+        }
+        else if (c.prop === prop) {
+            return c;
+        }
+    }
+    return undefined;
+}
+function getColumnByProp(columns, prop) {
+    return findColumn(columns, prop);
+}
+
+var codes;
+(function (codes) {
+    codes[codes["MOUSE_LEFT"] = 1] = "MOUSE_LEFT";
+    codes[codes["MOUSE_RIGHT"] = 3] = "MOUSE_RIGHT";
+    codes[codes["MOUSE_MIDDLE"] = 2] = "MOUSE_MIDDLE";
+    codes[codes["BACKSPACE"] = 8] = "BACKSPACE";
+    codes[codes["COMMA"] = 188] = "COMMA";
+    codes[codes["INSERT"] = 45] = "INSERT";
+    codes[codes["DELETE"] = 46] = "DELETE";
+    codes[codes["END"] = 35] = "END";
+    codes[codes["ENTER"] = 13] = "ENTER";
+    codes[codes["ESCAPE"] = 27] = "ESCAPE";
+    codes[codes["CONTROL"] = 17] = "CONTROL";
+    codes[codes["COMMAND_LEFT"] = 91] = "COMMAND_LEFT";
+    codes[codes["COMMAND_RIGHT"] = 93] = "COMMAND_RIGHT";
+    codes[codes["COMMAND_FIREFOX"] = 224] = "COMMAND_FIREFOX";
+    codes[codes["ALT"] = 18] = "ALT";
+    codes[codes["HOME"] = 36] = "HOME";
+    codes[codes["PAGE_DOWN"] = 34] = "PAGE_DOWN";
+    codes[codes["PAGE_UP"] = 33] = "PAGE_UP";
+    codes[codes["PERIOD"] = 190] = "PERIOD";
+    codes[codes["SPACE"] = 32] = "SPACE";
+    codes[codes["SHIFT"] = 16] = "SHIFT";
+    codes[codes["CAPS_LOCK"] = 20] = "CAPS_LOCK";
+    codes[codes["TAB"] = 9] = "TAB";
+    codes[codes["ARROW_RIGHT"] = 39] = "ARROW_RIGHT";
+    codes[codes["ARROW_LEFT"] = 37] = "ARROW_LEFT";
+    codes[codes["ARROW_UP"] = 38] = "ARROW_UP";
+    codes[codes["ARROW_DOWN"] = 40] = "ARROW_DOWN";
+    codes[codes["F1"] = 112] = "F1";
+    codes[codes["F2"] = 113] = "F2";
+    codes[codes["F3"] = 114] = "F3";
+    codes[codes["F4"] = 115] = "F4";
+    codes[codes["F5"] = 116] = "F5";
+    codes[codes["F6"] = 117] = "F6";
+    codes[codes["F7"] = 118] = "F7";
+    codes[codes["F8"] = 119] = "F8";
+    codes[codes["F9"] = 120] = "F9";
+    codes[codes["F10"] = 121] = "F10";
+    codes[codes["F11"] = 122] = "F11";
+    codes[codes["F12"] = 123] = "F12";
+    codes[codes["A"] = 65] = "A";
+    codes[codes["C"] = 67] = "C";
+    codes[codes["D"] = 68] = "D";
+    codes[codes["F"] = 70] = "F";
+    codes[codes["L"] = 76] = "L";
+    codes[codes["O"] = 79] = "O";
+    codes[codes["P"] = 80] = "P";
+    codes[codes["S"] = 83] = "S";
+    codes[codes["V"] = 86] = "V";
+    codes[codes["X"] = 88] = "X";
+})(codes || (codes = {}));
+var codesLetter;
+(function (codesLetter) {
+    codesLetter["ENTER"] = "Enter";
+    codesLetter["ENTER_NUM"] = "NumpadEnter";
+    codesLetter["A"] = "KeyA";
+    codesLetter["C"] = "KeyC";
+    codesLetter["X"] = "KeyX";
+    codesLetter["V"] = "KeyV";
+    codesLetter["ESCAPE"] = "Escape";
+    codesLetter["TAB"] = "Tab";
+    codesLetter["BACKSPACE"] = "Backspace";
+    codesLetter["DELETE"] = "Delete";
+    codesLetter["ARROW_RIGHT"] = "ArrowRight";
+    codesLetter["ARROW_LEFT"] = "ArrowLeft";
+    codesLetter["ARROW_UP"] = "ArrowUp";
+    codesLetter["ARROW_DOWN"] = "ArrowDown";
+    codesLetter["SHIFT"] = "Shift";
+})(codesLetter || (codesLetter = {}));
+var keyValues;
+(function (keyValues) {
+    keyValues["ENTER"] = "Enter";
+    keyValues["TAB"] = "Tab";
+})(keyValues || (keyValues = {}));
+
+var osPlatform;
+(function (osPlatform) {
+    osPlatform["mac"] = "Mac";
+})(osPlatform || (osPlatform = {}));
+
+function isClear(code) {
+    return codesLetter.BACKSPACE === code || codesLetter.DELETE === code;
+}
+function isTab(code) {
+    return codesLetter.TAB === code;
+}
+function isEnterKeyValue(key) {
+    return keyValues.ENTER === key;
+}
+function isCut(event) {
+    return ((event.ctrlKey && event.code === 'KeyX') || // Ctrl + X on Windows
+        (event.metaKey && event.code === 'KeyX')); // Cmd + X on Mac
+}
+function isCopy(event) {
+    return ((event.ctrlKey && event.code === 'KeyC') || // Ctrl + C on Windows
+        (event.metaKey && event.code === 'KeyC')); // Cmd + C on Mac
+}
+function isPaste(event) {
+    return ((event.ctrlKey && event.code === 'KeyV') || // Ctrl + V on Windows
+        (event.metaKey && event.code === 'KeyV')); // Cmd + V on Mac
+}
+function isAll(event) {
+    return ((event.ctrlKey && event.code === 'KeyA') || // Ctrl + A on Windows
+        (event.metaKey && event.code === 'KeyA')); // Cmd + A on Mac
+}
+
+const LETTER_BLOCK_SIZE$1 = 10;
+const calculateRowHeaderSize = (itemsLength, rowHeaderColumn, minWidth = 50) => {
+    return ((rowHeaderColumn === null || rowHeaderColumn === void 0 ? void 0 : rowHeaderColumn.size) ||
+        Math.max((itemsLength.toString().length + 1) * LETTER_BLOCK_SIZE$1, minWidth));
+};
+
+/**
+ * Calculate system scrollbar size
+ */
+function getScrollbarSize(document) {
+    // Create a temporary div container and append it to the body
+    const container = document.createElement('div');
+    // Apply styling to ensure the div is scrollable
+    container.style.overflow = 'scroll';
+    container.style.visibility = 'hidden'; // make sure the container isn't visible
+    container.style.position = 'absolute';
+    container.style.top = '-9999px'; // move it out of the screen
+    container.style.width = '50px'; // arbitrary width
+    container.style.height = '50px'; // arbitrary height
+    // Append the div to the body
+    document.body.appendChild(container);
+    // Calculate the width of the scrollbar
+    const scrollbarWidth = container.offsetWidth - container.clientWidth;
+    // Remove the div from the body after calculation
+    document.body.removeChild(container);
+    // Return the calculated width of the scrollbar
+    return scrollbarWidth;
+}
+/* Scale a value between 2 ranges
+ *
+ * Sample:
+ * // 55 from a 0-100 range to a 0-1000 range (Ranges don't have to be positive)
+ * const n = scaleValue(55, [0,100], [0,1000]);
+ *
+ * Ranges of two values
+ * @from
+ * @to
+ *
+ * ~~ return value does the equivalent of Math.floor but faster.
+ */
+function scaleValue(value, from, to) {
+    return ((to[1] - to[0]) * (value - from[0])) / (from[1] - from[0]) + to[0];
+}
+/**
+ * Async timeout
+ */
+async function timeout(delay = 0) {
+    await new Promise((r) => {
+        setTimeout(() => r(), delay);
+    });
+}
+
+const GROUP_DEPTH = `${GRID_INTERNALS}-depth`;
+const PSEUDO_GROUP_ITEM = `${GRID_INTERNALS}-name`;
+const PSEUDO_GROUP_ITEM_ID = `${GRID_INTERNALS}-id`;
+const PSEUDO_GROUP_ITEM_VALUE = `${GRID_INTERNALS}-value`;
+const PSEUDO_GROUP_COLUMN = `${GRID_INTERNALS}-column`;
+const GROUP_EXPANDED = `${GRID_INTERNALS}-expanded`;
+const GROUP_ORIGINAL_INDEX = `${GRID_INTERNALS}-original-index`;
+const GROUP_EXPAND_BTN = `group-expand`;
+const GROUP_EXPAND_EVENT = `groupexpandclick`;
+const GROUPING_ROW_TYPE = 'rgRow';
+
+function getGroupValueDefault(item, prop) {
+    return item[prop] || null;
+}
+/**
+ * Gather data for grouping
+ * @param array - flat data array
+ * @param groupIds - ids of groups
+ * @param expanded - potentially expanded items if present
+ */
+function gatherGrouping(array, groupIds, { prevExpanded, expandedAll, getGroupValue = getGroupValueDefault, }) {
+    const groupedItems = new Map();
+    array.forEach((item, originalIndex) => {
+        const groupLevelValues = groupIds.map(groupId => getGroupValue(item, groupId));
+        const lastLevelValue = groupLevelValues.pop();
+        let currentGroupLevel = groupedItems;
+        groupLevelValues.forEach(value => {
+            if (!currentGroupLevel.has(value)) {
+                currentGroupLevel.set(value, new Map());
+            }
+            currentGroupLevel = currentGroupLevel.get(value);
+        });
+        if (!currentGroupLevel.has(lastLevelValue)) {
+            currentGroupLevel.set(lastLevelValue, []);
+        }
+        const lastLevelItems = currentGroupLevel.get(lastLevelValue);
+        lastLevelItems.push(Object.assign(Object.assign({}, item), { [GROUP_ORIGINAL_INDEX]: originalIndex }));
+    });
+    let itemIndex = -1;
+    const groupingDepth = groupIds.length;
+    // collapse all groups in the beginning
+    const trimmed = {};
+    // index mapping
+    const oldNewIndexMap = {};
+    // check if group header exists
+    const pseudoGroupTest = {};
+    const sourceWithGroups = [];
+    function flattenGroupMaps(groupedValues, parentIds, isExpanded) {
+        const depth = parentIds.length;
+        groupedValues.forEach((innerGroupedValues, groupId) => {
+            const levelIds = [...parentIds, groupId];
+            const mergedIds = levelIds.join(',');
+            const isGroupExpanded = isExpanded && (!!expandedAll || !!(prevExpanded === null || prevExpanded === void 0 ? void 0 : prevExpanded[mergedIds]));
+            sourceWithGroups.push({
+                [PSEUDO_GROUP_ITEM]: groupId,
+                [GROUP_DEPTH]: depth,
+                [PSEUDO_GROUP_ITEM_ID]: JSON.stringify(levelIds),
+                [PSEUDO_GROUP_ITEM_VALUE]: mergedIds,
+                [GROUP_EXPANDED]: isGroupExpanded,
+            });
+            itemIndex += 1;
+            if (!isGroupExpanded && depth) {
+                trimmed[itemIndex] = true;
+            }
+            if (Array.isArray(innerGroupedValues)) {
+                innerGroupedValues.forEach(value => {
+                    itemIndex += 1;
+                    if (!isGroupExpanded) {
+                        trimmed[itemIndex] = true;
+                    }
+                    oldNewIndexMap[value[GROUP_ORIGINAL_INDEX]] = itemIndex;
+                    const pseudoGroupTestIds = levelIds.map((_value, index) => levelIds.slice(0, index + 1).join(','));
+                    pseudoGroupTestIds.forEach(pseudoGroupTestId => {
+                        if (!pseudoGroupTest[pseudoGroupTestId]) {
+                            pseudoGroupTest[pseudoGroupTestId] = [];
+                        }
+                        pseudoGroupTest[pseudoGroupTestId].push(itemIndex);
+                    });
+                });
+                sourceWithGroups.push(...innerGroupedValues);
+            }
+            else {
+                flattenGroupMaps(innerGroupedValues, levelIds, isGroupExpanded);
+            }
+        });
+    }
+    flattenGroupMaps(groupedItems, [], true);
+    return {
+        sourceWithGroups, // updates source mirror
+        depth: groupingDepth, // largest depth for grouping
+        trimmed, // used for expand/collapse grouping values
+        oldNewIndexMap, // used for mapping old values to new
+        childrenByGroup: pseudoGroupTest, // used to get child items in group
+    };
+}
+function getGroupingName(rgRow) {
+    return rgRow && rgRow[PSEUDO_GROUP_ITEM];
+}
+function isGrouping(rgRow) {
+    return typeof (rgRow === null || rgRow === void 0 ? void 0 : rgRow[PSEUDO_GROUP_ITEM]) !== 'undefined';
+}
+function isGroupingColumn(column) {
+    return column && typeof column[PSEUDO_GROUP_COLUMN] !== 'undefined';
+}
+function measureEqualDepth(groupA, groupB) {
+    const ln = groupA.length;
+    let i = 0;
+    for (; i < ln; i++) {
+        if (groupA[i] !== groupB[i]) {
+            return i;
+        }
+    }
+    return i;
+}
+function getParsedGroup(id) {
+    const parseGroup = JSON.parse(id);
+    // extra precaution and type safeguard
+    if (!Array.isArray(parseGroup)) {
+        return null;
+    }
+    return parseGroup;
+}
+// check if items is child of current clicked group
+function isSameGroup(currentGroup, currentModel, nextModel) {
+    const nextGroup = getParsedGroup(nextModel[PSEUDO_GROUP_ITEM_ID]);
+    if (!nextGroup) {
+        return false;
+    }
+    const depth = measureEqualDepth(currentGroup, nextGroup);
+    return currentModel[GROUP_DEPTH] < depth;
+}
+
 /**
  * The base implementation of `_.slice` without an iteratee call guard.
  *
@@ -8883,11 +9177,10 @@ class ColumnService {
         return !!readOnly;
     }
     mergeProperties(r, c, defaultProps, model, extraPropsFunc) {
-        const cellClass = {
-            [CELL_CLASS]: true,
-            [DISABLED_CLASS]: this.isReadOnly(r, c),
-        };
-        let props = Object.assign(Object.assign({}, defaultProps), { class: cellClass });
+        const props = Object.assign({}, defaultProps);
+        props.class = Object.assign(Object.assign({}, (typeof props.class === 'string'
+            ? { [props.class]: true }
+            : props.class)), { [CELL_CLASS]: true, [DISABLED_CLASS]: this.isReadOnly(r, c) });
         const extra = extraPropsFunc === null || extraPropsFunc === void 0 ? void 0 : extraPropsFunc(model);
         if (!extra) {
             return props;
@@ -8903,10 +9196,10 @@ class ColumnService {
         return getCellData(data.model[data.prop]);
     }
     getSaveData(rowIndex, colIndex, val) {
+        const data = this.rowDataModel(rowIndex, colIndex);
         if (typeof val === 'undefined') {
-            val = this.getCellData(rowIndex, colIndex);
+            val = getCellData(data.model[data.prop]);
         }
-        const data = this.rowDataModel(rowIndex, colIndex);
         return {
             prop: data.prop,
             rowIndex,
@@ -9108,124 +9401,47 @@ class ColumnService {
         }
         return {
             data: toCopy,
-            mapping,
-        };
-    }
-    destroy() {
-        this.unsubscribe.forEach(f => f());
-    }
-}
-function getCellData(val) {
-    if (typeof val === 'undefined' || val === null) {
-        return '';
-    }
-    return val;
-}
-/**
- * Checks if the given rowDrag is a service for dragging rows.
- */
-function isRowDragService(rowDrag, model) {
-    if (typeof rowDrag === 'function') {
-        return rowDrag(model);
-    }
-    return !!rowDrag;
-}
-function doPropMerge(existing, extra) {
-    let props = Object.assign(Object.assign({}, extra), existing);
-    // extend existing props
-    if (extra.class) {
-        if (typeof extra.class === 'object' && typeof props.class === 'object') {
-            props.class = Object.assign(Object.assign({}, extra.class), props.class);
-        }
-        else if (typeof extra.class === 'string' &&
-            typeof props.class === 'object') {
-            props.class[extra.class] = true;
-        }
-        else if (typeof props.class === 'string') {
-            props.class += ' ' + extra.class;
-        }
-    }
-    if (extra.style) {
-        props.style = Object.assign(Object.assign({}, extra.style), props.style);
-    }
-    return props;
-}
-
-var codes;
-(function (codes) {
-    codes[codes["MOUSE_LEFT"] = 1] = "MOUSE_LEFT";
-    codes[codes["MOUSE_RIGHT"] = 3] = "MOUSE_RIGHT";
-    codes[codes["MOUSE_MIDDLE"] = 2] = "MOUSE_MIDDLE";
-    codes[codes["BACKSPACE"] = 8] = "BACKSPACE";
-    codes[codes["COMMA"] = 188] = "COMMA";
-    codes[codes["INSERT"] = 45] = "INSERT";
-    codes[codes["DELETE"] = 46] = "DELETE";
-    codes[codes["END"] = 35] = "END";
-    codes[codes["ENTER"] = 13] = "ENTER";
-    codes[codes["ESCAPE"] = 27] = "ESCAPE";
-    codes[codes["CONTROL"] = 17] = "CONTROL";
-    codes[codes["COMMAND_LEFT"] = 91] = "COMMAND_LEFT";
-    codes[codes["COMMAND_RIGHT"] = 93] = "COMMAND_RIGHT";
-    codes[codes["COMMAND_FIREFOX"] = 224] = "COMMAND_FIREFOX";
-    codes[codes["ALT"] = 18] = "ALT";
-    codes[codes["HOME"] = 36] = "HOME";
-    codes[codes["PAGE_DOWN"] = 34] = "PAGE_DOWN";
-    codes[codes["PAGE_UP"] = 33] = "PAGE_UP";
-    codes[codes["PERIOD"] = 190] = "PERIOD";
-    codes[codes["SPACE"] = 32] = "SPACE";
-    codes[codes["SHIFT"] = 16] = "SHIFT";
-    codes[codes["CAPS_LOCK"] = 20] = "CAPS_LOCK";
-    codes[codes["TAB"] = 9] = "TAB";
-    codes[codes["ARROW_RIGHT"] = 39] = "ARROW_RIGHT";
-    codes[codes["ARROW_LEFT"] = 37] = "ARROW_LEFT";
-    codes[codes["ARROW_UP"] = 38] = "ARROW_UP";
-    codes[codes["ARROW_DOWN"] = 40] = "ARROW_DOWN";
-    codes[codes["F1"] = 112] = "F1";
-    codes[codes["F2"] = 113] = "F2";
-    codes[codes["F3"] = 114] = "F3";
-    codes[codes["F4"] = 115] = "F4";
-    codes[codes["F5"] = 116] = "F5";
-    codes[codes["F6"] = 117] = "F6";
-    codes[codes["F7"] = 118] = "F7";
-    codes[codes["F8"] = 119] = "F8";
-    codes[codes["F9"] = 120] = "F9";
-    codes[codes["F10"] = 121] = "F10";
-    codes[codes["F11"] = 122] = "F11";
-    codes[codes["F12"] = 123] = "F12";
-    codes[codes["A"] = 65] = "A";
-    codes[codes["C"] = 67] = "C";
-    codes[codes["D"] = 68] = "D";
-    codes[codes["F"] = 70] = "F";
-    codes[codes["L"] = 76] = "L";
-    codes[codes["O"] = 79] = "O";
-    codes[codes["P"] = 80] = "P";
-    codes[codes["S"] = 83] = "S";
-    codes[codes["V"] = 86] = "V";
-    codes[codes["X"] = 88] = "X";
-})(codes || (codes = {}));
-var codesLetter;
-(function (codesLetter) {
-    codesLetter["ENTER"] = "Enter";
-    codesLetter["ENTER_NUM"] = "NumpadEnter";
-    codesLetter["A"] = "KeyA";
-    codesLetter["C"] = "KeyC";
-    codesLetter["X"] = "KeyX";
-    codesLetter["V"] = "KeyV";
-    codesLetter["ESCAPE"] = "Escape";
-    codesLetter["TAB"] = "Tab";
-    codesLetter["BACKSPACE"] = "Backspace";
-    codesLetter["DELETE"] = "Delete";
-    codesLetter["ARROW_RIGHT"] = "ArrowRight";
-    codesLetter["ARROW_LEFT"] = "ArrowLeft";
-    codesLetter["ARROW_UP"] = "ArrowUp";
-    codesLetter["ARROW_DOWN"] = "ArrowDown";
-    codesLetter["SHIFT"] = "Shift";
-})(codesLetter || (codesLetter = {}));
-var keyValues;
-(function (keyValues) {
-    keyValues["ENTER"] = "Enter";
-    keyValues["TAB"] = "Tab";
-})(keyValues || (keyValues = {}));
+            mapping,
+        };
+    }
+    destroy() {
+        this.unsubscribe.forEach(f => f());
+    }
+}
+/**
+ * Checks if the given rowDrag is a service for dragging rows.
+ */
+function isRowDragService(rowDrag, model) {
+    if (typeof rowDrag === 'function') {
+        return rowDrag(model);
+    }
+    return !!rowDrag;
+}
+function mergeClasses(class1 = {}, class2 = {}) {
+    if (typeof class1 === 'string') {
+        class1 = { [class1]: true };
+    }
+    if (typeof class2 === 'string') {
+        class2 = { [class2]: true };
+    }
+    return Object.assign(Object.assign({}, class1), class2);
+}
+function doPropMerge(existing, extra) {
+    // if className is provided - remove it from props it messing with stencil
+    if (extra.className) {
+        extra.class = mergeClasses(extra.class, extra.className);
+        delete extra.className;
+    }
+    let props = Object.assign(Object.assign({}, extra), existing);
+    // extend existing props
+    if (extra.class) {
+        props.class = mergeClasses(props.class, extra.class);
+    }
+    if (extra.style) {
+        props.style = Object.assign(Object.assign({}, extra.style), props.style);
+    }
+    return props;
+}
 
 function isTouch(e) {
     return !!e.touches;
@@ -9302,311 +9518,109 @@ function getCurrentCell({ x, y }, { el, rows, cols }) {
     let cellX = x - left;
     // Limit the cell position to the element height
     if (cellY >= height) {
-        cellY = height - 1;
-    }
-    // Limit the cell position to the element width
-    if (cellX >= width) {
-        cellX = width - 1;
-    }
-    // Get the row and column items based on the cell position
-    const rgRow = getItemByPosition(rows, cellY);
-    const rgCol = getItemByPosition(cols, cellX);
-    // Set the row and column index to 0 if they are before the first item
-    if (rgCol.itemIndex < 0) {
-        rgCol.itemIndex = 0;
-    }
-    if (rgRow.itemIndex < 0) {
-        rgRow.itemIndex = 0;
-    }
-    return { x: rgCol.itemIndex, y: rgRow.itemIndex };
-}
-function getCoordinate(range, focus, changes, isMulti = false) {
-    const updateCoordinate = (c, pos = 0) => {
-        const start = { x: range.x, y: range.y };
-        const end = isMulti ? { x: range.x1, y: range.y1 } : start;
-        const point = end[c] > focus[c] ? end : start;
-        point[c] += pos;
-        return { start, end };
-    };
-    if (changes.x) {
-        return updateCoordinate('x', changes['x']);
-    }
-    if (changes.y) {
-        return updateCoordinate('y', changes['y']);
-    }
-    return null;
-}
-/**
- * Check if the x coordinate of the cell position is after or equal to the x coordinate of the last cell position
- * or if the y coordinate of the cell position is after or equal to the y coordinate of the last cell position
- */
-function isAfterLast({ x, y }, lastCell) {
-    return x >= lastCell.x || y >= lastCell.y;
-}
-/** check if out of range */
-function isBeforeFirst({ x, y }) {
-    return x < 0 || y < 0;
-}
-/** Compare cells, only 1 coordinate difference is possible */
-// export function getDirectionCoordinate(initial: Cell, last: Cell): Partial<Cell> | null {
-//   const c: (keyof Cell)[] = ['x', 'y'];
-//   for (let k of c) {
-//     if (initial[k] !== last[k]) {
-//       return { [k]: 1 };
-//     }
-//   }
-//   return null;
-// }
-// export function getLargestAxis(initial: Cell, last: Cell): Partial<Cell> | null {
-//   const cell: Partial<Cell> = {};
-//   const c: (keyof Cell)[] = ['x', 'y'];
-//   for (let k of c) {
-//     cell[k] = Math.abs(initial[k] - last[k]);
-//   }
-//   if (cell.x > cell.y) {
-//     return { x: 1 };
-//   }
-//   if (cell.y > cell.x) {
-//     return { y: 1 };
-//   }
-//   return null;
-// }
-function styleByCellProps(styles) {
-    return {
-        left: `${styles.left}px`,
-        top: `${styles.top}px`,
-        width: `${styles.width}px`,
-        height: `${styles.height}px`,
-    };
-}
-function getCell({ x, y, x1, y1 }, dimensionRow, dimensionCol) {
-    const top = getItemByIndex(dimensionRow, y).start;
-    const left = getItemByIndex(dimensionCol, x).start;
-    const bottom = getItemByIndex(dimensionRow, y1).end;
-    const right = getItemByIndex(dimensionCol, x1).end;
-    return {
-        left,
-        right,
-        top,
-        bottom,
-        width: right - left,
-        height: bottom - top,
-    };
-}
-function getElStyle(range, dimensionRow, dimensionCol) {
-    const styles = getCell(range, dimensionRow, dimensionCol);
-    return styleByCellProps(styles);
-}
-
-// is edit input
-function isEditInput(el) {
-    return !!(el === null || el === void 0 ? void 0 : el.closest(`.${EDIT_INPUT_WR}`));
-}
-// Type guard for EditorCtrConstructible
-function isEditorCtrConstructible(editor) {
-    return typeof editor === 'function' && typeof editor.prototype === 'object';
-}
-
-var osPlatform;
-(function (osPlatform) {
-    osPlatform["mac"] = "Mac";
-})(osPlatform || (osPlatform = {}));
-
-function isClear(code) {
-    return codesLetter.BACKSPACE === code || codesLetter.DELETE === code;
-}
-function isTab(code) {
-    return codesLetter.TAB === code;
-}
-function isEnterKeyValue(key) {
-    return keyValues.ENTER === key;
-}
-function isCut(event) {
-    return ((event.ctrlKey && event.code === 'KeyX') || // Ctrl + X on Windows
-        (event.metaKey && event.code === 'KeyX')); // Cmd + X on Mac
-}
-function isCopy(event) {
-    return ((event.ctrlKey && event.code === 'KeyC') || // Ctrl + C on Windows
-        (event.metaKey && event.code === 'KeyC')); // Cmd + C on Mac
-}
-function isPaste(event) {
-    return ((event.ctrlKey && event.code === 'KeyV') || // Ctrl + V on Windows
-        (event.metaKey && event.code === 'KeyV')); // Cmd + V on Mac
-}
-function isAll(event) {
-    return ((event.ctrlKey && event.code === 'KeyA') || // Ctrl + A on Windows
-        (event.metaKey && event.code === 'KeyA')); // Cmd + A on Mac
-}
-
-function getColumnType(rgCol) {
-    if (rgCol.pin) {
-        return rgCol.pin;
-    }
-    return 'rgCol';
-}
-function getColumnSizes(cols) {
-    const res = {};
-    for (const [i, c] of cols.entries()) {
-        if (c.size) {
-            res[i] = c.size;
-        }
-    }
-    return res;
-}
-/**
- * Check if column is grouping column
- */
-function isColGrouping(colData) {
-    return !!colData.children;
-}
-/**
- * This function is used to create a collection of columns.
- */
-function getColumns(columns, level = 0, types) {
-    const collection = {
-        // columns as they are in stores per type
-        columns: {
-            rgCol: [],
-            colPinStart: [],
-            colPinEnd: [],
-        },
-        // columns indexed by prop for quick access
-        columnByProp: {},
-        // column grouping
-        columnGrouping: {
-            rgCol: [],
-            colPinStart: [],
-            colPinEnd: [],
-        },
-        // max depth level for column grouping
-        maxLevel: level,
-        // sorting
-        sort: {},
-    };
-    return reduce_1(columns, (res, colData) => {
-        // Grouped column
-        if (isColGrouping(colData)) {
-            return gatherGroup(res, colData, getColumns(colData.children, level + 1, types), level);
-        }
-        // Regular column
-        const regularColumn = Object.assign(Object.assign({}, (colData.columnType && types && types[colData.columnType])), colData);
-        // Regular column, no Pin
-        if (!regularColumn.pin) {
-            res.columns.rgCol.push(regularColumn);
-            // Pin
-        }
-        else {
-            res.columns[regularColumn.pin].push(regularColumn);
-        }
-        if (regularColumn.order) {
-            res.sort[regularColumn.prop] = regularColumn;
-        }
-        // it's possible that some columns have same prop, but better to avoid it
-        if (!res.columnByProp[regularColumn.prop]) {
-            res.columnByProp[regularColumn.prop] = [];
-        }
-        res.columnByProp[regularColumn.prop].push(regularColumn);
-        // trigger setup hook if present
-        regularColumn.beforeSetup && regularColumn.beforeSetup(regularColumn);
-        return res;
-    }, collection);
-}
-function gatherGroup(res, colData, collection, level = 0) {
-    // group template
-    const group = Object.assign(Object.assign({}, colData), { level, ids: [] });
-    // check columns for update
-    for (let k in collection.columns) {
-        const key = k;
-        const resultItem = res.columns[key];
-        const collectionItem = collection.columns[key];
-        // if column data
-        if (isArray_1(resultItem) && isArray_1(collectionItem)) {
-            // fill columns
-            resultItem.push(...collectionItem);
-            // fill grouping
-            if (collectionItem.length) {
-                res.columnGrouping[key].push(Object.assign(Object.assign({}, group), { ids: collectionItem.map(item => item.prop) }));
-            }
-        }
+        cellY = height - 1;
     }
-    // merge column groupings
-    for (let k in collection.columnGrouping) {
-        const key = k;
-        const collectionItem = collection.columnGrouping[key];
-        res.columnGrouping[key].push(...collectionItem);
+    // Limit the cell position to the element width
+    if (cellX >= width) {
+        cellX = width - 1;
     }
-    res.maxLevel = Math.max(res.maxLevel, collection.maxLevel);
-    res.sort = Object.assign(Object.assign({}, res.sort), collection.sort);
-    return res;
-}
-function findColumn(columns, prop) {
-    for (const c of columns) {
-        if (isColGrouping(c)) {
-            const found = findColumn(c.children, prop);
-            if (found) {
-                return found;
-            }
-        }
-        else if (c.prop === prop) {
-            return c;
-        }
+    // Get the row and column items based on the cell position
+    const rgRow = getItemByPosition(rows, cellY);
+    const rgCol = getItemByPosition(cols, cellX);
+    // Set the row and column index to 0 if they are before the first item
+    if (rgCol.itemIndex < 0) {
+        rgCol.itemIndex = 0;
     }
-    return undefined;
+    if (rgRow.itemIndex < 0) {
+        rgRow.itemIndex = 0;
+    }
+    return { x: rgCol.itemIndex, y: rgRow.itemIndex };
 }
-function getColumnByProp(columns, prop) {
-    return findColumn(columns, prop);
+function getCoordinate(range, focus, changes, isMulti = false) {
+    const updateCoordinate = (c, pos = 0) => {
+        const start = { x: range.x, y: range.y };
+        const end = isMulti ? { x: range.x1, y: range.y1 } : start;
+        const point = end[c] > focus[c] ? end : start;
+        point[c] += pos;
+        return { start, end };
+    };
+    if (changes.x) {
+        return updateCoordinate('x', changes['x']);
+    }
+    if (changes.y) {
+        return updateCoordinate('y', changes['y']);
+    }
+    return null;
 }
-
-const LETTER_BLOCK_SIZE$1 = 10;
-const calculateRowHeaderSize = (itemsLength, rowHeaderColumn, minWidth = 50) => {
-    return ((rowHeaderColumn === null || rowHeaderColumn === void 0 ? void 0 : rowHeaderColumn.size) ||
-        Math.max((itemsLength.toString().length + 1) * LETTER_BLOCK_SIZE$1, minWidth));
-};
-
 /**
- * Calculate system scrollbar size
+ * Check if the x coordinate of the cell position is after or equal to the x coordinate of the last cell position
+ * or if the y coordinate of the cell position is after or equal to the y coordinate of the last cell position
  */
-function getScrollbarSize(document) {
-    // Create a temporary div container and append it to the body
-    const container = document.createElement('div');
-    // Apply styling to ensure the div is scrollable
-    container.style.overflow = 'scroll';
-    container.style.visibility = 'hidden'; // make sure the container isn't visible
-    container.style.position = 'absolute';
-    container.style.top = '-9999px'; // move it out of the screen
-    container.style.width = '50px'; // arbitrary width
-    container.style.height = '50px'; // arbitrary height
-    // Append the div to the body
-    document.body.appendChild(container);
-    // Calculate the width of the scrollbar
-    const scrollbarWidth = container.offsetWidth - container.clientWidth;
-    // Remove the div from the body after calculation
-    document.body.removeChild(container);
-    // Return the calculated width of the scrollbar
-    return scrollbarWidth;
+function isAfterLast({ x, y }, lastCell) {
+    return x >= lastCell.x || y >= lastCell.y;
 }
-/* Scale a value between 2 ranges
- *
- * Sample:
- * // 55 from a 0-100 range to a 0-1000 range (Ranges don't have to be positive)
- * const n = scaleValue(55, [0,100], [0,1000]);
- *
- * Ranges of two values
- * @from
- * @to
- *
- * ~~ return value does the equivalent of Math.floor but faster.
- */
-function scaleValue(value, from, to) {
-    return ((to[1] - to[0]) * (value - from[0])) / (from[1] - from[0]) + to[0];
+/** check if out of range */
+function isBeforeFirst({ x, y }) {
+    return x < 0 || y < 0;
 }
-/**
- * Async timeout
- */
-async function timeout(delay = 0) {
-    await new Promise((r) => {
-        setTimeout(() => r(), delay);
-    });
+/** Compare cells, only 1 coordinate difference is possible */
+// export function getDirectionCoordinate(initial: Cell, last: Cell): Partial<Cell> | null {
+//   const c: (keyof Cell)[] = ['x', 'y'];
+//   for (let k of c) {
+//     if (initial[k] !== last[k]) {
+//       return { [k]: 1 };
+//     }
+//   }
+//   return null;
+// }
+// export function getLargestAxis(initial: Cell, last: Cell): Partial<Cell> | null {
+//   const cell: Partial<Cell> = {};
+//   const c: (keyof Cell)[] = ['x', 'y'];
+//   for (let k of c) {
+//     cell[k] = Math.abs(initial[k] - last[k]);
+//   }
+//   if (cell.x > cell.y) {
+//     return { x: 1 };
+//   }
+//   if (cell.y > cell.x) {
+//     return { y: 1 };
+//   }
+//   return null;
+// }
+function styleByCellProps(styles) {
+    return {
+        left: `${styles.left}px`,
+        top: `${styles.top}px`,
+        width: `${styles.width}px`,
+        height: `${styles.height}px`,
+    };
+}
+function getCell({ x, y, x1, y1 }, dimensionRow, dimensionCol) {
+    const top = getItemByIndex(dimensionRow, y).start;
+    const left = getItemByIndex(dimensionCol, x).start;
+    const bottom = getItemByIndex(dimensionRow, y1).end;
+    const right = getItemByIndex(dimensionCol, x1).end;
+    return {
+        left,
+        right,
+        top,
+        bottom,
+        width: right - left,
+        height: bottom - top,
+    };
+}
+function getElStyle(range, dimensionRow, dimensionCol) {
+    const styles = getCell(range, dimensionRow, dimensionCol);
+    return styleByCellProps(styles);
+}
+
+// is edit input
+function isEditInput(el) {
+    return !!(el === null || el === void 0 ? void 0 : el.closest(`.${EDIT_INPUT_WR}`));
+}
+// Type guard for EditorCtrConstructible
+function isEditorCtrConstructible(editor) {
+    return typeof editor === 'function' && typeof editor.prototype === 'object';
 }
 
 const DIRECTION_CODES = [
@@ -10717,81 +10731,12 @@ class RevoEdit {
     }; }
 }
 
-var baseIteratee$1 = _baseIteratee,
-    isArrayLike$1 = isArrayLike_1,
-    keys = keys_1;
-
-/**
- * Creates a `_.find` or `_.findLast` function.
- *
- * @private
- * @param {Function} findIndexFunc The function to find the collection index.
- * @returns {Function} Returns the new find function.
- */
-function createFind$1(findIndexFunc) {
-  return function(collection, predicate, fromIndex) {
-    var iterable = Object(collection);
-    if (!isArrayLike$1(collection)) {
-      var iteratee = baseIteratee$1(predicate);
-      collection = keys(collection);
-      predicate = function(key) { return iteratee(iterable[key], key, iterable); };
-    }
-    var index = findIndexFunc(collection, predicate, fromIndex);
-    return index > -1 ? iterable[iteratee ? collection[index] : index] : undefined;
-  };
-}
-
-var _createFind = createFind$1;
-
-var createFind = _createFind,
-    findIndex = findIndex_1;
-
-/**
- * Iterates over elements of `collection`, returning the first element
- * `predicate` returns truthy for. The predicate is invoked with three
- * arguments: (value, index|key, collection).
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Collection
- * @param {Array|Object} collection The collection to inspect.
- * @param {Function} [predicate=_.identity] The function invoked per iteration.
- * @param {number} [fromIndex=0] The index to search from.
- * @returns {*} Returns the matched element, else `undefined`.
- * @example
- *
- * var users = [
- *   { 'user': 'barney',  'age': 36, 'active': true },
- *   { 'user': 'fred',    'age': 40, 'active': false },
- *   { 'user': 'pebbles', 'age': 1,  'active': true }
- * ];
- *
- * _.find(users, function(o) { return o.age < 40; });
- * // => object for 'barney'
- *
- * // The `_.matches` iteratee shorthand.
- * _.find(users, { 'age': 1, 'active': true });
- * // => object for 'pebbles'
- *
- * // The `_.matchesProperty` iteratee shorthand.
- * _.find(users, ['active', false]);
- * // => object for 'fred'
- *
- * // The `_.property` iteratee shorthand.
- * _.find(users, 'active');
- * // => object for 'barney'
- */
-var find = createFind(findIndex);
-
-var find_1 = find;
-
 class ColumnDataProvider {
     get order() {
         const order = {};
         const sorting = this.sorting;
         if (sorting) {
-            Object.keys(sorting).forEach((prop) => {
+            Object.keys(sorting).forEach(prop => {
                 order[prop] = sorting[prop].order;
             });
         }
@@ -10802,6 +10747,7 @@ class ColumnDataProvider {
     }
     constructor() {
         this.sorting = null;
+        this.collection = null;
         this.dataSources = columnTypes.reduce((sources, k) => {
             sources[k] = new DataStore(k);
             return sources;
@@ -10835,9 +10781,9 @@ class ColumnDataProvider {
     getColumnIndexByProp(prop, type) {
         return getSourceItemVirtualIndexByProp(this.dataSources[type].store, prop);
     }
-    getColumnByProp(prop, type) {
-        const items = this.dataSources[type].store.get('source');
-        return find_1(items, { prop });
+    getColumnByProp(prop) {
+        var _a;
+        return (_a = this.collection) === null || _a === void 0 ? void 0 : _a.columnByProp[prop];
     }
     refreshByType(type) {
         this.dataSources[type].refresh();
@@ -10859,6 +10805,7 @@ class ColumnDataProvider {
             });
         });
         this.sorting = data.sort;
+        this.collection = data;
         return data;
     }
     updateColumns(cols) {
@@ -11191,7 +11138,7 @@ class ThemeService {
         this.register('default');
     }
     register(theme) {
-        const parsedTheme = ThemeService.getTheme(theme);
+        const parsedTheme = getTheme(theme);
         switch (parsedTheme) {
             case 'material':
             case 'darkMaterial':
@@ -11206,12 +11153,12 @@ class ThemeService {
                 break;
         }
     }
-    static getTheme(theme) {
-        if (theme && allowedThemes.indexOf(theme) > -1) {
-            return theme;
-        }
-        return DEFAULT_THEME;
+}
+function getTheme(theme) {
+    if (theme && allowedThemes.indexOf(theme) > -1) {
+        return theme;
     }
+    return DEFAULT_THEME;
 }
 
 /**
@@ -11618,23 +11565,7 @@ const notContains = (value, extra) => {
 notContains.extra = 'input';
 contains.extra = 'input';
 
-const filterNames = {
-    none: 'None',
-    empty: 'Not set',
-    notEmpty: 'Set',
-    eq: 'Equal',
-    notEq: 'Not equal',
-    begins: 'Begins with',
-    contains: 'Contains',
-    notContains: 'Does not contain',
-    eqN: '=',
-    neqN: '!=',
-    gt: '>',
-    gte: '>=',
-    lt: '<',
-    lte: '<=',
-};
-const filterEntities = {
+const filterCoreFunctionsIndexedByType = {
     none: () => true,
     empty: notSet,
     notEmpty: set,
@@ -11654,7 +11585,37 @@ const filterTypes = {
     string: ['notEmpty', 'empty', 'eq', 'notEq', 'begins', 'contains', 'notContains'],
     number: ['notEmpty', 'empty', 'eqN', 'neqN', 'gt', 'gte', 'lt', 'lte'],
 };
+const filterNames = {
+    none: 'None',
+    empty: 'Not set',
+    notEmpty: 'Set',
+    eq: 'Equal',
+    notEq: 'Not equal',
+    begins: 'Begins with',
+    contains: 'Contains',
+    notContains: 'Does not contain',
+    eqN: '=',
+    neqN: '!=',
+    gt: '>',
+    gte: '>=',
+    lt: '<',
+    lte: '<=',
+};
 
+/**
+ * @typedef ColumnFilterConfig
+ * @type {object}
+ * @property {FilterCollection|undefined} collection - preserved filter data
+ * @property {string[]|undefined} include - filters to be included, if defined everything else out of scope will be ignored
+ * @property {Record<string, CustomFilter>|undefined} customFilters - hash map of {FilterType:CustomFilter}.
+ * @property {FilterLocalization|undefined} localization - translation for filter popup captions.
+ * @property {MultiFilterItem|undefined} multiFilterItems - data for multi filtering.
+ * @property {boolean|undefined} disableDynamicFiltering - disables dynamic filtering.
+ * A way to define your own filter types per column
+ */
+/**
+ * @internal
+ */
 const FILTER_TRIMMED_TYPE = 'filter';
 const FILTER_CONFIG_CHANGED_EVENT = 'filterconfigchanged';
 class FilterPlugin extends BasePlugin {
@@ -11664,14 +11625,13 @@ class FilterPlugin extends BasePlugin {
         this.revogrid = revogrid;
         this.filterCollection = {};
         this.multiFilterItems = {};
-        this.possibleFilters = Object.assign({}, filterTypes);
-        this.possibleFilterNames = Object.assign({}, filterNames);
-        this.possibleFilterEntities = Object.assign({}, filterEntities);
+        this.filterByType = Object.assign({}, filterTypes);
+        this.filterNameIndexByType = Object.assign({}, filterNames);
+        this.filterFunctionsIndexedByType = Object.assign({}, filterCoreFunctionsIndexedByType);
         this.filterProp = FILTER_PROP;
         if (config) {
             this.initConfig(config);
         }
-        const headerclick = (e) => this.headerclick(e);
         const aftersourceset = async () => {
             const filterCollectionProps = Object.keys(this.filterCollection);
             if (filterCollectionProps.length > 0) {
@@ -11691,7 +11651,7 @@ class FilterPlugin extends BasePlugin {
             }
             await this.runFiltering();
         };
-        this.addEventListener('headerclick', headerclick);
+        this.addEventListener('headerclick', (e) => this.headerclick(e));
         this.addEventListener(FILTER_CONFIG_CHANGED_EVENT, ({ detail }) => {
             if (!detail) {
                 this.clearFiltering();
@@ -11704,27 +11664,29 @@ class FilterPlugin extends BasePlugin {
         });
         this.addEventListener('aftersourceset', aftersourceset);
         this.addEventListener('filter', ({ detail }) => this.onFilterChange(detail));
-        const existingNodes = this.revogrid.registerVNode.filter((n) => n.$tag$ !== 'revogr-filter-panel');
+        const existingNodes = this.revogrid.registerVNode.filter(n => n.$tag$ !== 'revogr-filter-panel');
         this.revogrid.registerVNode = [
             ...existingNodes,
-            hAsync("revogr-filter-panel", { filterItems: this.multiFilterItems, filterNames: this.possibleFilterNames, filterEntities: this.possibleFilterEntities, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: e => this.onFilterChange(e.detail), disableDynamicFiltering: config === null || config === void 0 ? void 0 : config.disableDynamicFiltering, ref: e => (this.pop = e) }),
+            hAsync("revogr-filter-panel", { filterItems: this.multiFilterItems, filterNames: this.filterNameIndexByType, filterEntities: this.filterFunctionsIndexedByType, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: e => this.onFilterChange(e.detail), disableDynamicFiltering: config === null || config === void 0 ? void 0 : config.disableDynamicFiltering, ref: e => (this.pop = e) }),
         ];
     }
     initConfig(config) {
         if (config.multiFilterItems) {
             this.multiFilterItems = Object.assign({}, config.multiFilterItems);
         }
+        // Add custom filters
         if (config.customFilters) {
-            for (let cType in config.customFilters) {
-                const cFilter = config.customFilters[cType];
-                if (!this.possibleFilters[cFilter.columnFilterType]) {
-                    this.possibleFilters[cFilter.columnFilterType] = [];
+            for (let customFilterType in config.customFilters) {
+                const cFilter = config.customFilters[customFilterType];
+                if (!this.filterByType[cFilter.columnFilterType]) {
+                    this.filterByType[cFilter.columnFilterType] = [];
                 }
-                this.possibleFilters[cFilter.columnFilterType].push(cType);
-                this.possibleFilterEntities[cType] = cFilter.func;
-                this.possibleFilterNames[cType] = cFilter.name;
+                this.filterByType[cFilter.columnFilterType].push(customFilterType);
+                this.filterFunctionsIndexedByType[customFilterType] = cFilter.func;
+                this.filterNameIndexByType[customFilterType] = cFilter.name;
             }
         }
+        // Add filterProp if provided in config
         if (config.filterProp) {
             this.filterProp = config.filterProp;
         }
@@ -11735,21 +11697,21 @@ class FilterPlugin extends BasePlugin {
         const cfgInlcude = config.include;
         if (cfgInlcude) {
             const filters = {};
-            for (let t in this.possibleFilters) {
+            for (let t in this.filterByType) {
                 // validate filters, if appropriate function present
-                const newTypes = this.possibleFilters[t].filter(f => cfgInlcude.indexOf(f) > -1);
+                const newTypes = this.filterByType[t].filter(f => cfgInlcude.indexOf(f) > -1);
                 if (newTypes.length) {
                     filters[t] = newTypes;
                 }
             }
             // if any valid filters provided show them
             if (Object.keys(filters).length > 0) {
-                this.possibleFilters = filters;
+                this.filterByType = filters;
             }
         }
         if (config.collection) {
             this.filterCollection = reduce_1(config.collection, (result, item, prop) => {
-                if (this.possibleFilterEntities[item.type]) {
+                if (this.filterFunctionsIndexedByType[item.type]) {
                     result[prop] = item;
                 }
                 else {
@@ -11761,8 +11723,8 @@ class FilterPlugin extends BasePlugin {
         if (config.localization) {
             if (config.localization.filterNames) {
                 Object.entries(config.localization.filterNames).forEach(([k, v]) => {
-                    if (this.possibleFilterNames[k] != void 0) {
-                        this.possibleFilterNames[k] = v;
+                    if (this.filterNameIndexByType[k] != void 0) {
+                        this.filterNameIndexByType[k] = v;
                     }
                 });
             }
@@ -11788,13 +11750,12 @@ class FilterPlugin extends BasePlugin {
         const gridPos = this.revogrid.getBoundingClientRect();
         const buttonPos = el.getBoundingClientRect();
         const prop = e.detail.prop;
-        this.pop.filterTypes = this.getColumnFilter(e.detail.filter);
-        this.pop.show(Object.assign(Object.assign({}, this.filterCollection[prop]), { x: buttonPos.x - gridPos.x, y: buttonPos.y - gridPos.y + buttonPos.height, autoCorrect: true, prop }));
+        this.pop.show(Object.assign(Object.assign({}, this.filterCollection[prop]), { x: buttonPos.x - gridPos.x, y: buttonPos.y - gridPos.y + buttonPos.height, autoCorrect: true, prop, filterTypes: this.getColumnFilter(e.detail.filter) }));
     }
     getColumnFilter(type) {
         let filterType = 'string';
         if (!type) {
-            return { [filterType]: this.possibleFilters[filterType] };
+            return { [filterType]: this.filterByType[filterType] };
         }
         // if custom column filter
         if (this.isValidType(type)) {
@@ -11804,44 +11765,59 @@ class FilterPlugin extends BasePlugin {
         else if (typeof type === 'object' && type.length) {
             return type.reduce((r, multiType) => {
                 if (this.isValidType(multiType)) {
-                    r[multiType] = this.possibleFilters[multiType];
+                    r[multiType] = this.filterByType[multiType];
                 }
                 return r;
             }, {});
         }
-        return { [filterType]: this.possibleFilters[filterType] };
+        return { [filterType]: this.filterByType[filterType] };
     }
     isValidType(type) {
-        return !!(typeof type === 'string' && this.possibleFilters[type]);
+        return !!(typeof type === 'string' && this.filterByType[type]);
     }
-    // called on internal component change
+    /**
+     * Called on internal component change
+     */
     async onFilterChange(filterItems) {
+        // store the filter items
         this.multiFilterItems = filterItems;
+        // run the filtering when the items change
         this.runFiltering();
     }
     /**
      * Triggers grid filtering
      */
-    async doFiltering(collection, items, columns, filterItems) {
+    async doFiltering(collection, source, columns, filterItems) {
         const columnsToUpdate = [];
+        /**
+         * Loop through the columns and update the columns that need to be updated with the `hasFilter` property.
+         */
+        const columnByProp = {};
         columns.forEach(rgCol => {
             const column = Object.assign({}, rgCol);
             const hasFilter = filterItems[column.prop];
+            columnByProp[column.prop] = column;
+            /**
+             * If the column has a filter and it's not already marked as filtered, update the column.
+             */
             if (column[this.filterProp] && !hasFilter) {
                 delete column[this.filterProp];
                 columnsToUpdate.push(column);
             }
+            /**
+             * If the column does not have a filter and it's marked as filtered, update the column.
+             */
             if (!column[this.filterProp] && hasFilter) {
                 columnsToUpdate.push(column);
                 column[this.filterProp] = true;
             }
         });
-        const itemsToFilter = this.getRowFilter(items, filterItems);
+        const itemsToTrim = this.getRowFilter(source, filterItems, columnByProp);
         // check is filter event prevented
         const { defaultPrevented, detail } = this.emit('beforefiltertrimmed', {
             collection,
-            itemsToFilter,
-            source: items,
+            itemsToFilter: itemsToTrim,
+            source,
             filterItems,
         });
         if (defaultPrevented) {
@@ -11853,7 +11829,7 @@ class FilterPlugin extends BasePlugin {
             return;
         }
         // applies the hasFilter to the columns to show filter icon
-        await this.revogrid.updateColumns(columnsToUpdate);
+        this.providers.column.updateColumns(columnsToUpdate);
         this.emit('afterfilterapply');
     }
     async clearFiltering() {
@@ -11869,7 +11845,7 @@ class FilterPlugin extends BasePlugin {
             if (this.multiFilterItems[prop].length > 0) {
                 const firstFilterItem = this.multiFilterItems[prop][0];
                 collection[prop] = {
-                    filter: filterEntities[firstFilterItem.type],
+                    filter: this.filterFunctionsIndexedByType[firstFilterItem.type],
                     type: firstFilterItem.type,
                     value: firstFilterItem.value,
                 };
@@ -11894,52 +11870,68 @@ class FilterPlugin extends BasePlugin {
             columns: await this.revogrid.getColumns(),
         };
     }
-    getRowFilter(rows, filterItems) {
+    /**
+     * Get trimmed rows based on filter
+     */
+    getRowFilter(rows, filterItems, columnByProp) {
         const propKeys = Object.keys(filterItems);
         const trimmed = {};
         let propFilterSatisfiedCount = 0;
         let lastFilterResults = [];
         // each rows
         rows.forEach((model, rowIndex) => {
-            // working on all props
+            // check filter by column properties
             for (const prop of propKeys) {
                 const propFilters = filterItems[prop];
+                // reset the count of satisfied filters
                 propFilterSatisfiedCount = 0;
+                // reset the array of last filter results
                 lastFilterResults = [];
                 // testing each filter for a prop
                 for (const [filterIndex, filterData] of propFilters.entries()) {
                     // the filter LogicFunction based on the type
-                    const filter = this.possibleFilterEntities[filterData.type];
+                    const filterFunc = this.filterFunctionsIndexedByType[filterData.type];
                     // THE MAGIC OF FILTERING IS HERE
+                    const column = columnByProp[prop];
+                    // If there is no column but user wants to filter by a property
+                    const value = column ? getCellDataParsed(model, columnByProp[prop]) : model[prop];
+                    // OR relation
                     if (filterData.relation === 'or') {
+                        // reset the array of last filter results
                         lastFilterResults = [];
-                        if (filter(model[prop], filterData.value)) {
+                        // if the filter is satisfied, continue to the next filter
+                        if (filterFunc(value, filterData.value)) {
                             continue;
                         }
+                        // if the filter is not satisfied, count it
                         propFilterSatisfiedCount++;
+                        // AND relation
                     }
                     else {
                         // 'and' relation will need to know the next filter
                         // so we save this current filter to include it in the next filter
-                        lastFilterResults.push(!filter(model[prop], filterData.value));
+                        lastFilterResults.push(!filterFunc(value, filterData.value));
                         // check first if we have a filter on the next index to pair it with this current filter
                         const nextFilterData = propFilters[filterIndex + 1];
                         // stop the sequence if there is no next filter or if the next filter is not an 'and' relation
                         if (!nextFilterData || nextFilterData.relation !== 'and') {
                             // let's just continue since for sure propFilterSatisfiedCount cannot be satisfied
                             if (lastFilterResults.indexOf(true) === -1) {
+                                // reset the array of last filter results
                                 lastFilterResults = [];
                                 continue;
                             }
                             // we need to add all of the lastFilterResults since we need to satisfy all
                             propFilterSatisfiedCount += lastFilterResults.length;
+                            // reset the array of last filter results
                             lastFilterResults = [];
                         }
                     }
                 } // end of propFilters forEach
                 // add to the list of removed/trimmed rows of filter condition is satisfied
-                if (propFilterSatisfiedCount === propFilters.length)
+                if (propFilterSatisfiedCount === propFilters.length) {
                     trimmed[rowIndex] = true;
+                }
             } // end of for-of propKeys
         });
         return trimmed;
@@ -13931,34 +13923,33 @@ const ResizableElement = (props, children) => {
     const resizeEls = [];
     const directive = (props.canResize &&
         new ResizeDirective(props, e => {
+            var _a;
             if (e.eventName === ResizeEvents.end) {
-                props.onResize && props.onResize(e);
+                (_a = props.onResize) === null || _a === void 0 ? void 0 : _a.call(props, e);
             }
         })) ||
         null;
-    if (props.canResize) {
-        if (props.active) {
+    if (props.active) {
+        if (props.canResize) {
             for (let p in props.active) {
                 resizeEls.push(hAsync("div", { onClick: e => e.preventDefault(), onDblClick: e => {
                         var _a;
                         e.preventDefault();
-                        (_a = props.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                        (_a = props.onDblClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
                     }, onMouseDown: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), onTouchStart: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), class: `resizable resizable-${props.active[p]}` }));
             }
         }
-    }
-    else {
-        if (props.active) {
+        else {
             for (let p in props.active) {
                 resizeEls.push(hAsync("div", { onClick: e => e.preventDefault(), onTouchStart: (e) => e.preventDefault(), onDblClick: e => {
                         var _a;
                         e.preventDefault();
-                        (_a = props.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                        (_a = props.onDblClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
                     }, class: `no-resize resizable resizable-${props.active[p]}` }));
             }
         }
     }
-    return (hAsync("div", Object.assign({}, props, { ref: (e) => e && (directive === null || directive === void 0 ? void 0 : directive.set(e)) }),
+    return (hAsync("div", Object.assign({}, props, { ref: e => e && (directive === null || directive === void 0 ? void 0 : directive.set(e)) }),
         children,
         resizeEls));
 };
@@ -13972,16 +13963,17 @@ const HeaderCellRenderer = ({ data, props, additionalData }, children) => {
     }
     if (data === null || data === void 0 ? void 0 : data.columnProperties) {
         const extra = data.columnProperties(data);
-        if (extra && typeof extra === 'object') {
+        if (extra) {
             cellProps = doPropMerge(props, extra);
         }
     }
-    return (hAsync(ResizableElement, Object.assign({}, cellProps, { onMouseDown: (e) => {
+    const resizeProps = Object.assign(Object.assign({}, cellProps), { onMouseDown(e) {
             dispatch(e.currentTarget, ON_COLUMN_CLICK, {
                 data,
                 event: e,
             });
-        } }),
+        } });
+    return (hAsync(ResizableElement, Object.assign({}, resizeProps),
         hAsync("div", { class: "header-content" }, colTemplate),
         children));
 };
@@ -14194,8 +14186,14 @@ class WCAGPlugin extends BasePlugin {
                     return result;
                 };
                 column.cellProperties = (...args) => {
+                    const wcagProps = {
+                        ['role']: 'gridcell',
+                        ['aria-colindex']: index,
+                        ['aria-rowindex']: args[0].rowIndex,
+                        ['tabindex']: -1,
+                    };
                     const columnProps = (cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties(...args)) || {};
-                    return Object.assign({ role: 'gridcell', ['aria-colindex']: index, ['aria-rowindex']: args[0].rowIndex, ['tabindex']: -1 }, columnProps);
+                    return Object.assign(Object.assign({}, wcagProps), columnProps);
                 };
             });
         });
@@ -15378,7 +15376,7 @@ class RevogrData {
                 if (cellEvent.defaultPrevented) {
                     continue;
                 }
-                const { detail: { column: columnProps, row: rowProps, model: newModel }, } = cellEvent;
+                const { detail: { column: columnProps, row: rowProps, model: schemaModel }, } = cellEvent;
                 const defaultProps = {
                     [DATA_COL]: columnProps.itemIndex,
                     [DATA_ROW]: rowProps.itemIndex,
@@ -15394,16 +15392,17 @@ class RevogrData {
                 if (groupDepth && !columnProps.itemIndex && defaultProps.style) {
                     defaultProps.style.paddingLeft = `${PADDING_DEPTH * groupDepth}px`;
                 }
-                const props = this.columnService.mergeProperties(rowProps.itemIndex, columnProps.itemIndex, defaultProps, newModel, (_a = columnsData[columnProps.itemIndex]) === null || _a === void 0 ? void 0 : _a.cellProperties);
+                const props = this.columnService.mergeProperties(rowProps.itemIndex, columnProps.itemIndex, defaultProps, schemaModel, (_a = schemaModel.column) === null || _a === void 0 ? void 0 : _a.cellProperties);
                 // Never use webcomponent for cell render
                 // It's very slow because of webcomponent initialization takes time
-                cells.push(hAsync(CellRenderer, { renderProps: {
-                        model: newModel,
+                const cellNode = hAsync(CellRenderer, { renderProps: {
+                        model: schemaModel,
                         providers: this.providers,
-                        template: (_b = columnsData[columnProps.itemIndex]) === null || _b === void 0 ? void 0 : _b.cellTemplate,
+                        template: (_b = schemaModel.column) === null || _b === void 0 ? void 0 : _b.cellTemplate,
                         additionalData: this.additionalData,
                         dragStartCell: this.dragStartCell,
-                    }, cellProps: props }));
+                    }, cellProps: props });
+                cells.push(cellNode);
             }
             // #endregion
             // #region Rows
@@ -15881,9 +15880,9 @@ const HeaderRenderer = (p) => {
             transform: `translateX(${p.column.start}px)`,
         },
         onResize: p.onResize,
-        onDoubleClick(originalEvent) {
+        onDblClick(originalEvent) {
             var _a;
-            (_a = p.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(p, {
+            (_a = p.onDblClick) === null || _a === void 0 ? void 0 : _a.call(p, {
                 column: p.data,
                 index: p.column.itemIndex,
                 originalEvent,
@@ -16011,12 +16010,12 @@ class RevogrHeaderComponent {
         // render header columns
         for (let rgCol of cols) {
             const colData = this.colData[rgCol.itemIndex];
-            cells.push(hAsync(HeaderRenderer, { range: range, column: rgCol, data: Object.assign(Object.assign({}, colData), { index: rgCol.itemIndex, providers: this.providers }), canFilter: !!this.columnFilter, canResize: this.canResize, active: this.resizeHandler, onResize: e => this.onResize(e, rgCol.itemIndex), onDoubleClick: e => this.headerdblClick.emit(e), onClick: e => this.initialHeaderClick.emit(e), additionalData: this.additionalData }));
+            cells.push(hAsync(HeaderRenderer, { range: range, column: rgCol, data: Object.assign(Object.assign({}, colData), { index: rgCol.itemIndex, providers: this.providers }), canFilter: !!this.columnFilter, canResize: this.canResize, active: this.resizeHandler, onResize: e => this.onResize(e, rgCol.itemIndex), onDblClick: e => this.headerdblClick.emit(e), onClick: e => this.initialHeaderClick.emit(e), additionalData: this.additionalData }));
             visibleProps[colData === null || colData === void 0 ? void 0 : colData.prop] = rgCol.itemIndex;
         }
         return [
-            hAsync("div", { key: '37efb5ee52fc8b9d0f01b20500fd3833a203a5ea', class: "group-rgRow" }, hAsync(ColumnGroupsRenderer, { key: '40dec7ff9834df9df36d48ef636628abf843b042', canResize: this.canResize, active: this.resizeHandler, visibleProps: visibleProps, providers: this.providers, groups: this.groups, dimensionCol: this.dimensionCol.state, depth: this.groupingDepth, onResize: (changedX, startIndex, endIndex) => this.onResizeGroup(changedX, startIndex, endIndex), additionalData: this.additionalData })),
-            hAsync("div", { key: '5b34d0eb754cdb57c152c6a01b6b7e1ccf10aff5', class: `${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}` }, cells),
+            hAsync("div", { key: 'fcfd687bcae987699e2c0c6dd2b403dc3bb36c3d', class: "group-rgRow" }, hAsync(ColumnGroupsRenderer, { key: 'e3dfe9c5cbdd3c3dbbcbd7301a1a8a97353abf4b', canResize: this.canResize, active: this.resizeHandler, visibleProps: visibleProps, providers: this.providers, groups: this.groups, dimensionCol: this.dimensionCol.state, depth: this.groupingDepth, onResize: (changedX, startIndex, endIndex) => this.onResizeGroup(changedX, startIndex, endIndex), additionalData: this.additionalData })),
+            hAsync("div", { key: '6b373546cc50bd85c7458da556c987e1a556d81b', class: `${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}` }, cells),
         ];
     }
     get providers() {