@progress/kendo-vue-grid 7.0.3-develop.1 → 7.1.0-develop.2

package/Grid.mjs

@@ -5,117 +5,52 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as Ge, createVNode as o, h as ae, ref as $, markRaw as M } from "vue";
-import { SvgIcon as De, getDefaultSlots as Te, isObject as E, canUseDOM as U, templateRendering as y, getListeners as R, WatermarkOverlay as Oe, getter as q, getTemplate as ne, setRef as A, hasListener as D, getRef as b, kendoThemeMaps as de, isRtl as he, validatePackage as Le, shouldShowValidationUI as Me, getLicenseMessage as Ee, guid as pe, getNestedValue as ce } from "@progress/kendo-vue-common";
-import { tableKeyboardNavigationTools as I, tableColumnsVirtualization as Ae, Pager as Pe, normalize as Ne, TableKeyboardNavigationProvider as ue } from "@progress/kendo-vue-data-tools";
-import { Loader as Ve } from "@progress/kendo-vue-indicators";
-import { GridNav as ge } from "./GridNav.mjs";
-import { GridSelectionCell as Be } from "./cells/GridSelectionCell.mjs";
-import { GridHierarchyCell as We } from "./cells/GridHierarchyCell.mjs";
-import { GridDetailHierarchyCell as je } from "./cells/GridDetailHierarchyCell.mjs";
-import { GridDetailCell as Ke } from "./cells/GridDetailCell.mjs";
-import { GridEditCell as Ue } from "./cells/GridEditCell.mjs";
-import { Header as qe } from "./header/Header.mjs";
-import { HeaderRow as Je } from "./header/HeaderRow.mjs";
-import { FilterRow as Qe } from "./header/FilterRow.mjs";
-import { GroupPanel as Xe } from "./header/GroupPanel.mjs";
-import { Footer as Ye } from "./footer/Footer.mjs";
-import { FooterRow as Ze } from "./footer/FooterRow.mjs";
-import { operators as fe } from "./filterCommon.mjs";
-import { VirtualScroll as J } from "./VirtualScroll.mjs";
-import { VirtualScrollFixed as et, RowHeightService as tt } from "./VirtualScrollFixed.mjs";
-import { ColumnResize as st } from "./drag/ColumnResize.mjs";
-import { CommonDragLogic as it } from "./drag/CommonDragLogic.mjs";
-import { DragClue as rt } from "./drag/DragClue.mjs";
-import { DropClue as ot } from "./drag/DropClue.mjs";
-import { applyExpandedState as me, flatData as lt, readColumns as at, autoGenerateColumns as nt, mapColumns as dt, groupedFirstItemValue as $e, firefox as ht, firefoxMaxHeight as pt } from "./utils/main.mjs";
-import { GridCell as ct } from "./cells/GridCell.mjs";
-import { GridGroupCell as be } from "./cells/GridGroupCell.mjs";
-import { GridRow as ut } from "./rows/GridRow.mjs";
-import { GridHeaderSelectionCell as gt } from "./header/GridHeaderSelectionCell.mjs";
-import { GridNoRecords as ft } from "./GridNoRecords.mjs";
-import { packageMetadata as Q } from "./package-metadata.mjs";
-import { pagerMessagesMap as Ce } from "./messages/main.mjs";
-const Jt = /* @__PURE__ */ Ge({
+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 { 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 { 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 { 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({
   name: "KendoGrid",
+  inheritAttrs: !1,
   props: {
-    topCacheCount: {
-      type: Number,
-      default: 0
-    },
-    collapsedGroups: {
-      type: Array,
-      default: function() {
-        return [];
-      }
-    },
-    uniqueField: String,
-    totalGroupedHeight: Number,
-    allGroupedItems: Object,
-    alternatePerGroup: Boolean,
-    columns: Array,
-    columnVirtualization: Boolean,
-    dataItems: [Array, Object],
-    sortable: [Boolean, Object],
-    sort: Array,
-    filterable: Boolean,
-    filterOperators: Object,
-    filterCellRender: [String, Function, Object],
-    headerCellRender: [String, Function, Object],
-    loader: [String, Function, Object, Boolean],
-    filter: Object,
-    highlight: Object,
-    pageable: [Boolean, Object],
-    pageSize: Number,
-    total: Number,
-    skip: Number,
-    take: Number,
-    expandField: String,
-    expandColumn: Object,
-    selectedField: String,
-    cellRender: [String, Function, Object],
-    rowRender: [String, Function, Object],
-    resizable: Boolean,
-    reorderable: Boolean,
-    group: Array,
-    groupable: [Boolean, Object],
-    editField: String,
-    rowClass: Function,
-    scrollable: {
-      type: String,
-      default: "scrollable"
-    },
-    size: {
-      type: String,
-      default: "medium",
-      validator: function(e) {
-        return ["small", "medium"].includes(e);
-      }
-    },
-    pager: [String, Function, Object],
-    rowHeight: Number,
-    detailRowHeight: Number,
-    detail: [String, Function, Object],
-    columnMenu: [Boolean, String, Function, Object],
-    columnMenuAnimate: {
-      type: [Boolean, Object],
-      default: function() {
-        return !0;
-      }
+    ...Kt,
+    toolbar: {
+      type: Object
     },
-    columnMenuIcon: De,
-    dataItemKey: String,
-    navigatable: {
-      type: Boolean,
-      default: !1
-    },
-    onItemchange: Function,
-    onExpandchange: Function,
-    onDatastatechange: Function,
-    onPagechange: Function,
-    onSortchange: Function,
-    onFilterchange: Function,
-    onGroupchange: Function
+    noRecords: {
+      type: Object
+    }
   },
   data() {
     return {
@@ -139,32 +74,52 @@ const Jt = /* @__PURE__ */ Ge({
     }
   },
   created() {
-    Le(Q), this.showLicenseWatermark = Me(Q), this.licenseMessage = Ee(Q), this.initialHeight = null, this._columns = [];
+    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 it(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new st(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.forceUpdateTimeout = void 0, this._gridId = pe(), this._gridRoleElementId = pe(), this.slicedCurrentData = void 0, this._prevTotal = void 0;
+    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;
   },
   mounted() {
+    var t, s;
     this.setRefs();
-    const e = he(this._element);
-    this._prevTotal = this.$props.total, this.isRtl = e, this.initialHeight = this._element.style ? this._element.style.height : null, this.resizeObserver = U && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.resizeObserver && this.resizeObserver.observe(document.body);
+    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);
   },
   updated() {
     this.setRefs();
-    const e = he(this._element);
+    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 = "");
   },
   unmounted() {
     this.gridUnmounted();
   },
   computed: {
+    gridId() {
+      return this.$props.id + "-role-element-id";
+    },
+    idPrefix() {
+      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);
+    },
+    hierarchClass() {
+      return at.hierarchyCell({});
+    },
+    rowSpannable() {
+      return Ne(this.$props.rowSpannable);
+    },
+    detailExpandable() {
+      return Ct(!!this.$props.detail);
+    },
     nonscrollableWrapperClass() {
       const {
         size: e
-      } = this.$props;
+      } = this.$props, t = this.$attrs.class;
       return {
         "k-grid": !0,
         "k-grid-md": !e,
-        [`k-grid-${de.sizeMap[e] || e}`]: e
+        [`k-grid-${De.sizeMap[e] || e}`]: e,
+        [t]: !!t
       };
     },
     scrollableWrapperClass() {
@@ -184,14 +139,16 @@ const Jt = /* @__PURE__ */ Ge({
         "k-table": !0,
         "k-grid-table": !0,
         "k-grid-md": !e,
-        [`k-table-${de.sizeMap[e] || e}`]: e
+        [`k-table-${De.sizeMap[e] || e}`]: e
       };
     },
     getCorrectHeight() {
       return this.$props.scrollable === "virtual" ? this.initialHeight || "450px" : null;
     },
     currentGroupable() {
-      return this.$props.groupable === !0 && this.$props.group && this.$props.group.length || E(this.$props.groupable) && this.$props.groupable.enabled !== !1;
+      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;
     },
     computedCollapsed() {
       let e = [];
@@ -202,18 +159,53 @@ const Jt = /* @__PURE__ */ Ge({
     },
     // Calculates the value of the ariaRowcount attribute.
     getAriaRowCount() {
-      const e = this.$props.dataItems, t = this.$props.total !== void 0 && this.$props.total || e != null && e.total !== void 0 && e.total || e != null && e.length !== void 0 && e.length || 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);
+      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);
     },
     // 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, i = e && e.filter((r) => r.hidden !== void 0).length !== 0;
-      if (t || i)
-        return e.length !== 0 ? e.length : -1;
+      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)
+        return (e == null ? void 0 : e.length) !== 0 ? e == null ? void 0 : e.length : -1;
     }
   },
   methods: {
+    readColumnElements() {
+      return Nt(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;
+        e.push({
+          ...l,
+          hidden: a
+        }), t(l.children, a);
+      });
+      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);
+      })];
+    },
+    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);
+      return {
+        flattedData: h,
+        resolvedGroupsCount: c
+      };
+    },
     getColumnsEssentialProps(e) {
       return e && JSON.stringify(e.map((t) => ({
         id: t.id,
@@ -229,11 +221,11 @@ const Jt = /* @__PURE__ */ Ge({
     filterHiddenColumns(e) {
       if (!e || e.length === 0)
         return e;
-      const t = (i) => ({
-        ...i,
-        children: i.children && i.children.length > 0 ? this.filterHiddenColumns(i.children) : i.children
+      const t = (s) => ({
+        ...s,
+        children: s.children && s.children.length > 0 ? this.filterHiddenColumns(s.children) : s.children
       });
-      return [...e].filter((i) => !i.hidden).filter((i) => U && i && i.media ? window.matchMedia(i.media).matches : i).map((i) => t(i));
+      return [...e].filter((s) => !s.hidden).filter((s) => j && s && s.media ? window.matchMedia(s.media).matches : s).map((s) => t(s));
     },
     /**
      * A getter of the current columns. Gets the current column width or current columns,
@@ -243,36 +235,36 @@ const Jt = /* @__PURE__ */ Ge({
      * and check the properties afterwards. You can check the result in the browser console.
      */
     getColumns() {
-      const e = this._columns.filter((i) => i.declarationIndex >= 0 && i.parentIndex === -1), t = (i) => (i.sort((r, l) => r.declarationIndex - l.declarationIndex), i.map((r) => {
+      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 {
           declarationIndex: l,
-          parentIndex: n,
-          depth: g,
-          colSpan: p,
-          rowSpan: C,
-          index: k,
-          kFirst: S,
-          children: x,
-          ..._
-        } = r;
-        return x.length ? {
-          children: t(x),
-          ..._
-        } : _;
+          parentIndex: a,
+          depth: d,
+          colSpan: h,
+          rowSpan: c,
+          index: g,
+          kFirst: u,
+          children: v,
+          ...f
+        } = i;
+        return v.length ? {
+          children: t(v),
+          ...f
+        } : f;
       }));
       return t(e);
     },
     setRefs() {
       let e = "$el";
-      const t = b(this, "gridNav");
+      const t = R(this, "gridNav");
       t && (this._element = t[e]);
-      const i = b(this, "groupPanelDiv");
-      if (i) {
-        let n = i[e] || null;
-        this.dragLogic.refGroupPanelDiv(n);
+      const s = R(this, "groupPanelDiv");
+      if (s) {
+        let a = s[e] || null;
+        this.dragLogic.refGroupPanelDiv(a);
       }
-      const r = b(this, "dropElementClue"), l = b(this, "dragElementClue");
-      this.dragLogic.refDropElementClue(r), this.dragLogic.refDragElementClue(l), this.columnResize.colGroupMain = b(this, "colGroup"), this._header = b(this, "header"), this._footer = b(this, "footer"), this.vs.containerRef = b(this, "scrollContainer"), this.vs.table = b(this, "scrollTable"), this.resetTableWidth(), this.vs.tableBodyRef = b(this, "scrollTableBody");
+      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");
     },
     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();
@@ -281,7 +273,7 @@ const Jt = /* @__PURE__ */ Ge({
       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 J;
+      return Q;
     },
     isAllData() {
       const {
@@ -296,34 +288,34 @@ const Jt = /* @__PURE__ */ Ge({
       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(me(this.$props.allGroupedItems, this.computedCollapsed, this.$props.uniqueField).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) {
+      if (this.slicedCurrentData = void 0, this.vs instanceof Et) {
         const {
           rowHeight: t = 0,
-          detail: i,
-          expandField: r
+          detail: s,
+          expandField: i
         } = this.$props;
         let {
           detailRowHeight: l = 0
         } = this.$props;
-        l = i && r ? 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 tt(e, t, l);
-        const n = this.vs.rowHeightService.totalHeight();
-        this.vs.containerHeight = ht ? Math.min(pt, n) : n;
+        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;
       }
     },
     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));
     },
     onTotalChanged(e, t) {
-      const i = this.currentGroupable;
-      this.vs.reset(), this.vs = new J(i || this.$props.rowHeight === void 0 || this.$props.rowHeight === 0, this.$props.topCacheCount), this.resetVirtual(), this.setRefs();
+      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();
     },
     onRowHeightChanged(e, t) {
-      const i = this.currentGroupable;
-      this.vs.reset(), this.vs = new J(i || this.$props.rowHeight === void 0 || this.$props.rowHeight === 0, this.$props.topCacheCount), this.resetVirtual(), this.setRefs();
+      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();
     },
     scrollHandler(e) {
       clearTimeout(this.forceUpdateTimeout), this.$props.columnVirtualization && !this.vs.scrollableVirtual && (this.forceUpdateTimeout = setTimeout(() => {
@@ -342,29 +334,30 @@ const Jt = /* @__PURE__ */ Ge({
         ...this.getArguments(e)
       });
     },
-    loopGroupedItems(e, t, i = 0, r = null) {
+    loopGroupedItems(e, t, s = 0, i = null) {
       return e.forEach((l) => {
-        !r && t(l, i) && (r = l), l.items && l.items.length && !r && (r = this.loopGroupedItems(l.items, t, i + 1, r));
-      }), r;
+        !i && t(l, s) && (i = l), l.items && l.items.length && !i && (i = this.loopGroupedItems(l.items, t, s + 1, i));
+      }), i;
     },
     updateGroupCollapsed(e) {
-      let t = this.computedCollapsed, i = t[e.level];
-      const r = this.$props.uniqueField, l = function(p, C) {
-        return p.value === e.dataItem.value && C === e.level;
-      }, n = this.allGroupedItems ? this.loopGroupedItems(this.allGroupedItems.data, l, 0, null) : e.dataItem, g = $e(n || e.dataItem, r);
+      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);
       if (e.value) {
-        if (i && i.length) {
-          const p = i.indexOf(g);
-          p > -1 && i.splice(p, 1);
+        if (s && s.length) {
+          const h = s.indexOf(d);
+          h > -1 && s.splice(h, 1);
         }
       } else
-        i ? i.includes(g) || i.push(g) : i = [g];
+        s ? s.includes(d) || s.push(d) : s = [d];
       return t;
     },
     itemChange(e) {
-      const t = D.call(this, "itemchange");
-      if (e.field === this.$props.expandField || (this.$props.group || this.$props.detail) && e.field === void 0) {
-        D.call(this, "expandchange") && e.dataItem && this.$emit("expandchange", {
+      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", {
           ...this.getArguments(e.event),
           collapsedGroups: this.updateGroupCollapsed(e),
           dataItem: e.dataItem,
@@ -411,17 +404,17 @@ const Jt = /* @__PURE__ */ Ge({
     selectionChangeHandler(e) {
       const {
         event: t,
-        dataItem: i,
-        dataIndex: r,
+        dataItem: s,
+        dataIndex: i,
         columnIndex: l
       } = e;
       this.$emit("selectionchange", {
         ...this.getArguments(t.event),
-        dataItem: i,
+        dataItem: s,
         startColIndex: l,
         endColIndex: l,
-        startRowIndex: r,
-        endRowIndex: r,
+        startRowIndex: i,
+        endRowIndex: i,
         dataItems: this.getLeafDataItems(),
         altKey: !1,
         ctrlKey: !1,
@@ -471,90 +464,131 @@ const Jt = /* @__PURE__ */ Ge({
         skip: 0
       }, t);
     },
-    raiseDataEvent(e, t, i, r) {
-      D.call(this, e) ? this.$emit(e, {
-        ...this.getArguments(r),
+    handleDetailExpandAction(e, t) {
+      var s;
+      if (this.detailExpandable.enabled) {
+        const i = (s = this.gridContext.detailExpand) == null ? void 0 : s.value, l = mt(i != null ? i : {}, e);
+        this.raiseDataEvent("detailexpandchange", {
+          ...this.getArguments(t),
+          detailExpand: l
+        });
+      }
+    },
+    handleGroupExpandAction(e, t) {
+      var s;
+      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", {
+          ...this.getArguments(t),
+          groupExpand: l
+        });
+      }
+    },
+    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
-      }) : D.call(this, "datastatechange") && this.$emit("datastatechange", {
-        ...this.getArguments(r),
+      }) : z.call(this, "datastatechange") && this.$emit("datastatechange", {
+        ...this.getArguments(i),
         data: {
           ...this.getDataState(),
-          ...i
+          ...s
         }
       });
     },
-    columnReorder(e, t, i) {
-      const r = this._columns[e].depth, l = (p) => {
+    columnReorder(e, t, s) {
+      const i = this._columns[e], l = Ve(this.currentColumnsState), a = i.depth, d = (u) => {
         do
-          p++;
-        while (p < this._columns.length && this._columns[p].depth > r);
-        return p;
-      }, n = this._columns.splice(e, l(e) - e);
-      this._columns.splice(e < t ? l(t - n.length) : t, 0, ...n), this._columns.filter((p) => p.declarationIndex >= 0).forEach((p, C) => p.orderIndex = C);
+          u++;
+        while (u < this._columns.length && this._columns[u].depth > a);
+        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);
+      });
+      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();
       this.$emit("columnreorder", {
         target: this,
         columns: g,
-        event: i,
+        event: s,
         prev: e,
         next: t
+      }), this.gridContext.columnsstatechange({
+        columnsState: this.currentColumnsState
       });
     },
-    groupReorder(e, t, i) {
-      if (this.$props.group === void 0)
-        return;
-      const r = this.$props.group.slice();
-      r.splice(t, 0, ...r.splice(e, 1)), this.groupChangeHandler(r, i);
+    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));
     },
-    columnToGroup(e, t, i) {
-      const r = this._columns[e].field;
-      if (!r)
+    columnToGroup(e, t, s) {
+      var a;
+      const i = this._columns[e].field;
+      if (!i)
         return;
-      const l = (this.$props.group || []).slice();
+      const l = (((a = this.gridContext.group) == null ? void 0 : a.value) || []).slice();
       l.splice(t, 0, {
-        field: r
-      }), this.groupChangeHandler(l, i);
+        field: i
+      }), this.groupChangeHandler(l, s);
     },
     resetTableWidth() {
       let e = 0;
       if (!this.columnResize.colGroupMain)
         return;
       const t = this.columnResize.colGroupMain.children;
-      for (let i = 0; i < t.length; i++) {
-        const r = t[i].width;
-        if (!r)
+      for (let s = 0; s < t.length; s++) {
+        const i = t[s].width;
+        if (!i)
           return;
-        e += parseFloat(r.toString());
+        e += parseFloat(i.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");
     },
-    onResize(e, t, i, r, l) {
-      this.resetTableWidth(), this.$emit("columnresize", {
+    onResize(e, t, s, i, l, a, d) {
+      this.resetTableWidth(), this.shouldUpdateLeftRightRef = !0, this.resizedRef = !0, this.$emit("columnresize", {
         columns: this.getColumns(),
         index: e,
-        event: r,
+        targetColumnId: d,
+        event: i,
         newWidth: t,
-        oldWidth: i,
+        oldWidth: s,
         end: l,
         target: this
+      }), l && this.gridContext.columnsstatechange({
+        columnsState: a
       });
     },
-    initColumns(e, t) {
-      const i = I.getIdPrefix(this.navigation);
-      if (this._columns = at(e, this.getColumns(), {
-        prevId: 0,
-        idPrefix: i
-      }), this._columns.length === 0) {
-        const n = nt(this.$props.dataItems, this.$props.group, this.$props.expandField, {
-          prevId: 0,
-          idPrefix: i
-        });
-        this._columns = n;
-      }
-      this.$props.selectedField && this._columns.filter((n) => n.field === this.$props.selectedField).forEach((n) => {
-        n.width = n.width || "50px", n.internalCell = M(Be), n.internalHeaderCell = M(gt);
+    initColumnsState(e, t) {
+      const s = (i) => {
+        var a;
+        const l = t.find((d) => d.id === i.id);
+        if (l) {
+          const d = {
+            ...l
+          };
+          return d.children = (a = i.children) == null ? void 0 : a.map(s), d;
+        }
+        return i;
+      };
+      this.currentColumnsState = e.filter((i) => i.parentIndex === -1).map(s);
+    },
+    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);
       });
-      const r = {
+      const s = Ve(this.currentColumnsState);
+      this.initColumnsState(e, s);
+      const i = {
         id: "",
         resizable: !0,
         width: "32px",
@@ -565,52 +599,84 @@ const Jt = /* @__PURE__ */ Ge({
         parentIndex: -1,
         depth: 0,
         colSpan: 0,
+        headerColSpan: 0,
         rowSpan: 0,
         left: 0,
         right: 0,
-        // position: 'sticky',
         index: 0,
         rightBorder: !1,
-        ariaColumnIndex: 1,
+        ariaColumnIndex: 0,
         isAccessible: !0
       };
       let l = 0;
-      this.$props.expandField && D.call(this, "expandchange") && this.$props.detail && (this._columns.unshift({
-        ...r,
-        internalCell: M(We),
+      if (console.log(this.detailExpandable.enabled, this.$props.detail), this.detailExpandable.enabled && this.$props.detail && !this.$props.expandField) {
+        const a = {
+          ...i,
+          _type: "expand",
+          id: H.generateNavigatableId(`${l++}`, "expand", "column"),
+          defaultCell: k(J),
+          internalCell: k(J),
+          field: this.detailExpandable.column,
+          headerClassName: this.hierarchClass
+        };
+        e.unshift(a), this.currentColumnsState.unshift(s.find((d) => d.id === a.id) || a);
+      }
+      this.$props.expandField && z.call(this, "expandchange") && this.$props.detail && (e.unshift({
+        ...i,
+        internalCell: k(J),
         field: this.$props.expandField,
         headerClassName: "k-hierarchy-cell k-header",
-        id: I.generateNavigatableId(`${this._columns.length}`, i, "column"),
+        id: H.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
         ...this.expandColumn
       }), l++);
-      for (let n = 0; n < t; n++)
-        this._columns.unshift({
-          ...r,
+      for (let a = 0; a < t; a++) {
+        const d = {
+          ...i,
           isAccessible: !1,
-          internalCell: M(be),
-          field: "value"
-        }), l++;
-      this._columns.slice(l).forEach((n) => n.parentIndex >= 0 && (n.parentIndex += l)), this._columnsMap = dt(this._columns), this.columnResize.columns = this._columns, this.dragLogic.columns = this._columns;
+          defaultCell: k(X),
+          internalCell: k(X),
+          id: H.generateNavigatableId(`${l++}`, "group", "column"),
+          field: "value",
+          locked: this.$props.lockGroups
+        };
+        e.unshift(d), this.currentColumnsState.unshift(s.find((h) => h.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;
+      });
+    },
+    initColumns(e, t) {
+      var a;
+      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, {
+        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);
     },
     resolveTitle(e) {
-      const t = this.findColumnByField(e), i = t && (t.title || t.field);
-      return i === void 0 ? e : i;
+      const t = this.findColumnByField(e), s = t && (t.title || t.field);
+      return s === void 0 ? e : s;
     },
     findColumnByField(e) {
       let t;
-      return this.$props.columns.forEach((i) => {
-        const r = this.searchColumn(i, e);
-        r && (t = r);
+      return this.$props.columns.forEach((s) => {
+        const i = this.searchColumn(s, e);
+        i && (t = i);
       }), t;
     },
     searchColumn(e, t) {
       if (e.field === t)
         return e;
       if (e.children) {
-        let i, r = null;
-        for (i = 0; r == null && i < e.children.length; i++)
-          r = this.searchColumn(e.children[i], t);
-        return r;
+        let s, i = null;
+        for (s = 0; i == null && s < e.children.length; s++)
+          i = this.searchColumn(e.children[s], t);
+        return i;
       }
       return null;
     },
@@ -637,76 +703,164 @@ const Jt = /* @__PURE__ */ Ge({
       return e && (t = this.addSubItems(e, t)), t;
     },
     addSubItems(e, 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++;
+      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++;
       }), t;
+    },
+    searchChange(e) {
+      const t = this.$props.searchFields || this._columns.map((l) => l.field) || [], s = e.event.target.value, i = {
+        logic: "or",
+        filters: t.filter((l) => l !== void 0).map((l) => {
+          var a;
+          return typeof l == "string" ? {
+            field: l,
+            value: s,
+            operator: "contains"
+          } : {
+            value: s,
+            operator: (a = l.operator) != null ? a : "contains",
+            field: l.field,
+            ignoreCase: l.ignoreCase
+          };
+        })
+      };
+      this.raiseDataEvent("searchchange", {
+        search: i
+      }, {
+        skip: 0
+      }, e);
+    },
+    getCellsToRender(e, t) {
+      var a;
+      const s = [];
+      let i = null, l = 0;
+      if (t.forEach((d, h) => {
+        const c = parseFloat((d.width || "").toString()) || 10;
+        if (l) {
+          l--, i && (i.width += c);
+          return;
+        }
+        const g = Math.min(Ft(d, e), t.length - h);
+        l = g - 1, i = {
+          width: c,
+          colSpan: g,
+          columnIndex: h
+        }, s.push(i);
+      }), 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,
+          columns: t,
+          tableViewPortWidth: h,
+          scrollLeft: d
+        });
+      }
+      return s;
     }
   },
-  setup() {
-    const e = $(null), t = $(null), i = $(null), r = $(null), l = $(null), n = $(null), g = $(null), p = $(null), C = $(null), k = $(null);
+  provide() {
     return {
-      groupPanelDivRef: e,
-      dropElementClueRef: t,
+      kendo: {
+        dataItemKey: this.$props.dataItemKey,
+        searchChange: this.searchChange,
+        dispatchGroupExpand: this.handleGroupExpandAction,
+        dispatchDetailExpand: this.handleDetailExpandAction
+      }
+    };
+  },
+  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, {});
+    return {
+      groupPanelDivRef: t,
+      dropElementClueRef: s,
       dragElementClueRef: i,
-      headerRef: r,
-      footerRef: l,
-      gridNavRef: n,
-      colGroupRef: g,
-      scrollContainerRef: p,
-      scrollTableRef: C,
-      scrollTableBodyRef: k
+      headerRef: l,
+      footerRef: a,
+      gridNavRef: d,
+      colGroupRef: h,
+      scrollContainerRef: c,
+      scrollTableRef: g,
+      scrollTableBodyRef: u,
+      gridContext: E,
+      shouldUpdateLeftRightRef: v,
+      resizedRef: f,
+      currentColumnsState: e.columnsState
     };
   },
   render() {
-    const e = Te(this);
-    let t = this.$props.total || 0;
-    const i = I.getIdPrefix(this.navigation);
-    let r = [];
-    Array.isArray(this.$props.dataItems) ? r = this.$props.dataItems : this.$props.dataItems && (r = me(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField).data, t = t || this.$props.dataItems.total);
-    const l = this.$props.groupable === !0 || E(this.$props.groupable) && this.$props.groupable.enabled !== !1;
-    this.columnResize.resizable = this.$props.resizable || !1, this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = l, this.initializeVirtualization(t);
-    const n = E(this.$props.groupable) && this.$props.groupable.footer || "none";
-    this.currentData = [];
-    const g = lt(this.currentData, r, n, {
-      index: this.$props.skip || 0
-    }, this.$props.group !== void 0, this.$props.expandField), p = e || [];
-    this.notHiddenColumns = this.filterHiddenColumns(this.$props.columns), this.initColumns(this.notHiddenColumns, g);
-    const C = p.filter((s) => s && s.tag && s.tag.toLowerCase().indexOf("toolbar") !== -1 || s.componentOptions && s.componentOptions.tag && s.componentOptions.tag.toLowerCase().indexOf("toolbar") !== -1 || s.type && s.type.name && s.type.name.toLowerCase().indexOf("toolbar") !== -1), k = p.filter((s) => s && s.tag && s.tag.toLowerCase().indexOf("records") !== -1 || s.componentOptions && s.componentOptions.tag && s.componentOptions.tag.toLowerCase().indexOf("records") !== -1 || s.type && s.type.name && s.type.name.toLowerCase().indexOf("records") !== -1), S = this._columns.filter((s) => s.children.length === 0), x = l && o(Xe, {
-      ref: (s) => {
-        this.groupPanelDivRef = s;
+    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 ? {
+      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
+        } : {}
+      });
+      f = p, u = (we = this.$props.total) != null ? we : x;
+    }
+    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;
       },
-      group: this.$props.group || [],
+      group: a || [],
       ariaControls: this._gridRoleElementId,
       onGroupChange: this.groupChangeHandler,
       onPressHandler: this.dragLogic.pressHandler,
       onDragHandler: this.dragLogic.dragHandler,
       onReleaseHandler: this.dragLogic.releaseHandler,
       resolveTitle: this.resolveTitle
-    }, null), _ = (this.dragLogic.reorderable || this.dragLogic.groupable) && U && document && document.body, X = [_ && o(ot, {
-      ref: (s) => {
-        this.dropElementClueRef = s;
+    }, null), se = (this.dragLogic.reorderable || this.dragLogic.groupable) && j && document && document.body, ie = [se && o(Tt, {
+      ref: (r) => {
+        this.dropElementClueRef = r;
       }
-    }, null), _ && o(rt, {
-      ref: (s) => {
-        this.dragElementClueRef = s;
+    }, null), se && o(zt, {
+      ref: (r) => {
+        this.dragElementClueRef = r;
       }
-    }, null)], Y = o(qe, {
+    }, null)], re = o(wt, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
-      ref: (s) => {
-        this.headerRef = s;
+      ref: (r) => {
+        this.headerRef = r;
       },
-      headerRow: o(Je, {
+      headerRow: o(Rt, {
         grid: this,
-        sort: this.$props.sort,
+        sort: e,
         groupable: this.$props.groupable,
         reorderable: this.$props.reorderable,
         sortable: this.$props.sortable,
         onSortChange: this.sortChangeHandler,
-        filter: this.$props.filter,
+        filter: t,
         filterable: this.$props.filterable,
-        filterOperators: this.$props.filterOperators || fe,
+        filterOperators: this.$props.filterOperators || Ae,
         onFilterChange: this.filterChangeHandler,
         columnMenu: this.$props.columnMenu,
         columnMenuIcon: this.$props.columnMenuIcon,
@@ -722,12 +876,12 @@ const Jt = /* @__PURE__ */ Ge({
         cellRender: this.$props.headerCellRender,
         isRtl: this.isRtl,
         isColCountDefined: this.getAriaColCount !== void 0,
-        filterRow: this.$props.filterable && o(Qe, {
+        filterRow: this.$props.filterable && o(kt, {
           grid: this,
           size: this.$props.size,
           columns: this._columns,
-          filter: this.$props.filter,
-          filterOperators: this.$props.filterOperators || fe,
+          filter: t,
+          filterOperators: this.$props.filterOperators || Ae,
           onFilterchange: this.filterChangeHandler,
           sort: this.$props.sort,
           cellRender: this.$props.filterCellRender,
@@ -735,133 +889,127 @@ const Jt = /* @__PURE__ */ Ge({
           ariaRowIndex: this._columnsMap.length + 1
         }, null) || void 0
       }, null),
-      cols: S.map(function(s, d) {
+      cols: y.map(function(r, p) {
         return o("col", {
-          key: d.toString(),
-          width: s.width !== void 0 ? Math.floor(parseFloat(s.width.toString())) + "px" : void 0
+          key: p.toString(),
+          width: r.width !== void 0 ? Math.floor(parseFloat(r.width.toString())) + "px" : void 0
         }, null);
       }, this)
-    }, null), Z = this._columns.some((s) => !!s.footerCell) ? o(Ye, {
+    }, null), le = this._columns.some((r) => !!r.footerCell) ? o(St, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
-      ref: (s) => {
-        this.footerRef = s;
+      ref: (r) => {
+        this.footerRef = r;
       },
-      row: o(Ze, {
+      row: o(Ht, {
         isRtl: this.isRtl,
         rowIndex: this.getAriaRowCount + 1,
-        columns: this._columns.map(function(s) {
-          return {
-            ...s,
-            footerCell: y.call(this, s.footerCell, R.call(this))
-          };
-        }, this)
+        columns: this._columns
       }, null),
-      cols: S.map(function(s, d) {
+      cols: y.map(function(r, p) {
         return o("col", {
-          key: d.toString(),
-          width: s.width !== void 0 ? Math.floor(parseFloat(s.width.toString())) + "px" : void 0
+          key: p.toString(),
+          width: r.width !== void 0 ? Math.floor(parseFloat(r.width.toString())) + "px" : void 0
         }, null);
       }, this)
-    }, null) : o("span", null, null), P = y.call(this, this.$props.cellRender, R.call(this)), ve = this.showLicenseWatermark ? o(Oe, {
+    }, null) : o("span", null, null), Je = this.showLicenseWatermark ? o(lt, {
       message: this.licenseMessage
-    }, null) : null, N = this.$attrs.style, Ie = N && E(N) && N["width"] || "", we = parseFloat(Ie.toString()), ye = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, {
-      colSpans: V,
-      hiddenColumns: Re
-    } = Ae({
-      enabled: this.$props.columnVirtualization,
-      columns: this._columns,
-      tableViewPortWidth: we,
-      scrollLeft: ye
-    }), He = function(s, d, v) {
-      let F = !1;
-      const H = this.$props.selectedField, f = H ? ce(H, s.dataItem) : void 0, u = this.$props.highlight && this.$props.dataItemKey && q(this.$props.dataItemKey)(s.dataItem) !== void 0 ? this.$props.highlight[q(this.$props.dataItemKey)(s.dataItem)] : void 0;
-      return {
-        row: this._columns.map(function(a, h) {
-          if (Re[h])
-            return null;
-          const z = `${a.className ? a.className + " " : ""}${a.locked ? "k-grid-content-sticky" : ""}`, G = a.left !== void 0 ? this.isRtl ? {
-            left: a.right + "px",
-            right: a.left + "px"
+    }, 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
+        }) {
+          const n = y[C], S = `${n.className ? n.className + " " : ""}${n.locked ? "k-grid-content-sticky" : ""}`, w = n.left !== void 0 ? this.isRtl ? {
+            left: n.right + "px",
+            right: n.left + "px"
           } : {
-            left: a.left + "px",
-            right: a.right + "px"
+            left: n.left + "px",
+            right: n.right + "px"
           } : {};
-          let w = !1;
-          if (a.editable && this.$props.editField) {
-            const c = ce(this.$props.editField, s.dataItem);
-            (c === !0 || c === a.field) && (F = !0, w = !0);
+          let Se = !1;
+          if (n.editable && this.$props.editField) {
+            const m = Te(this.$props.editField, r.dataItem);
+            (m === !0 || m === n.field) && (D = !0, Se = !0);
           }
-          let m;
-          a.cell && (m = y.call(this, a.cell, R.call(this)));
-          const L = this.computedCollapsed && this.computedCollapsed[s.level] && this.computedCollapsed[s.level].some((c) => c === $e(s.dataItem, this.$props.uniqueField)), K = L ? !L : s.expanded;
-          return a.internalCell ? o(a.internalCell, {
-            key: h,
-            id: I.generateNavigatableId(`${d}-${String(h)}`, i),
-            colSpan: V[h],
-            dataItem: s.dataItem,
-            field: a.field || "",
-            editor: a.editor,
-            format: a.format,
-            readFormat: a.readFormat,
-            type: a.type,
-            className: z,
-            render: m || P,
+          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");
+          return n.internalCell ? o(n.internalCell, {
+            key: K,
+            id: B,
+            colSpan: G,
+            dataItem: r.dataItem,
+            field: n.field || "",
+            editor: n.editor,
+            format: n.format,
+            readFormat: n.readFormat,
+            type: n.type,
+            className: S,
+            render: L || this.$props.cellRender,
             onChange: this.itemChange,
-            onSelectionchange: (c) => this.selectionChangeHandler({
-              event: c,
-              dataItem: s.dataItem,
-              dataIndex: v,
-              columnIndex: h
+            onSelectionchange: (m) => this.selectionChangeHandler({
+              event: m,
+              dataItem: r.dataItem,
+              dataIndex: x,
+              columnIndex: C
             }),
-            columnIndex: h,
-            columnsCount: this._columns.filter((c) => !c.children.length).length,
-            rowType: s.rowType,
-            level: s.level,
-            expanded: K,
-            dataIndex: s.dataIndex,
-            style: G,
-            ariaColumnIndex: a.ariaColumnIndex,
+            columnIndex: C,
+            columnsCount: this._columns.filter((m) => !m.children.length).length,
+            rowType: r.rowType,
+            level: r.level,
+            expanded: U,
+            dataIndex: r.dataIndex,
+            style: w,
+            ariaColumnIndex: n.ariaColumnIndex,
             isRtl: this.isRtl,
-            isSelected: Array.isArray(f) && f.indexOf(h) > -1,
-            isHighlighted: !!(typeof u != "boolean" && u && a.field && u[a.field] === !0)
-          }, null) : w ? o(Ue, {
-            id: I.generateNavigatableId(`${d}-${String(h)}`, i),
-            key: h,
-            colSpan: V[h],
-            dataItem: s.dataItem,
-            field: a.field || "",
-            editor: a.editor,
-            format: a.format,
-            readFormat: a.readFormat,
-            type: a.type,
-            className: z,
-            render: m || P,
+            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,
+            field: n.field || "",
+            editor: n.editor,
+            format: n.format,
+            readFormat: n.readFormat,
+            type: n.type,
+            className: S,
+            render: L || this.$props.cellRender,
             onEdit: this.editHandler,
             onRemove: this.removeHandler,
             onSave: this.saveHandler,
             onCancel: this.cancelHandler,
             onChange: this.itemChange,
-            columnIndex: h,
-            columnsCount: this._columns.filter((c) => !c.children.length).length,
-            rowType: s.rowType,
-            level: s.level,
-            expanded: K,
-            dataIndex: s.dataIndex,
-            style: G
-          }, null) : o(ct, {
-            key: h,
-            id: I.generateNavigatableId(`${d}-${String(h)}`, i),
-            colSpan: V[h],
-            dataItem: s.dataItem,
-            field: a.field || "",
-            editor: a.editor,
-            format: a.format,
-            readFormat: a.readFormat,
-            type: a.type,
-            className: z,
-            render: m || P,
+            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,
+            field: n.field || "",
+            editor: n.editor,
+            format: n.format,
+            readFormat: n.readFormat,
+            type: n.type,
+            className: S,
+            render: L || this.$props.cellRender,
             onCellclick: this.cellClickHandler,
             onCellkeydown: this.cellKeydownHandler,
             onEdit: this.editHandler,
@@ -869,164 +1017,165 @@ const Jt = /* @__PURE__ */ Ge({
             onSave: this.saveHandler,
             onCancel: this.cancelHandler,
             onChange: this.itemChange,
-            onSelectionchange: (c) => this.selectionChangeHandler({
-              event: c,
-              dataItem: s.dataItem,
-              dataIndex: v,
-              columnIndex: h
+            onSelectionchange: (m) => this.selectionChangeHandler({
+              event: m,
+              dataItem: r.dataItem,
+              dataIndex: x,
+              columnIndex: C
             }),
-            columnIndex: h,
-            columnsCount: this._columns.filter((c) => !c.children.length).length,
-            rowType: s.rowType,
-            level: s.level,
-            expanded: K,
-            dataIndex: s.dataIndex,
-            style: G,
-            isSelected: Array.isArray(f) && f.indexOf(h) > -1,
-            isHighlighted: !!(typeof u != "boolean" && u && a.field && u[a.field] === !0)
+            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)
           }, null);
         }, this),
-        isInEdit: F,
-        isSelected: typeof f == "boolean" && f,
-        isHighlighted: typeof u == "boolean" && u
+        isInEdit: D,
+        isSelected: typeof I == "boolean" && I,
+        isHighlighted: typeof $ == "boolean" && $
       };
     };
-    let ee = 0;
+    let oe = 0;
     if (this.$props.scrollable === "virtual" && this.totalGroupedRows(this.currentData) / 2 > this.$props.take) {
-      const s = this.vs.topCacheCount + this.vs.attendedSkip - (this.$props.skip || 0);
-      for (let d = 0; d < s; ) {
-        const v = this.currentData.shift();
-        if (v)
-          this.currentData.push(v), ee++, v.rowType === "groupHeader" && d--;
+      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;
-        d++;
+        p++;
       }
     }
-    const te = (s) => s >= this.currentData.length - ee, ke = y.call(this, this.$props.detail, R.call(this));
-    let B = this.vs.propsSkip || 0;
+    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 O, W = -1, j = 0;
-    const se = this.currentData.length && this.currentData.map(function(s, d) {
-      s.rowType === "data" && (B++, W++), this.$props.alternatePerGroup && s.rowType === "groupHeader" && (B = 0);
-      const v = B % 2 === 0, F = this.$props.dataItemKey && q(this.$props.dataItemKey)(s.dataItem), H = d + (this.vs.propsSkip || 0), f = F || "ai" + H, u = f + "_1";
-      O = H + T + j;
-      const a = y.call(this, this.$props.rowRender, R.call(this));
-      let h;
-      this.$props.detail && s.rowType === "data" && s.expanded && (h = S.length - (this.$props.expandField ? 1 : 0) - (this.$props.group ? this.$props.group.length : 0) || 1, j++, O = H + T + j);
-      const z = d * 2 + T, G = d * 2 + T + 1, w = He.call(this, s, f, W);
-      return [o(ut, {
-        key: f,
-        dataItem: s.dataItem,
-        isAltRow: v,
-        isInEdit: w.isInEdit,
-        isSelected: w.isSelected,
-        isHighlighted: w.isHighlighted,
-        rowType: s.rowType,
-        isHidden: te(d),
-        onRowclick: (m) => this.rowClick(m, s),
-        onRowdblclick: (m) => this.rowDoubleClick(m, s),
+    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: a,
-        ariaRowIndex: this.$props.detail ? z : O,
-        dataIndex: W,
-        class: this.$props.rowClass ? this.$props.rowClass(s) : ""
+        render: this.$props.rowRender,
+        ariaRowIndex: this.$props.detail ? G : F,
+        dataIndex: O,
+        class: this.$props.rowClass ? this.$props.rowClass(r) : ""
       }, {
-        default: () => [w.row]
-      }), this.$props.detail && s.rowType === "data" && s.expanded && o("tr", {
-        key: u,
-        class: v ? "k-table-row k-table-alt-row k-detail-row" : "k-table-row k-detail-row",
+        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: te(d) ? "hidden" : "",
+          visibility: ne(p) ? "hidden" : "",
           height: this.$props.detailRowHeight + "px"
         },
         role: "row",
-        "aria-rowindex": this.$props.detail ? G : O
-      }, [this.$props.group && this.$props.group.map(function(m, L) {
-        return o(be, {
+        "aria-rowindex": this.$props.detail ? n : F
+      }, [a == null ? void 0 : a.map(function(w) {
+        return o(X, {
           id: "",
-          dataIndex: s.dataIndex,
-          field: m.field,
-          dataItem: s.dataItem,
-          key: L
+          dataIndex: r.dataIndex,
+          field: w.field,
+          dataItem: r.dataItem,
+          key: `group-${w.field}-${r.dataIndex}`,
+          group: r.group
         }, null);
-      }, this), this.$props.expandField && o(je, {
-        id: I.generateNavigatableId(`${u}-dhcell`, i)
-      }, null), o(Ke, {
-        dataItem: s.dataItem,
-        dataIndex: s.dataIndex,
-        colSpan: h,
-        ariaColIndex: 2 + (this.$props.group ? this.$props.group.length : 0),
-        detail: this.$props.detail ? ke : void 0,
-        id: I.generateNavigatableId(`${u}-dcell`, i)
+      }, 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((s) => !s.children.length).length
-    }, [k.length ? k : o(ft, null, null)])]), Se = y.call(this, this.$props.pager, R.call(this)), xe = this.$props.pageable && o(Pe, {
+      colspan: this._columns.filter((r) => !r.children.length).length
+    }, [ee.length ? ee : o(Ut, null, null)])]), Ye = this.$props.pageable && o(pt, {
       class: "k-grid-pager",
       onPagesizechange: this.pageChangeHandler,
       onPagechange: this.pageChangeHandler,
       size: this.$props.size,
-      total: t,
+      total: u,
       skip: this.vs.propsSkip || 0,
       pageSize: (this.$props.take !== void 0 ? this.$props.take : this.$props.pageSize) || 10,
-      messagesMap: Ce,
-      settings: Ne(this.$props.pageable || {})
-    }, null), ie = ne.call(this, {
-      h: ae,
-      template: Se,
-      defaultRendering: xe,
+      messagesMap: Ke,
+      settings: ut(this.$props.pageable || {})
+    }, null), he = _e.call(this, {
+      h: Ee,
+      template: this.$props.pager,
+      defaultRendering: Ye,
       additionalProps: {
         ...this.$props,
         skip: this.vs.propsSkip || 0,
-        messagesMap: Ce
+        messagesMap: Ke
       },
       additionalListeners: {
         pagesizechange: this.pageChangeHandler,
         pagechange: this.pageChangeHandler
       }
-    }), _e = (s) => this.$props.sort && this.$props.sort.filter((d) => d.field === s).length > 0, re = o("colgroup", {
+    }), Ze = (r) => e && e.filter((p) => p.field === r).length > 0, pe = o("colgroup", {
       ref: A(this, "colGroup")
-    }, [S.map(function(s, d) {
+    }, [y.map(function(r, p) {
       return o("col", {
-        key: d.toString(),
-        class: _e(s.field) ? "k-sorted" : void 0,
-        width: s.width !== void 0 ? s.width.toString().indexOf("%") !== -1 ? s.width : Math.floor(parseFloat(s.width.toString())) + "px" : void 0
+        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
       }, null);
-    }, this)]), oe = {
-      height: this.getCorrectHeight
-    }, Fe = y.call(this, this.$props.loader, R.call(this)), ze = this.$props.loader && o("div", {
+    }, this)]), ue = {
+      height: this.getCorrectHeight,
+      ...this.$attrs.style
+    }, et = 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"
     }, null), o("div", {
       class: "k-loader-container-inner"
-    }, [o(Ve, {
+    }, [o(bt, {
       size: "large",
       type: "infinite-spinner"
-    }, null)])]), le = ne.call(this, {
-      h: ae,
-      template: Fe,
-      defaultRendering: ze
+    }, null)])]), ce = ((ye = this.$props.showLoader) != null ? ye : !!this.$props.loader) && _e.call(this, {
+      h: Ee,
+      template: this.$props.loader,
+      defaultRendering: et
     });
-    return this.$props.scrollable === "none" ? o(ue, {
+    return this.$props.scrollable === "none" ? o(Fe, {
       ref: "navRef",
       id: this._gridId,
       navigatable: this.$props.navigatable
     }, {
-      default: () => [o(ge, {
-        ref: (s) => {
-          this.gridNavRef = s;
+      default: () => [o(Le, {
+        ref: (r) => {
+          this.gridNavRef = r;
         },
         currentData: this.currentData,
-        style: oe,
+        style: ue,
         class: this.nonscrollableWrapperClass
       }, {
-        default: () => [C, x, o("div", {
+        default: () => [Z, te, o("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
@@ -1038,31 +1187,31 @@ const Jt = /* @__PURE__ */ Ge({
             tableLayout: "fixed"
           },
           role: "none"
-        }, [re, Y, o("tbody", {
+        }, [pe, re, o("tbody", {
           class: "k-table-tbody",
           "data-keyboardnavbody": !0
-        }, [se, le]), Z])]), ie, X]
+        }, [de, ce]), le])]), he, ie]
       })]
-    }) : o(ue, {
+    }) : o(Fe, {
       ref: "navRef",
       id: this._gridId,
       navigatable: this.$props.navigatable
     }, {
-      default: () => [o(ge, {
-        ref: (s) => {
-          this.gridNavRef = s;
+      default: () => [o(Le, {
+        ref: (r) => {
+          this.gridNavRef = r;
         },
         currentData: this.currentData,
-        style: oe,
+        style: ue,
         class: this.scrollableWrapperClass
       }, {
-        default: () => [C, x, o("div", {
+        default: () => [Z, te, o("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
           "aria-colcount": this.getAriaColCount,
           "aria-rowcount": this.getAriaRowCount
-        }, [Y, o("div", {
+        }, [re, o("div", {
           class: "k-grid-container",
           role: "presentation"
         }, [o("div", {
@@ -1077,23 +1226,23 @@ const Jt = /* @__PURE__ */ Ge({
           role: "none",
           class: this.gridTableClass,
           ref: A(this, "scrollTable")
-        }, [re, o("tbody", {
+        }, [pe, o("tbody", {
           class: "k-table-tbody",
           role: "rowgroup",
           "data-keyboardnavbody": !0,
           ref: A(this, "scrollTableBody")
-        }, [se])])]), o("div", {
+        }, [de])])]), o("div", {
           class: "k-height-container",
           role: "presentation"
         }, [o("div", {
           style: this.$props.scrollable === "virtual" ? {
             height: this.vs.containerHeight + "px"
           } : {}
-        }, null)])]), le]), Z, ve]), ie, X]
+        }, null)])]), ce]), le, Je]), he, ie]
       })]
     });
   }
 });
 export {
-  Jt as Grid
+  Gs as Grid
 };