@revolist/revogrid 4.9.13 → 4.9.16

package/hydrate/index.mjs

@@ -2435,55 +2435,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 : {};
 
 /**
@@ -3025,6 +2976,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;
 
@@ -3062,7 +3062,6 @@ class FilterPanel {
         this.currentFilterType = defaultType;
         this.changes = undefined;
         this.filterItems = {};
-        this.filterTypes = {};
         this.filterNames = {};
         this.filterEntities = {};
         this.filterCaptions = undefined;
@@ -3088,7 +3087,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;
         }
     }
@@ -3112,15 +3113,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;
@@ -3171,8 +3176,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)) {
@@ -3310,7 +3317,6 @@ class FilterPanel {
         "$tagName$": "revogr-filter-panel",
         "$members$": {
             "filterItems": [16],
-            "filterTypes": [16],
             "filterNames": [16],
             "filterEntities": [16],
             "filterCaptions": [16],
@@ -8644,507 +8650,133 @@ 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;
 }
-
 /**
- * The base implementation of `_.slice` without an iteratee call guard.
- *
- * @private
- * @param {Array} array The array to slice.
- * @param {number} [start=0] The start position.
- * @param {number} [end=array.length] The end position.
- * @returns {Array} Returns the slice of `array`.
+ * This function is used to create a collection of columns.
  */
