@progress/kendo-vue-grid 7.1.0-develop.5 → 7.1.0-develop.7

package/Grid.mjs

@@ -5,46 +5,46 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as Ze, createVNode as o, h as Se, createTextVNode as et, ref as v, inject as tt, markRaw as y } from "vue";
-import { isObject as A, cloneArray as it, canUseDOM as Q, WatermarkOverlay as st, getter as X, getTemplate as ye, setRef as F, hasListener as G, getRef as R, RowHeightService as rt, kendoThemeMaps as He, uGrid as lt, isRtl as ke, validatePackage as at, shouldShowValidationUI as ot, getLicenseMessage as nt, guid as _e, getNestedValue as Ee } from "@progress/kendo-vue-common";
-import { tableKeyboardNavigationTools as H, combineFilters as dt, Pager as ht, normalize as pt, TableKeyboardNavigationProvider as ze, updateLeft as ut, updateRight as ct, groupExpandReducer as gt, detailExpandReducer as ft, getDetailExpandableOptions as mt, getGroupExpandableOptions as Ct } from "@progress/kendo-vue-data-tools";
-import { Loader as bt } from "@progress/kendo-vue-indicators";
-import { GridNav as De } from "./GridNav.mjs";
-import { GridSelectionCell as Te } from "./cells/GridSelectionCell.mjs";
+import { defineComponent as at, createVNode as n, h as De, createTextVNode as ot, ref as x, inject as nt, markRaw as _ } from "vue";
+import { isObject as A, cloneArray as dt, canUseDOM as Q, WatermarkOverlay as ht, getter as X, getTemplate as Te, setRef as G, hasListener as L, getRef as $, RowHeightService as pt, setScrollbarWidth as ut, kendoThemeMaps as Ge, uGrid as ct, isRtl as Fe, validatePackage as gt, shouldShowValidationUI as ft, getLicenseMessage as mt, guid as Le, getNestedValue as Pe } from "@progress/kendo-vue-common";
+import { tableKeyboardNavigationTools as E, combineFilters as Ct, Pager as bt, normalize as $t, TableKeyboardNavigationProvider as Me, updateLeft as Rt, updateRight as xt, groupExpandReducer as vt, detailExpandReducer as wt, getDetailExpandableOptions as It, getGroupExpandableOptions as St } from "@progress/kendo-vue-data-tools";
+import { Loader as yt } from "@progress/kendo-vue-indicators";
+import { GridNav as Ae } from "./GridNav.mjs";
+import { GridSelectionCell as Ve } from "./cells/GridSelectionCell.mjs";
 import { GridHierarchyCell as Y } from "./cells/GridHierarchyCell.mjs";
-import { GridDetailHierarchyCell as $t } from "./cells/GridDetailHierarchyCell.mjs";
-import { GridDetailCell as Rt } from "./cells/GridDetailCell.mjs";
-import { GridEditCell as xt } from "./cells/GridEditCell.mjs";
-import { Header as vt } from "./header/Header.mjs";
-import { HeaderRow as wt } from "./header/HeaderRow.mjs";
-import { FilterRow as It } from "./header/FilterRow.mjs";
-import { GroupPanel as St } from "./header/GroupPanel.mjs";
-import { Footer as yt } from "./footer/Footer.mjs";
-import { FooterRow as Ht } from "./footer/FooterRow.mjs";
-import { operators as Fe } from "./filterCommon.mjs";
-import { VirtualScroll as kt } from "./VirtualScroll.mjs";
-import { ColumnResize as _t } from "./drag/ColumnResize.mjs";
-import { CommonDragLogic as Et } from "./drag/CommonDragLogic.mjs";
-import { DragClue as zt } from "./drag/DragClue.mjs";
-import { DropClue as Dt } from "./drag/DropClue.mjs";
-import { applyExpandedState as Tt, getColSpan as Ft, autoGenerateColumns as Gt, mapColumns as Lt, getFlatColumnsState as Ge, getRowSpanOptions as Le, groupedFirstItemValue as Pe, calcRowHeight as Pt, flatData as Mt, readColumns as At } from "./utils/main.mjs";
-import { GridCell as Vt } from "./cells/GridCell.mjs";
+import { GridDetailHierarchyCell as Ht } from "./cells/GridDetailHierarchyCell.mjs";
+import { GridDetailCell as kt } from "./cells/GridDetailCell.mjs";
+import { GridEditCell as _t } from "./cells/GridEditCell.mjs";
+import { Header as Et } from "./header/Header.mjs";
+import { HeaderRow as zt } from "./header/HeaderRow.mjs";
+import { FilterRow as Dt } from "./header/FilterRow.mjs";
+import { GroupPanel as Tt } from "./header/GroupPanel.mjs";
+import { Footer as Gt } from "./footer/Footer.mjs";
+import { FooterRow as Ft } from "./footer/FooterRow.mjs";
+import { operators as Ne } from "./filterCommon.mjs";
+import { VirtualScroll as Lt } from "./VirtualScroll.mjs";
+import { ColumnResize as Pt } from "./drag/ColumnResize.mjs";
+import { CommonDragLogic as Mt } from "./drag/CommonDragLogic.mjs";
+import { DragClue as At } from "./drag/DragClue.mjs";
+import { DropClue as Vt } from "./drag/DropClue.mjs";
+import { applyExpandedState as Nt, getColSpan as Ot, autoGenerateColumns as Wt, mapColumns as Kt, getFlatColumnsState as Oe, getRowSpanOptions as We, groupedFirstItemValue as Ke, calcRowHeight as Ut, flatData as Bt, readColumns as jt } from "./utils/main.mjs";
+import { GridCell as qt } from "./cells/GridCell.mjs";
 import { GridGroupCell as Z } from "./cells/GridGroupCell.mjs";
-import { GridRow as Nt } from "./rows/GridRow.mjs";
-import { gridProps as Ot } from "./common.mjs";
-import { GridHeaderSelectionCell as Me } from "./header/GridHeaderSelectionCell.mjs";
-import { GridNoRecords as Ae } from "./components/noRecords/GridNoRecords.mjs";
-import { GridNoRecordsContainer as Ve } from "./components/noRecords/GridNoRecordsContainer.mjs";
+import { GridRow as Jt } from "./rows/GridRow.mjs";
+import { gridProps as Qt } from "./common.mjs";
+import { GridHeaderSelectionCell as Ue } from "./header/GridHeaderSelectionCell.mjs";
+import { GridNoRecords as Be } from "./components/noRecords/GridNoRecords.mjs";
+import { GridNoRecordsContainer as je } from "./components/noRecords/GridNoRecordsContainer.mjs";
 import { packageMetadata as ee } from "./package-metadata.mjs";
