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

package/Grid.mjs

@@ -5,46 +5,46 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as st, createVNode as o, h as Ee, ref as b, inject as it, markRaw as k } from "vue";
-import { isObject as M, cloneArray as rt, canUseDOM as j, WatermarkOverlay as lt, getter as q, getTemplate as _e, setRef as A, hasListener as z, getRef as R, kendoThemeMaps as De, uGrid as at, isRtl as Ge, validatePackage as ot, shouldShowValidationUI as nt, getLicenseMessage as dt, guid as ze, getNestedValue as Te } from "@progress/kendo-vue-common";
-import { tableKeyboardNavigationTools as H, combineFilters as ht, Pager as pt, normalize as ut, TableKeyboardNavigationProvider as Fe, updateLeft as ct, updateRight as gt, groupExpandReducer as ft, detailExpandReducer as mt, getDetailExpandableOptions as Ct, getGroupExpandableOptions as $t } from "@progress/kendo-vue-data-tools";
+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 Le } from "./GridNav.mjs";
-import { GridSelectionCell as Me } from "./cells/GridSelectionCell.mjs";
-import { GridHierarchyCell as J } from "./cells/GridHierarchyCell.mjs";
-import { GridDetailHierarchyCell as vt } from "./cells/GridDetailHierarchyCell.mjs";
-import { GridDetailCell as xt } from "./cells/GridDetailCell.mjs";
-import { GridEditCell as It } from "./cells/GridEditCell.mjs";
-import { Header as wt } from "./header/Header.mjs";
-import { HeaderRow as Rt } from "./header/HeaderRow.mjs";
-import { FilterRow as kt } from "./header/FilterRow.mjs";
-import { GroupPanel as yt } from "./header/GroupPanel.mjs";
-import { Footer as St } from "./footer/Footer.mjs";
+import { GridNav as De } from "./GridNav.mjs";
+import { GridSelectionCell as Te } 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 Ae } from "./filterCommon.mjs";
-import { VirtualScroll as Q } from "./VirtualScroll.mjs";
-import { VirtualScrollFixed as Et, RowHeightService as _t } from "./VirtualScrollFixed.mjs";
-import { ColumnResize as Dt } from "./drag/ColumnResize.mjs";
-import { CommonDragLogic as Gt } from "./drag/CommonDragLogic.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 Tt } from "./drag/DropClue.mjs";
-import { applyExpandedState as Pe, getColSpan as Ft, autoGenerateColumns as Lt, mapColumns as Mt, getFlatColumnsState as Ve, getRowSpanOptions as Ne, groupedFirstItemValue as Oe, firefox as At, firefoxMaxHeight as Pt, flatData as Vt, readColumns as Nt } from "./utils/main.mjs";
-import { GridCell as Ot } from "./cells/GridCell.mjs";
-import { GridGroupCell as X } from "./cells/GridGroupCell.mjs";
-import { GridRow as Wt } from "./rows/GridRow.mjs";
-import { gridProps as Kt } from "./common.mjs";
-import { GridHeaderSelectionCell as We } from "./header/GridHeaderSelectionCell.mjs";
-import { GridNoRecords as Ut } from "./GridNoRecords.mjs";
-import { packageMetadata as Y } from "./package-metadata.mjs";
-import { pagerMessagesMap as Ke } from "./messages/messagesMap.mjs";
-import { process as Bt } from "@progress/kendo-data-query";
-import { KendoKey as jt } from "./key.mjs";
-import { getVirtualCellsToRender as qt } from "./utils/virtualColumns.mjs";
-const Gs = /* @__PURE__ */ st({
+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 { 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 { 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({
   name: "KendoGrid",
   inheritAttrs: !1,
   props: {
-    ...Kt,
+    ...Ot,
     toolbar: {
       type: Object
     },
@@ -63,31 +63,45 @@ const Gs = /* @__PURE__ */ st({
     };
   },
   watch: {
-    skip: function(e, t) {
-      this.onSkipChanged(e, t);
+    rowHeight: function(e, t) {
+      var i;
+      this.onRowHeightChanged(e, t), (i = this.vsRef) == null || i.reset();
     },
-    total: function(e, t) {
-      this.onTotalChanged(e, t);
+    scrollable: function() {
+      var e;
+      (e = this.vsRef) == null || e.reset();
     },
-    rowHeight: function(e, t) {
-      this.onRowHeightChanged(e, t);
+    filter: function() {
+      var e;
+      (e = this.vsRef) == null || e.reset();
+    },
+    group: function() {
+      var e;
+      (e = this.vsRef) == null || e.reset();
+    },
+    currentGroupable: function() {
+      var e;
+      (e = this.vsRef) == null || e.reset();
+    },
+    sort: function() {
+      var e;
+      (e = this.vsRef) == null || e.reset();
     }
   },
   created() {
-    ot(Y), this.showLicenseWatermark = nt(Y), this.licenseMessage = dt(Y), this.initialHeight = null, this._columns = [];
-    const e = this.currentGroupable, t = this.getVirtualScroll();
-    this.vs = new t(e || this.$props.rowHeight === void 0 || this.$props.rowHeight === 0, this.$props.topCacheCount), this.dragLogic = new Gt(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new Dt(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.forceUpdateTimeout = void 0, this._gridId = ze(), this._gridRoleElementId = ze(), this.slicedCurrentData = void 0, this._prevTotal = void 0;
+    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;
   },
   mounted() {
-    var t, s;
+    var t, i;
     this.setRefs();
-    const e = Ge(this._element);
-    this._prevTotal = this.$props.total, this.isRtl = e, this.initialHeight = ((s = (t = this._element) == null ? void 0 : t.style) == null ? void 0 : s.height) || null, this.resizeObserver = j && (window == null ? void 0 : window.ResizeObserver) && new ResizeObserver(this.calculateMedia), document != null && document.body && this.resizeObserver && this.resizeObserver.observe(document.body);
+    const e = ke(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 = Ge(this._element);
-    this.isRtl = e, this._prevTotal = this.$props.total, this.vs.tableTransform && this.vs.table && (this.vs.table.style.transform = this.vs.tableTransform, this.vs.tableTransform = "");
+    const e = ke(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() {
     this.gridUnmounted();
@@ -100,16 +114,16 @@ const Gs = /* @__PURE__ */ st({
       return this.$props.navigatable ? this.gridId : "";
     },
     groupExpandable() {
-      return $t(typeof this.$props.groupable == "object" && this.$props.groupable.enabled !== !1 ? this.$props.groupable.expandable : this.$props.groupable);
+      return Ct(typeof this.$props.groupable == "object" && this.$props.groupable.enabled !== !1 ? this.$props.groupable.expandable : this.$props.groupable);
     },
     hierarchClass() {
-      return at.hierarchyCell({});
+      return lt.hierarchyCell({});
     },
     rowSpannable() {
-      return Ne(this.$props.rowSpannable);
+      return Le(this.$props.rowSpannable);
     },
     detailExpandable() {
-      return Ct(!!this.$props.detail);
+      return mt(!!this.$props.detail);
     },
     nonscrollableWrapperClass() {
       const {
@@ -118,7 +132,7 @@ const Gs = /* @__PURE__ */ st({
       return {
         "k-grid": !0,
         "k-grid-md": !e,
-        [`k-grid-${De.sizeMap[e] || e}`]: e,
+        [`k-grid-${He.sizeMap[e] || e}`]: e,
         [t]: !!t
       };
     },
@@ -139,7 +153,7 @@ const Gs = /* @__PURE__ */ st({
         "k-table": !0,
         "k-grid-table": !0,
         "k-grid-md": !e,
-        [`k-table-${De.sizeMap[e] || e}`]: e
+        [`k-table-${He.sizeMap[e] || e}`]: e
       };
     },
     getCorrectHeight() {
@@ -148,7 +162,7 @@ const Gs = /* @__PURE__ */ st({
     currentGroupable() {
       var t;
       const e = (t = this.gridContext.group) == null ? void 0 : t.value;
-      return this.$props.groupable === !0 && (e == null ? void 0 : e.length) || M(this.$props.groupable) && this.$props.groupable.enabled !== !1;
+      return this.$props.groupable === !0 && (e == null ? void 0 : e.length) || A(this.$props.groupable) && this.$props.groupable.enabled !== !1;
     },
     computedCollapsed() {
       let e = [];
@@ -160,49 +174,52 @@ const Gs = /* @__PURE__ */ st({
     // Calculates the value of the ariaRowcount attribute.
     getAriaRowCount() {
       const e = this.$props.dataItems, t = this.$props.total || (e == null ? void 0 : e.total) || (e == null ? void 0 : e.length) || 0;
-      return this.$props.detail ? this._columnsMap.length + (this.$props.filterable ? 1 : 0) + t * 2 + (this._columns.some((s) => !!s.footerCell) ? 1 : 0) : !this.$props.pageable && this.$props.scrollable === "scrollable" ? void 0 : this.$props.groupable ? -1 : this._columnsMap.length + (this.$props.filterable ? 1 : 0) + t + (this._columns.some((s) => !!s.footerCell) ? 1 : 0);
+      return this.$props.detail ? this._columnsMap.length + (this.$props.filterable ? 1 : 0) + t * 2 + (this._columns.some((i) => !!i.footerCell) ? 1 : 0) : !this.$props.pageable && this.$props.scrollable === "scrollable" ? void 0 : this.$props.groupable ? -1 : this._columnsMap.length + (this.$props.filterable ? 1 : 0) + t + (this._columns.some((i) => !!i.footerCell) ? 1 : 0);
     },
     // Calculates the value of the ariaColcount attribute.
     // Based on the result of this method the ariaColIndex is rendered or not in the HeaderRow TH elements
     getAriaColCount() {
-      const e = this.$props.columns, t = this.$props.columnVirtualization, s = (e == null ? void 0 : e.filter((i) => i.hidden !== void 0).length) !== 0;
-      if (t || s)
+      const e = this.$props.columns, t = this.$props.columnVirtualization, i = (e == null ? void 0 : e.filter((s) => s.hidden !== void 0).length) !== 0;
+      if (t || i)
         return (e == null ? void 0 : e.length) !== 0 ? e == null ? void 0 : e.length : -1;
+    },
+    isVirtualScroll() {
+      return this.$props.scrollable === "virtual" || this.$props.scrollable === void 0 || !1;
     }
   },
   methods: {
     readColumnElements() {
-      return Nt(this.$props.columns, this.currentColumnsState, {
+      return At(this.$props.columns, this.currentColumnsState, {
         prevId: 0,
         idPrefix: this.idPrefix
       });
     },
     getResolvedFlatColumnsState() {
-      const e = [], t = (s, i) => s == null ? void 0 : s.forEach((l) => {
-        const a = l.hidden || i;
+      const e = [], t = (i, s) => i == null ? void 0 : i.forEach((r) => {
+        const l = r.hidden || s;
         e.push({
-          ...l,
-          hidden: a
-        }), t(l.children, a);
+          ...r,
+          hidden: l
+        }), t(r.children, l);
       });
       return t(this.currentColumnsState, !1), e;
     },
     filterColumns(e) {
       const t = this.getResolvedFlatColumnsState();
-      return [e.filter((s) => {
-        var i;
-        return !s.hidden && !((i = t.find((l) => l.id === s.id)) != null && i.hidden);
-      }), e.filter((s) => {
-        var i;
-        return s.hidden || ((i = t.find((l) => l.id === s.id)) == null ? void 0 : i.hidden);
+      return [e.filter((i) => {
+        var s;
+        return !i.hidden && !((s = t.find((r) => r.id === i.id)) != null && s.hidden);
+      }), e.filter((i) => {
+        var s;
+        return i.hidden || ((s = t.find((r) => r.id === i.id)) == null ? void 0 : s.hidden);
       })];
     },
-    getFlatData(e, t, s, i, l, a, d) {
-      const h = [], c = Vt(h, e, t, {
-        index: s
-      }, i !== void 0, l, a, this.groupExpandable.defaultExpand, d, this.$props.expandField);
+    getFlatData(e, t, i, s, r, l, d) {
+      const p = [], c = Mt(p, e, t, {
+        index: i
+      }, s !== void 0, r, l, this.groupExpandable.defaultExpand, d, this.$props.expandField);
       return {
-        flattedData: h,
+        flattedData: p,
         resolvedGroupsCount: c
       };
     },
@@ -221,11 +238,11 @@ const Gs = /* @__PURE__ */ st({
     filterHiddenColumns(e) {
       if (!e || e.length === 0)
         return e;
-      const t = (s) => ({
-        ...s,
-        children: s.children && s.children.length > 0 ? this.filterHiddenColumns(s.children) : s.children
+      const t = (i) => ({
+        ...i,
+        children: i.children && i.children.length > 0 ? this.filterHiddenColumns(i.children) : i.children
       });
-      return [...e].filter((s) => !s.hidden).filter((s) => j && s && s.media ? window.matchMedia(s.media).matches : s).map((s) => t(s));
+      return [...e].filter((i) => !i.hidden).filter((i) => Q && i && i.media ? window.matchMedia(i.media).matches : i).map((i) => t(i));
     },
     /**
      * A getter of the current columns. Gets the current column width or current columns,
@@ -235,22 +252,22 @@ const Gs = /* @__PURE__ */ st({
      * and check the properties afterwards. You can check the result in the browser console.
      */
     getColumns() {
-      const e = this._columns.filter((s) => s.declarationIndex >= 0 && s.parentIndex === -1), t = (s) => (s.sort((i, l) => i.declarationIndex - l.declarationIndex), s.map((i) => {
+      const e = this._columns.filter((i) => i.declarationIndex >= 0 && i.parentIndex === -1), t = (i) => (i.sort((s, r) => s.declarationIndex - r.declarationIndex), i.map((s) => {
         const {
-          declarationIndex: l,
-          parentIndex: a,
+          declarationIndex: r,
+          parentIndex: l,
           depth: d,
-          colSpan: h,
+          colSpan: p,
           rowSpan: c,
-          index: g,
+          index: f,
           kFirst: u,
-          children: v,
-          ...f
-        } = i;
-        return v.length ? {
-          children: t(v),
-          ...f
-        } : f;
+          children: m,
+          ...x
+        } = s;
+        return m.length ? {
+          children: t(m),
+          ...x
+        } : x;
       }));
       return t(e);
     },
@@ -258,23 +275,17 @@ const Gs = /* @__PURE__ */ st({
       let e = "$el";
       const t = R(this, "gridNav");
       t && (this._element = t[e]);
-      const s = R(this, "groupPanelDiv");
-      if (s) {
-        let a = s[e] || null;
-        this.dragLogic.refGroupPanelDiv(a);
+      const i = R(this, "groupPanelDiv");
+      if (i) {
+        let l = i[e] || null;
+        this.dragLogic.refGroupPanelDiv(l);
       }
-      const i = R(this, "dropElementClue"), l = R(this, "dragElementClue");
-      this.dragLogic.refDropElementClue(i), this.dragLogic.refDragElementClue(l), this.columnResize.colGroupMain = R(this, "colGroup"), this._header = R(this, "header"), this._footer = R(this, "footer"), this.vs.containerRef = R(this, "scrollContainer"), this.vs.table = R(this, "scrollTable"), this.resetTableWidth(), this.vs.tableBodyRef = R(this, "scrollTableBody");
+      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();
     },
     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();
     },
-    resetVirtual() {
-      this.vs.PageChange = this.pageChangeHandler, this.vs.realSkip = this.$props.skip || 0, this.vs.pageSize = (this.$props.take !== void 0 ? this.$props.take : this.$props.pageSize) || 0, this.vs.scrollableVirtual = this.$props.scrollable === "virtual", this.vs.propsSkip = (this.$props.skip || 0) + (this.$props.scrollable === "virtual" ? this.vs.topCacheCount + (this.vs.attendedSkip - (this.$props.skip || 0)) : 0);
-    },
-    getVirtualScroll() {
-      return Q;
-    },
     isAllData() {
       const {
         dataItems: e,
@@ -282,45 +293,36 @@ const Gs = /* @__PURE__ */ st({
       } = this.$props;
       return Array.isArray(e) ? e.length === t : e ? t === e.total : !1;
     },
-    initializeVirtualization(e) {
-      if ((this.$props.total !== this._prevTotal || this.$props.scrollable === "virtual" !== this.vs.scrollableVirtual) && this.vs.reset(), this.resetVirtual(), this.vs.total = e, this.$props.rowHeight !== void 0 && this.$props.rowHeight > 0 && !this.currentGroupable)
-        this.vs.containerHeight = Math.min(1533915, this.$props.rowHeight * (e || 0));
-      else if (this.$props.totalGroupedHeight)
-        this.vs.containerHeight = Math.min(1533915, this.$props.totalGroupedHeight);
-      else if (this.$props.allGroupedItems && this.$props.allGroupedItems.data) {
-        const t = this.totalGroupedRows(Pe(this.$props.allGroupedItems, this.computedCollapsed, this.$props.uniqueField).data);
-        this.vs.containerHeight = Math.min(1533915, this.$props.rowHeight * t);
-      } else
-        this.vs.containerHeight = 1533915;
-      if (this.slicedCurrentData = void 0, this.vs instanceof Et) {
-        const {
-          rowHeight: t = 0,
-          detail: s,
-          expandField: i
-        } = this.$props;
-        let {
-          detailRowHeight: l = 0
-        } = this.$props;
-        l = s && i ? l : t, this.isAllData() ? (this.vs.total = this.currentData.length, this.slicedCurrentData = this.currentData.slice(this.vs.realSkip, this.vs.realSkip + this.vs.pageSize), this.vs.rowHeightService = this.rowHeightService(this.vs, this.currentData.length, t, l, this.currentData)) : this.vs.rowHeightService = new _t(e, t, l);
-        const a = this.vs.rowHeightService.totalHeight();
-        this.vs.containerHeight = At ? Math.min(Pt, a) : a;
-      }
+    resetVirtualSkip() {
+      this.isVirtualScroll && this._virtualSkipRef && (this._virtualSkipRef = 0);
     },
-    onSkipChanged(e, t) {
-      Math.max(0, this.vs.attendedSkip) !== e && e !== void 0 && (this.vs.attendedSkip = e, this.vs.propsSkip = (e || 0) + (this.$props.scrollable === "virtual" ? this.vs.topCacheCount + (this.vs.attendedSkip - (e || 0)) : 0));
+    virtualPageChange(e, t) {
+      var i;
+      this.$props.pageable || (i = this.$props.group) != null && i.length ? (this._virtualSkipRef = e.skip, this.$forceUpdate()) : this.pageChangeHandler(e, t);
     },
-    onTotalChanged(e, t) {
-      const s = this.currentGroupable;
-      this.vs.reset(), this.vs = new Q(s || this.$props.rowHeight === void 0 || this.$props.rowHeight === 0, this.$props.topCacheCount), this.resetVirtual(), this.setRefs();
+    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)));
+    },
+    setContainerHeight() {
+      const e = R(this, "scrollContainer");
+      this._containerHeightRef = (e == null ? void 0 : e.offsetHeight) || 0;
+    },
+    setMinRowHeight() {
+      if (!this._minRowHeightRef && !this.$props.rowHeight) {
+        const t = Pt(R(this, "tableBody"));
+        t && (this._minRowHeightRef = t, this.$forceUpdate());
+      }
     },
     onRowHeightChanged(e, t) {
-      const s = this.currentGroupable;
-      this.vs.reset(), this.vs = new Q(s || this.$props.rowHeight === void 0 || this.$props.rowHeight === 0, this.$props.topCacheCount), this.resetVirtual(), this.setRefs();
+      this.setRefs();
     },
     scrollHandler(e) {
-      clearTimeout(this.forceUpdateTimeout), this.$props.columnVirtualization && !this.vs.scrollableVirtual && (this.forceUpdateTimeout = setTimeout(() => {
+      clearTimeout(this.forceUpdateTimeout);
+      const t = e.currentTarget.scrollLeft, i = e.currentTarget.scrollTop;
+      this.$props.columnVirtualization && (!this.isVirtualScroll || i === this.wrapperScrollTopRef) && (this.forceUpdateTimeout = setTimeout(() => {
         this.$forceUpdate();
-      }, 0)), this._header && this._header.setScrollLeft(e.currentTarget.scrollLeft), this._footer && this._footer.setScrollLeft(e.currentTarget.scrollLeft), this.vs && this.vs.scrollHandler(e), this.$emit("scroll", e);
+      }, 0)), this.scrollLeftRef = t, this._header && this._header.setScrollLeft(e.currentTarget.scrollLeft), this._footer && this._footer.setScrollLeft(e.currentTarget.scrollLeft), this.vsRef && i !== this.wrapperScrollTopRef && this.vsRef.scrollHandler(e), this.$emit("scroll", e), this.wrapperScrollTopRef = i;
     },
     rowClick(e, t) {
       e.target.type !== "checkbox" && this.$emit("rowclick", {
@@ -334,30 +336,30 @@ const Gs = /* @__PURE__ */ st({
         ...this.getArguments(e)
       });
     },
-    loopGroupedItems(e, t, s = 0, i = null) {
-      return e.forEach((l) => {
-        !i && t(l, s) && (i = l), l.items && l.items.length && !i && (i = this.loopGroupedItems(l.items, t, s + 1, i));
-      }), i;
+    loopGroupedItems(e, t, i = 0, s = null) {
+      return e.forEach((r) => {
+        !s && t(r, i) && (s = r), r.items && r.items.length && !s && (s = this.loopGroupedItems(r.items, t, i + 1, s));
+      }), s;
     },
     updateGroupCollapsed(e) {
-      let t = this.computedCollapsed, s = t[e.level];
-      const i = this.$props.uniqueField, l = function(h, c) {
-        return h.value === e.dataItem.value && c === e.level;
-      }, a = this.allGroupedItems ? this.loopGroupedItems(this.allGroupedItems.data, l, 0, null) : e.dataItem, d = Oe(a || e.dataItem, i);
+      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);
       if (e.value) {
-        if (s && s.length) {
-          const h = s.indexOf(d);
-          h > -1 && s.splice(h, 1);
+        if (i && i.length) {
+          const p = i.indexOf(d);
+          p > -1 && i.splice(p, 1);
         }
       } else
-        s ? s.includes(d) || s.push(d) : s = [d];
+        i ? i.includes(d) || i.push(d) : i = [d];
       return t;
     },
     itemChange(e) {
-      var i;
-      const t = z.call(this, "itemchange"), s = (i = this.gridContext.group) == null ? void 0 : i.value;
-      if (e.field === this.$props.expandField || (s || this.$props.detail) && e.field === void 0) {
-        z.call(this, "expandchange") && e.dataItem && this.$emit("expandchange", {
+      var s;
+      const t = G.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", {
           ...this.getArguments(e.event),
           collapsedGroups: this.updateGroupCollapsed(e),
           dataItem: e.dataItem,
@@ -404,17 +406,17 @@ const Gs = /* @__PURE__ */ st({
     selectionChangeHandler(e) {
       const {
         event: t,
-        dataItem: s,
-        dataIndex: i,
-        columnIndex: l
+        dataItem: i,
+        dataIndex: s,
+        columnIndex: r
       } = e;
       this.$emit("selectionchange", {
         ...this.getArguments(t.event),
-        dataItem: s,
-        startColIndex: l,
-        endColIndex: l,
-        startRowIndex: i,
-        endRowIndex: i,
+        dataItem: i,
+        startColIndex: r,
+        endColIndex: r,
+        startRowIndex: s,
+        endRowIndex: s,
         dataItems: this.getLeafDataItems(),
         altKey: !1,
         ctrlKey: !1,
@@ -465,79 +467,87 @@ const Gs = /* @__PURE__ */ st({
       }, t);
     },
     handleDetailExpandAction(e, t) {
-      var s;
+      var i;
       if (this.detailExpandable.enabled) {
-        const i = (s = this.gridContext.detailExpand) == null ? void 0 : s.value, l = mt(i != null ? i : {}, e);
-        this.raiseDataEvent("detailexpandchange", {
+        const s = (i = this.gridContext.detailExpand) == null ? void 0 : i.value, r = ft(s != null ? s : {}, e);
+        this.$emit("detailexpandchange", {
           ...this.getArguments(t),
-          detailExpand: l
+          detailExpand: r
         });
       }
     },
     handleGroupExpandAction(e, t) {
-      var s;
+      var i;
       if (this.groupExpandable.enabled) {
-        const i = (s = this.gridContext.groupExpand) == null ? void 0 : s.value, l = ft(i != null ? i : [], e, this.groupExpandable);
-        this.$props.expandField || this.raiseDataEvent("groupexpandchange", {
+        const s = (i = this.gridContext.groupExpand) == null ? void 0 : i.value, r = gt(s != null ? s : [], e, this.groupExpandable);
+        this.$props.expandField || this.$emit("groupexpandchange", {
           ...this.getArguments(t),
-          groupExpand: l
+          groupExpand: r
         });
       }
     },
-    raiseDataEvent(e, t, s, i) {
-      this.$props.autoProcessData ? this.gridContext[e]({
-        ...this.getArguments(i),
-        ...t
-      }) : z.call(this, e) ? this.$emit(e, {
-        ...this.getArguments(i),
-        ...t
-      }) : z.call(this, "datastatechange") && this.$emit("datastatechange", {
-        ...this.getArguments(i),
-        data: {
+    raiseDataEvent(e, t, i, s) {
+      if (this.resetVirtualSkip(), this.$props.autoProcessData)
+        this.gridContext[e]({
+          ...this.getArguments(s),
+          ...t
+        });
+      else if (G.call(this, e))
+        this.$emit(e, {
+          ...this.getArguments(s),
+          ...t
+        });
+      else if (G.call(this, "datastatechange")) {
+        const r = {
           ...this.getDataState(),
-          ...s
-        }
-      });
+          ...i
+        };
+        this.gridContext.datastatechange({
+          ...this.getArguments(s),
+          data: r,
+          dataState: r
+        });
+      }
     },
-    columnReorder(e, t, s) {
-      const i = this._columns[e], l = Ve(this.currentColumnsState), a = i.depth, d = (u) => {
+    columnReorder(e, t, i) {
+      const s = this._columns[e], r = Ge(this.currentColumnsState), l = s.depth, d = (u) => {
         do
           u++;
-        while (u < this._columns.length && this._columns[u].depth > a);
+        while (u < this._columns.length && this._columns[u].depth > l);
         return u;
-      }, 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, v) => {
-        u.orderIndex = v;
-        const f = l.find((E) => E.id === u.id);
-        f && (f.orderIndex = v);
+      }, 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);
       });
       const c = this._columns[e].locked && this._columns[t].locked;
-      ct(this._columnsMap, this._columns, c || this.shouldUpdateLeftRightRef), gt(this._columnsMap, this._columns, c || this.shouldUpdateLeftRightRef), this.resizedRef && (this.shouldUpdateLeftRightRef = !1, this.resizedRef = !1);
-      const g = this.getColumns();
+      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();
       this.$emit("columnreorder", {
         target: this,
-        columns: g,
-        event: s,
+        columns: f,
+        event: i,
         prev: e,
         next: t
       }), this.gridContext.columnsstatechange({
         columnsState: this.currentColumnsState
       });
     },
-    groupReorder(e, t, s) {
-      var l;
-      const i = (l = this.gridContext.group) == null ? void 0 : l.value;
-      i !== void 0 && (i.splice(t, 0, ...i.splice(e, 1)), this.groupChangeHandler(i, s));
+    groupReorder(e, t, i) {
+      var r;
+      const s = (r = this.gridContext.group) == null ? void 0 : r.value;
+      s !== void 0 && (s.splice(t, 0, ...s.splice(e, 1)), this.groupChangeHandler(s, i));
     },
-    columnToGroup(e, t, s) {
-      var a;
-      const i = this._columns[e].field;
-      if (!i)
+    columnToGroup(e, t, i) {
+      var l;
+      const s = this._columns[e].field;
+      if (!s)
         return;
-      const l = (((a = this.gridContext.group) == null ? void 0 : a.value) || []).slice();
-      l.splice(t, 0, {
-        field: i
-      }), this.groupChangeHandler(l, s);
+      const r = (((l = this.gridContext.group) == null ? void 0 : l.value) || []).slice();
+      r.splice(t, 0, {
+        field: s
+      }), this.groupChangeHandler(r, i);
     },
     resetTableWidth() {
       let e = 0;
@@ -545,50 +555,52 @@ const Gs = /* @__PURE__ */ st({
         return;
       const t = this.columnResize.colGroupMain.children;
       for (let s = 0; s < t.length; s++) {
-        const i = t[s].width;
-        if (!i)
+        const r = t[s].width;
+        if (!r)
           return;
-        e += parseFloat(i.toString());
+        e += parseFloat(r.toString());
       }
-      e = Math.round(e), this._header && this._header.setWidth(e), this._footer && this._footer.setWidth(e), this.vs.table && (this.vs.table.style.width = e + "px");
+      e = Math.round(e), this._header && this._header.setWidth(e), this._footer && this._footer.setWidth(e);
+      const i = R(this, "table");
+      i && e && (i.style.width = e + "px");
     },
-    onResize(e, t, s, i, l, a, d) {
+    onResize(e, t, i, s, r, l, d) {
       this.resetTableWidth(), this.shouldUpdateLeftRightRef = !0, this.resizedRef = !0, this.$emit("columnresize", {
         columns: this.getColumns(),
         index: e,
         targetColumnId: d,
-        event: i,
+        event: s,
         newWidth: t,
-        oldWidth: s,
-        end: l,
+        oldWidth: i,
+        end: r,
         target: this
-      }), l && this.gridContext.columnsstatechange({
-        columnsState: a
+      }), r && this.gridContext.columnsstatechange({
+        columnsState: l
       });
     },
     initColumnsState(e, t) {
-      const s = (i) => {
-        var a;
-        const l = t.find((d) => d.id === i.id);
-        if (l) {
+      const i = (s) => {
+        var l;
+        const r = t.find((d) => d.id === s.id);
+        if (r) {
           const d = {
-            ...l
+            ...r
           };
-          return d.children = (a = i.children) == null ? void 0 : a.map(s), d;
+          return d.children = (l = s.children) == null ? void 0 : l.map(i), d;
         }
-        return i;
+        return s;
       };
-      this.currentColumnsState = e.filter((i) => i.parentIndex === -1).map(s);
+      this.currentColumnsState = e.filter((s) => s.parentIndex === -1).map(i);
     },
     configureColumns(e, t) {
-      e.filter((a) => a.columnType === "checkbox").forEach((a) => {
-        a.width = a.width || "50px", a.defaultCell = k(Me), a.defaultHeaderCell = k(We), a._type = "edit";
-      }), this.$props.selectedField && this._columns.filter((a) => a.field === this.$props.selectedField).forEach((a) => {
-        a.width = a.width || "50px", a.internalCell = k(Me), a.internalHeaderCell = k(We);
+      e.filter((l) => l.columnType === "checkbox").forEach((l) => {
+        l.width = l.width || "50px", l.defaultCell = y(Te), l.defaultHeaderCell = y(Me), 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);
       });
-      const s = Ve(this.currentColumnsState);
-      this.initColumnsState(e, s);
-      const i = {
+      const i = Ge(this.currentColumnsState);
+      this.initColumnsState(e, i);
+      const s = {
         id: "",
         resizable: !0,
         width: "32px",
@@ -608,85 +620,87 @@ const Gs = /* @__PURE__ */ st({
         ariaColumnIndex: 0,
         isAccessible: !0
       };
-      let l = 0;
-      if (console.log(this.detailExpandable.enabled, this.$props.detail), this.detailExpandable.enabled && this.$props.detail && !this.$props.expandField) {
-        const a = {
-          ...i,
+      let r = 0;
+      if (this.detailExpandable.enabled && this.$props.detail && !this.$props.expandField) {
+        const l = {
+          ...s,
           _type: "expand",
-          id: H.generateNavigatableId(`${l++}`, "expand", "column"),
-          defaultCell: k(J),
-          internalCell: k(J),
+          id: H.generateNavigatableId(`${r++}`, "expand", "column"),
+          defaultCell: y(Y),
+          internalCell: y(Y),
           field: this.detailExpandable.column,
           headerClassName: this.hierarchClass
         };
-        e.unshift(a), this.currentColumnsState.unshift(s.find((d) => d.id === a.id) || a);
+        e.unshift(l), this.currentColumnsState.unshift(i.find((d) => d.id === l.id) || l);
       }
-      this.$props.expandField && z.call(this, "expandchange") && this.$props.detail && (e.unshift({
-        ...i,
-        internalCell: k(J),
+      this.$props.expandField && G.call(this, "expandchange") && this.$props.detail && (e.unshift({
+        ...s,
+        internalCell: y(Y),
         field: this.$props.expandField,
         headerClassName: "k-hierarchy-cell k-header",
         id: H.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
         ...this.expandColumn
-      }), l++);
-      for (let a = 0; a < t; a++) {
+      }), r++);
+      for (let l = 0; l < t; l++) {
         const d = {
-          ...i,
+          ...s,
           isAccessible: !1,
-          defaultCell: k(X),
-          internalCell: k(X),
-          id: H.generateNavigatableId(`${l++}`, "group", "column"),
+          defaultCell: y(Z),
+          internalCell: y(Z),
+          id: H.generateNavigatableId(`${r++}`, "group", "column"),
           field: "value",
           locked: this.$props.lockGroups
         };
-        e.unshift(d), this.currentColumnsState.unshift(s.find((h) => h.id === d.id) || d);
+        e.unshift(d), this.currentColumnsState.unshift(i.find((p) => p.id === d.id) || d);
       }
-      e.slice(l).forEach((a) => {
-        a.parentIndex >= 0 && (a.parentIndex += l), a.rowSpannable = a.rowSpannable !== void 0 ? Ne(a.rowSpannable) : this.rowSpannable;
+      e.slice(r).forEach((l) => {
+        l.parentIndex >= 0 && (l.parentIndex += r), l.rowSpannable = l.rowSpannable !== void 0 ? Le(l.rowSpannable) : this.rowSpannable;
       });
     },
     initColumns(e, t) {
-      var a;
+      var l;
       this._columns = this.readColumnElements();
-      const s = (a = this.gridContext.group) == null ? void 0 : a.value;
-      this._columns.filter((d) => !d.hidden).length === 0 && (this._columns = Lt(e, s, {
+      const i = (l = this.gridContext.group) == null ? void 0 : l.value;
+      this._columns.filter((d) => !d.hidden).length === 0 && (this._columns = Gt(e, i, {
         column: this.$props.expandField ? this.$props.expandField : this.groupExpandable.column
       }, {
         prevId: 0,
         idPrefix: this.idPrefix
       })), this.configureColumns(this._columns, t);
-      const [i, l] = this.filterColumns(this._columns);
-      this._columns = i, this.hiddenColumnsRef = l, this._columnsMap = Mt(this._columns, !0);
+      const [s, r] = this.filterColumns(this._columns);
+      this._columns = s, this.hiddenColumnsRef = r, this._columnsMap = Lt(this._columns, !0);
     },
     resolveTitle(e) {
-      const t = this.findColumnByField(e), s = t && (t.title || t.field);
-      return s === void 0 ? e : s;
+      const t = this.findColumnByField(e), i = t && (t.title || t.field);
+      return i === void 0 ? e : i;
     },
     findColumnByField(e) {
       let t;
-      return this.$props.columns.forEach((s) => {
-        const i = this.searchColumn(s, e);
-        i && (t = i);
+      return this.$props.columns.forEach((i) => {
+        const s = this.searchColumn(i, e);
+        s && (t = s);
       }), t;
     },
     searchColumn(e, t) {
       if (e.field === t)
         return e;
       if (e.children) {
-        let s, i = null;
-        for (s = 0; i == null && s < e.children.length; s++)
-          i = this.searchColumn(e.children[s], t);
-        return i;
+        let i, s = null;
+        for (i = 0; s == null && i < e.children.length; i++)
+          s = this.searchColumn(e.children[i], t);
+        return s;
       }
       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;
       return {
-        filter: this.$props.filter,
-        sort: this.$props.sort,
-        skip: this.$props.skip,
-        take: this.$props.take !== void 0 ? this.$props.take : this.$props.pageSize,
-        group: this.$props.group
+        filter: t,
+        sort: e,
+        skip: i,
+        take: s !== void 0 ? s : this.$props.pageSize,
+        group: r
       };
     },
     getArguments(e) {
@@ -703,59 +717,76 @@ const Gs = /* @__PURE__ */ st({
       return e && (t = this.addSubItems(e, t)), t;
     },
     addSubItems(e, t) {
-      return e.forEach((s) => {
-        t++, s.expanded !== !1 && s.items && (t = this.addSubItems(s.items, t)), this.group && this.group.length && (this.$props.groupable.footer === "always" || s.expanded !== !1 && s.items && this.$props.groupable.footer === "visible") && t++;
+      return e.forEach((i) => {
+        t++, i.expanded !== !1 && i.items && (t = this.addSubItems(i.items, t)), this.group && this.group.length && (this.$props.groupable.footer === "always" || i.expanded !== !1 && i.items && this.$props.groupable.footer === "visible") && t++;
       }), t;
     },
     searchChange(e) {
-      const t = this.$props.searchFields || this._columns.map((l) => l.field) || [], s = e.event.target.value, i = {
+      const t = this.$props.searchFields || this._columns.map((r) => r.field) || [], i = e.event.target.value, s = {
         logic: "or",
-        filters: t.filter((l) => l !== void 0).map((l) => {
-          var a;
-          return typeof l == "string" ? {
-            field: l,
-            value: s,
+        filters: t.filter((r) => r !== void 0).map((r) => {
+          var l;
+          return typeof r == "string" ? {
+            field: r,
+            value: i,
             operator: "contains"
           } : {
-            value: s,
-            operator: (a = l.operator) != null ? a : "contains",
-            field: l.field,
-            ignoreCase: l.ignoreCase
+            value: i,
+            operator: (l = r.operator) != null ? l : "contains",
+            field: r.field,
+            ignoreCase: r.ignoreCase
           };
         })
       };
       this.raiseDataEvent("searchchange", {
-        search: i
+        search: s
       }, {
         skip: 0
       }, e);
     },
     getCellsToRender(e, t) {
-      var a;
-      const s = [];
-      let i = null, l = 0;
-      if (t.forEach((d, h) => {
+      var l;
+      const i = [];
+      let s = null, r = 0;
+      if (t.forEach((d, p) => {
         const c = parseFloat((d.width || "").toString()) || 10;
-        if (l) {
-          l--, i && (i.width += c);
+        if (r) {
+          r--, s && (s.width += c);
           return;
         }
-        const g = Math.min(Ft(d, e), t.length - h);
-        l = g - 1, i = {
+        const f = Math.min(Ft(d, e), t.length - p);
+        r = f - 1, s = {
           width: c,
-          colSpan: g,
-          columnIndex: h
-        }, s.push(i);
+          colSpan: f,
+          columnIndex: p
+        }, i.push(s);
       }), this.$props.columnVirtualization) {
-        const d = this.scrollLeft || 0, h = this.tableWidth || parseFloat((((a = this.$attrs.style) == null ? void 0 : a.width) || "").toString());
-        return qt({
-          cellModels: s,
+        const d = this.scrollLeftRef || 0, p = this.tableWidth || parseFloat((((l = this.$attrs.style) == null ? void 0 : l.width) || "").toString());
+        return Ut({
+          cellModels: i,
           columns: t,
-          tableViewPortWidth: h,
+          tableViewPortWidth: p,
           scrollLeft: d
         });
       }
-      return s;
+      return i;
+    },
+    calcVirtualPageSize() {
+      const {
+        pageable: e,
+        take: t,
+        pageSize: i
+      } = this.$props;
+      if (!this.isVirtualScroll)
+        return 0;
+      if (!e) {
+        if (t)
+          return t;
+        if (i)
+          return i;
+      }
+      const s = this.$props.rowHeight || this._minRowHeightRef, r = this._containerHeightRef;
+      return r && s ? Math.ceil(r / s * 1.5) : 0;
     }
   },
   provide() {
@@ -769,89 +800,101 @@ const Gs = /* @__PURE__ */ st({
     };
   },
   setup(e) {
-    const t = b(null), s = b(null), i = b(null), l = b(null), a = b(null), d = b(null), h = b(null), c = b(null), g = b(null), u = b(null), v = b(!0), f = b(!1), E = it(jt, {});
+    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, {});
     return {
       groupPanelDivRef: t,
-      dropElementClueRef: s,
-      dragElementClueRef: i,
-      headerRef: l,
-      footerRef: a,
+      dropElementClueRef: i,
+      dragElementClueRef: s,
+      headerRef: r,
+      footerRef: l,
       gridNavRef: d,
-      colGroupRef: h,
+      colGroupRef: p,
       scrollContainerRef: c,
-      scrollTableRef: g,
+      scrollTableRef: f,
       scrollTableBodyRef: u,
-      gridContext: E,
-      shouldUpdateLeftRightRef: v,
-      resizedRef: f,
+      gridContext: w,
+      shouldUpdateLeftRightRef: m,
+      resizedRef: x,
       currentColumnsState: e.columnsState
     };
   },
   render() {
-    var ge, fe, me, Ce, $e, be, ve, xe, Ie, we, Re, ke, ye;
-    const e = (ge = this.gridContext.sort) == null ? void 0 : ge.value, t = (fe = this.gridContext.filter) == null ? void 0 : fe.value, s = (me = this.gridContext.search) == null ? void 0 : me.value, i = (Ce = this.gridContext.skip) == null ? void 0 : Ce.value, l = ($e = this.gridContext.take) == null ? void 0 : $e.value, a = (be = this.gridContext.group) == null ? void 0 : be.value, d = (ve = this.gridContext.groupExpand) == null ? void 0 : ve.value, h = (xe = this.gridContext.detailExpand) == null ? void 0 : xe.value;
-    this.currentColumnsState = (Ie = this.gridContext.columnsState) == null ? void 0 : Ie.value, console.log("detailExpand", h);
-    const c = this.$props.scrollable === "virtual" || this.$props.scrollable === void 0 && this.$props.isClient || !1, g = this.$props.autoProcessData === !0 ? {
+    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;
+    this.currentColumnsState = (ve = this.gridContext.columnsState) == null ? void 0 : ve.value;
+    const u = this.$props.autoProcessData === !0 ? {
       group: !0,
       sort: !0,
       filter: !0,
       search: !0,
       page: !0
     } : this.$props.autoProcessData;
-    let u = this.$props.total || 0;
-    const v = H.getIdPrefix(this.navigation);
-    let f = [];
-    Array.isArray(this.$props.dataItems) ? f = this.$props.dataItems : this.$props.dataItems && (f = Pe(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField).data, u = u || this.$props.dataItems.total);
-    const E = this.$props.groupable === !0 || M(this.$props.groupable) && this.$props.groupable.enabled !== !1;
-    this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = E, this.initializeVirtualization(u);
-    const Ue = f.length === u, Be = M(this.$props.groupable) && this.$props.groupable.footer || "none";
-    if (this.currentData = [], g) {
-      const r = g.page && !(c && !this.$props.pageable), {
-        data: p,
-        total: x
-      } = Bt(f, {
-        group: g.group ? a : void 0,
-        sort: g.sort ? e : void 0,
-        filter: ht(g.filter ? t : void 0, g.search ? s : void 0),
-        ...r ? {
-          take: this.$props.pageable ? l || 10 : l,
-          skip: i || 0
+    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);
+    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";
+    if (this.currentData = [], u) {
+      const a = u.page && !(this.isVirtualScroll && !this.$props.pageable), {
+        data: g,
+        total: I
+      } = Wt(w, {
+        group: u.group ? l : void 0,
+        sort: u.sort ? e : void 0,
+        filter: dt(u.filter ? t : void 0, u.search ? i : void 0),
+        ...a ? {
+          take: this.$props.pageable ? r || 10 : r,
+          skip: s || 0
         } : {}
       });
-      f = p, u = (we = this.$props.total) != null ? we : x;
+      w = g, m = (we = this.$props.total) != null ? we : I;
     }
     const {
-      resolvedGroupsCount: je,
-      flattedData: qe
-    } = this.getFlatData(f, Be, Ue ? 0 : this.$props.skip || 0, a, h, d, this.$props.dataItemKey);
-    this.currentData = qe, this.initColumns(this.$props.dataItems, je), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this._columns, this.columnResize.columnsState = rt(this.currentColumnsState || []), this.dragLogic.columns = this._columns;
-    const Z = this.$props.toolbar, ee = this.$props.noRecords, y = this._columns.filter((r) => r.children.length === 0), te = E && o(yt, {
-      ref: (r) => {
-        this.groupPanelDivRef = r;
+      resolvedGroupsCount: We,
+      flattedData: Ke
+    } = this.getFlatData(w, Oe, V ? 0 : this.$props.skip || 0, l, p, d, this.$props.dataItemKey);
+    this.currentData = Ke;
+    const N = this._virtualSkipRef || 0;
+    if (this._virtualTotal = m, 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);
+        } else
+          f = 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, {
+      ref: (a) => {
+        this.groupPanelDivRef = a;
       },
-      group: a || [],
+      group: l || [],
       ariaControls: this._gridRoleElementId,
       onGroupChange: this.groupChangeHandler,
       onPressHandler: this.dragLogic.pressHandler,
       onDragHandler: this.dragLogic.dragHandler,
       onReleaseHandler: this.dragLogic.releaseHandler,
       resolveTitle: this.resolveTitle
-    }, null), se = (this.dragLogic.reorderable || this.dragLogic.groupable) && j && document && document.body, ie = [se && o(Tt, {
-      ref: (r) => {
-        this.dropElementClueRef = r;
+    }, null), re = (this.dragLogic.reorderable || this.dragLogic.groupable) && Q && document && document.body, le = [re && o(Dt, {
+      ref: (a) => {
+        this.dropElementClueRef = a;
       }
-    }, null), se && o(zt, {
-      ref: (r) => {
-        this.dragElementClueRef = r;
+    }, null), re && o(zt, {
+      ref: (a) => {
+        this.dragElementClueRef = a;
       }
-    }, null)], re = o(wt, {
+    }, null)], ae = o(vt, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
-      ref: (r) => {
-        this.headerRef = r;
+      ref: (a) => {
+        this.headerRef = a;
       },
-      headerRow: o(Rt, {
+      headerRow: o(wt, {
         grid: this,
         sort: e,
         groupable: this.$props.groupable,
@@ -860,7 +903,7 @@ const Gs = /* @__PURE__ */ st({
         onSortChange: this.sortChangeHandler,
         filter: t,
         filterable: this.$props.filterable,
-        filterOperators: this.$props.filterOperators || Ae,
+        filterOperators: this.$props.filterOperators || Fe,
         onFilterChange: this.filterChangeHandler,
         columnMenu: this.$props.columnMenu,
         columnMenuIcon: this.$props.columnMenuIcon,
@@ -876,12 +919,12 @@ const Gs = /* @__PURE__ */ st({
         cellRender: this.$props.headerCellRender,
         isRtl: this.isRtl,
         isColCountDefined: this.getAriaColCount !== void 0,
-        filterRow: this.$props.filterable && o(kt, {
+        filterRow: this.$props.filterable && o(It, {
           grid: this,
           size: this.$props.size,
           columns: this._columns,
           filter: t,
-          filterOperators: this.$props.filterOperators || Ae,
+          filterOperators: this.$props.filterOperators || Fe,
           onFilterchange: this.filterChangeHandler,
           sort: this.$props.sort,
           cellRender: this.$props.filterCellRender,
@@ -889,127 +932,127 @@ const Gs = /* @__PURE__ */ st({
           ariaRowIndex: this._columnsMap.length + 1
         }, null) || void 0
       }, null),
-      cols: y.map(function(r, p) {
+      cols: k.map(function(a, g) {
         return o("col", {
-          key: p.toString(),
-          width: r.width !== void 0 ? Math.floor(parseFloat(r.width.toString())) + "px" : void 0
+          key: g.toString(),
+          width: a.width !== void 0 ? Math.floor(parseFloat(a.width.toString())) : void 0
         }, null);
       }, this)
-    }, null), le = this._columns.some((r) => !!r.footerCell) ? o(St, {
+    }, null), oe = this._columns.some((a) => !!a.footerCell) ? o(yt, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
-      ref: (r) => {
-        this.footerRef = r;
+      ref: (a) => {
+        this.footerRef = a;
       },
       row: o(Ht, {
         isRtl: this.isRtl,
         rowIndex: this.getAriaRowCount + 1,
         columns: this._columns
       }, null),
-      cols: y.map(function(r, p) {
+      cols: k.map(function(a, g) {
         return o("col", {
-          key: p.toString(),
-          width: r.width !== void 0 ? Math.floor(parseFloat(r.width.toString())) + "px" : void 0
+          key: g.toString(),
+          width: a.width !== void 0 ? Math.floor(parseFloat(a.width.toString())) : void 0
         }, null);
       }, this)
-    }, null) : o("span", null, null), Je = this.showLicenseWatermark ? o(lt, {
+    }, null) : o("span", null, null), Ue = this.showLicenseWatermark ? o(st, {
       message: this.licenseMessage
-    }, null) : null, P = this.$attrs.style, Qe = P && M(P) && P["width"] || "";
-    this.tableWidth = parseFloat(Qe.toString()), this.scrollLeft = ((ke = (Re = this.vs) == null ? void 0 : Re.container) == null ? void 0 : ke.scrollLeft) || 0;
-    const ae = y.findIndex((r) => typeof r.colSpan == "function") > -1;
-    let V;
-    ae || (V = this.getCellsToRender(null, y));
-    const Xe = function(r, p, x) {
-      let D = !1;
-      const _ = this.$props.selectedField, I = _ ? Te(_, r.dataItem) : void 0, $ = this.$props.highlight && this.$props.dataItemKey && q(this.$props.dataItemKey)(r.dataItem) !== void 0 ? this.$props.highlight[q(this.$props.dataItemKey)(r.dataItem)] : void 0;
-      return ae && (V = this.getCellsToRender(r.dataItem, y)), {
-        row: V.map(function({
-          columnIndex: C,
-          colSpan: G
+    }, 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;
+    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)), {
+        row: W.map(function({
+          columnIndex: b,
+          colSpan: D
         }) {
-          const n = y[C], S = `${n.className ? n.className + " " : ""}${n.locked ? "k-grid-content-sticky" : ""}`, w = n.left !== void 0 ? this.isRtl ? {
+          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"
           } : {
             left: n.left + "px",
             right: n.right + "px"
           } : {};
-          let Se = !1;
+          let z = !1;
           if (n.editable && this.$props.editField) {
-            const m = Te(this.$props.editField, r.dataItem);
-            (m === !0 || m === n.field) && (D = !0, Se = !0);
+            const $ = Ee(this.$props.editField, a.dataItem);
+            ($ === !0 || $ === n.field) && (P = !0, z = !0);
           }
-          let L;
-          n.cell && (L = n.cell);
-          const He = this.computedCollapsed && this.computedCollapsed[r.level] && this.computedCollapsed[r.level].some((m) => m === Oe(r.dataItem, this.$props.uniqueField)), K = n.id ? n.id : C, U = He ? !He : r.expanded, tt = n._type === "expand", B = H.generateNavigatableId(`${p}-${String(C)}`, v, tt || r.rowType === "groupHeader" || r.rowType === "groupFooter" || n.field === "value" ? "nodata" : "cell");
+          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, {
-            key: K,
-            id: B,
-            colSpan: G,
-            dataItem: r.dataItem,
+            key: j,
+            id: J,
+            colSpan: D,
+            dataItem: a.dataItem,
             field: n.field || "",
             editor: n.editor,
             format: n.format,
             readFormat: n.readFormat,
             type: n.type,
-            className: S,
-            render: L || this.$props.cellRender,
+            className: _,
+            render: T || this.$props.cellRender,
             onChange: this.itemChange,
-            onSelectionchange: (m) => this.selectionChangeHandler({
-              event: m,
-              dataItem: r.dataItem,
-              dataIndex: x,
-              columnIndex: C
+            onSelectionchange: ($) => this.selectionChangeHandler({
+              event: $,
+              dataItem: a.dataItem,
+              dataIndex: I,
+              columnIndex: b
             }),
-            columnIndex: C,
-            columnsCount: this._columns.filter((m) => !m.children.length).length,
-            rowType: r.rowType,
-            level: r.level,
-            expanded: U,
-            dataIndex: r.dataIndex,
-            style: w,
+            columnIndex: b,
+            columnsCount: this._columns.filter(($) => !$.children.length).length,
+            rowType: a.rowType,
+            level: a.level,
+            expanded: q,
+            dataIndex: a.dataIndex,
+            style: E,
             ariaColumnIndex: n.ariaColumnIndex,
             isRtl: this.isRtl,
-            isSelected: Array.isArray(I) && I.indexOf(C) > -1,
-            isHighlighted: !!(typeof $ != "boolean" && $ && n.field && $[n.field] === !0),
-            group: r.group
-          }, null) : Se ? o(It, {
-            id: B,
-            key: K,
-            colSpan: G,
-            dataItem: r.dataItem,
+            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, {
+            id: J,
+            key: j,
+            colSpan: D,
+            dataItem: a.dataItem,
             field: n.field || "",
             editor: n.editor,
             format: n.format,
             readFormat: n.readFormat,
             type: n.type,
-            className: S,
-            render: L || this.$props.cellRender,
+            className: _,
+            render: T || this.$props.cellRender,
             onEdit: this.editHandler,
             onRemove: this.removeHandler,
             onSave: this.saveHandler,
             onCancel: this.cancelHandler,
             onChange: this.itemChange,
-            columnIndex: C,
-            columnsCount: this._columns.filter((m) => !m.children.length).length,
-            rowType: r.rowType,
-            level: r.level,
-            expanded: U,
-            dataIndex: r.dataIndex,
-            style: w
-          }, null) : o(Ot, {
-            key: K,
-            id: B,
-            colSpan: G,
-            dataItem: r.dataItem,
+            columnIndex: b,
+            columnsCount: this._columns.filter(($) => !$.children.length).length,
+            rowType: a.rowType,
+            level: a.level,
+            expanded: q,
+            dataIndex: a.dataIndex,
+            style: E
+          }, null) : o(Vt, {
+            key: j,
+            id: J,
+            colSpan: D,
+            dataItem: a.dataItem,
             field: n.field || "",
             editor: n.editor,
             format: n.format,
             readFormat: n.readFormat,
             type: n.type,
-            className: S,
-            render: L || this.$props.cellRender,
+            className: _,
+            render: T || this.$props.cellRender,
             onCellclick: this.cellClickHandler,
             onCellkeydown: this.cellKeydownHandler,
             onEdit: this.editHandler,
@@ -1017,138 +1060,129 @@ const Gs = /* @__PURE__ */ st({
             onSave: this.saveHandler,
             onCancel: this.cancelHandler,
             onChange: this.itemChange,
-            onSelectionchange: (m) => this.selectionChangeHandler({
-              event: m,
-              dataItem: r.dataItem,
-              dataIndex: x,
-              columnIndex: C
+            onSelectionchange: ($) => this.selectionChangeHandler({
+              event: $,
+              dataItem: a.dataItem,
+              dataIndex: I,
+              columnIndex: b
             }),
-            columnIndex: C,
-            columnsCount: this._columns.filter((m) => !m.children.length).length,
-            rowType: r.rowType,
-            level: r.level,
-            expanded: U,
-            dataIndex: r.dataIndex,
-            style: w,
-            isSelected: Array.isArray(I) && I.indexOf(C) > -1,
-            isHighlighted: !!(typeof $ != "boolean" && $ && n.field && $[n.field] === !0)
+            columnIndex: b,
+            columnsCount: this._columns.filter(($) => !$.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)
           }, null);
         }, this),
-        isInEdit: D,
-        isSelected: typeof I == "boolean" && I,
-        isHighlighted: typeof $ == "boolean" && $
+        isInEdit: P,
+        isSelected: typeof h == "boolean" && h,
+        isHighlighted: typeof C == "boolean" && C
       };
     };
-    let oe = 0;
-    if (this.$props.scrollable === "virtual" && this.totalGroupedRows(this.currentData) / 2 > this.$props.take) {
-      const r = this.vs.topCacheCount + this.vs.attendedSkip - (this.$props.skip || 0);
-      for (let p = 0; p < r; ) {
-        const x = this.currentData.shift();
-        if (x)
-          this.currentData.push(x), oe++, x.rowType === "groupHeader" && p--;
-        else
-          break;
-        p++;
+    let qe = 0, K = [];
+    const U = !this.currentData.length, de = (a) => a >= this.currentData.length - qe;
+    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;
+      if (this.isVirtualScroll) {
+        if (N > 0) {
+          const h = this.currentData.slice(0, N).filter((C) => C.rowType === "data").length;
+          I += h, g += h;
+        }
+        !this.$props.pageable && V && (I += 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,
+          ariaRowIndex: B,
+          absoluteRowIndex: n,
+          isAltRow: b,
+          isHidden: de(C),
+          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),
+          render: this.$props.rowRender,
+          class: this.$props.rowClass ? this.$props.rowClass(h) : ""
+        }, {
+          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",
+          style: {
+            visibility: de(C) ? "hidden" : "",
+            height: this.$props.detailRowHeight + "px"
+          },
+          role: "row",
+          "aria-rowindex": B
+        }, [l == null ? void 0 : l.map(function(S) {
+          return o(Z, {
+            id: "",
+            dataIndex: h.dataIndex,
+            field: S.field,
+            dataItem: h.dataItem,
+            key: `group-${S.field}-${h.dataIndex}`,
+            group: h.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,
+          ariaColIndex: 2 + (l ? l.length : 0),
+          detail: this.$props.detail ? this.$props.detail : void 0,
+          id: H.generateNavigatableId(`${E}-dcell`, x)
+        }, null)])];
+      }, this);
     }
-    const ne = (r) => r >= this.currentData.length - oe;
-    let N = this.vs.propsSkip || 0;
-    const T = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
-    let F, O = -1, W = 0;
-    const de = this.currentData.length && this.currentData.map(function(r, p) {
-      r.rowType === "data" && (N++, O++), this.$props.alternatePerGroup && r.rowType === "groupHeader" && (N = 0);
-      const x = N % 2 === 0, D = this.$props.dataItemKey && q(this.$props.dataItemKey)(r.dataItem), _ = p + (this.vs.propsSkip || 0), I = D || "ai" + _, $ = I + "_1";
-      F = _ + T + W;
-      let C;
-      this.$props.detail && r.rowType === "data" && (r.expanded || r.dataItem.expanded) && (C = y.length - (this.detailExpandable.enabled || this.$props.expandField ? 1 : 0) - (a ? a.length : 0) || 1, W++, F = _ + T + W);
-      const G = p * 2 + T, n = p * 2 + T + 1, S = Xe.call(this, r, I, O);
-      return [o(Wt, {
-        key: I,
-        dataItem: r.dataItem,
-        isAltRow: x,
-        isInEdit: S.isInEdit,
-        isSelected: S.isSelected,
-        isHighlighted: S.isHighlighted,
-        rowType: r.rowType,
-        isHidden: ne(p),
-        onRowclick: (w) => this.rowClick(w, r),
-        onRowdblclick: (w) => this.rowDoubleClick(w, r),
-        selectedField: this.$props.selectedField,
-        rowHeight: this.$props.rowHeight,
-        render: this.$props.rowRender,
-        ariaRowIndex: this.$props.detail ? G : F,
-        dataIndex: O,
-        class: this.$props.rowClass ? this.$props.rowClass(r) : ""
-      }, {
-        default: () => [S.row]
-      }), this.$props.detail && r.rowType === "data" && (r.expanded || r.dataItem.expanded) && o("tr", {
-        key: $,
-        class: x ? "k-table-row k-table-alt-row k-detail-row" : "k-table-row k-detail-row",
-        style: {
-          visibility: ne(p) ? "hidden" : "",
-          height: this.$props.detailRowHeight + "px"
-        },
-        role: "row",
-        "aria-rowindex": this.$props.detail ? n : F
-      }, [a == null ? void 0 : a.map(function(w) {
-        return o(X, {
-          id: "",
-          dataIndex: r.dataIndex,
-          field: w.field,
-          dataItem: r.dataItem,
-          key: `group-${w.field}-${r.dataIndex}`,
-          group: r.group
-        }, null);
-      }, this), (this.$props.expandField || this.detailExpandable.enabled) && o(vt, {
-        id: H.generateNavigatableId(`${$}-dhcell`, v)
-      }, null), o(xt, {
-        dataItem: r.dataItem,
-        dataIndex: r.dataIndex,
-        colSpan: C,
-        ariaColIndex: 2 + (a ? a.length : 0),
-        detail: this.$props.detail ? this.$props.detail : void 0,
-        id: H.generateNavigatableId(`${$}-dcell`, v)
-      }, null)])];
-    }, this) || o("tr", {
-      class: "k-table-row k-grid-norecords"
-    }, [o("td", {
-      class: "k-table-td",
-      colspan: this._columns.filter((r) => !r.children.length).length
-    }, [ee.length ? ee : o(Ut, null, null)])]), Ye = this.$props.pageable && o(pt, {
+    const Je = this.$props.pageable && o(ht, {
       class: "k-grid-pager",
       onPagesizechange: this.pageChangeHandler,
       onPagechange: this.pageChangeHandler,
       size: this.$props.size,
-      total: u,
-      skip: this.vs.propsSkip || 0,
-      pageSize: (this.$props.take !== void 0 ? this.$props.take : this.$props.pageSize) || 10,
-      messagesMap: Ke,
-      settings: ut(this.$props.pageable || {})
-    }, null), he = _e.call(this, {
-      h: Ee,
+      total: m,
+      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,
       template: this.$props.pager,
-      defaultRendering: Ye,
+      defaultRendering: Je,
       additionalProps: {
         ...this.$props,
-        skip: this.vs.propsSkip || 0,
-        messagesMap: Ke
+        skip: this.$props.skip || 0,
+        messagesMap: Ne
       },
       additionalListeners: {
         pagesizechange: this.pageChangeHandler,
         pagechange: this.pageChangeHandler
       }
-    }), Ze = (r) => e && e.filter((p) => p.field === r).length > 0, pe = o("colgroup", {
-      ref: A(this, "colGroup")
-    }, [y.map(function(r, p) {
+    }), 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: p.toString(),
-        class: Ze(r.field) ? "k-sorted" : void 0,
-        width: r.width !== void 0 ? r.width.toString().indexOf("%") !== -1 ? r.width : Math.floor(parseFloat(r.width.toString())) + "px" : void 0
+        key: g.toString(),
+        class: Qe(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
-    }, et = this.$props.loader && o("div", {
+    }, Xe = this.$props.loader && o("div", {
       class: "k-loader-container k-loader-container-md k-loader-top"
     }, [o("div", {
       class: "k-loader-container-overlay k-overlay-light"
@@ -1157,25 +1191,26 @@ const Gs = /* @__PURE__ */ st({
     }, [o(bt, {
       size: "large",
       type: "infinite-spinner"
-    }, null)])]), ce = ((ye = this.$props.showLoader) != null ? ye : !!this.$props.loader) && _e.call(this, {
-      h: Ee,
+    }, null)])]), ce = ((Ie = this.$props.showLoader) != null ? Ie : !!this.$props.loader) && ye.call(this, {
+      h: Se,
       template: this.$props.loader,
-      defaultRendering: et
+      defaultRendering: Xe
     });
-    return this.$props.scrollable === "none" ? o(Fe, {
+    return this.$props.scrollable === "none" ? o(ze, {
       ref: "navRef",
       id: this._gridId,
       navigatable: this.$props.navigatable
     }, {
-      default: () => [o(Le, {
-        ref: (r) => {
-          this.gridNavRef = r;
+      default: () => [o(De, {
+        ref: (a) => {
+          this.gridNavRef = a;
         },
         currentData: this.currentData,
+        id: this.$props.id,
         style: ue,
         class: this.nonscrollableWrapperClass
       }, {
-        default: () => [Z, te, o("div", {
+        default: () => [ie, se, o("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
@@ -1186,37 +1221,43 @@ const Gs = /* @__PURE__ */ st({
           style: {
             tableLayout: "fixed"
           },
+          ref: F(this, "table"),
           role: "none"
-        }, [pe, re, o("tbody", {
+        }, [et(" "), pe, ae, o("tbody", {
           class: "k-table-tbody",
           "data-keyboardnavbody": !0
-        }, [de, ce]), le])]), he, ie]
+        }, [K, ce]), oe]), U && o(Ve, {
+          id: H.generateNavigatableId("no-records", x)
+        }, {
+          default: () => [L.length ? L : o(Ae, null, null)]
+        })]), he, le]
       })]
-    }) : o(Fe, {
+    }) : o(ze, {
       ref: "navRef",
       id: this._gridId,
       navigatable: this.$props.navigatable
     }, {
-      default: () => [o(Le, {
-        ref: (r) => {
-          this.gridNavRef = r;
+      default: () => [o(De, {
+        ref: (a) => {
+          this.gridNavRef = a;
         },
         currentData: this.currentData,
+        id: this.$props.id,
         style: ue,
         class: this.scrollableWrapperClass
       }, {
-        default: () => [Z, te, o("div", {
+        default: () => [ie, se, o("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
           "aria-colcount": this.getAriaColCount,
           "aria-rowcount": this.getAriaRowCount
-        }, [re, o("div", {
+        }, [ae, o("div", {
           class: "k-grid-container",
           role: "presentation"
         }, [o("div", {
           role: "presentation",
-          ref: A(this, "scrollContainer"),
+          ref: F(this, "scrollContainer"),
           class: "k-grid-content k-virtual-content",
           onScroll: this.scrollHandler
         }, [o("div", {
@@ -1225,24 +1266,29 @@ const Gs = /* @__PURE__ */ st({
         }, [o("table", {
           role: "none",
           class: this.gridTableClass,
-          ref: A(this, "scrollTable")
+          ref: F(this, "table")
         }, [pe, o("tbody", {
           class: "k-table-tbody",
           role: "rowgroup",
           "data-keyboardnavbody": !0,
-          ref: A(this, "scrollTableBody")
-        }, [de])])]), o("div", {
+          ref: F(this, "tableBody")
+        }, [K])]), U && o(Ve, {
+          id: H.generateNavigatableId("no-records", x)
+        }, {
+          default: () => [L.length ? L : o(Ae, null, null)]
+        })]), !U && o("div", {
           class: "k-height-container",
           role: "presentation"
         }, [o("div", {
+          ref: F(this, "scrollHeightContainer"),
           style: this.$props.scrollable === "virtual" ? {
-            height: this.vs.containerHeight + "px"
+            height: this._containerHeightRef + "px"
           } : {}
-        }, null)])]), ce]), le, Je]), he, ie]
+        }, null)])]), ce]), oe, Ue]), he, le]
       })]
     });
   }
 });
 export {
-  Gs as Grid
+  _i as Grid
 };