-
-function baseSlice$1(array, start, end) {
-  var index = -1,
-      length = array.length;
-
-  if (start < 0) {
-    start = -start > length ? 0 : (length + start);
-  }
-  end = end > length ? length : end;
-  if (end < 0) {
-    end += length;
-  }
-  length = start > end ? 0 : ((end - start) >>> 0);
-  start >>>= 0;
-
-  var result = Array(length);
-  while (++index < length) {
-    result[index] = array[index + start];
-  }
-  return result;
-}
-
-var _baseSlice = baseSlice$1;
-
-var baseSlice = _baseSlice,
-    isIterateeCall$1 = _isIterateeCall,
-    toInteger$2 = toInteger_1;
-
-/**
- * Creates a slice of `array` from `start` up to, but not including, `end`.
- *
- * **Note:** This method is used instead of
- * [`Array#slice`](https://mdn.io/Array/slice) to ensure dense arrays are
- * returned.
- *
- * @static
- * @memberOf _
- * @since 3.0.0
- * @category Array
- * @param {Array} array The array to slice.
- * @param {number} [start=0] The start position.
- * @param {number} [end=array.length] The end position.
- * @returns {Array} Returns the slice of `array`.
- */
-function slice(array, start, end) {
-  var length = array == null ? 0 : array.length;
-  if (!length) {
-    return [];
-  }
-  if (end && typeof end != 'number' && isIterateeCall$1(array, start, end)) {
-    start = 0;
-    end = length;
-  }
-  else {
-    start = start == null ? 0 : toInteger$2(start);
-    end = end === undefined ? length : toInteger$2(end);
-  }
-  return baseSlice(array, start, end);
-}
-
-var slice_1 = slice;
-
-class ColumnService {
-    get columns() {
-        return getVisibleSourceItem(this.source);
-    }
-    constructor(dataStore, source) {
-        this.dataStore = dataStore;
-        this.source = source;
-        this.unsubscribe = [];
-        this.hasGrouping = false;
-        this.unsubscribe.push(source.onChange('source', s => this.checkGrouping(s)));
-        this.checkGrouping(source.get('source'));
-        this.type = source.get('type');
-    }
-    checkGrouping(cols) {
-        for (let rgCol of cols) {
-            if (isGroupingColumn(rgCol)) {
-                this.hasGrouping = true;
-                return;
-            }
-            this.hasGrouping = false;
-        }
-    }
-    isReadOnly(r, c) {
-        var _a;
-        const readOnly = (_a = this.columns[c]) === null || _a === void 0 ? void 0 : _a.readonly;
-        if (typeof readOnly === 'function') {
-            const data = this.rowDataModel(r, c);
-            return readOnly(data);
-        }
-        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 extra = extraPropsFunc === null || extraPropsFunc === void 0 ? void 0 : extraPropsFunc(model);
-        if (!extra) {
-            return props;
+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);
         }
-        return doPropMerge(props, extra);
-    }
-    getRowClass(r, prop) {
-        const model = getSourceItem(this.dataStore, r) || {};
-        return model[prop] || '';
-    }
-    getCellData(r, c) {
-        const data = this.rowDataModel(r, c);
-        return getCellData(data.model[data.prop]);
-    }
-    getSaveData(rowIndex, colIndex, val) {
-        if (typeof val === 'undefined') {
-            val = this.getCellData(rowIndex, colIndex);
+        // 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
         }
-        const data = this.rowDataModel(rowIndex, colIndex);
-        return {
-            prop: data.prop,
-            rowIndex,
-            colIndex,
-            val,
-            model: data.model,
-            colType: this.type,
-            type: this.dataStore.get('type'),
-        };
-    }
-    getCellEditor(_r, c, editors) {
-        var _a;
-        const editor = (_a = this.columns[c]) === null || _a === void 0 ? void 0 : _a.editor;
-        if (!editor) {
-            return undefined;
+        else {
+            res.columns[regularColumn.pin].push(regularColumn);
         }
-        // reference
-        if (typeof editor === 'string') {
-            return editors[editor];
+        if (regularColumn.order) {
+            res.sort[regularColumn.prop] = regularColumn;
         }
-        return editor;
-    }
-    /**
-     * Get cell data model for given rowIndex and colIndex
-     * Used to pass data to editor/renderer
-     */
-    rowDataModel(rowIndex, colIndex) {
-        const column = this.columns[colIndex];
-        const prop = column === null || column === void 0 ? void 0 : column.prop;
-        const model = getSourceItem(this.dataStore, rowIndex) || {};
-        const value = model[prop];
-        const type = this.dataStore.get('type');
-        return {
-            prop,
-            model,
-            data: this.dataStore.get('source'),
-            column,
-            rowIndex,
-            colIndex,
-            colType: this.type,
-            type,
-            value,
-        };
-    }
-    getRangeData(d, columns) {
-        var _a;
-        const changed = {};
-        // get original length sizes
-        const copyColLength = d.oldRange.x1 - d.oldRange.x + 1;
-        const copyRowLength = d.oldRange.y1 - d.oldRange.y + 1;
-        const mapping = {};
-        // rows
-        for (let rowIndex = d.newRange.y, i = 0; rowIndex < d.newRange.y1 + 1; rowIndex++, i++) {
-            // copy original data link
-            const oldRowIndex = d.oldRange.y + (i % copyRowLength);
-            const copyRow = getSourceItem(this.dataStore, oldRowIndex) || {};
-            // columns
-            for (let colIndex = d.newRange.x, j = 0; colIndex < d.newRange.x1 + 1; colIndex++, j++) {
-                // check if old range area
-                if (rowIndex >= d.oldRange.y &&
-                    rowIndex <= d.oldRange.y1 &&
-                    colIndex >= d.oldRange.x &&
-                    colIndex <= d.oldRange.x1) {
-                    continue;
-                }
-                // requested column beyond range
-                if (!this.columns[colIndex]) {
-                    continue;
-                }
-                const prop = (_a = this.columns[colIndex]) === null || _a === void 0 ? void 0 : _a.prop;
-                const copyColIndex = d.oldRange.x + (j % copyColLength);
-                const copyColumnProp = columns[copyColIndex].prop;
-                /** if can write */
-                if (!this.isReadOnly(rowIndex, colIndex)) {
-                    /** to show before save */
-                    if (!changed[rowIndex]) {
-                        changed[rowIndex] = {};
-                    }
-                    changed[rowIndex][prop] = copyRow[copyColumnProp];
-                    /** Generate mapping object */
-                    if (!mapping[rowIndex]) {
-                        mapping[rowIndex] = {};
-                    }
-                    mapping[rowIndex][prop] = {
-                        colIndex: copyColIndex,
-                        colProp: copyColumnProp,
-                        rowIndex: oldRowIndex,
-                    };
-                }
-            }
+        // it's possible that some columns have same prop, but better to avoid it
+        if (!res.columnByProp[regularColumn.prop]) {
+            res.columnByProp[regularColumn.prop] = [];
         }
-        return {
-            changed,
-            mapping,
-        };
-    }
-    getTransformedDataToApply(start, data) {
-        const changed = {};
-        const copyRowLength = data.length;
-        const colLength = this.columns.length;
-        const rowLength = this.dataStore.get('items').length;
-        // rows
-        let rowIndex = start.y;
-        let maxCol = 0;
-        for (let i = 0; rowIndex < rowLength && i < copyRowLength; rowIndex++, i++) {
-            // copy original data link
-            const copyRow = data[i % copyRowLength];
-            const copyColLength = (copyRow === null || copyRow === void 0 ? void 0 : copyRow.length) || 0;
-            // columns
-            let colIndex = start.x;
-            for (let j = 0; colIndex < colLength && j < copyColLength; colIndex++, j++) {
-                const p = this.columns[colIndex].prop;
-                const currentCol = j % colLength;
-                /** if can write */
-                if (!this.isReadOnly(rowIndex, colIndex)) {
-                    /** to show before save */
-                    if (!changed[rowIndex]) {
-                        changed[rowIndex] = {};
-                    }
-                    changed[rowIndex][p] = copyRow[currentCol];
-                }
+        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) }));
             }
-            maxCol = Math.max(maxCol, colIndex - 1);
         }