-import { pagerMessagesMap as Ne } from "./messages/messagesMap.mjs";
-import { process as Wt } from "@progress/kendo-data-query";
-import { KendoKey as Kt } from "./key.mjs";
-import { getVirtualCellsToRender as Ut } from "./utils/virtualColumns.mjs";
-const _i = /* @__PURE__ */ Ze({
+import { pagerMessagesMap as qe } from "./messages/messagesMap.mjs";
+import { process as Xt } from "@progress/kendo-data-query";
+import { KendoKey as Yt } from "./key.mjs";
+import { getVirtualCellsToRender as Zt } from "./utils/virtualColumns.mjs";
+const Pi = /* @__PURE__ */ at({
   name: "KendoGrid",
   inheritAttrs: !1,
   props: {
-    ...Ot,
+    ...Qt,
     toolbar: {
       type: Object
     },
@@ -89,18 +89,18 @@ const _i = /* @__PURE__ */ Ze({
     }
   },
   created() {
-    at(ee), this.showLicenseWatermark = ot(ee), this.licenseMessage = nt(ee), this.initialHeight = null, this._columns = [], this.vsRef = new kt(), this.dragLogic = new Et(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new _t(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.tableBodyRef = null, this.tableRef = null, this.scrollHeightContainerRef = null, this.forceUpdateTimeout = void 0, this._gridId = _e(), this._gridRoleElementId = _e(), this.slicedCurrentData = void 0, this._prevTotal = void 0, this._containerHeightRef = 0, this._minRowHeightRef = 0, this._virtualSkipRef = 0, this.wrapperScrollTopRef = 0, this.scrollLeftRef = 0;
+    gt(ee), this.showLicenseWatermark = ft(ee), this.licenseMessage = mt(ee), this.initialHeight = null, this._columns = [], this.vsRef = new Lt(), this.dragLogic = new Mt(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new Pt(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.tableBodyRef = null, this.tableRef = null, this.scrollHeightContainerRef = null, this.forceUpdateTimeout = void 0, this._gridId = Le(), this._gridRoleElementId = Le(), this.slicedCurrentData = void 0, this._prevTotal = void 0, this._containerHeightRef = 0, this._minRowHeightRef = 0, this._virtualSkipRef = 0, this.wrapperScrollTopRef = 0, this.scrollLeftRef = 0;
   },
   mounted() {
     var t, i;
     this.setRefs();
-    const e = ke(this._element);
+    const e = Fe(this._element);
     this._prevTotal = this.$props.total, this.isRtl = e, this.initialHeight = ((i = (t = this._element) == null ? void 0 : t.style) == null ? void 0 : i.height) || null, this.resizeObserver = Q && (window == null ? void 0 : window.ResizeObserver) && new ResizeObserver(this.calculateMedia), document != null && document.body && this.resizeObserver && this.resizeObserver.observe(document.body);
   },
   updated() {
     var t;
     this.setRefs();
-    const e = ke(this._element);
+    const e = Fe(this._element);
     this.isRtl = e, this._prevTotal = this.$props.total, this.vsRef.tableTransform && this.vsRef.table && (this.vsRef.table.style.transform = this.vsRef.tableTransform, this.vsRef.tableTransform = ""), this.isVirtualScroll && (this.setContainerHeight(), this.setMinRowHeight(), (t = this.vsRef) == null || t.update());
   },
   unmounted() {
@@ -114,16 +114,16 @@ const _i = /* @__PURE__ */ Ze({
       return this.$props.navigatable ? this.gridId : "";
     },
     groupExpandable() {
-      return Ct(typeof this.$props.groupable == "object" && this.$props.groupable.enabled !== !1 ? this.$props.groupable.expandable : this.$props.groupable);
+      return St(typeof this.$props.groupable == "object" && this.$props.groupable.enabled !== !1 ? this.$props.groupable.expandable : this.$props.groupable);
     },
     hierarchClass() {
-      return lt.hierarchyCell({});
+      return ct.hierarchyCell({});
     },
-    rowSpannable() {
-      return Le(this.$props.rowSpannable);
+    computedRowSpannable() {
+      return We(this.$props.rowSpannable);
     },
     detailExpandable() {
-      return mt(!!this.$props.detail);
+      return It(!!this.$props.detail);
     },
     nonscrollableWrapperClass() {
       const {
@@ -132,7 +132,7 @@ const _i = /* @__PURE__ */ Ze({
       return {
         "k-grid": !0,
         "k-grid-md": !e,
-        [`k-grid-${He.sizeMap[e] || e}`]: e,
+        [`k-grid-${Ge.sizeMap[e] || e}`]: e,
         [t]: !!t
       };
     },
@@ -153,7 +153,7 @@ const _i = /* @__PURE__ */ Ze({
         "k-table": !0,
         "k-grid-table": !0,
         "k-grid-md": !e,
-        [`k-table-${He.sizeMap[e] || e}`]: e
+        [`k-table-${Ge.sizeMap[e] || e}`]: e
       };
     },
     getCorrectHeight() {
@@ -189,7 +189,7 @@ const _i = /* @__PURE__ */ Ze({
   },
   methods: {
     readColumnElements() {
-      return At(this.$props.columns, this.currentColumnsState, {
+      return jt(this.$props.columns, this.currentColumnsState, {
         prevId: 0,
         idPrefix: this.idPrefix
       });
@@ -215,11 +215,11 @@ const _i = /* @__PURE__ */ Ze({
       })];
     },
     getFlatData(e, t, i, s, r, l, d) {
-      const p = [], c = Mt(p, e, t, {
+      const h = [], c = Bt(h, e, t, {
         index: i
       }, s !== void 0, r, l, this.groupExpandable.defaultExpand, d, this.$props.expandField);
       return {
-        flattedData: p,
+        flattedData: h,
         resolvedGroupsCount: c
       };
     },
@@ -257,31 +257,31 @@ const _i = /* @__PURE__ */ Ze({
           declarationIndex: r,
           parentIndex: l,
           depth: d,
-          colSpan: p,
+          colSpan: h,
           rowSpan: c,
-          index: f,
+          index: m,
           kFirst: u,
-          children: m,
-          ...x
+          children: C,
+          ...R
         } = s;
-        return m.length ? {
-          children: t(m),
-          ...x
-        } : x;
+        return C.length ? {
+          children: t(C),
+          ...R
+        } : R;
       }));
       return t(e);
     },
     setRefs() {
       let e = "$el";
-      const t = R(this, "gridNav");
+      const t = $(this, "gridNav");
       t && (this._element = t[e]);
-      const i = R(this, "groupPanelDiv");
+      const i = $(this, "groupPanelDiv");
       if (i) {
         let l = i[e] || null;
         this.dragLogic.refGroupPanelDiv(l);
       }
-      const s = R(this, "dropElementClue"), r = R(this, "dragElementClue");
-      this.dragLogic.refDropElementClue(s), this.dragLogic.refDragElementClue(r), this.columnResize.colGroupMain = R(this, "colGroup"), this._header = R(this, "header"), this._footer = R(this, "footer"), this.resetTableWidth();
+      const s = $(this, "dropElementClue"), r = $(this, "dragElementClue");
+      this.dragLogic.refDropElementClue(s), this.dragLogic.refDragElementClue(r), this.columnResize.colGroupMain = $(this, "colGroup"), this._header = $(this, "header"), this._footer = $(this, "footer"), this.resetTableWidth(), ut();
     },
     gridUnmounted() {
       clearTimeout(this.forceUpdateTimeout), this.columnResize.columns = [], this.dragLogic.columns = [], this.dragLogic && this.dragLogic.dragElementClue && (this.dragLogic.dragElementClue.$el.remove(), this.dragLogic.dropElementClue.$el.remove()), this.currentData = [], this._columns = [], document != null && document.body && this.resizeObserver && this.resizeObserver.disconnect();
@@ -302,15 +302,15 @@ const _i = /* @__PURE__ */ Ze({
     },
     initializeVirtualization() {
       const e = this.vsRef, t = this.$props.rowHeight || this._minRowHeightRef || 0;
-      e && (e.fixedScroll = this.$props.fixedScroll || !1, e.PageChange = this.virtualPageChange, e.pageSize = this._virtualPageSize, e.scrollableVirtual = this.isVirtualScroll, e.container = R(this, "scrollContainer"), e.tableBody = R(this, "tableBody"), e.scrollHeightContainer = R(this, "scrollHeightContainer"), e.table = R(this, "table"), (!e.rowHeightService || e.total !== this._virtualTotal) && t && (e.total = this._virtualTotal, e.rowHeightService = new rt(this._virtualTotal, t)));
+      e && (e.fixedScroll = this.$props.fixedScroll || !1, e.PageChange = this.virtualPageChange, e.pageSize = this._virtualPageSize, e.scrollableVirtual = this.isVirtualScroll, e.container = $(this, "scrollContainer"), e.tableBody = $(this, "tableBody"), e.scrollHeightContainer = $(this, "scrollHeightContainer"), e.table = $(this, "table"), (!e.rowHeightService || e.total !== this._virtualTotal) && t && (e.total = this._virtualTotal, e.rowHeightService = new pt(this._virtualTotal, t)));
     },
     setContainerHeight() {
-      const e = R(this, "scrollContainer");
+      const e = $(this, "scrollContainer");
       this._containerHeightRef = (e == null ? void 0 : e.offsetHeight) || 0;
     },
     setMinRowHeight() {
       if (!this._minRowHeightRef && !this.$props.rowHeight) {
-        const t = Pt(R(this, "tableBody"));
+        const t = Ut($(this, "tableBody"));
         t && (this._minRowHeightRef = t, this.$forceUpdate());
       }
     },
@@ -343,13 +343,13 @@ const _i = /* @__PURE__ */ Ze({
     },
     updateGroupCollapsed(e) {
       let t = this.computedCollapsed, i = t[e.level];
-      const s = this.$props.uniqueField, r = function(p, c) {
-        return p.value === e.dataItem.value && c === e.level;
-      }, l = this.allGroupedItems ? this.loopGroupedItems(this.allGroupedItems.data, r, 0, null) : e.dataItem, d = Pe(l || e.dataItem, s);
+      const s = this.$props.uniqueField, r = function(h, c) {
+        return h.value === e.dataItem.value && c === e.level;
+      }, l = this.allGroupedItems ? this.loopGroupedItems(this.allGroupedItems.data, r, 0, null) : e.dataItem, d = Ke(l || e.dataItem, s);
       if (e.value) {
         if (i && i.length) {
-          const p = i.indexOf(d);
-          p > -1 && i.splice(p, 1);
+          const h = i.indexOf(d);
+          h > -1 && i.splice(h, 1);
         }
       } else
         i ? i.includes(d) || i.push(d) : i = [d];
@@ -357,9 +357,9 @@ const _i = /* @__PURE__ */ Ze({
     },
     itemChange(e) {
       var s;
-      const t = G.call(this, "itemchange"), i = (s = this.gridContext.group) == null ? void 0 : s.value;
+      const t = L.call(this, "itemchange"), i = (s = this.gridContext.group) == null ? void 0 : s.value;
       if (e.field === this.$props.expandField || (i || this.$props.detail) && e.field === void 0) {
-        G.call(this, "expandchange") && e.dataItem && this.$emit("expandchange", {
+        L.call(this, "expandchange") && e.dataItem && this.$emit("expandchange", {
           ...this.getArguments(e.event),
           collapsedGroups: this.updateGroupCollapsed(e),
           dataItem: e.dataItem,
@@ -469,7 +469,7 @@ const _i = /* @__PURE__ */ Ze({
     handleDetailExpandAction(e, t) {
       var i;
       if (this.detailExpandable.enabled) {
-        const s = (i = this.gridContext.detailExpand) == null ? void 0 : i.value, r = ft(s != null ? s : {}, e);
+        const s = (i = this.gridContext.detailExpand) == null ? void 0 : i.value, r = wt(s != null ? s : {}, e);
         this.$emit("detailexpandchange", {
           ...this.getArguments(t),
           detailExpand: r
@@ -479,7 +479,7 @@ const _i = /* @__PURE__ */ Ze({
     handleGroupExpandAction(e, t) {
       var i;
       if (this.groupExpandable.enabled) {
-        const s = (i = this.gridContext.groupExpand) == null ? void 0 : i.value, r = gt(s != null ? s : [], e, this.groupExpandable);
+        const s = (i = this.gridContext.groupExpand) == null ? void 0 : i.value, r = vt(s != null ? s : [], e, this.groupExpandable);
         this.$props.expandField || this.$emit("groupexpandchange", {
           ...this.getArguments(t),
           groupExpand: r
@@ -492,12 +492,12 @@ const _i = /* @__PURE__ */ Ze({
           ...this.getArguments(s),
           ...t
         });
-      else if (G.call(this, e))
+      else if (L.call(this, e))
         this.$emit(e, {
           ...this.getArguments(s),
           ...t
         });
-      else if (G.call(this, "datastatechange")) {
+      else if (L.call(this, "datastatechange")) {
         const r = {
           ...this.getDataState(),
           ...i
@@ -510,23 +510,23 @@ const _i = /* @__PURE__ */ Ze({
       }
     },
     columnReorder(e, t, i) {
-      const s = this._columns[e], r = Ge(this.currentColumnsState), l = s.depth, d = (u) => {
+      const s = this._columns[e], r = Oe(this.currentColumnsState), l = s.depth, d = (u) => {
         do
           u++;
         while (u < this._columns.length && this._columns[u].depth > l);
         return u;
-      }, p = this._columns.splice(e, d(e) - e);
-      this._columns.splice(e < t ? d(t - p.length) : t, 0, ...p), this._columns.filter((u) => u.declarationIndex >= 0).forEach((u, m) => {
-        u.orderIndex = m;
-        const x = r.find((w) => w.id === u.id);
-        x && (x.orderIndex = m);
+      }, h = this._columns.splice(e, d(e) - e);
+      this._columns.splice(e < t ? d(t - h.length) : t, 0, ...h), this._columns.filter((u) => u.declarationIndex >= 0).forEach((u, C) => {
+        u.orderIndex = C;
+        const R = r.find((I) => I.id === u.id);
+        R && (R.orderIndex = C);
       });
       const c = this._columns[e].locked && this._columns[t].locked;
-      ut(this._columnsMap, this._columns, c || this.shouldUpdateLeftRightRef), ct(this._columnsMap, this._columns, c || this.shouldUpdateLeftRightRef), this.resizedRef && (this.shouldUpdateLeftRightRef = !1, this.resizedRef = !1);
-      const f = this.getColumns();
+      Rt(this._columnsMap, this._columns, c || this.shouldUpdateLeftRightRef), xt(this._columnsMap, this._columns, c || this.shouldUpdateLeftRightRef), this.resizedRef && (this.shouldUpdateLeftRightRef = !1, this.resizedRef = !1);
+      const m = this.getColumns();
       this.$emit("columnreorder", {
         target: this,
-        columns: f,
+        columns: m,
         event: i,
         prev: e,
         next: t
@@ -550,18 +550,19 @@ const _i = /* @__PURE__ */ Ze({
       }), this.groupChangeHandler(r, i);
     },
     resetTableWidth() {
+      var s;
       let e = 0;
       if (!this.columnResize.colGroupMain)
         return;
-      const t = this.columnResize.colGroupMain.children;
-      for (let s = 0; s < t.length; s++) {
-        const r = t[s].width;
-        if (!r)
+      const t = (s = this.columnResize.colGroupMain) == null ? void 0 : s.children;
+      for (let r = 0; r < t.length; r++) {
+        const l = t[r].width;
+        if (!l)
           return;
-        e += parseFloat(r.toString());
+        e += parseFloat(l.toString());
       }
       e = Math.round(e), this._header && this._header.setWidth(e), this._footer && this._footer.setWidth(e);
-      const i = R(this, "table");
+      const i = $(this, "table");
       i && e && (i.style.width = e + "px");
     },
     onResize(e, t, i, s, r, l, d) {
@@ -594,11 +595,11 @@ const _i = /* @__PURE__ */ Ze({
     },
     configureColumns(e, t) {
       e.filter((l) => l.columnType === "checkbox").forEach((l) => {
-        l.width = l.width || "50px", l.defaultCell = y(Te), l.defaultHeaderCell = y(Me), l._type = "edit";
+        l.width = l.width || "50px", l.defaultCell = _(Ve), l.defaultHeaderCell = _(Ue), l._type = "edit";
       }), this.$props.selectedField && this._columns.filter((l) => l.field === this.$props.selectedField).forEach((l) => {
-        l.width = l.width || "50px", l.internalCell = y(Te), l.internalHeaderCell = y(Me);
+        l.width = l.width || "50px", l.internalCell = _(Ve), l.internalHeaderCell = _(Ue);
       });
-      const i = Ge(this.currentColumnsState);
+      const i = Oe(this.currentColumnsState);
       this.initColumnsState(e, i);
       const s = {
         id: "",
@@ -625,50 +626,50 @@ const _i = /* @__PURE__ */ Ze({
         const l = {
           ...s,
           _type: "expand",
-          id: H.generateNavigatableId(`${r++}`, "expand", "column"),
-          defaultCell: y(Y),
-          internalCell: y(Y),
+          id: E.generateNavigatableId(`${r++}`, "expand", "column"),
+          defaultCell: _(Y),
+          internalCell: _(Y),
           field: this.detailExpandable.column,
           headerClassName: this.hierarchClass
         };
         e.unshift(l), this.currentColumnsState.unshift(i.find((d) => d.id === l.id) || l);
       }
-      this.$props.expandField && G.call(this, "expandchange") && this.$props.detail && (e.unshift({
+      this.$props.expandField && L.call(this, "expandchange") && this.$props.detail && (e.unshift({
         ...s,
-        internalCell: y(Y),
+        internalCell: _(Y),
         field: this.$props.expandField,
         headerClassName: "k-hierarchy-cell k-header",
-        id: H.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
+        id: E.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
         ...this.expandColumn
       }), r++);
       for (let l = 0; l < t; l++) {
         const d = {
           ...s,
           isAccessible: !1,
-          defaultCell: y(Z),
-          internalCell: y(Z),
-          id: H.generateNavigatableId(`${r++}`, "group", "column"),
+          defaultCell: _(Z),
+          internalCell: _(Z),
+          id: E.generateNavigatableId(`${r++}`, "group", "column"),
           field: "value",
           locked: this.$props.lockGroups
         };
-        e.unshift(d), this.currentColumnsState.unshift(i.find((p) => p.id === d.id) || d);
+        e.unshift(d), this.currentColumnsState.unshift(i.find((h) => h.id === d.id) || d);
       }
       e.slice(r).forEach((l) => {
-        l.parentIndex >= 0 && (l.parentIndex += r), l.rowSpannable = l.rowSpannable !== void 0 ? Le(l.rowSpannable) : this.rowSpannable;
+        l.parentIndex >= 0 && (l.parentIndex += r), l.rowSpannable = l.rowSpannable !== void 0 ? We(l.rowSpannable) : this.computedRowSpannable;
       });
     },
     initColumns(e, t) {
       var l;
       this._columns = this.readColumnElements();
       const i = (l = this.gridContext.group) == null ? void 0 : l.value;
-      this._columns.filter((d) => !d.hidden).length === 0 && (this._columns = Gt(e, i, {
+      this._columns.filter((d) => !d.hidden).length === 0 && (this._columns = Wt(e, i, {
         column: this.$props.expandField ? this.$props.expandField : this.groupExpandable.column
       }, {
         prevId: 0,
         idPrefix: this.idPrefix
       })), this.configureColumns(this._columns, t);
       const [s, r] = this.filterColumns(this._columns);
-      this._columns = s, this.hiddenColumnsRef = r, this._columnsMap = Lt(this._columns, !0);
+      this._columns = s, this.hiddenColumnsRef = r, this._columnsMap = Kt(this._columns, !0);
     },
     resolveTitle(e) {
       const t = this.findColumnByField(e), i = t && (t.title || t.field);
@@ -693,8 +694,8 @@ const _i = /* @__PURE__ */ Ze({
       return null;
     },
     getDataState() {
-      var l, d, p, c, f;
-      const e = (l = this.gridContext.sort) == null ? void 0 : l.value, t = (d = this.gridContext.filter) == null ? void 0 : d.value, i = (p = this.gridContext.skip) == null ? void 0 : p.value, s = (c = this.gridContext.take) == null ? void 0 : c.value, r = (f = this.gridContext.group) == null ? void 0 : f.value;
+      var l, d, h, c, m;
+      const e = (l = this.gridContext.sort) == null ? void 0 : l.value, t = (d = this.gridContext.filter) == null ? void 0 : d.value, i = (h = this.gridContext.skip) == null ? void 0 : h.value, s = (c = this.gridContext.take) == null ? void 0 : c.value, r = (m = this.gridContext.group) == null ? void 0 : m.value;
       return {
         filter: t,
         sort: e,
@@ -748,24 +749,24 @@ const _i = /* @__PURE__ */ Ze({
       var l;
       const i = [];
       let s = null, r = 0;
-      if (t.forEach((d, p) => {
+      if (t.forEach((d, h) => {
         const c = parseFloat((d.width || "").toString()) || 10;
         if (r) {
           r--, s && (s.width += c);
           return;
         }
-        const f = Math.min(Ft(d, e), t.length - p);
-        r = f - 1, s = {
+        const m = Math.min(Ot(d, e), t.length - h);
+        r = m - 1, s = {
           width: c,
-          colSpan: f,
-          columnIndex: p
+          colSpan: m,
+          columnIndex: h
         }, i.push(s);
       }), this.$props.columnVirtualization) {
-        const d = this.scrollLeftRef || 0, p = this.tableWidth || parseFloat((((l = this.$attrs.style) == null ? void 0 : l.width) || "").toString());
-        return Ut({
+        const d = this.scrollLeftRef || 0, h = this.tableWidth || parseFloat((((l = this.$attrs.style) == null ? void 0 : l.width) || "").toString());
+        return Zt({
           cellModels: i,
           columns: t,
-          tableViewPortWidth: p,
+          tableViewPortWidth: h,
           scrollLeft: d
         });
       }
@@ -800,7 +801,7 @@ const _i = /* @__PURE__ */ Ze({
     };
   },
   setup(e) {
-    const t = v(null), i = v(null), s = v(null), r = v(null), l = v(null), d = v(null), p = v(null), c = v(null), f = v(null), u = v(null), m = v(!0), x = v(!1), w = tt(Kt, {});
+    const t = x(null), i = x(null), s = x(null), r = x(null), l = x(null), d = x(null), h = x(null), c = x(null), m = x(null), u = x(null), C = x(!0), R = x(!1), I = nt(Yt, {});
     return {
       groupPanelDivRef: t,
       dropElementClueRef: i,
@@ -808,20 +809,20 @@ const _i = /* @__PURE__ */ Ze({
       headerRef: r,
       footerRef: l,
       gridNavRef: d,
-      colGroupRef: p,
+      colGroupRef: h,
       scrollContainerRef: c,
-      scrollTableRef: f,
+      scrollTableRef: m,
       scrollTableBodyRef: u,
-      gridContext: w,
-      shouldUpdateLeftRightRef: m,
-      resizedRef: x,
+      gridContext: I,
+      shouldUpdateLeftRightRef: C,
+      resizedRef: R,
       currentColumnsState: e.columnsState
     };
   },
   render() {
     var ge, fe, me, Ce, be, $e, Re, xe, ve, we, Ie;
-    const e = (ge = this.gridContext.sort) == null ? void 0 : ge.value, t = (fe = this.gridContext.filter) == null ? void 0 : fe.value, i = (me = this.gridContext.search) == null ? void 0 : me.value, s = (Ce = this.gridContext.skip) == null ? void 0 : Ce.value, r = (be = this.gridContext.take) == null ? void 0 : be.value, l = ($e = this.gridContext.group) == null ? void 0 : $e.value, d = (Re = this.gridContext.groupExpand) == null ? void 0 : Re.value, p = (xe = this.gridContext.detailExpand) == null ? void 0 : xe.value, c = !!(l != null && l.length);
-    let f;
+    const e = (ge = this.gridContext.sort) == null ? void 0 : ge.value, t = (fe = this.gridContext.filter) == null ? void 0 : fe.value, i = (me = this.gridContext.search) == null ? void 0 : me.value, s = (Ce = this.gridContext.skip) == null ? void 0 : Ce.value, r = (be = this.gridContext.take) == null ? void 0 : be.value, l = ($e = this.gridContext.group) == null ? void 0 : $e.value, d = (Re = this.gridContext.groupExpand) == null ? void 0 : Re.value, h = (xe = this.gridContext.detailExpand) == null ? void 0 : xe.value, c = !!(l != null && l.length);
+    let m;
     this.currentColumnsState = (ve = this.gridContext.columnsState) == null ? void 0 : ve.value;
     const u = this.$props.autoProcessData === !0 ? {
       group: !0,
@@ -830,45 +831,45 @@ const _i = /* @__PURE__ */ Ze({
       search: !0,
       page: !0
     } : this.$props.autoProcessData;
-    let m = this.$props.total || 0;
-    const x = H.getIdPrefix(this.navigation);
-    let w = [];
-    Array.isArray(this.$props.dataItems) ? w = this.$props.dataItems : this.$props.dataItems && (w = Tt(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField).data, m = m || this.$props.dataItems.total);
+    let C = this.$props.total || 0;
+    const R = E.getIdPrefix(this.navigation);
+    let I = [];
+    Array.isArray(this.$props.dataItems) ? I = this.$props.dataItems : this.$props.dataItems && (I = Nt(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField).data, C = C || this.$props.dataItems.total);
     const te = this.$props.groupable === !0 || A(this.$props.groupable) && this.$props.groupable.enabled !== !1;
     this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = te, this._virtualPageSize = this.calcVirtualPageSize();
-    const V = w.length === m, Oe = A(this.$props.groupable) && this.$props.groupable.footer || "none";
+    const V = I.length === C, Je = A(this.$props.groupable) && this.$props.groupable.footer || "none";
     if (this.currentData = [], u) {
       const a = u.page && !(this.isVirtualScroll && !this.$props.pageable), {
-        data: g,
-        total: I
-      } = Wt(w, {
+        data: f,
+        total: S
+      } = Xt(I, {
         group: u.group ? l : void 0,
         sort: u.sort ? e : void 0,
-        filter: dt(u.filter ? t : void 0, u.search ? i : void 0),
+        filter: Ct(u.filter ? t : void 0, u.search ? i : void 0),
         ...a ? {
           take: this.$props.pageable ? r || 10 : r,
           skip: s || 0
         } : {}
       });
-      w = g, m = (we = this.$props.total) != null ? we : I;
+      I = f, C = (we = this.$props.total) != null ? we : S;
     }
     const {
-      resolvedGroupsCount: We,
-      flattedData: Ke
-    } = this.getFlatData(w, Oe, V ? 0 : this.$props.skip || 0, l, p, d, this.$props.dataItemKey);
-    this.currentData = Ke;
+      resolvedGroupsCount: Qe,
+      flattedData: Xe
+    } = this.getFlatData(I, Je, V ? 0 : this.$props.skip || 0, l, h, d, this.$props.dataItemKey);
+    this.currentData = Xe;
     const N = this._virtualSkipRef || 0;
-    if (this._virtualTotal = m, this.isVirtualScroll) {
+    if (this._virtualTotal = C, this.isVirtualScroll) {
       let a = s || 0;
       if ((c || this.$props.pageable) && (a = N, this._virtualTotal = this.currentData.length), V || c || this.$props.pageable)
         if (this._virtualPageSize === 0) {
-          const g = Math.min(r || this.$props.pageSize || 20, this.currentData.length);
-          f = this.currentData.slice(a, a + g);
+          const f = Math.min(r || this.$props.pageSize || 20, this.currentData.length);
+          m = this.currentData.slice(a, a + f);
         } else
-          f = this.currentData.slice(a, a + this._virtualPageSize);
+          m = this.currentData.slice(a, a + this._virtualPageSize);
     }
-    this.initializeVirtualization(), this.initColumns(this.$props.dataItems, We), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this._columns, this.columnResize.columnsState = it(this.currentColumnsState || []), this.dragLogic.columns = this._columns;
-    const ie = this.$props.toolbar, L = this.$props.noRecords, k = this._columns.filter((a) => a.children.length === 0), se = te && o(St, {
+    this.initializeVirtualization(), this.initColumns(this.$props.dataItems, Qe), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this._columns, this.columnResize.columnsState = dt(this.currentColumnsState || []), this.dragLogic.columns = this._columns;
+    const ie = this.$props.toolbar, P = this.$props.noRecords, z = this._columns.filter((a) => a.children.length === 0), se = te && n(Tt, {
       ref: (a) => {
         this.groupPanelDivRef = a;
       },
@@ -879,22 +880,22 @@ const _i = /* @__PURE__ */ Ze({
       onDragHandler: this.dragLogic.dragHandler,
       onReleaseHandler: this.dragLogic.releaseHandler,
       resolveTitle: this.resolveTitle
-    }, null), re = (this.dragLogic.reorderable || this.dragLogic.groupable) && Q && document && document.body, le = [re && o(Dt, {
+    }, null), re = (this.dragLogic.reorderable || this.dragLogic.groupable) && Q && document && document.body, le = [re && n(Vt, {
       ref: (a) => {
         this.dropElementClueRef = a;
       }
-    }, null), re && o(zt, {
+    }, null), re && n(At, {
       ref: (a) => {
         this.dragElementClueRef = a;
       }
-    }, null)], ae = o(vt, {
+    }, null)], ae = n(Et, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
       ref: (a) => {
         this.headerRef = a;
       },
-      headerRow: o(wt, {
+      headerRow: n(zt, {
         grid: this,
         sort: e,
         groupable: this.$props.groupable,
@@ -903,7 +904,7 @@ const _i = /* @__PURE__ */ Ze({
         onSortChange: this.sortChangeHandler,
         filter: t,
         filterable: this.$props.filterable,
-        filterOperators: this.$props.filterOperators || Fe,
+        filterOperators: this.$props.filterOperators || Ne,
         onFilterChange: this.filterChangeHandler,
         columnMenu: this.$props.columnMenu,
         columnMenuIcon: this.$props.columnMenuIcon,
@@ -919,12 +920,12 @@ const _i = /* @__PURE__ */ Ze({
         cellRender: this.$props.headerCellRender,
         isRtl: this.isRtl,
         isColCountDefined: this.getAriaColCount !== void 0,
-        filterRow: this.$props.filterable && o(It, {
+        filterRow: this.$props.filterable && n(Dt, {
           grid: this,
           size: this.$props.size,
           columns: this._columns,
           filter: t,
-          filterOperators: this.$props.filterOperators || Fe,
+          filterOperators: this.$props.filterOperators || Ne,
           onFilterchange: this.filterChangeHandler,
           sort: this.$props.sort,
           cellRender: this.$props.filterCellRender,
@@ -932,127 +933,138 @@ const _i = /* @__PURE__ */ Ze({
           ariaRowIndex: this._columnsMap.length + 1
         }, null) || void 0
       }, null),
-      cols: k.map(function(a, g) {
-        return o("col", {
-          key: g.toString(),
+      cols: z.map(function(a, f) {
+        return n("col", {
+          key: f.toString(),
           width: a.width !== void 0 ? Math.floor(parseFloat(a.width.toString())) : void 0
         }, null);
       }, this)
-    }, null), oe = this._columns.some((a) => !!a.footerCell) ? o(yt, {
+    }, null), oe = this._columns.some((a) => !!a.footerCell) ? n(Gt, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
       ref: (a) => {
         this.footerRef = a;
       },
-      row: o(Ht, {
+      row: n(Ft, {
         isRtl: this.isRtl,
         rowIndex: this.getAriaRowCount + 1,
         columns: this._columns
       }, null),
-      cols: k.map(function(a, g) {
-        return o("col", {
-          key: g.toString(),
+      cols: z.map(function(a, f) {
+        return n("col", {
+          key: f.toString(),
           width: a.width !== void 0 ? Math.floor(parseFloat(a.width.toString())) : void 0
         }, null);
       }, this)
-    }, null) : o("span", null, null), Ue = this.showLicenseWatermark ? o(st, {
+    }, null) : n("span", null, null), Ye = this.showLicenseWatermark ? n(ht, {
       message: this.licenseMessage
-    }, null) : null, O = this.$attrs.style, Be = O && A(O) && O["width"] || "";
-    this.tableWidth = parseFloat(Be.toString());
-    const ne = k.findIndex((a) => typeof a.colSpan == "function") > -1;
+    }, null) : null, O = this.$attrs.style, Ze = O && A(O) && O["width"] || "";
+    this.tableWidth = parseFloat(Ze.toString());
+    const ne = z.findIndex((a) => typeof a.colSpan == "function") > -1;
     let W;
-    ne || (W = this.getCellsToRender(null, k));
-    const je = function(a, g, I) {
-      let P = !1;
-      const M = this.$props.selectedField, h = M ? Ee(M, a.dataItem) : void 0, C = this.$props.highlight && this.$props.dataItemKey && X(this.$props.dataItemKey)(a.dataItem) !== void 0 ? this.$props.highlight[X(this.$props.dataItemKey)(a.dataItem)] : void 0;
-      return ne && (W = this.getCellsToRender(a.dataItem, k)), {
+    ne || (W = this.getCellsToRender(null, z));
+    const et = function(a, f, S, Se, k) {
+      let p = !1;
+      const D = this.$props.selectedField, y = D ? Pe(D, a.dataItem) : void 0, v = this.$props.highlight && this.$props.dataItemKey && X(this.$props.dataItemKey)(a.dataItem) !== void 0 ? this.$props.highlight[X(this.$props.dataItemKey)(a.dataItem)] : void 0;
+      return ne && (W = this.getCellsToRender(a.dataItem, z)), {
         row: W.map(function({
           columnIndex: b,
-          colSpan: D
+          colSpan: T
         }) {
-          const n = k[b], _ = `${n.className ? n.className + " " : ""}${n.locked ? "k-grid-content-sticky" : ""}`, E = n.left !== void 0 ? this.isRtl ? {
-            left: n.right + "px",
-            right: n.left + "px"
+          var ke, _e, Ee, ze;
+          const o = z[b];
+          let w;
+          if ((ke = o.rowSpannable) != null && ke.enabled && a.rowType === "data" && o.field && k) {
+            const g = o.field ? (Ee = (_e = o.rowSpannable).valueGetter) == null ? void 0 : Ee.call(_e, a.dataItem, o.field) : null;
+            w = {
+              value: g,
+              count: 1
+            }, k[o.field] && ((ze = k[o.field]) == null ? void 0 : ze.value) === g && k[o.field] !== null ? (k[o.field].count++, w.count = null) : k[o.field] = w;
+          }
+          const F = `${o.className ? o.className + " " : ""}${o.locked ? "k-grid-content-sticky" : ""}`, H = o.left !== void 0 ? this.isRtl ? {
+            left: o.right + "px",
+            right: o.left + "px"
           } : {
-            left: n.left + "px",
-            right: n.right + "px"
+            left: o.left + "px",
+            right: o.right + "px"
           } : {};
-          let z = !1;
-          if (n.editable && this.$props.editField) {
-            const $ = Ee(this.$props.editField, a.dataItem);
-            ($ === !0 || $ === n.field) && (P = !0, z = !0);
+          let ye = !1;
+          if (o.editable && this.$props.editField) {
+            const g = Pe(this.$props.editField, a.dataItem);
+            (g === !0 || g === o.field) && (p = !0, ye = !0);
           }
-          let T;
-          n.cell && (T = n.cell);
-          const S = this.computedCollapsed && this.computedCollapsed[a.level] && this.computedCollapsed[a.level].some(($) => $ === Pe(a.dataItem, this.$props.uniqueField)), j = n.id ? n.id : b, q = S ? !S : a.expanded || a.dataItem.expanded, Ye = n._type === "expand", J = H.generateNavigatableId(`${g}-${String(b)}`, x, Ye || a.rowType === "groupHeader" || a.rowType === "groupFooter" || n.field === "value" ? "nodata" : "cell");
-          return n.internalCell ? o(n.internalCell, {
+          let M;
+          o.cell && (M = o.cell);
+          const He = this.computedCollapsed && this.computedCollapsed[a.level] && this.computedCollapsed[a.level].some((g) => g === Ke(a.dataItem, this.$props.uniqueField)), j = o.id ? o.id : b, q = He ? !He : a.expanded || a.dataItem.expanded, lt = o._type === "expand", J = E.generateNavigatableId(`${f}-${String(b)}`, R, lt || a.rowType === "groupHeader" || a.rowType === "groupFooter" || o.field === "value" ? "nodata" : "cell");
+          return o.internalCell ? n(o.internalCell, {
             key: j,
             id: J,
-            colSpan: D,
+            colSpan: T,
             dataItem: a.dataItem,
-            field: n.field || "",
-            editor: n.editor,
-            format: n.format,
-            readFormat: n.readFormat,
-            type: n.type,
-            className: _,
-            render: T || this.$props.cellRender,
+            field: o.field || "",
+            editor: o.editor,
+            format: o.format,
+            readFormat: o.readFormat,
+            type: o.type,
+            className: F,
+            render: M || this.$props.cellRender,
             onChange: this.itemChange,
-            onSelectionchange: ($) => this.selectionChangeHandler({
-              event: $,
+            onSelectionchange: (g) => this.selectionChangeHandler({
+              event: g,
               dataItem: a.dataItem,
-              dataIndex: I,
+              dataIndex: S,
               columnIndex: b
             }),
             columnIndex: b,
-            columnsCount: this._columns.filter(($) => !$.children.length).length,
+            columnsCount: this._columns.filter((g) => !g.children.length).length,
             rowType: a.rowType,
             level: a.level,
             expanded: q,
             dataIndex: a.dataIndex,
-            style: E,
-            ariaColumnIndex: n.ariaColumnIndex,
+            style: H,
+            ariaColumnIndex: o.ariaColumnIndex,
             isRtl: this.isRtl,
-            isSelected: Array.isArray(h) && h.indexOf(b) > -1,
-            isHighlighted: !!(typeof C != "boolean" && C && n.field && C[n.field] === !0),
-            group: a.group
-          }, null) : z ? o(xt, {
+            isSelected: Array.isArray(y) && y.indexOf(b) > -1,
+            isHighlighted: !!(typeof v != "boolean" && v && o.field && v[o.field] === !0),
+            group: a.group,
+            rowSpan: w
+          }, null) : ye ? n(_t, {
             id: J,
             key: j,
-            colSpan: D,
+            colSpan: T,
             dataItem: a.dataItem,
-            field: n.field || "",
-            editor: n.editor,
-            format: n.format,
-            readFormat: n.readFormat,
-            type: n.type,
-            className: _,
-            render: T || this.$props.cellRender,
+            field: o.field || "",
+            editor: o.editor,
+            format: o.format,
+            readFormat: o.readFormat,
+            type: o.type,
+            className: F,
+            render: M || this.$props.cellRender,
             onEdit: this.editHandler,
             onRemove: this.removeHandler,
             onSave: this.saveHandler,
             onCancel: this.cancelHandler,
             onChange: this.itemChange,
             columnIndex: b,
-            columnsCount: this._columns.filter(($) => !$.children.length).length,
+            columnsCount: this._columns.filter((g) => !g.children.length).length,
             rowType: a.rowType,
             level: a.level,
             expanded: q,
             dataIndex: a.dataIndex,
-            style: E
-          }, null) : o(Vt, {
+            style: H
+          }, null) : n(qt, {
             key: j,
             id: J,
-            colSpan: D,
+            colSpan: T,
             dataItem: a.dataItem,
-            field: n.field || "",
-            editor: n.editor,
-            format: n.format,
-            readFormat: n.readFormat,
-            type: n.type,
-            className: _,
-            render: T || this.$props.cellRender,
+            field: o.field || "",
+            editor: o.editor,
+            format: o.format,
+            readFormat: o.readFormat,
+            type: o.type,
+            className: F,
+            render: M || this.$props.cellRender,
             onCellclick: this.cellClickHandler,
             onCellkeydown: this.cellKeydownHandler,
             onEdit: this.editHandler,
@@ -1060,148 +1072,149 @@ const _i = /* @__PURE__ */ Ze({
             onSave: this.saveHandler,
             onCancel: this.cancelHandler,
             onChange: this.itemChange,
-            onSelectionchange: ($) => this.selectionChangeHandler({
-              event: $,
+            onSelectionchange: (g) => this.selectionChangeHandler({
+              event: g,
               dataItem: a.dataItem,
-              dataIndex: I,
+              dataIndex: S,
               columnIndex: b
             }),
             columnIndex: b,
-            columnsCount: this._columns.filter(($) => !$.children.length).length,
+            columnsCount: this._columns.filter((g) => !g.children.length).length,
             rowType: a.rowType,
             level: a.level,
             expanded: q,
             dataIndex: a.dataIndex,
-            style: E,
-            isSelected: Array.isArray(h) && h.indexOf(b) > -1,
-            isHighlighted: !!(typeof C != "boolean" && C && n.field && C[n.field] === !0)
+            style: H,
+            rowSpan: w,
+            isSelected: Array.isArray(y) && y.indexOf(b) > -1,
+            isHighlighted: !!(typeof v != "boolean" && v && o.field && v[o.field] === !0)
           }, null);
         }, this),
-        isInEdit: P,
-        isSelected: typeof h == "boolean" && h,
-        isHighlighted: typeof C == "boolean" && C
+        isInEdit: p,
+        isSelected: typeof y == "boolean" && y,
+        isHighlighted: typeof v == "boolean" && v
       };
     };
-    let qe = 0, K = [];
-    const U = !this.currentData.length, de = (a) => a >= this.currentData.length - qe;
+    let tt = 0, K = [];
+    const U = !this.currentData.length, de = (a) => a >= this.currentData.length - tt;
     let B = 0;
     if (this.currentData.length) {
       const a = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
-      let g = this.$props.skip || 0, I = -1, P = 0;
-      const M = this.rowSpannable.enabled ? {} : void 0;
+      let f = this.$props.skip || 0, S = -1, Se = 0;
+      const k = this.computedRowSpannable.enabled ? {} : void 0;
       if (this.isVirtualScroll) {
         if (N > 0) {
-          const h = this.currentData.slice(0, N).filter((C) => C.rowType === "data").length;
-          I += h, g += h;
+          const p = this.currentData.slice(0, N).filter((D) => D.rowType === "data").length;
+          S += p, f += p;
         }
-        !this.$props.pageable && V && (I += this.$props.skip || 0);
+        !this.$props.pageable && V && (S += this.$props.skip || 0);
       }
-      K = (f || this.currentData).map(function(h, C) {
-        h.rowType === "data" && I++;
-        const b = h.dataIndex % 2 !== 0, D = this.$props.dataItemKey && X(this.$props.dataItemKey)(h.dataItem), n = C + g, _ = D || "ai" + n, E = _ + "_1", z = je.call(this, h, _, I, b, M), T = k.length - (this.detailExpandable.enabled ? 1 : 0) - ((l == null ? void 0 : l.length) || 0) || 1;
-        return B = n + a + P, [o(Nt, {
-          key: _,
-          item: h,
-          dataIndex: I,
+      K = (m || this.currentData).map(function(p, D) {
+        p.rowType === "data" && S++;
+        const y = p.dataIndex % 2 !== 0, v = this.$props.dataItemKey && X(this.$props.dataItemKey)(p.dataItem), b = D + f, T = v || "ai" + b, o = T + "_1", w = et.call(this, p, T, S, y, k), F = z.length - (this.detailExpandable.enabled ? 1 : 0) - ((l == null ? void 0 : l.length) || 0) || 1;
+        return B = b + a + Se, [n(Jt, {
+          key: T,
+          item: p,
+          dataIndex: S,
           ariaRowIndex: B,
-          absoluteRowIndex: n,
-          isAltRow: b,
-          isHidden: de(C),
+          absoluteRowIndex: b,
+          isAltRow: y,
+          isHidden: de(D),
           rowHeight: this.$props.rowHeight,
-          isSelected: z.isSelected,
-          isHighlighted: z.isHighlighted,
-          isInEdit: z.isInEdit,
-          rowType: h.rowType,
-          onRowclick: (S) => this.rowClick(S, h),
-          onRowdblclick: (S) => this.rowDoubleClick(S, h),
+          isSelected: w.isSelected,
+          isHighlighted: w.isHighlighted,
+          isInEdit: w.isInEdit,
+          rowType: p.rowType,
+          onRowclick: (H) => this.rowClick(H, p),
+          onRowdblclick: (H) => this.rowDoubleClick(H, p),
           render: this.$props.rowRender,
-          class: this.$props.rowClass ? this.$props.rowClass(h) : ""
+          class: this.$props.rowClass ? this.$props.rowClass(p) : ""
         }, {
-          default: () => [z.row]
-        }), this.$props.detail && h.rowType === "data" && (h.expanded || h.dataItem.expanded) && o("tr", {
-          key: E,
-          class: b ? "k-table-row k-table-alt-row k-detail-row" : "k-table-row k-detail-row",
+          default: () => [w.row]
+        }), this.$props.detail && p.rowType === "data" && (p.expanded || p.dataItem.expanded) && n("tr", {
+          key: o,
+          class: y ? "k-table-row k-table-alt-row k-detail-row" : "k-table-row k-detail-row",
           style: {
-            visibility: de(C) ? "hidden" : "",
+            visibility: de(D) ? "hidden" : "",
             height: this.$props.detailRowHeight + "px"
           },
           role: "row",
           "aria-rowindex": B
-        }, [l == null ? void 0 : l.map(function(S) {
-          return o(Z, {
+        }, [l == null ? void 0 : l.map(function(H) {
+          return n(Z, {
             id: "",
-            dataIndex: h.dataIndex,
-            field: S.field,
-            dataItem: h.dataItem,
-            key: `group-${S.field}-${h.dataIndex}`,
-            group: h.group
+            dataIndex: p.dataIndex,
+            field: H.field,
+            dataItem: p.dataItem,
+            key: `group-${H.field}-${p.dataIndex}`,
+            group: p.group
           }, null);
-        }, this), (this.$props.expandField || this.detailExpandable.enabled) && o($t, {
-          id: H.generateNavigatableId(`${E}-dhcell`, x)
-        }, null), o(Rt, {
-          dataItem: h.dataItem,
-          dataIndex: h.dataIndex,
-          colSpan: T,
+        }, this), (this.$props.expandField || this.detailExpandable.enabled) && n(Ht, {
+          id: E.generateNavigatableId(`${o}-dhcell`, R)
+        }, null), n(kt, {
+          dataItem: p.dataItem,
+          dataIndex: p.dataIndex,
+          colSpan: F,
           ariaColIndex: 2 + (l ? l.length : 0),
           detail: this.$props.detail ? this.$props.detail : void 0,
-          id: H.generateNavigatableId(`${E}-dcell`, x)
+          id: E.generateNavigatableId(`${o}-dcell`, R)
         }, null)])];
       }, this);
     }
-    const Je = this.$props.pageable && o(ht, {
+    const it = this.$props.pageable && n(bt, {
       class: "k-grid-pager",
       onPagesizechange: this.pageChangeHandler,
       onPagechange: this.pageChangeHandler,
       size: this.$props.size,
-      total: m,
+      total: C,
       skip: s || 0,
       pageSize: (r !== void 0 ? r : this.$props.pageSize) || 10,
-      messagesMap: Ne,
-      settings: pt(this.$props.pageable || {})
-    }, null), he = ye.call(this, {
-      h: Se,
+      messagesMap: qe,
+      settings: $t(this.$props.pageable || {})
+    }, null), he = Te.call(this, {
+      h: De,
       template: this.$props.pager,
-      defaultRendering: Je,
+      defaultRendering: it,
       additionalProps: {
         ...this.$props,
         skip: this.$props.skip || 0,
-        messagesMap: Ne
+        messagesMap: qe
       },
       additionalListeners: {
         pagesizechange: this.pageChangeHandler,
         pagechange: this.pageChangeHandler
       }
-    }), Qe = (a) => e && e.filter((g) => g.field === a).length > 0, pe = o("colgroup", {
-      ref: F(this, "colGroup")
-    }, [k.map(function(a, g) {
-      return o("col", {
-        key: g.toString(),
-        class: Qe(a.field) ? "k-sorted" : void 0,
+    }), st = (a) => e && e.filter((f) => f.field === a).length > 0, pe = n("colgroup", {
+      ref: G(this, "colGroup")
+    }, [z.map(function(a, f) {
+      return n("col", {
+        key: f.toString(),
+        class: st(a.field) ? "k-sorted" : void 0,
         width: a.width !== void 0 ? a.width.toString().indexOf("%") !== -1 ? a.width : Math.floor(parseFloat(a.width.toString())) + "px" : void 0
       }, null);
     }, this)]), ue = {
       height: this.getCorrectHeight,
       ...this.$attrs.style
-    }, Xe = this.$props.loader && o("div", {
+    }, rt = this.$props.loader && n("div", {
       class: "k-loader-container k-loader-container-md k-loader-top"
-    }, [o("div", {
+    }, [n("div", {
       class: "k-loader-container-overlay k-overlay-light"
-    }, null), o("div", {
+    }, null), n("div", {
       class: "k-loader-container-inner"
-    }, [o(bt, {
+    }, [n(yt, {
       size: "large",
       type: "infinite-spinner"
-    }, null)])]), ce = ((Ie = this.$props.showLoader) != null ? Ie : !!this.$props.loader) && ye.call(this, {
-      h: Se,
+    }, null)])]), ce = ((Ie = this.$props.showLoader) != null ? Ie : !!this.$props.loader) && Te.call(this, {
+      h: De,
       template: this.$props.loader,
-      defaultRendering: Xe
+      defaultRendering: rt
     });
-    return this.$props.scrollable === "none" ? o(ze, {
+    return this.$props.scrollable === "none" ? n(Me, {
       ref: "navRef",
       id: this._gridId,
       navigatable: this.$props.navigatable
     }, {
-      default: () => [o(De, {
+      default: () => [n(Ae, {
         ref: (a) => {
           this.gridNavRef = a;
         },
@@ -1210,34 +1223,34 @@ const _i = /* @__PURE__ */ Ze({
         style: ue,
         class: this.nonscrollableWrapperClass
       }, {
-        default: () => [ie, se, o("div", {
+        default: () => [ie, se, n("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
           "aria-colcount": this.getAriaColCount,
           "aria-rowcount": this.getAriaRowCount
-        }, [o("table", {
+        }, [n("table", {
           class: "k-table",
           style: {
             tableLayout: "fixed"
           },
-          ref: F(this, "table"),
+          ref: G(this, "table"),
           role: "none"
-        }, [et(" "), pe, ae, o("tbody", {
+        }, [ot(" "), pe, ae, n("tbody", {
           class: "k-table-tbody",
           "data-keyboardnavbody": !0
-        }, [K, ce]), oe]), U && o(Ve, {
-          id: H.generateNavigatableId("no-records", x)
+        }, [K, ce]), oe]), U && n(je, {
+          id: E.generateNavigatableId("no-records", R)
         }, {
-          default: () => [L.length ? L : o(Ae, null, null)]
+          default: () => [P.length ? P : n(Be, null, null)]
         })]), he, le]
       })]
-    }) : o(ze, {
+    }) : n(Me, {
       ref: "navRef",
       id: this._gridId,
       navigatable: this.$props.navigatable
     }, {
-      default: () => [o(De, {
+      default: () => [n(Ae, {
         ref: (a) => {
           this.gridNavRef = a;
         },
@@ -1246,49 +1259,49 @@ const _i = /* @__PURE__ */ Ze({
         style: ue,
         class: this.scrollableWrapperClass
       }, {
-        default: () => [ie, se, o("div", {
+        default: () => [ie, se, n("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
           "aria-colcount": this.getAriaColCount,
           "aria-rowcount": this.getAriaRowCount
-        }, [ae, o("div", {
+        }, [ae, n("div", {
           class: "k-grid-container",
           role: "presentation"
-        }, [o("div", {
+        }, [n("div", {
           role: "presentation",
-          ref: F(this, "scrollContainer"),
+          ref: G(this, "scrollContainer"),
           class: "k-grid-content k-virtual-content",
           onScroll: this.scrollHandler
-        }, [o("div", {
+        }, [n("div", {
           class: "k-grid-table-wrap",
           role: "presentation"
-        }, [o("table", {
+        }, [n("table", {
           role: "none",
           class: this.gridTableClass,
-          ref: F(this, "table")
-        }, [pe, o("tbody", {
+          ref: G(this, "table")
+        }, [pe, n("tbody", {
           class: "k-table-tbody",
           role: "rowgroup",
           "data-keyboardnavbody": !0,
-          ref: F(this, "tableBody")
-        }, [K])]), U && o(Ve, {
-          id: H.generateNavigatableId("no-records", x)
+          ref: G(this, "tableBody")
+        }, [K])]), U && n(je, {
+          id: E.generateNavigatableId("no-records", R)
         }, {
-          default: () => [L.length ? L : o(Ae, null, null)]
-        })]), !U && o("div", {
+          default: () => [P.length ? P : n(Be, null, null)]
+        })]), !U && n("div", {
           class: "k-height-container",
           role: "presentation"
-        }, [o("div", {
-          ref: F(this, "scrollHeightContainer"),
+        }, [n("div", {
+          ref: G(this, "scrollHeightContainer"),
           style: this.$props.scrollable === "virtual" ? {
             height: this._containerHeightRef + "px"
           } : {}
-        }, null)])]), ce]), oe, Ue]), he, le]
+        }, null)])]), ce]), oe, Ye]), he, le]
       })]
     });
   }
 });
 export {
-  _i as Grid
+  Pi as Grid
 };