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

package/Grid.mjs

@@ -5,42 +5,42 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-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 { defineComponent as ot, createVNode as n, h as Te, createTextVNode as De, ref as x, inject as nt, markRaw as E } from "vue";
+import { isObject as V, cloneArray as dt, canUseDOM as X, WatermarkOverlay as ht, getter as Y, getTemplate as Ge, setRef as G, hasListener as P, getRef as $, RowHeightService as pt, setScrollbarWidth as ut, kendoThemeMaps as Fe, uGrid as ct, isRtl as Le, validatePackage as gt, shouldShowValidationUI as ft, getLicenseMessage as mt, guid as Pe, getNestedValue as Me } from "@progress/kendo-vue-common";
+import { tableKeyboardNavigationTools as z, combineFilters as Ct, Pager as bt, normalize as $t, TableKeyboardNavigationProvider as Ae, updateLeft as Rt, updateRight as xt, groupExpandReducer as vt, detailExpandReducer as It, getDetailExpandableOptions as wt, 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 { GridNav as Ve } from "./GridNav.mjs";
+import { GridSelectionCell as Ne } from "./cells/GridSelectionCell.mjs";
+import { GridHierarchyCell as Z } from "./cells/GridHierarchyCell.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 { FilterRow as Tt } from "./header/FilterRow.mjs";
+import { GroupPanel as Dt } 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 { operators as Oe } 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 { applyExpandedState as Nt, getColSpan as Ot, autoGenerateColumns as Wt, mapColumns as Kt, getFlatColumnsState as We, getRowSpanOptions as Ke, groupedFirstItemValue as Ue, 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 { GridGroupCell as ee } from "./cells/GridGroupCell.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 qe } from "./messages/messagesMap.mjs";
+import { GridHeaderSelectionCell as Be } from "./header/GridHeaderSelectionCell.mjs";
+import { GridNoRecords as je } from "./components/noRecords/GridNoRecords.mjs";
+import { GridNoRecordsContainer as qe } from "./components/noRecords/GridNoRecordsContainer.mjs";
+import { packageMetadata as te } from "./package-metadata.mjs";
+import { pagerMessagesMap as Je } 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({
+const Pi = /* @__PURE__ */ ot({
   name: "KendoGrid",
   inheritAttrs: !1,
   props: {
@@ -89,18 +89,18 @@ const Pi = /* @__PURE__ */ at({
     }
   },
   created() {
-    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;
+    gt(te), this.showLicenseWatermark = ft(te), this.licenseMessage = mt(te), 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 = Pe(), this._gridRoleElementId = Pe(), 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 = 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);
+    const e = Le(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 = X && (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 = Fe(this._element);
+    const e = Le(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() {
@@ -120,10 +120,10 @@ const Pi = /* @__PURE__ */ at({
       return ct.hierarchyCell({});
     },
     computedRowSpannable() {
-      return We(this.$props.rowSpannable);
+      return Ke(this.$props.rowSpannable);
     },
     detailExpandable() {
-      return It(!!this.$props.detail);
+      return wt(!!this.$props.detail);
     },
     nonscrollableWrapperClass() {
       const {
@@ -132,7 +132,7 @@ const Pi = /* @__PURE__ */ at({
       return {
         "k-grid": !0,
         "k-grid-md": !e,
-        [`k-grid-${Ge.sizeMap[e] || e}`]: e,
+        [`k-grid-${Fe.sizeMap[e] || e}`]: e,
         [t]: !!t
       };
     },
@@ -153,7 +153,7 @@ const Pi = /* @__PURE__ */ at({
         "k-table": !0,
         "k-grid-table": !0,
         "k-grid-md": !e,
-        [`k-table-${Ge.sizeMap[e] || e}`]: e
+        [`k-table-${Fe.sizeMap[e] || e}`]: e
       };
     },
     getCorrectHeight() {
@@ -162,7 +162,7 @@ const Pi = /* @__PURE__ */ at({
     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) || A(this.$props.groupable) && this.$props.groupable.enabled !== !1;
+      return this.$props.groupable === !0 && (e == null ? void 0 : e.length) || V(this.$props.groupable) && this.$props.groupable.enabled !== !1;
     },
     computedCollapsed() {
       let e = [];
@@ -242,7 +242,7 @@ const Pi = /* @__PURE__ */ at({
         ...i,
         children: i.children && i.children.length > 0 ? this.filterHiddenColumns(i.children) : i.children
       });
-      return [...e].filter((i) => !i.hidden).filter((i) => Q && i && i.media ? window.matchMedia(i.media).matches : i).map((i) => t(i));
+      return [...e].filter((i) => !i.hidden).filter((i) => X && 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,
@@ -259,13 +259,13 @@ const Pi = /* @__PURE__ */ at({
           depth: d,
           colSpan: h,
           rowSpan: c,
-          index: m,
+          index: f,
           kFirst: u,
-          children: C,
+          children: m,
           ...R
         } = s;
-        return C.length ? {
-          children: t(C),
+        return m.length ? {
+          children: t(m),
           ...R
         } : R;
       }));
@@ -345,7 +345,7 @@ const Pi = /* @__PURE__ */ at({
       let t = this.computedCollapsed, i = t[e.level];
       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);
+      }, l = this.allGroupedItems ? this.loopGroupedItems(this.allGroupedItems.data, r, 0, null) : e.dataItem, d = Ue(l || e.dataItem, s);
       if (e.value) {
         if (i && i.length) {
           const h = i.indexOf(d);
@@ -357,9 +357,9 @@ const Pi = /* @__PURE__ */ at({
     },
     itemChange(e) {
       var s;
-      const t = L.call(this, "itemchange"), i = (s = this.gridContext.group) == null ? void 0 : s.value;
+      const t = P.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) {
-        L.call(this, "expandchange") && e.dataItem && this.$emit("expandchange", {
+        P.call(this, "expandchange") && e.dataItem && this.$emit("expandchange", {
           ...this.getArguments(e.event),
           collapsedGroups: this.updateGroupCollapsed(e),
           dataItem: e.dataItem,
@@ -469,7 +469,7 @@ const Pi = /* @__PURE__ */ at({
     handleDetailExpandAction(e, t) {
       var i;
       if (this.detailExpandable.enabled) {
-        const s = (i = this.gridContext.detailExpand) == null ? void 0 : i.value, r = wt(s != null ? s : {}, e);
+        const s = (i = this.gridContext.detailExpand) == null ? void 0 : i.value, r = It(s != null ? s : {}, e);
         this.$emit("detailexpandchange", {
           ...this.getArguments(t),
           detailExpand: r
@@ -492,12 +492,12 @@ const Pi = /* @__PURE__ */ at({
           ...this.getArguments(s),
           ...t
         });
-      else if (L.call(this, e))
+      else if (P.call(this, e))
         this.$emit(e, {
           ...this.getArguments(s),
           ...t
         });
-      else if (L.call(this, "datastatechange")) {
+      else if (P.call(this, "datastatechange")) {
         const r = {
           ...this.getDataState(),
           ...i
@@ -510,23 +510,23 @@ const Pi = /* @__PURE__ */ at({
       }
     },
     columnReorder(e, t, i) {
-      const s = this._columns[e], r = Oe(this.currentColumnsState), l = s.depth, d = (u) => {
+      const s = this._columns[e], r = We(this.currentColumnsState), l = s.depth, d = (u) => {
         do
           u++;
         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, C) => {
-        u.orderIndex = C;
-        const R = r.find((I) => I.id === u.id);
-        R && (R.orderIndex = C);
+      this._columns.splice(e < t ? d(t - h.length) : t, 0, ...h), this._columns.filter((u) => u.declarationIndex >= 0).forEach((u, m) => {
+        u.orderIndex = m;
+        const R = r.find((w) => w.id === u.id);
+        R && (R.orderIndex = m);
       });
       const c = this._columns[e].locked && this._columns[t].locked;
       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();
+      const f = this.getColumns();
       this.$emit("columnreorder", {
         target: this,
-        columns: m,
+        columns: f,
         event: i,
         prev: e,
         next: t
@@ -595,11 +595,11 @@ const Pi = /* @__PURE__ */ at({
     },
     configureColumns(e, t) {
       e.filter((l) => l.columnType === "checkbox").forEach((l) => {
-        l.width = l.width || "50px", l.defaultCell = _(Ve), l.defaultHeaderCell = _(Ue), l._type = "edit";
+        l.width = l.width || "50px", l.defaultCell = E(Ne), l.defaultHeaderCell = E(Be), l._type = "edit";
       }), this.$props.selectedField && this._columns.filter((l) => l.field === this.$props.selectedField).forEach((l) => {
-        l.width = l.width || "50px", l.internalCell = _(Ve), l.internalHeaderCell = _(Ue);
+        l.width = l.width || "50px", l.internalCell = E(Ne), l.internalHeaderCell = E(Be);
       });
-      const i = Oe(this.currentColumnsState);
+      const i = We(this.currentColumnsState);
       this.initColumnsState(e, i);
       const s = {
         id: "",
@@ -626,36 +626,36 @@ const Pi = /* @__PURE__ */ at({
         const l = {
           ...s,
           _type: "expand",
-          id: E.generateNavigatableId(`${r++}`, "expand", "column"),
-          defaultCell: _(Y),
-          internalCell: _(Y),
+          id: z.generateNavigatableId(`${r++}`, "expand", "column"),
+          defaultCell: E(Z),
+          internalCell: E(Z),
           field: this.detailExpandable.column,
           headerClassName: this.hierarchClass
         };
         e.unshift(l), this.currentColumnsState.unshift(i.find((d) => d.id === l.id) || l);
       }
-      this.$props.expandField && L.call(this, "expandchange") && this.$props.detail && (e.unshift({
+      this.$props.expandField && P.call(this, "expandchange") && this.$props.detail && (e.unshift({
         ...s,
-        internalCell: _(Y),
+        internalCell: E(Z),
         field: this.$props.expandField,
         headerClassName: "k-hierarchy-cell k-header",
-        id: E.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
+        id: z.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
         ...this.expandColumn
       }), r++);
       for (let l = 0; l < t; l++) {
         const d = {
           ...s,
           isAccessible: !1,
-          defaultCell: _(Z),
-          internalCell: _(Z),
-          id: E.generateNavigatableId(`${r++}`, "group", "column"),
+          defaultCell: E(ee),
+          internalCell: E(ee),
+          id: z.generateNavigatableId(`${r++}`, "group", "column"),
           field: "value",
           locked: this.$props.lockGroups
         };
         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 ? We(l.rowSpannable) : this.computedRowSpannable;
+        l.parentIndex >= 0 && (l.parentIndex += r), l.rowSpannable = l.rowSpannable !== void 0 ? Ke(l.rowSpannable) : this.computedRowSpannable;
       });
     },
     initColumns(e, t) {
@@ -694,8 +694,8 @@ const Pi = /* @__PURE__ */ at({
       return null;
     },
     getDataState() {
-      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;
+      var l, d, h, c, f;
+      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 = (f = this.gridContext.group) == null ? void 0 : f.value;
       return {
         filter: t,
         sort: e,
@@ -755,10 +755,10 @@ const Pi = /* @__PURE__ */ at({
           r--, s && (s.width += c);
           return;
         }
-        const m = Math.min(Ot(d, e), t.length - h);
-        r = m - 1, s = {
+        const f = Math.min(Ot(d, e), t.length - h);
+        r = f - 1, s = {
           width: c,
-          colSpan: m,
+          colSpan: f,
           columnIndex: h
         }, i.push(s);
       }), this.$props.columnVirtualization) {
@@ -801,7 +801,7 @@ const Pi = /* @__PURE__ */ at({
     };
   },
   setup(e) {
-    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, {});
+    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), f = x(null), u = x(null), m = x(!0), R = x(!1), w = nt(Yt, {});
     return {
       groupPanelDivRef: t,
       dropElementClueRef: i,
@@ -811,19 +811,19 @@ const Pi = /* @__PURE__ */ at({
       gridNavRef: d,
       colGroupRef: h,
       scrollContainerRef: c,
-      scrollTableRef: m,
+      scrollTableRef: f,
       scrollTableBodyRef: u,
-      gridContext: I,
-      shouldUpdateLeftRightRef: C,
+      gridContext: w,
+      shouldUpdateLeftRightRef: m,
       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, 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;
+    var fe, me, Ce, be, $e, Re, xe, ve, Ie, we;
+    const e = (fe = this.gridContext.sort) == null ? void 0 : fe.value, t = (me = this.gridContext.filter) == null ? void 0 : me.value, i = (Ce = this.gridContext.search) == null ? void 0 : Ce.value, s = (be = this.gridContext.skip) == null ? void 0 : be.value, r = ($e = this.gridContext.take) == null ? void 0 : $e.value, l = (Re = this.gridContext.group) == null ? void 0 : Re.value, d = (xe = this.gridContext.groupExpand) == null ? void 0 : xe.value, h = (ve = this.gridContext.detailExpand) == null ? void 0 : ve.value, c = !!(l != null && l.length);
+    let f;
+    this.currentColumnsState = (Ie = this.gridContext.columnsState) == null ? void 0 : Ie.value;
     const u = this.$props.autoProcessData === !0 ? {
       group: !0,
       sort: !0,
@@ -831,18 +831,18 @@ const Pi = /* @__PURE__ */ at({
       search: !0,
       page: !0
     } : this.$props.autoProcessData;
-    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 = I.length === C, Je = A(this.$props.groupable) && this.$props.groupable.footer || "none";
+    let m = this.$props.total || 0;
+    const R = z.getIdPrefix(this.navigation);
+    let w = [];
+    Array.isArray(this.$props.dataItems) ? w = this.$props.dataItems : this.$props.dataItems && (w = Nt(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField).data, m = m || this.$props.dataItems.total);
+    const ie = this.$props.groupable === !0 || V(this.$props.groupable) && this.$props.groupable.enabled !== !1;
+    this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = ie, this._virtualPageSize = this.calcVirtualPageSize();
+    const N = w.length === m, Qe = V(this.$props.groupable) && this.$props.groupable.footer || "none";
     if (this.currentData = [], u) {
       const a = u.page && !(this.isVirtualScroll && !this.$props.pageable), {
-        data: f,
+        data: C,
         total: S
-      } = Xt(I, {
+      } = Xt(w, {
         group: u.group ? l : void 0,
         sort: u.sort ? e : void 0,
         filter: Ct(u.filter ? t : void 0, u.search ? i : void 0),
@@ -851,25 +851,25 @@ const Pi = /* @__PURE__ */ at({
           skip: s || 0
         } : {}
       });
-      I = f, C = (we = this.$props.total) != null ? we : S;
+      w = C, m = (we = this.$props.total) != null ? we : S;
     }
     const {
-      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 = C, this.isVirtualScroll) {
+      resolvedGroupsCount: Xe,
+      flattedData: Ye
+    } = this.getFlatData(w, Qe, N ? 0 : this.$props.skip || 0, l, h, d, this.$props.dataItemKey);
+    this.currentData = Ye;
+    const O = 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 ((c || this.$props.pageable) && (a = O, this._virtualTotal = this.currentData.length), N || c || this.$props.pageable)
         if (this._virtualPageSize === 0) {
-          const f = Math.min(r || this.$props.pageSize || 20, this.currentData.length);
-          m = this.currentData.slice(a, a + f);
+          const C = Math.min(r || this.$props.pageSize || 20, this.currentData.length);
+          f = this.currentData.slice(a, a + C);
         } else
-          m = this.currentData.slice(a, a + this._virtualPageSize);
+          f = this.currentData.slice(a, a + this._virtualPageSize);
     }
-    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, {
+    this.initializeVirtualization(), this.initColumns(this.$props.dataItems, Xe), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this._columns, this.columnResize.columnsState = dt(this.currentColumnsState || []), this.dragLogic.columns = this._columns;
+    const se = this.$props.toolbar, M = this.$props.noRecords, k = this._columns.filter((a) => a.children.length === 0), re = ie && n(Dt, {
       ref: (a) => {
         this.groupPanelDivRef = a;
       },
@@ -880,15 +880,29 @@ const Pi = /* @__PURE__ */ at({
       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 && n(Vt, {
+    }, null), le = (this.dragLogic.reorderable || this.dragLogic.groupable) && X && document && document.body, ae = [le && n(Vt, {
       ref: (a) => {
         this.dropElementClueRef = a;
       }
-    }, null), re && n(At, {
+    }, null), le && n(At, {
       ref: (a) => {
         this.dragElementClueRef = a;
       }
-    }, null)], ae = n(Et, {
+    }, null)], Ze = this.showLicenseWatermark ? n(ht, {
+      message: this.licenseMessage
+    }, null) : null, W = this.$attrs.style, et = W && V(W) && W["width"] || "";
+    this.tableWidth = parseFloat(et.toString());
+    const oe = k.findIndex((a) => typeof a.colSpan == "function") > -1;
+    let F;
+    oe || (F = this.getCellsToRender(null, k));
+    const ne = (this.$props.columnVirtualization ? this.getCellsToRender(null, k).map(({
+      columnIndex: a
+    }) => k[a]) : k).map(function(a, C) {
+      return n("col", {
+        key: a.id || `col-${C}`,
+        width: a.width !== void 0 ? Math.floor(parseFloat(a.width.toString())) : void 0
+      }, null);
+    }, this), de = n(Et, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
@@ -904,13 +918,15 @@ const Pi = /* @__PURE__ */ at({
         onSortChange: this.sortChangeHandler,
         filter: t,
         filterable: this.$props.filterable,
-        filterOperators: this.$props.filterOperators || Ne,
+        filterOperators: this.$props.filterOperators || Oe,
         onFilterChange: this.filterChangeHandler,
         columnMenu: this.$props.columnMenu,
         columnMenuIcon: this.$props.columnMenuIcon,
         columnMenuAnimate: this.$props.columnMenuAnimate,
         onSelectionchange: this.onHeaderSelectionChangeHandler,
         columns: this._columns,
+        cellsToRender: F,
+        columnVirtualization: this.$props.columnVirtualization,
         columnsInitial: this.$props.columns,
         columnResize: this.columnResize,
         onPressHandler: this.dragLogic.pressHandler,
@@ -920,12 +936,14 @@ const Pi = /* @__PURE__ */ at({
         cellRender: this.$props.headerCellRender,
         isRtl: this.isRtl,
         isColCountDefined: this.getAriaColCount !== void 0,
-        filterRow: this.$props.filterable && n(Dt, {
+        filterRow: this.$props.filterable && n(Tt, {
           grid: this,
           size: this.$props.size,
           columns: this._columns,
+          cellsToRender: F,
+          columnVirtualization: this.$props.columnVirtualization,
           filter: t,
-          filterOperators: this.$props.filterOperators || Ne,
+          filterOperators: this.$props.filterOperators || Oe,
           onFilterchange: this.filterChangeHandler,
           sort: this.$props.sort,
           cellRender: this.$props.filterCellRender,
@@ -933,13 +951,8 @@ const Pi = /* @__PURE__ */ at({
           ariaRowIndex: this._columnsMap.length + 1
         }, null) || void 0
       }, null),
-      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) ? n(Gt, {
+      cols: ne
+    }, null), he = this._columns.some((a) => !!a.footerCell) ? n(Gt, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
@@ -951,64 +964,52 @@ const Pi = /* @__PURE__ */ at({
         rowIndex: this.getAriaRowCount + 1,
         columns: this._columns
       }, null),
-      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) : n("span", null, null), Ye = this.showLicenseWatermark ? n(ht, {
-      message: this.licenseMessage
-    }, 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, z));
-    const et = function(a, f, S, Se, k) {
+      cols: ne
+    }, null) : n("span", null, null), tt = function(a, C, S, Se, _) {
       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({
+      const T = this.$props.selectedField, y = T ? Me(T, a.dataItem) : void 0, v = this.$props.highlight && this.$props.dataItemKey && Y(this.$props.dataItemKey)(a.dataItem) !== void 0 ? this.$props.highlight[Y(this.$props.dataItemKey)(a.dataItem)] : void 0;
+      return oe && (F = this.getCellsToRender(a.dataItem, k)), {
+        row: F.map(function({
           columnIndex: b,
-          colSpan: T
+          colSpan: D
         }) {
           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 o = k[b];
+          let I;
+          if ((ke = o.rowSpannable) != null && ke.enabled && a.rowType === "data" && o.field && _) {
             const g = o.field ? (Ee = (_e = o.rowSpannable).valueGetter) == null ? void 0 : Ee.call(_e, a.dataItem, o.field) : null;
-            w = {
+            I = {
               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;
+            }, _[o.field] && ((ze = _[o.field]) == null ? void 0 : ze.value) === g && _[o.field] !== null ? (_[o.field].count++, I.count = null) : _[o.field] = I;
           }
-          const F = `${o.className ? o.className + " " : ""}${o.locked ? "k-grid-content-sticky" : ""}`, H = o.left !== void 0 ? this.isRtl ? {
+          const L = `${o.className ? o.className + " " : ""}${o.locked ? "k-grid-content-sticky" : ""}`, H = o.locked && o.left !== void 0 ? this.isRtl ? {
             left: o.right + "px",
             right: o.left + "px"
           } : {
             left: o.left + "px",
             right: o.right + "px"
-          } : {};
+          } : void 0;
           let ye = !1;
           if (o.editable && this.$props.editField) {
-            const g = Pe(this.$props.editField, a.dataItem);
+            const g = Me(this.$props.editField, a.dataItem);
             (g === !0 || g === o.field) && (p = !0, ye = !0);
           }
-          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");
+          let A;
+          o.cell && (A = o.cell);
+          const He = this.computedCollapsed && this.computedCollapsed[a.level] && this.computedCollapsed[a.level].some((g) => g === Ue(a.dataItem, this.$props.uniqueField)), q = o.id ? o.id : b, J = He ? !He : a.expanded || a.dataItem.expanded, at = o._type === "expand", Q = z.generateNavigatableId(`${C}-${String(b)}`, R, at || a.rowType === "groupHeader" || a.rowType === "groupFooter" || o.field === "value" ? "nodata" : "cell");
           return o.internalCell ? n(o.internalCell, {
-            key: j,
-            id: J,
-            colSpan: T,
+            key: q,
+            id: Q,
+            colSpan: D,
             dataItem: a.dataItem,
             field: o.field || "",
             editor: o.editor,
             format: o.format,
             readFormat: o.readFormat,
             type: o.type,
-            className: F,
-            render: M || this.$props.cellRender,
+            className: L,
+            render: A || this.$props.cellRender,
             onChange: this.itemChange,
             onSelectionchange: (g) => this.selectionChangeHandler({
               event: g,
@@ -1020,7 +1021,7 @@ const Pi = /* @__PURE__ */ at({
             columnsCount: this._columns.filter((g) => !g.children.length).length,
             rowType: a.rowType,
             level: a.level,
-            expanded: q,
+            expanded: J,
             dataIndex: a.dataIndex,
             style: H,
             ariaColumnIndex: o.ariaColumnIndex,
@@ -1028,19 +1029,19 @@ const Pi = /* @__PURE__ */ at({
             isSelected: Array.isArray(y) && y.indexOf(b) > -1,
             isHighlighted: !!(typeof v != "boolean" && v && o.field && v[o.field] === !0),
             group: a.group,
-            rowSpan: w
+            rowSpan: I
           }, null) : ye ? n(_t, {
-            id: J,
-            key: j,
-            colSpan: T,
+            id: Q,
+            key: q,
+            colSpan: D,
             dataItem: a.dataItem,
             field: o.field || "",
             editor: o.editor,
             format: o.format,
             readFormat: o.readFormat,
             type: o.type,
-            className: F,
-            render: M || this.$props.cellRender,
+            className: L,
+            render: A || this.$props.cellRender,
             onEdit: this.editHandler,
             onRemove: this.removeHandler,
             onSave: this.saveHandler,
@@ -1050,21 +1051,21 @@ const Pi = /* @__PURE__ */ at({
             columnsCount: this._columns.filter((g) => !g.children.length).length,
             rowType: a.rowType,
             level: a.level,
-            expanded: q,
+            expanded: J,
             dataIndex: a.dataIndex,
             style: H
           }, null) : n(qt, {
-            key: j,
-            id: J,
-            colSpan: T,
+            key: q,
+            id: Q,
+            colSpan: D,
             dataItem: a.dataItem,
             field: o.field || "",
             editor: o.editor,
             format: o.format,
             readFormat: o.readFormat,
             type: o.type,
-            className: F,
-            render: M || this.$props.cellRender,
+            className: L,
+            render: A || this.$props.cellRender,
             onCellclick: this.cellClickHandler,
             onCellkeydown: this.cellKeydownHandler,
             onEdit: this.editHandler,
@@ -1082,10 +1083,10 @@ const Pi = /* @__PURE__ */ at({
             columnsCount: this._columns.filter((g) => !g.children.length).length,
             rowType: a.rowType,
             level: a.level,
-            expanded: q,
+            expanded: J,
             dataIndex: a.dataIndex,
             style: H,
-            rowSpan: w,
+            rowSpan: I,
             isSelected: Array.isArray(y) && y.indexOf(b) > -1,
             isHighlighted: !!(typeof v != "boolean" && v && o.field && v[o.field] === !0)
           }, null);
@@ -1095,53 +1096,53 @@ const Pi = /* @__PURE__ */ at({
         isHighlighted: typeof v == "boolean" && v
       };
     };
-    let tt = 0, K = [];
-    const U = !this.currentData.length, de = (a) => a >= this.currentData.length - tt;
+    let it = 0, K = [];
+    const U = !this.currentData.length, pe = (a) => a >= this.currentData.length - it;
     let B = 0;
     if (this.currentData.length) {
       const a = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
-      let f = this.$props.skip || 0, S = -1, Se = 0;
-      const k = this.computedRowSpannable.enabled ? {} : void 0;
+      let C = this.$props.skip || 0, S = -1, Se = 0;
+      const _ = this.computedRowSpannable.enabled ? {} : void 0;
       if (this.isVirtualScroll) {
-        if (N > 0) {
-          const p = this.currentData.slice(0, N).filter((D) => D.rowType === "data").length;
-          S += p, f += p;
+        if (O > 0) {
+          const p = this.currentData.slice(0, O).filter((T) => T.rowType === "data").length;
+          S += p, C += p;
         }
-        !this.$props.pageable && V && (S += this.$props.skip || 0);
+        !this.$props.pageable && N && (S += this.$props.skip || 0);
       }
-      K = (m || this.currentData).map(function(p, D) {
+      K = (f || this.currentData).map(function(p, T) {
         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;
+        const y = p.dataIndex % 2 !== 0, v = this.$props.dataItemKey && Y(this.$props.dataItemKey)(p.dataItem), b = T + C, D = v || "ai" + b, o = D + "_1", I = tt.call(this, p, D, S, y, _), L = k.length - (this.detailExpandable.enabled ? 1 : 0) - ((l == null ? void 0 : l.length) || 0) || 1;
         return B = b + a + Se, [n(Jt, {
-          key: T,
+          key: D,
           item: p,
           dataIndex: S,
           ariaRowIndex: B,
           absoluteRowIndex: b,
           isAltRow: y,
-          isHidden: de(D),
+          isHidden: pe(T),
           rowHeight: this.$props.rowHeight,
-          isSelected: w.isSelected,
-          isHighlighted: w.isHighlighted,
-          isInEdit: w.isInEdit,
+          isSelected: I.isSelected,
+          isHighlighted: I.isHighlighted,
+          isInEdit: I.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(p) : ""
         }, {
-          default: () => [w.row]
+          default: () => [I.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(D) ? "hidden" : "",
+            visibility: pe(T) ? "hidden" : "",
             height: this.$props.detailRowHeight + "px"
           },
           role: "row",
           "aria-rowindex": B
         }, [l == null ? void 0 : l.map(function(H) {
-          return n(Z, {
+          return n(ee, {
             id: "",
             dataIndex: p.dataIndex,
             field: H.field,
@@ -1150,80 +1151,85 @@ const Pi = /* @__PURE__ */ at({
             group: p.group
           }, null);
         }, this), (this.$props.expandField || this.detailExpandable.enabled) && n(Ht, {
-          id: E.generateNavigatableId(`${o}-dhcell`, R)
+          id: z.generateNavigatableId(`${o}-dhcell`, R)
         }, null), n(kt, {
           dataItem: p.dataItem,
           dataIndex: p.dataIndex,
-          colSpan: F,
+          colSpan: L,
           ariaColIndex: 2 + (l ? l.length : 0),
           detail: this.$props.detail ? this.$props.detail : void 0,
-          id: E.generateNavigatableId(`${o}-dcell`, R)
+          id: z.generateNavigatableId(`${o}-dcell`, R)
         }, null)])];
       }, this);
     }
-    const it = this.$props.pageable && n(bt, {
+    const st = this.$props.pageable && n(bt, {
       class: "k-grid-pager",
       onPagesizechange: this.pageChangeHandler,
       onPagechange: this.pageChangeHandler,
       size: this.$props.size,
-      total: C,
+      total: m,
       skip: s || 0,
       pageSize: (r !== void 0 ? r : this.$props.pageSize) || 10,
-      messagesMap: qe,
+      messagesMap: Je,
       settings: $t(this.$props.pageable || {})
-    }, null), he = Te.call(this, {
-      h: De,
+    }, null), ue = Ge.call(this, {
+      h: Te,
       template: this.$props.pager,
-      defaultRendering: it,
+      defaultRendering: st,
       additionalProps: {
         ...this.$props,
         skip: this.$props.skip || 0,
-        messagesMap: qe
+        messagesMap: Je
       },
       additionalListeners: {
         pagesizechange: this.pageChangeHandler,
         pagechange: this.pageChangeHandler
       }
-    }), st = (a) => e && e.filter((f) => f.field === a).length > 0, pe = n("colgroup", {
+    }), rt = (a) => e && e.filter((C) => C.field === a).length > 0, ce = n("colgroup", {
       ref: G(this, "colGroup")
-    }, [z.map(function(a, f) {
+    }, [k.map(function(a, C) {
       return n("col", {
-        key: f.toString(),
-        class: st(a.field) ? "k-sorted" : void 0,
+        key: a.id || `col-${C}`,
+        class: rt(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 = {
+    }, this)]), ge = {
       height: this.getCorrectHeight,
       ...this.$attrs.style
-    }, rt = this.$props.loader && n("div", {
-      class: "k-loader-container k-loader-container-md k-loader-top"
+    }, lt = n("div", {
+      class: "k-loading-mask"
     }, [n("div", {
-      class: "k-loader-container-overlay k-overlay-light"
+      class: "k-loading-color"
     }, null), n("div", {
-      class: "k-loader-container-inner"
+      style: {
+        height: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      }
     }, [n(yt, {
       size: "large",
-      type: "infinite-spinner"
-    }, null)])]), ce = ((Ie = this.$props.showLoader) != null ? Ie : !!this.$props.loader) && Te.call(this, {
-      h: De,
+      type: "converging-spinner"
+    }, null)])]), j = this.$props.showLoader && Ge.call(this, {
+      h: Te,
       template: this.$props.loader,
-      defaultRendering: rt
+      defaultRendering: lt
     });
-    return this.$props.scrollable === "none" ? n(Me, {
+    return this.$props.scrollable === "none" ? n(Ae, {
       ref: "navRef",
       id: this._gridId,
       navigatable: this.$props.navigatable
     }, {
-      default: () => [n(Ae, {
+      default: () => [n(Ve, {
         ref: (a) => {
           this.gridNavRef = a;
         },
         currentData: this.currentData,
         id: this.$props.id,
-        style: ue,
+        style: ge,
         class: this.nonscrollableWrapperClass
       }, {
-        default: () => [ie, se, n("div", {
+        default: () => [se, re, n("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
@@ -1236,36 +1242,36 @@ const Pi = /* @__PURE__ */ at({
           },
           ref: G(this, "table"),
           role: "none"
-        }, [ot(" "), pe, ae, n("tbody", {
+        }, [De(" "), ce, de, n("tbody", {
           class: "k-table-tbody",
           "data-keyboardnavbody": !0
-        }, [K, ce]), oe]), U && n(je, {
-          id: E.generateNavigatableId("no-records", R)
+        }, [K, De("  "), j]), he]), U && n(qe, {
+          id: z.generateNavigatableId("no-records", R)
         }, {
-          default: () => [P.length ? P : n(Be, null, null)]
-        })]), he, le]
+          default: () => [M.length ? M : n(je, null, null)]
+        })]), ue, j, ae]
       })]
-    }) : n(Me, {
+    }) : n(Ae, {
       ref: "navRef",
       id: this._gridId,
       navigatable: this.$props.navigatable
     }, {
-      default: () => [n(Ae, {
+      default: () => [n(Ve, {
         ref: (a) => {
           this.gridNavRef = a;
         },
         currentData: this.currentData,
         id: this.$props.id,
-        style: ue,
+        style: ge,
         class: this.scrollableWrapperClass
       }, {
-        default: () => [ie, se, n("div", {
+        default: () => [se, re, n("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
           "aria-colcount": this.getAriaColCount,
           "aria-rowcount": this.getAriaRowCount
-        }, [ae, n("div", {
+        }, [de, n("div", {
           class: "k-grid-container",
           role: "presentation"
         }, [n("div", {
@@ -1280,15 +1286,15 @@ const Pi = /* @__PURE__ */ at({
           role: "none",
           class: this.gridTableClass,
           ref: G(this, "table")
-        }, [pe, n("tbody", {
+        }, [ce, n("tbody", {
           class: "k-table-tbody",
           role: "rowgroup",
           "data-keyboardnavbody": !0,
           ref: G(this, "tableBody")
-        }, [K])]), U && n(je, {
-          id: E.generateNavigatableId("no-records", R)
+        }, [K])]), U && n(qe, {
+          id: z.generateNavigatableId("no-records", R)
         }, {
-          default: () => [P.length ? P : n(Be, null, null)]
+          default: () => [M.length ? M : n(je, null, null)]
         })]), !U && n("div", {
           class: "k-height-container",
           role: "presentation"
@@ -1297,7 +1303,7 @@ const Pi = /* @__PURE__ */ at({
           style: this.$props.scrollable === "virtual" ? {
             height: this._containerHeightRef + "px"
           } : {}
-        }, null)])]), ce]), oe, Ye]), he, le]
+        }, null)])])]), he, Ze]), ue, j, ae]
       })]
     });
   }