-        const range = getRange(start, {
-            y: rowIndex - 1,
-            x: maxCol,
-        });
-        return {
-            changed,
-            range,
-        };
     }
-    getRangeStaticData(d, value) {
-        const changed = {};
-        // rows
-        for (let rowIndex = d.y, i = 0; rowIndex < d.y1 + 1; rowIndex++, i++) {
-            // columns
-            for (let colIndex = d.x, j = 0; colIndex < d.x1 + 1; colIndex++, j++) {
-                // requested column beyond range
-                if (!this.columns[colIndex]) {
-                    continue;
-                }
-                const p = this.columns[colIndex].prop;
-                /** if can write */
-                if (!this.isReadOnly(rowIndex, colIndex)) {
-                    /** to show before save */
-                    if (!changed[rowIndex]) {
-                        changed[rowIndex] = {};
-                    }
-                    changed[rowIndex][p] = value;
-                }
-            }
-        }
-        return changed;
+    // merge column groupings
+    for (let k in collection.columnGrouping) {
+        const key = k;
+        const collectionItem = collection.columnGrouping[key];
+        res.columnGrouping[key].push(...collectionItem);
     }
-    getRangeTransformedToProps(d, store) {
-        var _a;
-        const area = [];
-        const type = this.dataStore.get('type');
-        // rows
-        for (let rowIndex = d.y, i = 0; rowIndex < d.y1 + 1; rowIndex++, i++) {
-            // columns
-            for (let colIndex = d.x, j = 0; colIndex < d.x1 + 1; colIndex++, j++) {
-                const prop = (_a = this.columns[colIndex]) === null || _a === void 0 ? void 0 : _a.prop;
-                area.push({
-                    prop,
-                    rowIndex,
-                    colIndex,
-                    model: getSourceItem(store, rowIndex),
-                    type,
-                    colType: this.type,
-                });
+    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;
             }
         }
-        return area;
-    }
-    copyRangeArray(range, store) {
-        const cols = [...this.columns];
-        const props = slice_1(cols, range.x, range.x1 + 1).map(v => v.prop);
-        const toCopy = [];
-        const mapping = {};
-        // rows indexes
-        for (let i = range.y; i <= range.y1; i++) {
-            const rgRow = [];
-            mapping[i] = {};
-            // columns indexes
-            for (let prop of props) {
-                const item = getSourceItem(store, i);
-                // if no item - skip
-                if (!item) {
-                    continue;
-                }
-                const val = item[prop];
-                rgRow.push(val);
-                mapping[i][prop] = val;
-            }
-            toCopy.push(rgRow);
+        else if (c.prop === prop) {
+            return c;
         }
-        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;
+    return undefined;
 }
-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;
+function getColumnByProp(columns, prop) {
+    return findColumn(columns, prop);
 }
 
 var codes;
@@ -9223,386 +8855,761 @@ var keyValues;
     keyValues["TAB"] = "Tab";
 })(keyValues || (keyValues = {}));
 
-function isTouch(e) {
-    return !!e.touches;
-}
-function verifyTouchTarget(touchEvent, focusClass) {
-    if (focusClass && touchEvent) {
-        if (!(touchEvent.target instanceof Element && touchEvent.target.classList.contains(focusClass))) {
-            return false;
-        }
-    }
-    return true;
-}
-/**
- * Function to get the value of a specific property from a MouseEvent or TouchEvent object.
- */
-function getPropertyFromEvent(e, prop, focusClass // for touch events
-) {
-    // Check if the event is a touch event
-    if (isTouch(e)) {
-        // If the event has touches, get the first touch
-        if (e.touches.length > 0) {
-            const touchEvent = e.touches[0];
-            // Check if the target of the touch event is the specified element
-            if (!verifyTouchTarget(touchEvent, focusClass)) {
-                // If not, return null
-                return null;
-            }
-            // Get the value of the specified property from the touch event and return it
-            return touchEvent[prop] || 0;
-        }
-        // If there are no touches, return null
-        return null;
-    }
-    // If the event is not a touch event, get the value of the specified property from the event and return it
-    return e[prop] || 0;
-}
+var osPlatform;
+(function (osPlatform) {
+    osPlatform["mac"] = "Mac";
+})(osPlatform || (osPlatform = {}));
 
-function collectModelsOfRange(data, store) {
-    const models = {};
-    for (let i in data) {
-        const rowIndex = parseInt(i, 10);
-        models[rowIndex] = getSourceItem(store, rowIndex);
-    }
-    return models;
+function isClear(code) {
+    return codesLetter.BACKSPACE === code || codesLetter.DELETE === code;
 }
-function getFocusCellBasedOnEvent(e, data) {
-    // If event default is prevented, return
-    if (e.defaultPrevented) {
-        return null;
-    }
-    // Get coordinates from event object
-    const x = getPropertyFromEvent(e, 'clientX');
-    const y = getPropertyFromEvent(e, 'clientY');
-    // If coordinates are not available, return
-    if (x === null || y === null) {
-        return null;
-    }
-    // Get current cell based on coordinates and data
-    const focusCell = getCurrentCell({ x, y }, data);
-    // If current cell is not available, return
-    if (isAfterLast(focusCell, data.lastCell)) {
-        return null;
-    }
-    return focusCell;
+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 cell based on x, y position
+ * Calculate system scrollbar size
  */
-function getCurrentCell({ x, y }, { el, rows, cols }) {
-    // Get the bounding rectangle of the element
-    const { top, left, height, width } = el.getBoundingClientRect();
-    // Calculate the cell position relative to the element
-    let cellY = y - top;
-    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 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 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;
+/* 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 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
+ * Async timeout
  */
-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;
+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`,
-    };
+
+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;
 }
-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;
+/**
+ * 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 {
-        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}`));
+        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
+    };
 }
-// Type guard for EditorCtrConstructible
-function isEditorCtrConstructible(editor) {
-    return typeof editor === 'function' && typeof editor.prototype === 'object';
+function getGroupingName(rgRow) {
+    return rgRow && rgRow[PSEUDO_GROUP_ITEM];
 }
-
-var osPlatform;
-(function (osPlatform) {
-    osPlatform["mac"] = "Mac";
-})(osPlatform || (osPlatform = {}));
-
-function isClear(code) {
-    return codesLetter.BACKSPACE === code || codesLetter.DELETE === code;
+function isGrouping(rgRow) {
+    return typeof (rgRow === null || rgRow === void 0 ? void 0 : rgRow[PSEUDO_GROUP_ITEM]) !== 'undefined';
 }
-function isTab(code) {
-    return codesLetter.TAB === code;
+function isGroupingColumn(column) {
+    return column && typeof column[PSEUDO_GROUP_COLUMN] !== 'undefined';
 }
-function isEnterKeyValue(key) {
-    return keyValues.ENTER === key;
+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 isCut(event) {
-    return ((event.ctrlKey && event.code === 'KeyX') || // Ctrl + X on Windows
-        (event.metaKey && event.code === 'KeyX')); // Cmd + X on Mac
+function getParsedGroup(id) {
+    const parseGroup = JSON.parse(id);
+    // extra precaution and type safeguard
+    if (!Array.isArray(parseGroup)) {
+        return null;
+    }
+    return parseGroup;
 }
-function isCopy(event) {
-    return ((event.ctrlKey && event.code === 'KeyC') || // Ctrl + C on Windows
-        (event.metaKey && event.code === 'KeyC')); // Cmd + C on Mac
+// 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;
 }
-function isPaste(event) {
-    return ((event.ctrlKey && event.code === 'KeyV') || // Ctrl + V on Windows
-        (event.metaKey && event.code === 'KeyV')); // Cmd + V on Mac
+
+/**
+ * The base implementation of `_.slice` without an iteratee call guard.
+ *
+ * @private
+ * @param {Array} array The array to slice.
+ * @param {number} [start=0] The start position.
+ * @param {number} [end=array.length] The end position.
+ * @returns {Array} Returns the slice of `array`.
+ */
+
+function baseSlice$1(array, start, end) {
+  var index = -1,
+      length = array.length;
+
+  if (start < 0) {
+    start = -start > length ? 0 : (length + start);
+  }
+  end = end > length ? length : end;
+  if (end < 0) {
+    end += length;
+  }
+  length = start > end ? 0 : ((end - start) >>> 0);
+  start >>>= 0;
+
+  var result = Array(length);
+  while (++index < length) {
+    result[index] = array[index + start];
+  }
+  return result;
 }
-function isAll(event) {
-    return ((event.ctrlKey && event.code === 'KeyA') || // Ctrl + A on Windows
-        (event.metaKey && event.code === 'KeyA')); // Cmd + A on Mac
+
+var _baseSlice = baseSlice$1;
+
+var baseSlice = _baseSlice,
+    isIterateeCall$1 = _isIterateeCall,
+    toInteger$2 = toInteger_1;
+
+/**
+ * Creates a slice of `array` from `start` up to, but not including, `end`.
+ *
+ * **Note:** This method is used instead of
+ * [`Array#slice`](https://mdn.io/Array/slice) to ensure dense arrays are
+ * returned.
+ *
+ * @static
+ * @memberOf _
+ * @since 3.0.0
+ * @category Array
+ * @param {Array} array The array to slice.
+ * @param {number} [start=0] The start position.
+ * @param {number} [end=array.length] The end position.
+ * @returns {Array} Returns the slice of `array`.
+ */
+function slice(array, start, end) {
+  var length = array == null ? 0 : array.length;
+  if (!length) {
+    return [];
+  }
+  if (end && typeof end != 'number' && isIterateeCall$1(array, start, end)) {
+    start = 0;
+    end = length;
+  }
+  else {
+    start = start == null ? 0 : toInteger$2(start);
+    end = end === undefined ? length : toInteger$2(end);
+  }
+  return baseSlice(array, start, end);
 }
 
-function getColumnType(rgCol) {
-    if (rgCol.pin) {
-        return rgCol.pin;
+var slice_1 = slice;
+
+class ColumnService {
+    get columns() {
+        return getVisibleSourceItem(this.source);
+    }
+    constructor(dataStore, source) {
+        this.dataStore = dataStore;
+        this.source = source;
+        this.unsubscribe = [];
+        this.hasGrouping = false;
+        this.unsubscribe.push(source.onChange('source', s => this.checkGrouping(s)));
+        this.checkGrouping(source.get('source'));
+        this.type = source.get('type');
+    }
+    checkGrouping(cols) {
+        for (let rgCol of cols) {
+            if (isGroupingColumn(rgCol)) {
+                this.hasGrouping = true;
+                return;
+            }
+            this.hasGrouping = false;
+        }
+    }
+    isReadOnly(r, c) {
+        var _a;
+        const readOnly = (_a = this.columns[c]) === null || _a === void 0 ? void 0 : _a.readonly;
+        if (typeof readOnly === 'function') {
+            const data = this.rowDataModel(r, c);
+            return readOnly(data);
+        }
+        return !!readOnly;
+    }
+    mergeProperties(r, c, defaultProps, model, extraPropsFunc) {
+        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;
+        }
+        return doPropMerge(props, extra);
+    }
+    getRowClass(r, prop) {
+        const model = getSourceItem(this.dataStore, r) || {};
+        return model[prop] || '';
+    }
+    getCellData(r, c) {
+        const data = this.rowDataModel(r, c);
+        return getCellData(data.model[data.prop]);
+    }
+    getSaveData(rowIndex, colIndex, val) {
+        const data = this.rowDataModel(rowIndex, colIndex);
+        if (typeof val === 'undefined') {
+            val = getCellData(data.model[data.prop]);
+        }
+        return {
+            prop: data.prop,
+            rowIndex,
+            colIndex,
+            val,
+            model: data.model,
+            colType: this.type,
+            type: this.dataStore.get('type'),
+        };
+    }
+    getCellEditor(_r, c, editors) {
+        var _a;
+        const editor = (_a = this.columns[c]) === null || _a === void 0 ? void 0 : _a.editor;
+        if (!editor) {
+            return undefined;
+        }
+        // reference
+        if (typeof editor === 'string') {
+            return editors[editor];
+        }
+        return editor;
+    }
+    /**
+     * Get cell data model for given rowIndex and colIndex
+     * Used to pass data to editor/renderer
+     */
+    rowDataModel(rowIndex, colIndex) {
+        const column = this.columns[colIndex];
+        const prop = column === null || column === void 0 ? void 0 : column.prop;
+        const model = getSourceItem(this.dataStore, rowIndex) || {};
+        const value = model[prop];
+        const type = this.dataStore.get('type');
+        return {
+            prop,
+            model,
+            data: this.dataStore.get('source'),
+            column,
+            rowIndex,
+            colIndex,
+            colType: this.type,
+            type,
+            value,
+        };
+    }
+    getRangeData(d, columns) {
+        var _a;
+        const changed = {};
+        // get original length sizes
+        const copyColLength = d.oldRange.x1 - d.oldRange.x + 1;
+        const copyRowLength = d.oldRange.y1 - d.oldRange.y + 1;
+        const mapping = {};
+        // rows
+        for (let rowIndex = d.newRange.y, i = 0; rowIndex < d.newRange.y1 + 1; rowIndex++, i++) {
+            // copy original data link
+            const oldRowIndex = d.oldRange.y + (i % copyRowLength);
+            const copyRow = getSourceItem(this.dataStore, oldRowIndex) || {};
+            // columns
+            for (let colIndex = d.newRange.x, j = 0; colIndex < d.newRange.x1 + 1; colIndex++, j++) {
+                // check if old range area
+                if (rowIndex >= d.oldRange.y &&
+                    rowIndex <= d.oldRange.y1 &&
+                    colIndex >= d.oldRange.x &&
+                    colIndex <= d.oldRange.x1) {
+                    continue;
+                }
+                // requested column beyond range
+                if (!this.columns[colIndex]) {
+                    continue;
+                }
+                const prop = (_a = this.columns[colIndex]) === null || _a === void 0 ? void 0 : _a.prop;
+                const copyColIndex = d.oldRange.x + (j % copyColLength);
+                const copyColumnProp = columns[copyColIndex].prop;
+                /** if can write */
+                if (!this.isReadOnly(rowIndex, colIndex)) {
+                    /** to show before save */
+                    if (!changed[rowIndex]) {
+                        changed[rowIndex] = {};
+                    }
+                    changed[rowIndex][prop] = copyRow[copyColumnProp];
+                    /** Generate mapping object */
+                    if (!mapping[rowIndex]) {
+                        mapping[rowIndex] = {};
+                    }
+                    mapping[rowIndex][prop] = {
+                        colIndex: copyColIndex,
+                        colProp: copyColumnProp,
+                        rowIndex: oldRowIndex,
+                    };
+                }
+            }
+        }
+        return {
+            changed,
+            mapping,
+        };
     }
-    return 'rgCol';
-}
-function getColumnSizes(cols) {
-    const res = {};
-    for (const [i, c] of cols.entries()) {
-        if (c.size) {
-            res[i] = c.size;
+    getTransformedDataToApply(start, data) {
+        const changed = {};
+        const copyRowLength = data.length;
+        const colLength = this.columns.length;
+        const rowLength = this.dataStore.get('items').length;
+        // rows
+        let rowIndex = start.y;
+        let maxCol = 0;
+        for (let i = 0; rowIndex < rowLength && i < copyRowLength; rowIndex++, i++) {
+            // copy original data link
+            const copyRow = data[i % copyRowLength];
+            const copyColLength = (copyRow === null || copyRow === void 0 ? void 0 : copyRow.length) || 0;
+            // columns
+            let colIndex = start.x;
+            for (let j = 0; colIndex < colLength && j < copyColLength; colIndex++, j++) {
+                const p = this.columns[colIndex].prop;
+                const currentCol = j % colLength;
+                /** if can write */
+                if (!this.isReadOnly(rowIndex, colIndex)) {
+                    /** to show before save */
+                    if (!changed[rowIndex]) {
+                        changed[rowIndex] = {};
+                    }
+                    changed[rowIndex][p] = copyRow[currentCol];
+                }
+            }
+            maxCol = Math.max(maxCol, colIndex - 1);
         }
+        const range = getRange(start, {
+            y: rowIndex - 1,
+            x: maxCol,
+        });
+        return {
+            changed,
+            range,
+        };
+    }
+    getRangeStaticData(d, value) {
+        const changed = {};
+        // rows
+        for (let rowIndex = d.y, i = 0; rowIndex < d.y1 + 1; rowIndex++, i++) {
+            // columns
+            for (let colIndex = d.x, j = 0; colIndex < d.x1 + 1; colIndex++, j++) {
+                // requested column beyond range
+                if (!this.columns[colIndex]) {
+                    continue;
+                }
+                const p = this.columns[colIndex].prop;
+                /** if can write */
+                if (!this.isReadOnly(rowIndex, colIndex)) {
+                    /** to show before save */
+                    if (!changed[rowIndex]) {
+                        changed[rowIndex] = {};
+                    }
+                    changed[rowIndex][p] = value;
+                }
+            }
+        }
+        return changed;
+    }
+    getRangeTransformedToProps(d, store) {
+        var _a;
+        const area = [];
+        const type = this.dataStore.get('type');
+        // rows
+        for (let rowIndex = d.y, i = 0; rowIndex < d.y1 + 1; rowIndex++, i++) {
+            // columns
+            for (let colIndex = d.x, j = 0; colIndex < d.x1 + 1; colIndex++, j++) {
+                const prop = (_a = this.columns[colIndex]) === null || _a === void 0 ? void 0 : _a.prop;
+                area.push({
+                    prop,
+                    rowIndex,
+                    colIndex,
+                    model: getSourceItem(store, rowIndex),
+                    type,
+                    colType: this.type,
+                });
+            }
+        }
+        return area;
+    }
+    copyRangeArray(range, store) {
+        const cols = [...this.columns];
+        const props = slice_1(cols, range.x, range.x1 + 1).map(v => v.prop);
+        const toCopy = [];
+        const mapping = {};
+        // rows indexes
+        for (let i = range.y; i <= range.y1; i++) {
+            const rgRow = [];
+            mapping[i] = {};
+            // columns indexes
+            for (let prop of props) {
+                const item = getSourceItem(store, i);
+                // if no item - skip
+                if (!item) {
+                    continue;
+                }
+                const val = item[prop];
+                rgRow.push(val);
+                mapping[i][prop] = val;
+            }
+            toCopy.push(rgRow);
+        }
+        return {
+            data: toCopy,
+            mapping,
+        };
+    }
+    destroy() {
+        this.unsubscribe.forEach(f => f());
     }
-    return res;
 }
 /**
- * Check if column is grouping column
+ * Checks if the given rowDrag is a service for dragging rows.
  */
-function isColGrouping(colData) {
-    return !!colData.children;
+function isRowDragService(rowDrag, model) {
+    if (typeof rowDrag === 'function') {
+        return rowDrag(model);
+    }
+    return !!rowDrag;
 }
-/**
- * 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);
+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);
         }
-        if (regularColumn.order) {
-            res.sort[regularColumn.prop] = regularColumn;
+        else if (typeof extra.class === 'string' &&
+            typeof props.class === 'object') {
+            props.class[extra.class] = true;
         }
-        // it's possible that some columns have same prop, but better to avoid it
-        if (!res.columnByProp[regularColumn.prop]) {
-            res.columnByProp[regularColumn.prop] = [];
+        else if (typeof props.class === 'string') {
+            props.class += ' ' + extra.class;
         }
-        res.columnByProp[regularColumn.prop].push(regularColumn);
-        // trigger setup hook if present
-        regularColumn.beforeSetup && regularColumn.beforeSetup(regularColumn);
-        return res;
-    }, collection);
+    }
+    if (extra.style) {
+        props.style = Object.assign(Object.assign({}, extra.style), props.style);
+    }
+    return props;
 }
-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) }));
-            }
+
+function isTouch(e) {
+    return !!e.touches;
+}
+function verifyTouchTarget(touchEvent, focusClass) {
+    if (focusClass && touchEvent) {
+        if (!(touchEvent.target instanceof Element && touchEvent.target.classList.contains(focusClass))) {
+            return false;
         }
     }
-    // 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;
+    return true;
 }
-function findColumn(columns, prop) {
-    for (const c of columns) {
-        if (isColGrouping(c)) {
-            const found = findColumn(c.children, prop);
-            if (found) {
-                return found;
+/**
+ * Function to get the value of a specific property from a MouseEvent or TouchEvent object.
+ */
+function getPropertyFromEvent(e, prop, focusClass // for touch events
+) {
+    // Check if the event is a touch event
+    if (isTouch(e)) {
+        // If the event has touches, get the first touch
+        if (e.touches.length > 0) {
+            const touchEvent = e.touches[0];
+            // Check if the target of the touch event is the specified element
+            if (!verifyTouchTarget(touchEvent, focusClass)) {
+                // If not, return null
+                return null;
             }
+            // Get the value of the specified property from the touch event and return it
+            return touchEvent[prop] || 0;
         }
-        else if (c.prop === prop) {
-            return c;
-        }
+        // If there are no touches, return null
+        return null;
     }
-    return undefined;
-}
-function getColumnByProp(columns, prop) {
-    return findColumn(columns, prop);
+    // If the event is not a touch event, get the value of the specified property from the event and return it
+    return e[prop] || 0;
 }
 
-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));
-};
-
+function collectModelsOfRange(data, store) {
+    const models = {};
+    for (let i in data) {
+        const rowIndex = parseInt(i, 10);
+        models[rowIndex] = getSourceItem(store, rowIndex);
+    }
+    return models;
+}
+function getFocusCellBasedOnEvent(e, data) {
+    // If event default is prevented, return
+    if (e.defaultPrevented) {
+        return null;
+    }
+    // Get coordinates from event object
+    const x = getPropertyFromEvent(e, 'clientX');
+    const y = getPropertyFromEvent(e, 'clientY');
+    // If coordinates are not available, return
+    if (x === null || y === null) {
+        return null;
+    }
+    // Get current cell based on coordinates and data
+    const focusCell = getCurrentCell({ x, y }, data);
+    // If current cell is not available, return
+    if (isAfterLast(focusCell, data.lastCell)) {
+        return null;
+    }
+    return focusCell;
+}
 /**
- * Calculate system scrollbar size
+ * Calculate cell based on x, y 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 getCurrentCell({ x, y }, { el, rows, cols }) {
+    // Get the bounding rectangle of the element
+    const { top, left, height, width } = el.getBoundingClientRect();
+    // Calculate the cell position relative to the element
+    let cellY = y - top;
+    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 };
 }
-/* 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];
+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;
 }
 /**
- * Async timeout
+ * 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
  */
-async function timeout(delay = 0) {
-    await new Promise((r) => {
-        setTimeout(() => r(), delay);
-    });
+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';
 }
 
 const DIRECTION_CODES = [
@@ -11187,7 +11194,7 @@ class ThemeService {
         this.register('default');
     }
     register(theme) {
-        const parsedTheme = ThemeService.getTheme(theme);
+        const parsedTheme = getTheme(theme);
         switch (parsedTheme) {
             case 'material':
             case 'darkMaterial':
@@ -11202,12 +11209,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;
 }
 
 /**
@@ -11614,23 +11621,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,
@@ -11650,7 +11641,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 {
@@ -11660,14 +11681,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) {
@@ -11687,7 +11707,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();
@@ -11700,27 +11720,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;
         }
@@ -11731,21 +11753,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 {
@@ -11757,8 +11779,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;
                     }
                 });
             }
@@ -11784,13 +11806,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)) {
@@ -11800,44 +11821,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) {
@@ -11849,7 +11885,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() {
@@ -11865,7 +11901,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,
                 };
@@ -11890,52 +11926,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;
@@ -13927,34 +13979,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));
 };
@@ -13968,16 +14019,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));
 };
@@ -14190,8 +14242,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);
                 };
             });
         });
@@ -15877,9 +15935,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,
@@ -16007,12 +16065,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() {