@progress/kendo-vue-grid 8.3.0-develop.2 → 8.3.0-develop.5

package/Grid.mjs

@@ -5,53 +5,53 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as Rt, createVNode as d, h as Fe, Fragment as Le, createTextVNode as Ct, ref as g, inject as bt, computed as Ke, markRaw as k } from "vue";
-import { isObject as j, cloneArray as St, canUseDOM as q, WatermarkOverlay as xt, getter as M, getTemplate as _e, setRef as y, hasListener as _, getComponentElementRef as Ae, getRef as x, RowHeightService as It, setScrollbarWidth as $t, kendoThemeMaps as Be, uGrid as wt, isRtl as Ve, validatePackage as yt, shouldShowValidationUI as vt, getLicenseMessage as kt, guid as Oe } from "@progress/kendo-vue-common";
-import { tableKeyboardNavigationTools as P, combineFilters as Ht, Pager as Tt, normalize as Mt, TableKeyboardNavigationProvider as Ne, HeaderCell as Pt, updateLeft as zt, updateRight as Et, groupExpandReducer as Dt, detailExpandReducer as Gt, getSelectedState as We, getSelectedStateFromKeyDown as Ft, closestTagName as Ue, getColumnIndex as Lt, getRowIndex as Kt, getDetailExpandableOptions as _t, getSelectionOptions as At, getGroupExpandableOptions as Bt } from "@progress/kendo-vue-data-tools";
-import { Loader as Vt } from "@progress/kendo-vue-indicators";
-import { GridNav as je } from "./GridNav.mjs";
-import { GridSelectionCell as qe } from "./cells/GridSelectionCell.mjs";
-import { GridHierarchyCell as Je } from "./cells/GridHierarchyCell.mjs";
-import { GridDetailHierarchyCell as Ot } from "./cells/GridDetailHierarchyCell.mjs";
-import { GridDetailCell as Nt } from "./cells/GridDetailCell.mjs";
-import { Header as Wt } from "./header/Header.mjs";
-import { HeaderRow as Ut } from "./header/HeaderRow.mjs";
-import { FilterRow as jt } from "./header/FilterRow.mjs";
-import { GroupPanel as qt } from "./header/GroupPanel.mjs";
-import { Footer as Jt } from "./footer/Footer.mjs";
-import { FooterRow as Xt } from "./footer/FooterRow.mjs";
-import { GridTable as Yt } from "./components/table/GridTable.mjs";
-import { GridTableScrollable as Qt } from "./components/table/GridTableScrollable.mjs";
-import { operators as Xe } from "./filterCommon.mjs";
-import { VirtualScroll as Zt } from "./VirtualScroll.mjs";
-import { ColumnResize as es } from "./drag/ColumnResize.mjs";
-import { CommonDragLogic as ts } from "./drag/CommonDragLogic.mjs";
-import { DragClue as ss } from "./drag/DragClue.mjs";
-import { DropClue as is } from "./drag/DropClue.mjs";
-import { applyExpandedState as os, getColSpan as ns, autoGenerateColumns as rs, mapColumns as ls, getFlatColumnsState as Ye, getRowSpanOptions as Qe, getDataAsArray as as, groupedFirstItemValue as ds, calcRowHeight as hs, flatData as cs, readColumns as ps } from "./utils/main.mjs";
-import { GridGroupCell as Ze } from "./cells/GridGroupCell.mjs";
-import { GridRow as us } from "./rows/GridRow.mjs";
-import { gridProps as fs } from "./common.mjs";
-import { GridHeaderSelectionCell as et } from "./header/GridHeaderSelectionCell.mjs";
-import { GridNoRecords as tt } from "./components/noRecords/GridNoRecords.mjs";
-import { GridNoRecordsContainer as st } from "./components/noRecords/GridNoRecordsContainer.mjs";
-import { packageMetadata as he } from "./package-metadata.mjs";
-import { pagerMessagesMap as it } from "./messages/messagesMap.mjs";
-import { process as ms, orderBy as ot } from "@progress/kendo-data-query";
-import { KendoKey as gs } from "./key.mjs";
-import { getVirtualCellsToRender as Rs } from "./utils/virtualColumns.mjs";
-import { StickyGroupTable as nt } from "./components/StickyGroupTable.mjs";
-import { getRowContents as Cs } from "./getRowContents.mjs";
-import { useStickyGroups as bs } from "./hooks/useStickyGroups.mjs";
-import { PinnedRowsTable as rt } from "./components/PinnedRowsTable.mjs";
-import { GridPinCell as Ss } from "./cells/pincell/GridPinCell.mjs";
-import { contextMenuItemsMap as xs, GridContextMenu as Is, getDefaultBodyContextMenuItems as $s, getDefaultHeadContextMenuItems as ws } from "./contextMenu/GridContextMenu.mjs";
-import { GridContextMenuItemNames as J, GridContextMenuAnchorPart as lt } from "./contextMenu/enums.mjs";
-const fi = /* @__PURE__ */ Rt({
+import { defineComponent as bt, createVNode as d, h as Le, Fragment as Ke, createTextVNode as St, ref as R, inject as It, computed as _e, markRaw as H } from "vue";
+import { isObject as q, cloneArray as xt, canUseDOM as B, WatermarkOverlay as $t, getter as M, getTemplate as Ae, setRef as y, hasListener as L, getComponentElementRef as Be, getRef as S, RowHeightService as vt, setScrollbarWidth as wt, kendoThemeMaps as Ve, uGrid as yt, isRtl as Oe, validatePackage as kt, shouldShowValidationUI as Ht, getLicenseMessage as Tt, guid as Ne } from "@progress/kendo-vue-common";
+import { tableKeyboardNavigationTools as E, combineFilters as Mt, Pager as Et, normalize as Pt, TableKeyboardNavigationProvider as We, HeaderCell as zt, updateLeft as Dt, updateRight as Gt, groupExpandReducer as Ft, detailExpandReducer as Lt, getSelectedState as Ue, getSelectedStateFromKeyDown as Kt, closestTagName as je, getColumnIndex as _t, getRowIndex as At, ClipboardActionType as he, populateClipboardData as Bt, getDetailExpandableOptions as Vt, getSelectionOptions as Ot, getGroupExpandableOptions as Nt, ClipboardService as qe } from "@progress/kendo-vue-data-tools";
+import { Loader as Wt } from "@progress/kendo-vue-indicators";
+import { GridNav as Je } from "./GridNav.mjs";
+import { GridSelectionCell as Xe } from "./cells/GridSelectionCell.mjs";
+import { GridHierarchyCell as Ye } from "./cells/GridHierarchyCell.mjs";
+import { GridDetailHierarchyCell as Ut } from "./cells/GridDetailHierarchyCell.mjs";
+import { GridDetailCell as jt } from "./cells/GridDetailCell.mjs";
+import { Header as qt } from "./header/Header.mjs";
+import { HeaderRow as Jt } from "./header/HeaderRow.mjs";
+import { FilterRow as Xt } from "./header/FilterRow.mjs";
+import { GroupPanel as Yt } from "./header/GroupPanel.mjs";
+import { Footer as Qt } from "./footer/Footer.mjs";
+import { FooterRow as Zt } from "./footer/FooterRow.mjs";
+import { GridTable as es } from "./components/table/GridTable.mjs";
+import { GridTableScrollable as ts } from "./components/table/GridTableScrollable.mjs";
+import { operators as Qe } from "./filterCommon.mjs";
+import { VirtualScroll as ss } from "./VirtualScroll.mjs";
+import { ColumnResize as is } from "./drag/ColumnResize.mjs";
+import { CommonDragLogic as os } from "./drag/CommonDragLogic.mjs";
+import { DragClue as ns } from "./drag/DragClue.mjs";
+import { DropClue as rs } from "./drag/DropClue.mjs";
+import { applyExpandedState as as, getColSpan as ls, autoGenerateColumns as ds, mapColumns as hs, getFlatColumnsState as Ze, getRowSpanOptions as et, getDataAsArray as cs, groupedFirstItemValue as ps, calcRowHeight as us, flatData as fs, readColumns as ms } from "./utils/main.mjs";
+import { GridGroupCell as tt } from "./cells/GridGroupCell.mjs";
+import { GridRow as gs } from "./rows/GridRow.mjs";
+import { gridProps as Rs } from "./common.mjs";
+import { GridHeaderSelectionCell as st } from "./header/GridHeaderSelectionCell.mjs";
+import { GridNoRecords as it } from "./components/noRecords/GridNoRecords.mjs";
+import { GridNoRecordsContainer as ot } from "./components/noRecords/GridNoRecordsContainer.mjs";
+import { packageMetadata as ce } from "./package-metadata.mjs";
+import { pagerMessagesMap as nt } from "./messages/messagesMap.mjs";
+import { process as Cs, orderBy as rt } from "@progress/kendo-data-query";
+import { KendoKey as bs } from "./key.mjs";
+import { getVirtualCellsToRender as Ss } from "./utils/virtualColumns.mjs";
+import { StickyGroupTable as at } from "./components/StickyGroupTable.mjs";
+import { getRowContents as Is } from "./getRowContents.mjs";
+import { useStickyGroups as xs } from "./hooks/useStickyGroups.mjs";
+import { PinnedRowsTable as lt } from "./components/PinnedRowsTable.mjs";
+import { GridPinCell as $s } from "./cells/pincell/GridPinCell.mjs";
+import { contextMenuItemsMap as vs, GridContextMenu as ws, getDefaultBodyContextMenuItems as ys, getDefaultHeadContextMenuItems as ks } from "./contextMenu/GridContextMenu.mjs";
+import { GridContextMenuItemNames as J, GridContextMenuAnchorPart as dt } from "./contextMenu/enums.mjs";
+const Ri = /* @__PURE__ */ bt({
   name: "KendoGrid",
   inheritAttrs: !1,
   props: {
-    ...fs,
+    ...Rs,
     toolbar: {
       type: Object
     },
@@ -79,6 +79,9 @@ const fi = /* @__PURE__ */ Rt({
     };
   },
   watch: {
+    clipboard: function(e) {
+      e ? this.clipboardServiceRef || (this.clipboardServiceRef = new qe(this.handleClipboardEvent), this.clipboardServiceRef.addEventListeners(document)) : this.clipboardServiceRef && (this.clipboardServiceRef.removeEventListeners(document), this.clipboardServiceRef = null);
+    },
     rowHeight: function(e, t) {
       var s;
       this.onRowHeightChanged(e, t), (s = this.vsRef) == null || s.reset();
@@ -105,24 +108,25 @@ const fi = /* @__PURE__ */ Rt({
     }
   },
   created() {
-    yt(he), this.showLicenseWatermark = vt(he), this.licenseMessage = kt(he), this.initialHeight = null, this.columnsRef = [], this.dragLogic = new ts(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new es(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.tableRef = null, this.scrollHeightContainerRef = null, this.forceUpdateTimeout = void 0, this._gridId = Oe(), this._gridRoleElementId = Oe(), this.slicedCurrentData = void 0, this._prevTotal = void 0, this._containerHeightRef = 0, this._minRowHeightRef = 0, this.wrapperScrollTopRef = 0, this.scrollLeftRef = 0;
+    kt(ce), this.showLicenseWatermark = Ht(ce), this.licenseMessage = Tt(ce), this.initialHeight = null, this.columnsRef = [], this.dragLogic = new os(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new is(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.tableRef = null, this.scrollHeightContainerRef = null, this.forceUpdateTimeout = void 0, this._gridId = Ne(), this._gridRoleElementId = Ne(), this.slicedCurrentData = void 0, this._prevTotal = void 0, this._containerHeightRef = 0, this._minRowHeightRef = 0, this.wrapperScrollTopRef = 0, this.scrollLeftRef = 0, this.previousCopiedItems = [], this.clipboardServiceRef = null;
   },
   mounted() {
     var t, s;
     this.setRefs();
-    const e = Ve(this._element);
-    if (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 = q && (window == null ? void 0 : window.ResizeObserver) && new ResizeObserver(this.calculateMedia), document != null && document.body && this.resizeObserver && this.resizeObserver.observe(document.body), q) {
+    const e = Oe(this._element);
+    if (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 = B && (window == null ? void 0 : window.ResizeObserver) && new ResizeObserver(this.calculateMedia), document != null && document.body && this.resizeObserver && this.resizeObserver.observe(document.body), B) {
       const i = {
         rootMargin: "0px",
         threshold: 0.9
       };
       this.observerRef = window.IntersectionObserver && new window.IntersectionObserver(this.handleIntersection, i) || null;
     }
+    this.$props.clipboard && (this.clipboardServiceRef = new qe(this.handleClipboardEvent), this.clipboardServiceRef.addEventListeners(document));
   },
   updated() {
     var s;
     this.setRefs();
-    const e = Ve(this._element);
+    const e = Oe(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 = "");
     const t = this.updateStickyGroups();
     this.sticky.headerItems = t == null ? void 0 : t.stickyHeaderItems, this.sticky.footerItems = t == null ? void 0 : t.stickyFooterItems, this.isVirtualScroll && (this.setContainerHeight(), this.setMinRowHeight(), (s = this.vsRef) == null || s.update());
@@ -138,19 +142,19 @@ const fi = /* @__PURE__ */ Rt({
       return this.$props.navigatable ? this.gridId : "";
     },
     groupExpandable() {
-      return Bt(typeof this.$props.groupable == "object" && this.$props.groupable.enabled !== !1 ? this.$props.groupable.expandable : this.$props.groupable);
+      return Nt(typeof this.$props.groupable == "object" && this.$props.groupable.enabled !== !1 ? this.$props.groupable.expandable : this.$props.groupable);
     },
     hierarchClass() {
-      return wt.hierarchyCell({});
+      return yt.hierarchyCell({});
     },
     computedRowSpannable() {
-      return Qe(this.$props.rowSpannable);
+      return et(this.$props.rowSpannable);
     },
     computedSelectable() {
-      return At(this.$props.selectable);
+      return Ot(this.$props.selectable);
     },
     detailExpandable() {
-      return _t(!!this.$props.detail);
+      return Vt(!!this.$props.detail);
     },
     nonscrollableWrapperClass() {
       const {
@@ -159,7 +163,7 @@ const fi = /* @__PURE__ */ Rt({
       return {
         "k-grid": !0,
         "k-grid-md": !e,
-        [`k-grid-${Be.sizeMap[e] || e}`]: e,
+        [`k-grid-${Ve.sizeMap[e] || e}`]: e,
         [t]: !!t
       };
     },
@@ -180,7 +184,7 @@ const fi = /* @__PURE__ */ Rt({
         "k-table": !0,
         "k-grid-table": !0,
         "k-grid-md": !e,
-        [`k-table-${Be.sizeMap[e] || e}`]: e
+        [`k-table-${Ve.sizeMap[e] || e}`]: e
       };
     },
     getCorrectHeight() {
@@ -189,7 +193,7 @@ const fi = /* @__PURE__ */ Rt({
     currentGroupable() {
       var t;
       const e = (t = this.gridStateContext.group) == null ? void 0 : t.value;
-      return this.$props.groupable === !0 && (e == null ? void 0 : e.length) || j(this.$props.groupable) && this.$props.groupable.enabled !== !1;
+      return this.$props.groupable === !0 && (e == null ? void 0 : e.length) || q(this.$props.groupable) && this.$props.groupable.enabled !== !1;
     },
     computedCollapsed() {
       let e = [];
@@ -202,12 +206,12 @@ const fi = /* @__PURE__ */ Rt({
     getAriaRowCount() {
       var s, i;
       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.columnsRef.some((n) => {
-        var o;
-        return !!(n.footerCell || (o = n.cells) != null && o.footerCell);
-      }) || (s = this.$props.cells) != null && 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.columnsRef.some((n) => {
-        var o;
-        return !!(n.footerCell || (o = n.cells) != null && o.footerCell);
+      return this.$props.detail ? this._columnsMap.length + (this.$props.filterable ? 1 : 0) + t * 2 + (this.columnsRef.some((o) => {
+        var n;
+        return !!(o.footerCell || (n = o.cells) != null && n.footerCell);
+      }) || (s = this.$props.cells) != null && 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.columnsRef.some((o) => {
+        var n;
+        return !!(o.footerCell || (n = o.cells) != null && n.footerCell);
       }) || (i = this.$props.cells) != null && i.footerCell ? 1 : 0);
     },
     // Calculates the value of the ariaColcount attribute.
@@ -228,12 +232,12 @@ const fi = /* @__PURE__ */ Rt({
     sortedPinnedTopRows() {
       var s, i;
       const e = ((s = this.gridStateContext.pinnedTopRows) == null ? void 0 : s.value) || [], t = (i = this.gridStateContext.sort) == null ? void 0 : i.value;
-      return this.autoProcessData && (t != null && t.length) ? ot([...e], t) : e;
+      return this.autoProcessData && (t != null && t.length) ? rt([...e], t) : e;
     },
     sortedPinnedBottomRows() {
       var s, i;
       const e = ((s = this.gridStateContext.pinnedBottomRows) == null ? void 0 : s.value) || [], t = (i = this.gridStateContext.sort) == null ? void 0 : i.value;
-      return this.autoProcessData && (t != null && t.length) ? ot([...e], t) : e;
+      return this.autoProcessData && (t != null && t.length) ? rt([...e], t) : e;
     },
     hasPinnedTopRows() {
       return this.$props.pinnable && this.sortedPinnedTopRows.length > 0;
@@ -247,25 +251,26 @@ const fi = /* @__PURE__ */ Rt({
     headMenuItems() {
       var t;
       const e = this.$props.sortable && ((t = this.contextMenuColumn) == null ? void 0 : t.sortable);
-      return ws({
+      return ks({
         sortable: !!e,
         selectable: this.computedSelectable.enabled
       });
     },
     bodyMenuItems() {
       var e;
-      return this.$props.sortable && ((e = this.contextMenuColumn) == null || e.sortable), $s({
+      return this.$props.sortable && ((e = this.contextMenuColumn) == null || e.sortable), ys({
         selectable: this.computedSelectable.enabled,
-        pinnable: !!this.$props.pinnable
+        pinnable: !!this.$props.pinnable,
+        clipboard: !!this.$props.clipboard
       });
     },
     contextMenuItems() {
       var s;
       const e = ((s = this.contextMenuColumn) == null ? void 0 : s.contextMenu) || this.$props.contextMenu, t = typeof e == "function" ? e(this.contextMenuState) : e;
       if (t && this.contextMenuState.offset) {
-        const i = this.contextMenuState.dataItem ? lt.body : lt.head, n = t[i], o = this.contextMenuState.dataItem ? this.bodyMenuItems : this.headMenuItems;
+        const i = this.contextMenuState.dataItem ? dt.body : dt.head, o = t[i], n = this.contextMenuState.dataItem ? this.bodyMenuItems : this.headMenuItems;
         let r;
-        return n === !0 || n === void 0 ? r = o : n !== !1 && (r = n), this.$props.pinnable && r && this.contextMenuState.dataItem ? this.filterPinContextMenuItems(r) : r;
+        return o === !0 || o === void 0 ? r = n : o !== !1 && (r = o), this.$props.pinnable && r && this.contextMenuState.dataItem ? this.filterPinContextMenuItems(r) : r;
       }
     }
   },
@@ -301,6 +306,40 @@ const fi = /* @__PURE__ */ Rt({
         field: void 0
       };
     },
+    inActiveElement() {
+      var o;
+      if (!B)
+        return !1;
+      const e = document == null ? void 0 : document.activeElement;
+      let t = document == null ? void 0 : document.body;
+      e != null && e.matches(".k-table-td") && (t = e);
+      const s = t == null ? void 0 : t.closest(".k-grid-container"), i = t && ((o = this._element) == null ? void 0 : o.contains(t));
+      return !!(t && i && s);
+    },
+    handleClipboardEvent(e, t, s, i, o) {
+      var h, u, p;
+      if (!this.inActiveElement() && !s || !e)
+        return;
+      const n = {
+        type: e,
+        nativeEvent: t,
+        columns: this.columnsRef,
+        dataItemKey: this.$props.dataItemKey || "",
+        dataItem: i,
+        field: o,
+        ...typeof this.$props.clipboard != "boolean" ? this.$props.clipboard : {},
+        ...s
+      }, r = this.getLeafDataItems(), a = Bt({
+        event: n,
+        data: r,
+        selectedState: (p = (u = this.$props.select) != null ? u : (h = this.gridStateContext.select) == null ? void 0 : h.value) != null ? p : {},
+        previousCopiedItems: this.previousCopiedItems
+      });
+      e !== he.paste && (this.previousCopiedItems = a.copiedItems), L.call(this, "clipboard") && this.$emit("clipboard", {
+        ...n,
+        ...a
+      });
+    },
     handleContextMenuSelect(e) {
       this.handleContextMenuItemClick({
         event: e,
@@ -310,7 +349,7 @@ const fi = /* @__PURE__ */ Rt({
     },
     renderContextMenu() {
       var e;
-      return d(Is, {
+      return d(ws, {
         show: !!(this.contextMenuState.show && ((e = this.contextMenuItems) != null && e.length)),
         dataItem: this.contextMenuState.dataItem,
         field: this.contextMenuState.field,
@@ -321,18 +360,18 @@ const fi = /* @__PURE__ */ Rt({
       }, null);
     },
     filterPinContextMenuItems(e) {
-      var c, f;
-      const t = this.$props.dataItemKey || "", s = this.contextMenuState.dataItem, i = ((c = this.gridStateContext.pinnedTopRows) == null ? void 0 : c.value) || [], n = ((f = this.gridStateContext.pinnedBottomRows) == null ? void 0 : f.value) || [], o = t ? s[t] : void 0, r = o !== void 0 && i.some((h) => h[t] === o), a = o !== void 0 && n.some((h) => h[t] === o);
-      return e.map((h) => {
-        const u = typeof h == "string" ? xs[h] : h;
-        return (u == null ? void 0 : u.name) === J.pinRow && u.items ? {
-          ...u,
-          items: u.items.filter((p) => p.name === J.pinTop ? !r : p.name === J.pinBottom ? !a : p.name === J.unpin ? r || a : !0)
-        } : h;
+      var h, u;
+      const t = this.$props.dataItemKey || "", s = this.contextMenuState.dataItem, i = ((h = this.gridStateContext.pinnedTopRows) == null ? void 0 : h.value) || [], o = ((u = this.gridStateContext.pinnedBottomRows) == null ? void 0 : u.value) || [], n = t ? s[t] : void 0, r = n !== void 0 && i.some((p) => p[t] === n), a = n !== void 0 && o.some((p) => p[t] === n);
+      return e.map((p) => {
+        const c = typeof p == "string" ? vs[p] : p;
+        return (c == null ? void 0 : c.name) === J.pinRow && c.items ? {
+          ...c,
+          items: c.items.filter((f) => f.name === J.pinTop ? !r : f.name === J.pinBottom ? !a : f.name === J.unpin ? r || a : !0)
+        } : p;
       });
     },
     handleContextMenuItemClick(e) {
-      var i, n, o, r, a, c, f;
+      var i, o, n, r, a, h, u, p;
       const t = e.event.event.item, s = {
         event: e.event,
         menuItem: t,
@@ -342,31 +381,31 @@ const fi = /* @__PURE__ */ Rt({
       switch (this.$emit("contextmenuitemclick", s), (i = t.data) == null ? void 0 : i.action) {
         case "SortCommand":
           if (this.contextMenuColumn) {
-            const h = (n = t.name) == null ? void 0 : n.toLowerCase().includes("asc"), p = ((o = t.name) == null ? void 0 : o.toLowerCase().includes("desc")) ? "desc" : void 0, R = h ? "asc" : p, C = t.name ? R : void 0, w = (((r = this.gridStateContext.sort) == null ? void 0 : r.value) || []).filter(($) => {
-              var b;
-              return $.field !== ((b = this.contextMenuColumn) == null ? void 0 : b.field);
+            const c = (o = t.name) == null ? void 0 : o.toLowerCase().includes("asc"), m = ((n = t.name) == null ? void 0 : n.toLowerCase().includes("desc")) ? "desc" : void 0, x = c ? "asc" : m, C = t.name ? x : void 0, $ = (((r = this.gridStateContext.sort) == null ? void 0 : r.value) || []).filter((w) => {
+              var I;
+              return w.field !== ((I = this.contextMenuColumn) == null ? void 0 : I.field);
             });
-            C && ((a = this.contextMenuColumn) != null && a.field) && w.push({
+            C && ((a = this.contextMenuColumn) != null && a.field) && $.push({
               field: this.contextMenuColumn.field,
               dir: C
-            }), this.sortChangeHandler(w, {
+            }), this.sortChangeHandler($, {
               event: e.event
             });
           }
           break;
         case "SelectRowCommand": {
-          const h = e.dataItem;
-          if (this.computedSelectable.enabled && h && this.$props.dataItemKey) {
-            const p = M(this.$props.dataItemKey)(h), R = this.getLeafDataItems(), C = R.findIndex((H) => H[this.$props.dataItemKey] === h[this.$props.dataItemKey]), I = 0, w = this.columnsRef.length - 1, $ = {
+          const c = e.dataItem;
+          if (this.computedSelectable.enabled && c && this.$props.dataItemKey) {
+            const m = M(this.$props.dataItemKey)(c), x = this.getLeafDataItems(), C = x.findIndex((z) => z[this.$props.dataItemKey] === c[this.$props.dataItemKey]), v = 0, $ = this.columnsRef.length - 1, w = {
               ...this.getArguments(e.event),
-              dataItem: h,
+              dataItem: c,
               startDataItem: C,
               endDataItem: C,
               startRowIndex: C,
               endRowIndex: C,
-              startColIndex: I,
-              endColIndex: w,
-              dataItems: R,
+              startColIndex: v,
+              endColIndex: $,
+              dataItems: x,
               ctrlKey: !1,
               altKey: !1,
               metaKey: !1,
@@ -376,27 +415,27 @@ const fi = /* @__PURE__ */ Rt({
               cell: this.computedSelectable.cell,
               componentId: this.$props.id || this._gridId,
               selectedField: this.$props.selectedField || ""
-            }, b = this.computedSelectable.mode === "multiple" ? {
-              ...(f = (c = this.gridStateContext.select) == null ? void 0 : c.value) != null ? f : {}
+            }, I = this.computedSelectable.mode === "multiple" ? {
+              ...(u = (h = this.gridStateContext.select) == null ? void 0 : h.value) != null ? u : {}
             } : {};
-            b[p] === !0 || Array.isArray(b[p]) && b[p].length === this.columnsRef.length ? delete b[p] : b[p] = this.computedSelectable.cell ? [...Array(this.columnsRef.length).keys()] : !0, this.raiseSelectionEvent($, b);
+            I[m] === !0 || Array.isArray(I[m]) && I[m].length === this.columnsRef.length ? delete I[m] : I[m] = this.computedSelectable.cell ? [...Array(this.columnsRef.length).keys()] : !0, this.raiseSelectionEvent(w, I);
           }
           break;
         }
         case "SelectAllRowsCommand": {
           if (this.computedSelectable.enabled && this.$props.dataItemKey) {
-            const h = this.getLeafDataItems(), u = {}, p = h[0], R = h[h.length - 1];
-            h.forEach((C) => {
-              const I = M(this.$props.dataItemKey)(C);
-              u[I] = this.computedSelectable.cell ? [...Array(this.columnsRef.length).keys()] : !0;
+            const c = this.getLeafDataItems(), f = {}, m = c[0], x = c[c.length - 1];
+            c.forEach((C) => {
+              const v = M(this.$props.dataItemKey)(C);
+              f[v] = this.computedSelectable.cell ? [...Array(this.columnsRef.length).keys()] : !0;
             }), this.raiseSelectionEvent({
               ...this.getArguments(e.event),
-              dataItems: h,
-              dataItem: p,
-              startDataItem: p,
-              endDataItem: R,
+              dataItems: c,
+              dataItem: m,
+              startDataItem: m,
+              endDataItem: x,
               startRowIndex: 0,
-              endRowIndex: h.length - 1,
+              endRowIndex: c.length - 1,
               startColIndex: 0,
               endColIndex: this.columnsRef.length - 1,
               ctrlKey: !1,
@@ -408,7 +447,7 @@ const fi = /* @__PURE__ */ Rt({
               cell: this.computedSelectable.cell,
               componentId: this.$props.id || this._gridId,
               selectedField: this.$props.selectedField || ""
-            }, u);
+            }, f);
           }
           break;
         }
@@ -440,6 +479,14 @@ const fi = /* @__PURE__ */ Rt({
         case "UnpinCommand":
           this.handleRowPin("unpin", e.dataItem);
           break;
+        case "CopySelectionCommand":
+          this.handleClipboardEvent(he.copy, e.event.nativeEvent, {
+            copyHeaders: !((p = t.name) != null && p.toLowerCase().includes("noheaders"))
+          }, e.dataItem, e.field);
+          break;
+        case "PasteCommand":
+          this.handleClipboardEvent(he.paste, e.event.nativeEvent, {}, e.dataItem, e.field);
+          break;
       }
       this.handleContextMenuClose();
     },
@@ -469,12 +516,12 @@ const fi = /* @__PURE__ */ Rt({
       const s = this._element;
       if (this.observerRef && s) {
         this.observerRef.disconnect();
-        const n = s.querySelector(`[absolute-row-index="${this.rowIndexRef.value}"]`);
-        n ? this.observerRef.observe(n) : this.setCurrentOnTop(e);
+        const o = s.querySelector(`[absolute-row-index="${this.rowIndexRef.value}"]`);
+        o ? this.observerRef.observe(o) : this.setCurrentOnTop(e);
       }
     },
     setCurrentOnTop(e) {
-      var i, n;
+      var i, o;
       if (!((i = this.vsRef) != null && i.container) || this.$props.scrollable === "none")
         return;
       this.observerRef && this.observerRef.disconnect();
@@ -482,11 +529,11 @@ const fi = /* @__PURE__ */ Rt({
         rowIndex: t
       } = e, s = this._element;
       if (this.isVirtualScroll) {
-        const o = ((n = this.vsRef.rowHeightService) == null ? void 0 : n.offset(t)) || 0;
-        this.vsRef.container.scroll(0, o);
+        const n = ((o = this.vsRef.rowHeightService) == null ? void 0 : o.offset(t)) || 0;
+        this.vsRef.container.scroll(0, n);
       } else if (s) {
-        const o = t < 1 ? s.querySelector("tbody > tr:nth-child(1)") : s.querySelector(`tbody > tr:nth-child(${t + 1})`);
-        o && this.containerElementRef && (this.containerElementRef.scrollTop = o.offsetTop);
+        const n = t < 1 ? s.querySelector("tbody > tr:nth-child(1)") : s.querySelector(`tbody > tr:nth-child(${t + 1})`);
+        n && this.containerElementRef && (this.containerElementRef.scrollTop = n.offsetTop);
       }
     },
     getTotal() {
@@ -494,18 +541,18 @@ const fi = /* @__PURE__ */ Rt({
       return Array.isArray(this.$props.dataItems) ? e = e || this.$props.dataItems.length : this.$props.dataItems && (e = e || this.$props.dataItems.total), e;
     },
     readColumnElements() {
-      return ps(this.$props.columns, this.currentColumnsState, {
+      return ms(this.$props.columns, this.currentColumnsState, {
         prevId: 0,
         idPrefix: this.idPrefix
       });
     },
     getResolvedFlatColumnsState() {
-      const e = [], t = (s, i) => s == null ? void 0 : s.forEach((n) => {
-        const o = n.hidden || i;
+      const e = [], t = (s, i) => s == null ? void 0 : s.forEach((o) => {
+        const n = o.hidden || i;
         e.push({
-          ...n,
-          hidden: o
-        }), t(n.children, o);
+          ...o,
+          hidden: n
+        }), t(o.children, n);
       });
       return t(this.currentColumnsState, !1), e;
     },
@@ -513,19 +560,19 @@ const fi = /* @__PURE__ */ Rt({
       const t = this.getResolvedFlatColumnsState();
       return [e.filter((s) => {
         var i;
-        return !s.hidden && !((i = t.find((n) => n.id === s.id)) != null && i.hidden);
+        return !s.hidden && !((i = t.find((o) => o.id === s.id)) != null && i.hidden);
       }), e.filter((s) => {
         var i;
-        return s.hidden || ((i = t.find((n) => n.id === s.id)) == null ? void 0 : i.hidden);
+        return s.hidden || ((i = t.find((o) => o.id === s.id)) == null ? void 0 : i.hidden);
       })];
     },
-    getFlatData(e, t, s, i, n, o, r) {
-      const a = [], c = cs(a, e, t, {
+    getFlatData(e, t, s, i, o, n, r) {
+      const a = [], h = fs(a, e, t, {
         index: s
-      }, i !== void 0, n, o, this.groupExpandable.defaultExpand, r, this.$props.expandField);
+      }, i !== void 0, o, n, this.groupExpandable.defaultExpand, r, this.$props.expandField);
       return {
         flattedData: a,
-        resolvedGroupsCount: c
+        resolvedGroupsCount: h
       };
     },
     getColumnsEssentialProps(e) {
@@ -547,7 +594,7 @@ const fi = /* @__PURE__ */ Rt({
         ...s,
         children: s.children && s.children.length > 0 ? this.filterHiddenColumns(s.children) : s.children
       });
-      return [...e].filter((s) => !s.hidden).filter((s) => q && s && s.media ? window.matchMedia(s.media).matches : s).map((s) => t(s));
+      return [...e].filter((s) => !s.hidden).filter((s) => B && 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,
@@ -557,41 +604,41 @@ const fi = /* @__PURE__ */ Rt({
      * and check the properties afterwards. You can check the result in the browser console.
      */
     getColumns() {
-      const e = this.columnsRef.filter((s) => s.declarationIndex >= 0 && s.parentIndex === -1), t = (s) => (s.sort((i, n) => i.declarationIndex - n.declarationIndex), s.map((i) => {
+      const e = this.columnsRef.filter((s) => s.declarationIndex >= 0 && s.parentIndex === -1), t = (s) => (s.sort((i, o) => i.declarationIndex - o.declarationIndex), s.map((i) => {
         const {
-          declarationIndex: n,
-          parentIndex: o,
+          declarationIndex: o,
+          parentIndex: n,
           depth: r,
           colSpan: a,
-          rowSpan: c,
-          index: f,
-          kFirst: h,
-          children: u,
-          ...p
+          rowSpan: h,
+          index: u,
+          kFirst: p,
+          children: c,
+          ...f
         } = i;
-        return u.length ? {
-          children: t(u),
-          ...p
-        } : p;
+        return c.length ? {
+          children: t(c),
+          ...f
+        } : f;
       }));
       return t(e);
     },
     setRefs() {
-      var o, r, a, c;
+      var n, r, a, h;
       let e = "$el";
-      const t = x(this, "gridNav");
+      const t = S(this, "gridNav");
       t && (this._element = t[e]);
-      const s = x(this, "groupPanelDiv");
+      const s = S(this, "groupPanelDiv");
       if (s) {
-        let f = s[e] || null;
-        this.dragLogic.refGroupPanelDiv(f);
+        let u = s[e] || null;
+        this.dragLogic.refGroupPanelDiv(u);
       }
-      this.stickyHeaderRef = x(this, "stickyHeader"), this.stickyFooterRef = x(this, "stickyFooter"), this.pinnedTopRef = x(this, "pinnedTop"), this.pinnedBottomRef = x(this, "pinnedBottom");
-      const i = x(this, "dropElementClue"), n = x(this, "dragElementClue");
-      this.dragLogic.refDropElementClue(i), this.dragLogic.refDragElementClue(n), this.columnResize.colGroupMain = x(this, "colGroup"), this.columnResize.colGroupStickyHeader = (o = this.stickyHeaderRef) == null ? void 0 : o.colGroupRef, this.columnResize.colGroupStickyFooter = (r = this.stickyFooterRef) == null ? void 0 : r.colGroupRef, this.columnResize.colGroupPinnedTop = (a = this.pinnedTopRef) == null ? void 0 : a.colGroupRef, this.columnResize.colGroupPinnedBottom = (c = this.pinnedBottomRef) == null ? void 0 : c.colGroupRef, this._header = x(this, "header"), this._footer = x(this, "footer"), this.resetTableWidth(), $t();
+      this.stickyHeaderRef = S(this, "stickyHeader"), this.stickyFooterRef = S(this, "stickyFooter"), this.pinnedTopRef = S(this, "pinnedTop"), this.pinnedBottomRef = S(this, "pinnedBottom");
+      const i = S(this, "dropElementClue"), o = S(this, "dragElementClue");
+      this.dragLogic.refDropElementClue(i), this.dragLogic.refDragElementClue(o), this.columnResize.colGroupMain = S(this, "colGroup"), this.columnResize.colGroupStickyHeader = (n = this.stickyHeaderRef) == null ? void 0 : n.colGroupRef, this.columnResize.colGroupStickyFooter = (r = this.stickyFooterRef) == null ? void 0 : r.colGroupRef, this.columnResize.colGroupPinnedTop = (a = this.pinnedTopRef) == null ? void 0 : a.colGroupRef, this.columnResize.colGroupPinnedBottom = (h = this.pinnedBottomRef) == null ? void 0 : h.colGroupRef, this._header = S(this, "header"), this._footer = S(this, "footer"), this.resetTableWidth(), wt();
     },
     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.dataRef = [], this.columnsRef = [], document != null && document.body && this.resizeObserver && this.resizeObserver.disconnect(), this.observerRef && (this.observerRef.disconnect(), this.observerRef = null);
+      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.dataRef = [], this.columnsRef = [], document != null && document.body && this.resizeObserver && this.resizeObserver.disconnect(), this.observerRef && (this.observerRef.disconnect(), this.observerRef = null), this.clipboardServiceRef && (this.clipboardServiceRef.removeEventListeners(document), this.clipboardServiceRef = null);
     },
     isAllData() {
       const {
@@ -610,15 +657,15 @@ const fi = /* @__PURE__ */ Rt({
     },
     initializeVirtualization() {
       const e = this.vsRef, t = this.$props.rowHeight || this._minRowHeightRef || 0;
-      this.tableBodyRef = x(this, "tableBody"), this.scrollTableRef = Ae(this, "table"), e && (e.fixedScroll = this.$props.fixedScroll || !1, e.PageChange = this.virtualPageChange, e.pageSize = this._virtualPageSize, e.scrollableVirtual = this.isVirtualScroll, this.scrollContainerRef = e.container = x(this, "scrollContainer"), e.tableBody = this.tableBodyRef, e.scrollHeightContainer = x(this, "scrollHeightContainer"), e.table = this.scrollTableRef, (!e.rowHeightService || e.total !== this._virtualTotal) && t && (e.total = this._virtualTotal, e.rowHeightService = new It(this._virtualTotal, t)));
+      this.tableBodyRef = S(this, "tableBody"), this.scrollTableRef = Be(this, "table"), e && (e.fixedScroll = this.$props.fixedScroll || !1, e.PageChange = this.virtualPageChange, e.pageSize = this._virtualPageSize, e.scrollableVirtual = this.isVirtualScroll, this.scrollContainerRef = e.container = S(this, "scrollContainer"), e.tableBody = this.tableBodyRef, e.scrollHeightContainer = S(this, "scrollHeightContainer"), e.table = this.scrollTableRef, (!e.rowHeightService || e.total !== this._virtualTotal) && t && (e.total = this._virtualTotal, e.rowHeightService = new vt(this._virtualTotal, t)));
     },
     setContainerHeight() {
-      const e = x(this, "scrollContainer");
+      const e = S(this, "scrollContainer");
       this._containerHeightRef = (e == null ? void 0 : e.offsetHeight) || 0;
     },
     setMinRowHeight() {
       if (!this._minRowHeightRef && !this.$props.rowHeight) {
-        const t = hs(x(this, "tableBody"));
+        const t = us(S(this, "tableBody"));
         t && (this._minRowHeightRef = t, this.$forceUpdate());
       }
     },
@@ -626,7 +673,7 @@ const fi = /* @__PURE__ */ Rt({
       this.setRefs();
     },
     onHeaderScroll(e) {
-      const s = e.target.scrollLeft, i = x(this, "scrollContainer");
+      const s = e.target.scrollLeft, i = S(this, "scrollContainer");
       i && (i.scrollLeft = s), this.scrollLeftRef = s;
     },
     scrollHandler(e) {
@@ -637,10 +684,10 @@ const fi = /* @__PURE__ */ Rt({
       }, 0)), this.scrollLeftRef = t, this._header && this._header.setScrollLeft(e.currentTarget.scrollLeft), this._footer && this._footer.setScrollLeft(e.currentTarget.scrollLeft), this.stickyHeaderRef && this.stickyHeaderRef.setScrollLeft(e.currentTarget.scrollLeft), this.stickyFooterRef && this.stickyFooterRef.setScrollLeft(e.currentTarget.scrollLeft), this.pinnedTopRef && this.pinnedTopRef.setScrollLeft(t), this.pinnedBottomRef && this.pinnedBottomRef.setScrollLeft(t), this.vsRef && s !== this.wrapperScrollTopRef && this.vsRef.scrollHandler(e);
       const i = this.virtualSkipRef;
       this.vsRef && s !== this.wrapperScrollTopRef && this.vsRef.scrollHandler(e);
-      const n = this.isVirtualScroll && this.virtualSkipRef !== i;
-      if (this.$emit("scroll", e), this.wrapperScrollTopRef = s, !n) {
-        const o = this.updateStickyGroups();
-        this.sticky.headerItems = o == null ? void 0 : o.stickyHeaderItems, this.sticky.footerItems = o == null ? void 0 : o.stickyFooterItems;
+      const o = this.isVirtualScroll && this.virtualSkipRef !== i;
+      if (this.$emit("scroll", e), this.wrapperScrollTopRef = s, !o) {
+        const n = this.updateStickyGroups();
+        this.sticky.headerItems = n == null ? void 0 : n.stickyHeaderItems, this.sticky.footerItems = n == null ? void 0 : n.stickyFooterItems;
       }
     },
     rowClick(e, t) {
@@ -656,15 +703,15 @@ const fi = /* @__PURE__ */ Rt({
       });
     },
     loopGroupedItems(e, t, s = 0, i = null) {
-      return e.forEach((n) => {
-        !i && t(n, s) && (i = n), n.items && n.items.length && !i && (i = this.loopGroupedItems(n.items, t, s + 1, i));
+      return e.forEach((o) => {
+        !i && t(o, s) && (i = o), o.items && o.items.length && !i && (i = this.loopGroupedItems(o.items, t, s + 1, i));
       }), i;
     },
     updateGroupCollapsed(e) {
       let t = this.computedCollapsed, s = t[e.level];
-      const i = this.$props.uniqueField, n = function(a, c) {
-        return a.value === e.dataItem.value && c === e.level;
-      }, o = this.allGroupedItems ? this.loopGroupedItems(this.allGroupedItems.data, n, 0, null) : e.dataItem, r = ds(o || e.dataItem, i);
+      const i = this.$props.uniqueField, o = function(a, h) {
+        return a.value === e.dataItem.value && h === e.level;
+      }, n = this.allGroupedItems ? this.loopGroupedItems(this.allGroupedItems.data, o, 0, null) : e.dataItem, r = ps(n || e.dataItem, i);
       if (e.value) {
         if (s && s.length) {
           const a = s.indexOf(r);
@@ -676,9 +723,9 @@ const fi = /* @__PURE__ */ Rt({
     },
     itemChange(e) {
       var i;
-      const t = _.call(this, "itemchange"), s = (i = this.gridStateContext.group) == null ? void 0 : i.value;
+      const t = L.call(this, "itemchange"), s = (i = this.gridStateContext.group) == null ? void 0 : i.value;
       if (e.field === this.$props.expandField || (s || this.$props.detail) && e.field === void 0) {
-        _.call(this, "expandchange") && e.dataItem && this.$emit("expandchange", {
+        L.call(this, "expandchange") && e.dataItem && this.$emit("expandchange", {
           ...this.getArguments(e.event),
           collapsedGroups: this.updateGroupCollapsed(e),
           dataItem: e.dataItem,
@@ -702,6 +749,9 @@ const fi = /* @__PURE__ */ Rt({
     cellKeydownHandler(e) {
       this.$emit("cellkeydown", e);
     },
+    navigationActionHandler(e) {
+      this.$emit("navigationaction", e);
+    },
     editHandler(e) {
       this.$emit("edit", {
         dataItem: e
@@ -723,20 +773,20 @@ const fi = /* @__PURE__ */ Rt({
       });
     },
     selectionChangeHandler(e) {
-      var t;
+      var t, s, i;
       if (this.computedSelectable.enabled) {
         const {
-          event: s,
-          dataItem: i,
-          dataIndex: n,
-          columnIndex: o
-        } = e, r = {
-          ...this.getArguments(s),
-          dataItem: i,
-          startColIndex: o,
-          endColIndex: o,
-          startRowIndex: n,
-          endRowIndex: n,
+          event: o,
+          dataItem: n,
+          dataIndex: r,
+          columnIndex: a
+        } = e, h = {
+          ...this.getArguments(o),
+          dataItem: n,
+          startColIndex: a,
+          endColIndex: a,
+          startRowIndex: r,
+          endRowIndex: r,
           dataItems: this.getLeafDataItems(),
           altKey: !1,
           ctrlKey: !1,
@@ -749,45 +799,45 @@ const fi = /* @__PURE__ */ Rt({
           selectedField: this.$props.selectedField || ""
         };
         this.gridStateContext.selectionchange({
-          ...r,
-          select: this.$props.dataItemKey ? We({
-            event: r,
-            selectedState: (t = this.$props.select) != null ? t : {},
+          ...h,
+          select: this.$props.dataItemKey ? Ue({
+            event: h,
+            selectedState: (i = (s = this.$props.select) != null ? s : (t = this.gridStateContext.select) == null ? void 0 : t.value) != null ? i : {},
             dataItemKey: this.$props.dataItemKey
           }) : {}
         });
       }
     },
     onKeyboardSelectionChangeHandler(e) {
-      var f, h;
+      var u, p;
       if (!this.computedSelectable.enabled || !this.$props.dataItemKey)
         return;
-      const t = (f = this.gridStateContext.select) == null ? void 0 : f.value, s = {
+      const t = (u = this.gridStateContext.select) == null ? void 0 : u.value, s = {
         dataItems: this.getLeafDataItems(),
         mode: this.computedSelectable.mode,
         cell: this.computedSelectable.cell,
         componentId: this.$props.id,
         selectedField: "",
         ...this.getArguments(e)
-      }, i = Ft({
+      }, i = Kt({
         event: s,
         selectedState: t != null ? t : {},
         dataItemKey: this.$props.dataItemKey
       });
       if (i === t)
         return;
-      const n = e.target, o = Ue(n, "TD"), r = Ue(n, "TR"), a = Lt(o), c = Kt(r);
-      if (a !== void 0 && c !== void 0) {
-        const u = (h = as(this.$props.dataItems)) == null ? void 0 : h[c];
+      const o = e.target, n = je(o, "TD"), r = je(o, "TR"), a = _t(n), h = At(r);
+      if (a !== void 0 && h !== void 0) {
+        const c = (p = cs(this.$props.dataItems)) == null ? void 0 : p[h];
         this.gridStateContext.selectionchange({
           ...s,
           select: i,
-          dataItem: u,
-          startRowIndex: c,
+          dataItem: c,
+          startRowIndex: h,
           startColIndex: a,
-          startDataItem: u,
-          endDataItem: u,
-          endRowIndex: c,
+          startDataItem: c,
+          endDataItem: c,
+          endRowIndex: h,
           endColIndex: a,
           ctrlKey: e.ctrlKey,
           altKey: e.altKey,
@@ -810,26 +860,26 @@ const fi = /* @__PURE__ */ Rt({
       }
     },
     selectionRelease(e) {
-      var t;
+      var t, s, i;
       if (this.computedSelectable.enabled) {
-        const s = this.getLeafDataItems(), i = s[e.startRowIndex], n = s[e.endRowIndex], o = {
+        const o = this.getLeafDataItems(), n = o[e.startRowIndex], r = o[e.endRowIndex], a = {
           event: void 0,
           target: this,
           selectedField: "",
           componentId: this.$props.id || this._gridId,
-          dataItems: s,
+          dataItems: o,
           dataItem: null,
-          startDataItem: i,
-          endDataItem: n,
+          startDataItem: n,
+          endDataItem: r,
           ...e
-        }, r = We({
-          event: o,
-          selectedState: (t = this.$props.select) != null ? t : {},
+        }, h = Ue({
+          event: a,
+          selectedState: (i = (s = this.$props.select) != null ? s : (t = this.gridStateContext.select) == null ? void 0 : t.value) != null ? i : {},
           // Thats kinda strange, even through the `dataItemKey` is required by the `getSelectedState`
           // it does work correctly even without it
           dataItemKey: this.$props.dataItemKey
         });
-        this.raiseSelectionEvent(o, r);
+        this.raiseSelectionEvent(a, h);
       }
     },
     clearSelection(e) {
@@ -842,16 +892,16 @@ const fi = /* @__PURE__ */ Rt({
       });
     },
     moveToNextPage(e) {
-      var n, o, r, a;
-      const t = (r = (o = (n = this.gridStateContext.take) == null ? void 0 : n.value) != null ? o : this.$props.pageSize) != null ? r : 0, s = (((a = this.gridStateContext.skip) == null ? void 0 : a.value) || 0) + t, i = this.getTotal();
+      var o, n, r, a;
+      const t = (r = (n = (o = this.gridStateContext.take) == null ? void 0 : o.value) != null ? n : this.$props.pageSize) != null ? r : 0, s = (((a = this.gridStateContext.skip) == null ? void 0 : a.value) || 0) + t, i = this.getTotal();
       s < i && this.pageChangeHandler({
         skip: s,
         take: t
       }, e);
     },
     moveToPrevPage(e) {
-      var i, n, o, r;
-      const t = (o = (n = (i = this.gridStateContext.take) == null ? void 0 : i.value) != null ? n : this.$props.pageSize) != null ? o : 0, s = (((r = this.gridStateContext.skip) == null ? void 0 : r.value) || 0) - t;
+      var i, o, n, r;
+      const t = (n = (o = (i = this.gridStateContext.take) == null ? void 0 : i.value) != null ? o : this.$props.pageSize) != null ? n : 0, s = (((r = this.gridStateContext.skip) == null ? void 0 : r.value) || 0) - t;
       s >= 0 && this.pageChangeHandler({
         skip: s,
         take: t
@@ -892,20 +942,20 @@ const fi = /* @__PURE__ */ Rt({
     handleDetailExpandAction(e, t) {
       var s;
       if (this.detailExpandable.enabled) {
-        const i = (s = this.gridStateContext.detailExpand) == null ? void 0 : s.value, n = Gt(i != null ? i : {}, e);
+        const i = (s = this.gridStateContext.detailExpand) == null ? void 0 : s.value, o = Lt(i != null ? i : {}, e);
         this.gridStateContext.detailexpandchange({
           ...this.getArguments(t),
-          detailExpand: n
+          detailExpand: o
         });
       }
     },
     handleGroupExpandAction(e, t) {
       var s;
       if (this.groupExpandable.enabled) {
-        const i = (s = this.gridStateContext.groupExpand) == null ? void 0 : s.value, n = Dt(i != null ? i : [], e, this.groupExpandable);
+        const i = (s = this.gridStateContext.groupExpand) == null ? void 0 : s.value, o = Ft(i != null ? i : [], e, this.groupExpandable);
         this.$props.expandField || this.gridStateContext.groupexpandchange({
           ...this.getArguments(t),
-          groupExpand: n
+          groupExpand: o
         });
       }
       this.scrollToStickyGroup(e.group);
@@ -916,41 +966,41 @@ const fi = /* @__PURE__ */ Rt({
           ...this.getArguments(i),
           ...t
         });
-      else if (_.call(this, e))
+      else if (L.call(this, e))
         this.$emit(e, {
           ...this.getArguments(i),
           ...t
         });
-      else if (_.call(this, "datastatechange")) {
-        const n = {
+      else if (L.call(this, "datastatechange")) {
+        const o = {
           ...this.getDataState(),
           ...s
         };
         this.gridStateContext.datastatechange({
           ...this.getArguments(i),
-          data: n,
-          dataState: n
+          data: o,
+          dataState: o
         });
       }
     },
     columnReorder(e, t, s) {
-      const i = this.columnsRef[e], n = Ye(this.currentColumnsState), o = i.depth, r = (h) => {
+      const i = this.columnsRef[e], o = Ze(this.currentColumnsState), n = i.depth, r = (p) => {
         do
-          h++;
-        while (h < this.columnsRef.length && this.columnsRef[h].depth > o);
-        return h;
+          p++;
+        while (p < this.columnsRef.length && this.columnsRef[p].depth > n);
+        return p;
       }, a = this.columnsRef.splice(e, r(e) - e);
-      this.columnsRef.splice(e < t ? r(t - a.length) : t, 0, ...a), this.columnsRef.filter((h) => h.declarationIndex >= 0).forEach((h, u) => {
-        h.orderIndex = u;
-        const p = n.find((R) => R.id === h.id);
-        p && (p.orderIndex = u);
+      this.columnsRef.splice(e < t ? r(t - a.length) : t, 0, ...a), this.columnsRef.filter((p) => p.declarationIndex >= 0).forEach((p, c) => {
+        p.orderIndex = c;
+        const f = o.find((m) => m.id === p.id);
+        f && (f.orderIndex = c);
       });
-      const c = this.columnsRef[e].locked && this.columnsRef[t].locked;
-      zt(this._columnsMap, this.columnsRef, c || this.shouldUpdateLeftRightRef), Et(this._columnsMap, this.columnsRef, c || this.shouldUpdateLeftRightRef), this.resizedRef && (this.shouldUpdateLeftRightRef = !1, this.resizedRef = !1);
-      const f = this.getColumns();
+      const h = this.columnsRef[e].locked && this.columnsRef[t].locked;
+      Dt(this._columnsMap, this.columnsRef, h || this.shouldUpdateLeftRightRef), Gt(this._columnsMap, this.columnsRef, h || this.shouldUpdateLeftRightRef), this.resizedRef && (this.shouldUpdateLeftRightRef = !1, this.resizedRef = !1);
+      const u = this.getColumns();
       this.$emit("columnreorder", {
         target: this,
-        columns: f,
+        columns: u,
         event: s,
         prev: e,
         next: t
@@ -959,19 +1009,19 @@ const fi = /* @__PURE__ */ Rt({
       });
     },
     groupReorder(e, t, s) {
-      var n;
-      const i = (n = this.gridStateContext.group) == null ? void 0 : n.value;
+      var o;
+      const i = (o = this.gridStateContext.group) == null ? void 0 : o.value;
       i !== void 0 && (i.splice(t, 0, ...i.splice(e, 1)), this.groupChangeHandler(i, s));
     },
     columnToGroup(e, t, s) {
-      var o;
+      var n;
       const i = this.columnsRef[e].field;
       if (!i)
         return;
-      const n = (((o = this.gridStateContext.group) == null ? void 0 : o.value) || []).slice();
-      n.splice(t, 0, {
+      const o = (((n = this.gridStateContext.group) == null ? void 0 : n.value) || []).slice();
+      o.splice(t, 0, {
         field: i
-      }), this.groupChangeHandler(n, s);
+      }), this.groupChangeHandler(o, s);
     },
     resetTableWidth() {
       var i;
@@ -979,21 +1029,21 @@ const fi = /* @__PURE__ */ Rt({
       if (!this.columnResize.colGroupMain)
         return;
       const t = (i = this.columnResize.colGroupMain) == null ? void 0 : i.children;
-      for (let n = 0; n < t.length; n++) {
-        const o = t[n].width;
-        if (!o)
+      for (let o = 0; o < t.length; o++) {
+        const n = t[o].width;
+        if (!n)
           return;
-        e += parseFloat(o.toString());
+        e += parseFloat(n.toString());
       }
       e = Math.round(e), this._header && this._header.setWidth(e), this._footer && this._footer.setWidth(e), this.stickyHeaderRef && this.stickyHeaderRef.setWidth(e), this.stickyFooterRef && this.stickyFooterRef.setWidth(e), this.pinnedTopRef && this.pinnedTopRef.setWidth(e), this.pinnedBottomRef && this.pinnedBottomRef.setWidth(e);
-      const s = Ae(this, "table");
+      const s = Be(this, "table");
       s && e && (s.style.width = e + "px"), this.stickyFooterRef && this.setStickyFooterOffset();
     },
     setStickyFooterOffset() {
       const e = this.containerElementRef, t = e ? e.scrollWidth > e.clientWidth : !1;
       this.stickyFooterRef && (this.stickyFooterRef.$el.style.marginBlockEnd = t ? "var(--kendo-scrollbar-width, 0px)" : "");
     },
-    onResize(e, t, s, i, n, o, r) {
+    onResize(e, t, s, i, o, n, r) {
       this.resetTableWidth(), this.shouldUpdateLeftRightRef = !0, this.resizedRef = !0, this.$emit("columnresize", {
         columns: this.getColumns(),
         index: e,
@@ -1001,35 +1051,35 @@ const fi = /* @__PURE__ */ Rt({
         event: i,
         newWidth: t,
         oldWidth: s,
-        end: n,
+        end: o,
         target: this
-      }), n && this.gridStateContext.columnsstatechange({
-        columnsState: o
+      }), o && this.gridStateContext.columnsstatechange({
+        columnsState: n
       });
     },
     initColumnsState(e, t) {
       const s = (i) => {
-        var o;
-        const n = t.find((r) => r.id === i.id);
-        if (n) {
+        var n;
+        const o = t.find((r) => r.id === i.id);
+        if (o) {
           const r = {
-            ...n
+            ...o
           };
-          return r.children = (o = i.children) == null ? void 0 : o.map(s), r;
+          return r.children = (n = i.children) == null ? void 0 : n.map(s), r;
         }
         return i;
       };
       this.currentColumnsState = e.filter((i) => i.parentIndex === -1).map(s);
     },
     configureColumns(e, t) {
-      e.filter((o) => o.columnType === "checkbox").forEach((o) => {
-        o.width = o.width || "50px", o.defaultCell = k(qe), o.defaultHeaderCell = k(et), o._type = "edit", o.columnMenu = !1;
-      }), this.$props.selectedField && this.columnsRef.filter((o) => o.field === this.$props.selectedField).forEach((o) => {
-        o.width = o.width || "50px", o.defaultCell = k(qe), o.defaultHeaderCell = k(et), o.columnMenu = !1;
-      }), this.$props.pinnable && e.filter((o) => o.columnType === "pin").forEach((o) => {
-        o.width = o.width || "48px", o.defaultCell = k(Ss), o.defaultHeaderCell = k(Pt), o.sortable = !1, o.filterable = !1, o.editable = !1;
+      e.filter((n) => n.columnType === "checkbox").forEach((n) => {
+        n.width = n.width || "50px", n.defaultCell = H(Xe), n.defaultHeaderCell = H(st), n._type = "edit", n.columnMenu = !1;
+      }), this.$props.selectedField && this.columnsRef.filter((n) => n.field === this.$props.selectedField).forEach((n) => {
+        n.width = n.width || "50px", n.defaultCell = H(Xe), n.defaultHeaderCell = H(st), n.columnMenu = !1;
+      }), this.$props.pinnable && e.filter((n) => n.columnType === "pin").forEach((n) => {
+        n.width = n.width || "48px", n.defaultCell = H($s), n.defaultHeaderCell = H(zt), n.sortable = !1, n.filterable = !1, n.editable = !1;
       });
-      const s = Ye(this.currentColumnsState);
+      const s = Ze(this.currentColumnsState);
       this.initColumnsState(e, s);
       const i = {
         id: "",
@@ -1051,54 +1101,54 @@ const fi = /* @__PURE__ */ Rt({
         ariaColumnIndex: 0,
         isAccessible: !0
       };
-      let n = 0;
+      let o = 0;
       if (this.detailExpandable.enabled && this.$props.detail && !this.$props.expandField) {
-        const o = {
+        const n = {
           ...i,
           _type: "expand",
-          id: P.generateNavigatableId(`${n++}`, "expand", "column"),
-          defaultCell: k(Je),
+          id: E.generateNavigatableId(`${o++}`, "expand", "column"),
+          defaultCell: H(Ye),
           field: this.detailExpandable.column,
           headerClassName: this.hierarchClass
         };
-        e.unshift(o), this.currentColumnsState.unshift(s.find((r) => r.id === o.id) || o);
+        e.unshift(n), this.currentColumnsState.unshift(s.find((r) => r.id === n.id) || n);
       }
-      this.$props.expandField && _.call(this, "expandchange") && this.$props.detail && (e.unshift({
+      this.$props.expandField && L.call(this, "expandchange") && this.$props.detail && (e.unshift({
         ...i,
-        defaultCell: k(Je),
+        defaultCell: H(Ye),
         field: this.$props.expandField,
         headerClassName: "k-hierarchy-cell k-header",
-        id: P.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
+        id: E.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
         ...this.expandColumn
-      }), n++);
-      for (let o = 0; o < t; o++) {
+      }), o++);
+      for (let n = 0; n < t; n++) {
         const r = {
           ...i,
           isAccessible: !1,
-          defaultCell: k(Ze),
-          id: P.generateNavigatableId(`${n++}`, "group", "column"),
+          defaultCell: H(tt),
+          id: E.generateNavigatableId(`${o++}`, "group", "column"),
           field: "value",
           locked: this.$props.lockGroups,
           columnMenu: !1
         };
         e.unshift(r), this.currentColumnsState.unshift(s.find((a) => a.id === r.id) || r);
       }
-      e.slice(n).forEach((o) => {
-        o.parentIndex >= 0 && (o.parentIndex += n), o.rowSpannable = o.rowSpannable !== void 0 ? Qe(o.rowSpannable) : this.computedRowSpannable;
+      e.slice(o).forEach((n) => {
+        n.parentIndex >= 0 && (n.parentIndex += o), n.rowSpannable = n.rowSpannable !== void 0 ? et(n.rowSpannable) : this.computedRowSpannable;
       });
     },
     initColumns(e, t) {
-      var o;
+      var n;
       this.columnsRef = this.readColumnElements();
-      const s = (o = this.gridStateContext.group) == null ? void 0 : o.value;
-      this.columnsRef.filter((r) => !r.hidden).length === 0 && (this.columnsRef = rs(e, s, {
+      const s = (n = this.gridStateContext.group) == null ? void 0 : n.value;
+      this.columnsRef.filter((r) => !r.hidden).length === 0 && (this.columnsRef = ds(e, s, {
         column: this.$props.expandField ? this.$props.expandField : this.groupExpandable.column
       }, {
         prevId: 0,
         idPrefix: this.idPrefix
       })), this.configureColumns(this.columnsRef, t);
-      const [i, n] = this.filterColumns(this.columnsRef);
-      this.columnsRef = i, this.hiddenColumnsRef = n, this._columnsMap = ls(this.columnsRef, !0);
+      const [i, o] = this.filterColumns(this.columnsRef);
+      this.columnsRef = i, this.hiddenColumnsRef = o, this._columnsMap = hs(this.columnsRef, !0);
     },
     resolveTitle(e) {
       const t = this.findColumnByField(e), s = t && (t.title || t.field);
@@ -1123,14 +1173,14 @@ const fi = /* @__PURE__ */ Rt({
       return null;
     },
     getDataState() {
-      var o, r, a, c, f;
-      const e = (o = this.gridStateContext.sort) == null ? void 0 : o.value, t = (r = this.gridStateContext.filter) == null ? void 0 : r.value, s = (a = this.gridStateContext.skip) == null ? void 0 : a.value, i = (c = this.gridStateContext.take) == null ? void 0 : c.value, n = (f = this.gridStateContext.group) == null ? void 0 : f.value;
+      var n, r, a, h, u;
+      const e = (n = this.gridStateContext.sort) == null ? void 0 : n.value, t = (r = this.gridStateContext.filter) == null ? void 0 : r.value, s = (a = this.gridStateContext.skip) == null ? void 0 : a.value, i = (h = this.gridStateContext.take) == null ? void 0 : h.value, o = (u = this.gridStateContext.group) == null ? void 0 : u.value;
       return {
         filter: t,
         sort: e,
         skip: s,
         take: i !== void 0 ? i : this.$props.pageSize,
-        group: n
+        group: o
       };
     },
     getArguments(e) {
@@ -1152,19 +1202,19 @@ const fi = /* @__PURE__ */ Rt({
       }), t;
     },
     searchChange(e) {
-      const t = this.$props.searchFields || this.columnsRef.map((n) => n.field) || [], s = e.event.target.value, i = {
+      const t = this.$props.searchFields || this.columnsRef.map((o) => o.field) || [], s = e.event.target.value, i = {
         logic: "or",
-        filters: t.filter((n) => n !== void 0).map((n) => {
-          var o;
-          return typeof n == "string" ? {
-            field: n,
+        filters: t.filter((o) => o !== void 0).map((o) => {
+          var n;
+          return typeof o == "string" ? {
+            field: o,
             value: s,
             operator: "contains"
           } : {
             value: s,
-            operator: (o = n.operator) != null ? o : "contains",
-            field: n.field,
-            ignoreCase: n.ignoreCase
+            operator: (n = o.operator) != null ? n : "contains",
+            field: o.field,
+            ignoreCase: o.ignoreCase
           };
         })
       };
@@ -1175,24 +1225,24 @@ const fi = /* @__PURE__ */ Rt({
       }, e);
     },
     getCellsToRender(e, t) {
-      var o;
+      var n;
       const s = [];
-      let i = null, n = 0;
+      let i = null, o = 0;
       if (t.forEach((r, a) => {
-        const c = parseFloat((r.width || "").toString()) || 10;
-        if (n) {
-          n--, i && (i.width += c);
+        const h = parseFloat((r.width || "").toString()) || 10;
+        if (o) {
+          o--, i && (i.width += h);
           return;
         }
-        const f = Math.min(ns(r, e), t.length - a);
-        n = f - 1, i = {
-          width: c,
-          colSpan: f,
+        const u = Math.min(ls(r, e), t.length - a);
+        o = u - 1, i = {
+          width: h,
+          colSpan: u,
           columnIndex: a
         }, s.push(i);
       }), this.$props.columnVirtualization) {
-        const r = this.scrollLeftRef || 0, a = this.tableWidth || parseFloat((((o = this.$attrs.style) == null ? void 0 : o.width) || "").toString());
-        return Rs({
+        const r = this.scrollLeftRef || 0, a = this.tableWidth || parseFloat((((n = this.$attrs.style) == null ? void 0 : n.width) || "").toString());
+        return Ss({
           cellModels: s,
           columns: t,
           tableViewPortWidth: a,
@@ -1215,44 +1265,44 @@ const fi = /* @__PURE__ */ Rt({
         if (s)
           return s;
       }
-      const i = this.$props.rowHeight || this._minRowHeightRef, n = this._containerHeightRef;
-      return n && i ? Math.ceil(n / i * 1.5) : 0;
+      const i = this.$props.rowHeight || this._minRowHeightRef, o = this._containerHeightRef;
+      return o && i ? Math.ceil(o / i * 1.5) : 0;
     },
     getRowPinPosition(e) {
-      var o, r;
+      var n, r;
       const {
         dataItemKey: t = ""
-      } = this.$props, s = ((o = this.gridStateContext.pinnedTopRows) == null ? void 0 : o.value) || [], i = ((r = this.gridStateContext.pinnedBottomRows) == null ? void 0 : r.value) || [];
+      } = this.$props, s = ((n = this.gridStateContext.pinnedTopRows) == null ? void 0 : n.value) || [], i = ((r = this.gridStateContext.pinnedBottomRows) == null ? void 0 : r.value) || [];
       if (!t || !e)
         return "none";
-      const n = e[t];
-      return s != null && s.some((a) => a[t] === n) ? "top" : i != null && i.some((a) => a[t] === n) ? "bottom" : "none";
+      const o = e[t];
+      return s != null && s.some((a) => a[t] === o) ? "top" : i != null && i.some((a) => a[t] === o) ? "bottom" : "none";
     },
     handleRowPin(e, t) {
-      var f, h, u, p;
+      var u, p, c, f;
       if (!this.$props.pinnable)
         return;
       const {
         dataItemKey: s = ""
-      } = this.$props, i = ((f = this.gridStateContext.pinnedTopRows) == null ? void 0 : f.value) || [], n = ((h = this.gridStateContext.pinnedBottomRows) == null ? void 0 : h.value) || [], o = t[s], r = i.filter((R) => R[s] !== o), a = n.filter((R) => R[s] !== o);
-      let c;
+      } = this.$props, i = ((u = this.gridStateContext.pinnedTopRows) == null ? void 0 : u.value) || [], o = ((p = this.gridStateContext.pinnedBottomRows) == null ? void 0 : p.value) || [], n = t[s], r = i.filter((m) => m[s] !== n), a = o.filter((m) => m[s] !== n);
+      let h;
       switch (e) {
         case "pinTop":
-          c = {
+          h = {
             pinnedTopRows: [...r, t],
             pinnedBottomRows: a,
             dataItem: t
           };
           break;
         case "pinBottom":
-          c = {
+          h = {
             pinnedTopRows: r,
             pinnedBottomRows: [...a, t],
             dataItem: t
           };
           break;
         case "unpin":
-          c = {
+          h = {
             pinnedTopRows: r,
             pinnedBottomRows: a,
             dataItem: t
@@ -1261,17 +1311,17 @@ const fi = /* @__PURE__ */ Rt({
         default:
           return;
       }
-      (p = (u = this.gridStateContext).rowpinchange) == null || p.call(u, c);
+      (f = (c = this.gridStateContext).rowpinchange) == null || f.call(c, h);
     },
     pinnedSelectionRelease(e, t) {
       const s = this.$props.dataItemKey;
       if (!s || !t)
         return;
-      const i = M(s), n = this.getLeafDataItems().findIndex((o) => i(o) === i(t));
-      n !== -1 && this.selectionRelease({
+      const i = M(s), o = this.getLeafDataItems().findIndex((n) => i(n) === i(t));
+      o !== -1 && this.selectionRelease({
         ...e,
-        startRowIndex: n,
-        endRowIndex: n
+        startRowIndex: o,
+        endRowIndex: o
       });
     }
   },
@@ -1294,111 +1344,111 @@ const fi = /* @__PURE__ */ Rt({
     };
   },
   setup(e) {
-    const t = g(null), s = g(null), i = g(null), n = g(null), o = g(null), r = g(null), a = g(null), c = g([]), f = g([]), h = g(null), u = g(null), p = g(null), R = g(null), C = g(null), I = g(null), w = g(!0), $ = g(!1), b = new Zt(), H = g(0), A = bt(gs, {}), X = typeof e.groupable == "object" && !!e.groupable.stickyHeaders, Y = typeof e.groupable == "object" && !!e.groupable.stickyFooters, z = g([]), Q = Ke(() => {
-      var F, N;
-      return !!((N = (F = A.group) == null ? void 0 : F.value) != null && N.length);
-    }), B = null, E = g(void 0), T = g({
+    const t = R(null), s = R(null), i = R(null), o = R(null), n = R(null), r = R(null), a = R(null), h = R([]), u = R([]), p = R(null), c = R(null), f = R(null), m = R(null), x = R(null), C = R(null), v = R(!0), $ = R(!1), w = new ss(), I = R(0), z = It(bs, {}), X = typeof e.groupable == "object" && !!e.groupable.stickyHeaders, Y = typeof e.groupable == "object" && !!e.groupable.stickyFooters, P = R([]), Q = _e(() => {
+      var K, W;
+      return !!((W = (K = z.group) == null ? void 0 : K.value) != null && W.length);
+    }), V = null, D = R(void 0), T = R({
       headerItems: [],
       footerItems: []
     }), {
-      scrollToStickyGroup: V,
-      update: O
-    } = bs({
+      scrollToStickyGroup: O,
+      update: N
+    } = xs({
       enabled: X,
       enabledFooters: Y,
-      flatData: z,
-      containerRef: h,
-      stickyHeaderRef: u,
-      stickyFooterRef: p,
-      tableBodyRef: I,
+      flatData: P,
+      containerRef: p,
+      stickyHeaderRef: c,
+      stickyFooterRef: f,
+      tableBodyRef: C,
       rowHeight: e.rowHeight,
       isGrouped: Q,
-      virtualSkipRef: H,
-      rowHeightServiceRef: Ke(() => b == null ? void 0 : b.rowHeightService)
+      virtualSkipRef: I,
+      rowHeightServiceRef: _e(() => w == null ? void 0 : w.rowHeightService)
     });
     return {
-      rowIndexRef: E,
-      observerRef: B,
-      dataRef: z,
+      rowIndexRef: D,
+      observerRef: V,
+      dataRef: P,
       groupPanelDivRef: t,
       dropElementClueRef: s,
       dragElementClueRef: i,
-      headerRef: n,
-      footerRef: o,
+      headerRef: o,
+      footerRef: n,
       gridNavRef: r,
       colGroupRef: a,
-      scrollContainerRef: h,
-      tableBodyRef: I,
-      gridStateContext: A,
-      shouldUpdateLeftRightRef: w,
+      scrollContainerRef: p,
+      tableBodyRef: C,
+      gridStateContext: z,
+      shouldUpdateLeftRightRef: v,
       resizedRef: $,
       currentColumnsState: e.columnsState,
-      vsRef: b,
-      virtualSkipRef: H,
-      stickyHeaderItems: c,
-      stickyHeaderRef: u,
-      stickyFooterItems: f,
-      stickyFooterRef: p,
-      pinnedTopRef: R,
-      pinnedBottomRef: C,
+      vsRef: w,
+      virtualSkipRef: I,
+      stickyHeaderItems: h,
+      stickyHeaderRef: c,
+      stickyFooterItems: u,
+      stickyFooterRef: f,
+      pinnedTopRef: m,
+      pinnedBottomRef: x,
       sticky: T,
-      scrollToStickyGroup: V,
-      updateStickyGroups: O
+      scrollToStickyGroup: O,
+      updateStickyGroups: N
     };
   },
   render() {
-    var Re, Ce, be, Se, xe, Ie, $e, we, ye, ve, ke, He, Te, Me, Pe, ze, Ee, De;
-    const e = (Re = this.gridStateContext.sort) == null ? void 0 : Re.value, t = (Ce = this.gridStateContext.filter) == null ? void 0 : Ce.value, s = (be = this.gridStateContext.search) == null ? void 0 : be.value, i = (Se = this.gridStateContext.select) == null ? void 0 : Se.value, n = (xe = this.gridStateContext.skip) == null ? void 0 : xe.value, o = (Ie = this.gridStateContext.take) == null ? void 0 : Ie.value, r = ($e = this.gridStateContext.group) == null ? void 0 : $e.value, a = (we = this.gridStateContext.groupExpand) == null ? void 0 : we.value, c = (ye = this.gridStateContext.detailExpand) == null ? void 0 : ye.value, f = (r == null ? void 0 : r.length) || 0, h = typeof this.$props.groupable == "object" && !!this.$props.groupable.stickyHeaders, u = typeof this.$props.groupable == "object" && !!this.$props.groupable.stickyFooters, p = !!(r != null && r.length);
-    let R;
-    this.currentColumnsState = (ve = this.gridStateContext.columnsState) == null ? void 0 : ve.value;
-    const C = this.$props.autoProcessData === !0 ? {
+    var Ce, be, Se, Ie, xe, $e, ve, we, ye, ke, He, Te, Me, Ee, Pe, ze, De, Ge;
+    const e = (Ce = this.gridStateContext.sort) == null ? void 0 : Ce.value, t = (be = this.gridStateContext.filter) == null ? void 0 : be.value, s = (Se = this.gridStateContext.search) == null ? void 0 : Se.value, i = (Ie = this.gridStateContext.select) == null ? void 0 : Ie.value, o = (xe = this.gridStateContext.skip) == null ? void 0 : xe.value, n = ($e = this.gridStateContext.take) == null ? void 0 : $e.value, r = (ve = this.gridStateContext.group) == null ? void 0 : ve.value, a = (we = this.gridStateContext.groupExpand) == null ? void 0 : we.value, h = (ye = this.gridStateContext.detailExpand) == null ? void 0 : ye.value, u = (r == null ? void 0 : r.length) || 0, p = typeof this.$props.groupable == "object" && !!this.$props.groupable.stickyHeaders, c = typeof this.$props.groupable == "object" && !!this.$props.groupable.stickyFooters, f = !!(r != null && r.length);
+    let m;
+    this.currentColumnsState = (ke = this.gridStateContext.columnsState) == null ? void 0 : ke.value;
+    const x = this.$props.autoProcessData === !0 ? {
       group: !0,
       sort: !0,
       filter: !0,
       search: !0,
       page: !0
     } : this.$props.autoProcessData;
-    let I;
-    const w = P.getIdPrefix(this.navigation);
+    let C;
+    const v = E.getIdPrefix(this.navigation);
     let $ = [];
-    Array.isArray(this.$props.dataItems) ? ($ = this.$props.dataItems, I = (ke = this.$props.total) != null ? ke : $.length) : ($ = ((He = os(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField)) == null ? void 0 : He.data) || [], I = (Pe = (Me = this.$props.total) != null ? Me : (Te = this.$props.dataItems) == null ? void 0 : Te.total) != null ? Pe : $.length);
-    const b = this.$props.groupable === !0 || j(this.$props.groupable) && this.$props.groupable.enabled !== !1;
-    this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = b, this._virtualPageSize = this.calcVirtualPageSize();
-    const H = $.length === I, A = j(this.$props.groupable) && this.$props.groupable.footer || "none";
-    if (C) {
-      const l = C.page && !(this.isVirtualScroll && !this.$props.pageable), {
-        data: S,
-        total: v
-      } = ms($, {
-        group: C.group ? r : void 0,
-        sort: C.sort ? e : void 0,
-        filter: Ht(C.filter ? t : void 0, C.search ? s : void 0),
+    Array.isArray(this.$props.dataItems) ? ($ = this.$props.dataItems, C = (He = this.$props.total) != null ? He : $.length) : ($ = ((Te = as(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField)) == null ? void 0 : Te.data) || [], C = (Pe = (Ee = this.$props.total) != null ? Ee : (Me = this.$props.dataItems) == null ? void 0 : Me.total) != null ? Pe : $.length);
+    const w = this.$props.groupable === !0 || q(this.$props.groupable) && this.$props.groupable.enabled !== !1;
+    this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = w, this._virtualPageSize = this.calcVirtualPageSize();
+    const I = $.length === C, z = q(this.$props.groupable) && this.$props.groupable.footer || "none";
+    if (x) {
+      const l = x.page && !(this.isVirtualScroll && !this.$props.pageable), {
+        data: b,
+        total: k
+      } = Cs($, {
+        group: x.group ? r : void 0,
+        sort: x.sort ? e : void 0,
+        filter: Mt(x.filter ? t : void 0, x.search ? s : void 0),
         ...l ? {
-          take: this.$props.pageable ? o || 10 : o,
-          skip: n || 0
+          take: this.$props.pageable ? n || 10 : n,
+          skip: o || 0
         } : {}
       });
-      $ = S, I = (ze = this.$props.total) != null ? ze : v;
+      $ = b, C = (ze = this.$props.total) != null ? ze : k;
     }
     const {
       resolvedGroupsCount: X,
       flattedData: Y
-    } = this.getFlatData($, A, H ? 0 : this.$props.skip || 0, r, c, a, this.$props.dataItemKey);
+    } = this.getFlatData($, z, I ? 0 : this.$props.skip || 0, r, h, a, this.$props.dataItemKey);
     this.dataRef = Y;
-    const z = this.virtualSkipRef || 0;
-    if (this._virtualTotal = I, this.isVirtualScroll) {
-      let l = n || 0;
-      if ((p || this.$props.pageable) && (l = z, this._virtualTotal = this.dataRef.length), H || p || this.$props.pageable)
+    const P = this.virtualSkipRef || 0;
+    if (this._virtualTotal = C, this.isVirtualScroll) {
+      let l = o || 0;
+      if ((f || this.$props.pageable) && (l = P, this._virtualTotal = this.dataRef.length), I || f || this.$props.pageable)
         if (this._virtualPageSize === 0) {
-          const S = Math.min(o || this.$props.pageSize || 20, this.dataRef.length);
-          R = this.dataRef.slice(l, l + S);
+          const b = Math.min(n || this.$props.pageSize || 20, this.dataRef.length);
+          m = this.dataRef.slice(l, l + b);
         } else
-          R = this.dataRef.slice(l, l + this._virtualPageSize);
+          m = this.dataRef.slice(l, l + this._virtualPageSize);
     }
     this.initializeVirtualization();
-    const Q = (Ee = this.selectable) != null && Ee.drag ? "none" : void 0;
-    this.initColumns(this.$props.dataItems, X), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this.columnsRef, this.columnResize.columnsState = St(this.currentColumnsState || []), this.dragLogic.columns = this.columnsRef;
-    const B = this.$props.toolbar, E = this.$props.noRecords, T = this.columnsRef.filter((l) => l.children.length === 0), V = b && d(qt, {
+    const Q = (De = this.selectable) != null && De.drag ? "none" : void 0;
+    this.initColumns(this.$props.dataItems, X), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this.columnsRef, this.columnResize.columnsState = xt(this.currentColumnsState || []), this.dragLogic.columns = this.columnsRef;
+    const V = this.$props.toolbar, D = this.$props.noRecords, T = this.columnsRef.filter((l) => l.children.length === 0), O = w && d(Yt, {
       ref: (l) => {
         this.groupPanelDivRef = l;
       },
@@ -1409,27 +1459,27 @@ const fi = /* @__PURE__ */ Rt({
       onDragHandler: this.dragLogic.dragHandler,
       onReleaseHandler: this.dragLogic.releaseHandler,
       resolveTitle: this.resolveTitle
-    }, null), O = (this.dragLogic.reorderable || this.dragLogic.groupable) && q && document && document.body, F = [O && d(is, {
+    }, null), N = (this.dragLogic.reorderable || this.dragLogic.groupable) && B && document && document.body, K = [N && d(rs, {
       ref: (l) => {
         this.dropElementClueRef = l;
       }
-    }, null), O && d(ss, {
+    }, null), N && d(ns, {
       ref: (l) => {
         this.dragElementClueRef = l;
       }
-    }, null)], N = this.showLicenseWatermark ? d(xt, {
+    }, null)], W = this.showLicenseWatermark ? d($t, {
       message: this.licenseMessage
-    }, null) : null, Z = this.$attrs.style, at = Z && j(Z) && Z["width"] || "";
-    this.tableWidth = parseFloat(at.toString());
-    const dt = T.findIndex((l) => typeof l.colSpan == "function") > -1;
-    let W;
-    W = this.getCellsToRender({}, T);
-    const D = T.map(function(l, S) {
+    }, null) : null, Z = this.$attrs.style, ht = Z && q(Z) && Z["width"] || "";
+    this.tableWidth = parseFloat(ht.toString());
+    const ct = T.findIndex((l) => typeof l.colSpan == "function") > -1;
+    let U;
+    U = this.getCellsToRender({}, T);
+    const G = T.map(function(l, b) {
       return d("col", {
-        key: l.id || `col-${S}`,
+        key: l.id || `col-${b}`,
         width: l.width !== void 0 ? Math.floor(parseFloat(l.width.toString())) : void 0
       }, null);
-    }, this), ce = d(Wt, {
+    }, this), pe = d(qt, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
@@ -1437,7 +1487,7 @@ const fi = /* @__PURE__ */ Rt({
         this.headerRef = l;
       },
       onHeaderscroll: this.onHeaderScroll,
-      headerRow: d(Ut, {
+      headerRow: d(Jt, {
         grid: this,
         sort: e,
         groupable: this.$props.groupable,
@@ -1446,14 +1496,14 @@ const fi = /* @__PURE__ */ Rt({
         onSortChange: this.sortChangeHandler,
         filter: t,
         filterable: this.$props.filterable,
-        filterOperators: this.$props.filterOperators || Xe,
+        filterOperators: this.$props.filterOperators || Qe,
         onFilterChange: this.filterChangeHandler,
         columnMenu: this.$props.columnMenu,
         columnMenuIcon: this.$props.columnMenuIcon,
         columnMenuAnimate: this.$props.columnMenuAnimate,
         onSelectionchange: this.onHeaderSelectionChangeHandler,
         columns: this.columnsRef,
-        cellsToRender: W,
+        cellsToRender: U,
         columnVirtualization: this.$props.columnVirtualization,
         columnsInitial: this.$props.columns,
         columnResize: this.columnResize,
@@ -1466,15 +1516,15 @@ const fi = /* @__PURE__ */ Rt({
         isRtl: this.isRtl,
         isColCountDefined: this.getAriaColCount !== void 0,
         headerSelectionValue: !!(i && this.dataRef.filter((l) => l.rowType === "data").every((l) => i && this.$props.dataItemKey && M(this.$props.dataItemKey)(l.dataItem) !== void 0 ? i[M(this.$props.dataItemKey)(l.dataItem)] : void 0)),
-        filterRow: this.$props.filterable && d(jt, {
+        filterRow: this.$props.filterable && d(Xt, {
           grid: this,
           size: this.$props.size,
           columns: this.columnsRef,
           columnsMap: this._columnsMap,
-          cellsToRender: W,
+          cellsToRender: U,
           columnVirtualization: this.$props.columnVirtualization,
           filter: t,
-          filterOperators: this.$props.filterOperators || Xe,
+          filterOperators: this.$props.filterOperators || Qe,
           onFilterchange: this.filterChangeHandler,
           sort: this.$props.sort,
           cellRender: this.$props.filterCellRender,
@@ -1483,27 +1533,27 @@ const fi = /* @__PURE__ */ Rt({
           ariaRowIndex: this._columnsMap.length + 1
         }, null) || void 0
       }, null),
-      cols: D
-    }, null), pe = this.columnsRef.some((l) => {
-      var S;
-      return !!(l.footerCell || (S = l.cells) != null && S.footerCell);
-    }) || (De = this.$props.cells) != null && De.footerCell ? d(Jt, {
+      cols: G
+    }, null), ue = this.columnsRef.some((l) => {
+      var b;
+      return !!(l.footerCell || (b = l.cells) != null && b.footerCell);
+    }) || (Ge = this.$props.cells) != null && Ge.footerCell ? d(Qt, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
       ref: (l) => {
         this.footerRef = l;
       },
-      row: d(Xt, {
+      row: d(Zt, {
         isRtl: this.isRtl,
         rowIndex: this.getAriaRowCount + 1,
         columns: this.columnsRef,
         cells: this.$props.cells
       }, null),
-      cols: D
-    }, null) : d("span", null, null), L = {
+      cols: G
+    }, null) : d("span", null, null), _ = {
       leafColumns: T,
-      cellsToRender: W,
+      cellsToRender: U,
       selectedField: this.$props.selectedField,
       dataItemKey: this.$props.dataItemKey,
       select: i,
@@ -1512,7 +1562,7 @@ const fi = /* @__PURE__ */ Rt({
       cellRender: this.$props.cellRender,
       cells: this.$props.cells,
       getCellsToRender: this.getCellsToRender,
-      hasDynamicColSpan: dt,
+      hasDynamicColSpan: ct,
       itemChange: this.itemChange,
       selectionChangeHandler: this.selectionChangeHandler,
       editHandler: this.editHandler,
@@ -1525,114 +1575,114 @@ const fi = /* @__PURE__ */ Rt({
       uniqueField: this.$props.uniqueField,
       columnsRef: this.columnsRef,
       isRtl: this.isRtl,
-      idPrefix: w
-    }, ht = function(l, S, v, oe, ne) {
-      return Cs(L, l, S, v, oe, ne);
+      idPrefix: v
+    }, pt = function(l, b, k, oe, ne) {
+      return Is(_, l, b, k, oe, ne);
     };
-    let ct = 0, ee = [];
-    const te = !this.dataRef.length, ue = (l) => l >= this.dataRef.length - ct;
+    let ut = 0, ee = [];
+    const te = !this.dataRef.length, fe = (l) => l >= this.dataRef.length - ut;
     let se = 0;
     if (this.dataRef.length) {
       const l = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
-      let S = this.$props.skip || 0, v = -1, oe = 0;
+      let b = this.$props.skip || 0, k = -1, oe = 0;
       const ne = this.computedRowSpannable.enabled ? {} : void 0;
       if (this.isVirtualScroll) {
-        if (z > 0) {
-          const m = this.dataRef.slice(0, z).filter((K) => K.rowType === "data").length;
-          v += m, S += z;
+        if (P > 0) {
+          const g = this.dataRef.slice(0, P).filter((A) => A.rowType === "data").length;
+          k += g, b += P;
         }
-        !this.$props.pageable && H && (v += this.$props.skip || 0);
+        !this.$props.pageable && I && (k += this.$props.skip || 0);
       }
-      ee = (R || this.dataRef).map(function(m, K) {
-        m.rowType === "data" && v++;
-        const re = m.dataIndex % 2 !== 0, Ge = this.$props.dataItemKey && M(this.$props.dataItemKey)(m.dataItem), le = K + S, ae = Ge || "ai" + le, de = ae + "_1", U = ht.call(this, m, ae, v, re, ne), mt = m.rowType === "data" ? this.pinnedSourceSet.has(m.dataItem) : !1, gt = T.length - (this.detailExpandable.enabled ? 1 : 0) - ((r == null ? void 0 : r.length) || 0) || 1;
-        return se = le + l + oe, [d(us, {
-          key: ae,
-          item: m,
-          dataIndex: v,
+      ee = (m || this.dataRef).map(function(g, A) {
+        g.rowType === "data" && k++;
+        const re = g.dataIndex % 2 !== 0, Fe = this.$props.dataItemKey && M(this.$props.dataItemKey)(g.dataItem), ae = A + b, le = Fe || "ai" + ae, de = le + "_1", j = pt.call(this, g, le, k, re, ne), Rt = g.rowType === "data" ? this.pinnedSourceSet.has(g.dataItem) : !1, Ct = T.length - (this.detailExpandable.enabled ? 1 : 0) - ((r == null ? void 0 : r.length) || 0) || 1;
+        return se = ae + l + oe, [d(gs, {
+          key: le,
+          item: g,
+          dataIndex: k,
           ariaRowIndex: se,
-          absoluteRowIndex: le,
+          absoluteRowIndex: ae,
           isAltRow: re,
-          isHidden: ue(K),
+          isHidden: fe(A),
           rowHeight: this.$props.rowHeight,
-          isSelected: U.isSelected,
-          isHighlighted: U.isHighlighted,
-          isInEdit: U.isInEdit,
-          rowType: m.rowType,
-          onRowclick: (G) => this.rowClick(G, m),
-          onRowdblclick: (G) => this.rowDoubleClick(G, m),
+          isSelected: j.isSelected,
+          isHighlighted: j.isHighlighted,
+          isInEdit: j.isInEdit,
+          rowType: g.rowType,
+          onRowclick: (F) => this.rowClick(F, g),
+          onRowdblclick: (F) => this.rowDoubleClick(F, g),
           render: this.$props.rowRender,
-          class: this.$props.rowClass ? this.$props.rowClass(m) : "",
-          isPinned: mt,
+          class: this.$props.rowClass ? this.$props.rowClass(g) : "",
+          isPinned: Rt,
           rows: this.$props.rows
         }, {
-          default: () => [U.row]
-        }), this.$props.detail && m.rowType === "data" && (m.expanded || m.dataItem.expanded) && d("tr", {
+          default: () => [j.row]
+        }), this.$props.detail && g.rowType === "data" && (g.expanded || g.dataItem.expanded) && d("tr", {
           key: de,
           class: re ? "k-table-row k-table-alt-row k-detail-row" : "k-table-row k-detail-row",
           style: {
-            visibility: ue(K) ? "hidden" : "",
+            visibility: fe(A) ? "hidden" : "",
             height: this.$props.detailRowHeight + "px"
           },
           role: "row",
           "aria-rowindex": se
-        }, [r == null ? void 0 : r.map(function(G) {
-          return d(Ze, {
+        }, [r == null ? void 0 : r.map(function(F) {
+          return d(tt, {
             id: "",
-            dataIndex: m.dataIndex,
-            field: G.field,
-            dataItem: m.dataItem,
-            key: `group-${G.field}-${m.dataIndex}`,
+            dataIndex: g.dataIndex,
+            field: F.field,
+            dataItem: g.dataItem,
+            key: `group-${F.field}-${g.dataIndex}`,
             locked: this.$props.lockGroups,
-            group: m.group
+            group: g.group
           }, null);
-        }, this), (this.$props.expandField || this.detailExpandable.enabled) && d(Ot, {
-          id: P.generateNavigatableId(`${de}-dhcell`, w)
-        }, null), d(Nt, {
-          dataItem: m.dataItem,
-          dataIndex: m.dataIndex,
-          colSpan: gt,
+        }, this), (this.$props.expandField || this.detailExpandable.enabled) && d(Ut, {
+          id: E.generateNavigatableId(`${de}-dhcell`, v)
+        }, null), d(jt, {
+          dataItem: g.dataItem,
+          dataIndex: g.dataIndex,
+          colSpan: Ct,
           ariaColIndex: 2 + (r ? r.length : 0),
           detail: this.$props.detail ? this.$props.detail : void 0,
-          id: P.generateNavigatableId(`${de}-dcell`, w)
+          id: E.generateNavigatableId(`${de}-dcell`, v)
         }, null)])];
       }, this);
     }
-    const pt = this.$props.pageable && d(Tt, {
+    const ft = this.$props.pageable && d(Et, {
       class: "k-grid-pager",
       onPagesizechange: this.pageChangeHandler,
       onPagechange: this.pageChangeHandler,
       size: this.$props.size,
-      total: I,
-      skip: n || 0,
-      pageSize: (o !== void 0 ? o : this.$props.pageSize) || 10,
-      messagesMap: it,
-      settings: Mt(this.$props.pageable || {})
-    }, null), fe = _e.call(this, {
-      h: Fe,
+      total: C,
+      skip: o || 0,
+      pageSize: (n !== void 0 ? n : this.$props.pageSize) || 10,
+      messagesMap: nt,
+      settings: Pt(this.$props.pageable || {})
+    }, null), me = Ae.call(this, {
+      h: Le,
       template: this.$props.pager,
-      defaultRendering: pt,
+      defaultRendering: ft,
       additionalProps: {
         ...this.$props,
         skip: this.$props.skip || 0,
-        messagesMap: it
+        messagesMap: nt
       },
       additionalListeners: {
         pagesizechange: this.pageChangeHandler,
         pagechange: this.pageChangeHandler
       }
-    }), ut = (l) => e && e.filter((S) => S.field === l).length > 0, me = d("colgroup", {
+    }), mt = (l) => e && e.filter((b) => b.field === l).length > 0, ge = d("colgroup", {
       ref: y(this, "colGroup")
-    }, [T.map(function(l, S) {
+    }, [T.map(function(l, b) {
       return d("col", {
-        key: l.id || `col-${S}`,
-        class: ut(l.field) ? "k-sorted" : void 0,
+        key: l.id || `col-${b}`,
+        class: mt(l.field) ? "k-sorted" : void 0,
         width: l.width !== void 0 ? l.width.toString().indexOf("%") !== -1 ? l.width : Math.floor(parseFloat(l.width.toString())) + "px" : void 0
       }, null);
-    }, this)]), ge = {
+    }, this)]), Re = {
       height: this.getCorrectHeight,
       ...this.$attrs.style
-    }, ft = d("div", {
+    }, gt = d("div", {
       class: "k-loading-mask"
     }, [d("div", {
       class: "k-loading-color"
@@ -1643,89 +1693,93 @@ const fi = /* @__PURE__ */ Rt({
         justifyContent: "center",
         alignItems: "center"
       }
-    }, [d(Vt, {
+    }, [d(Wt, {
       size: "large",
       type: "converging-spinner"
-    }, null)])]), ie = this.$props.showLoader && _e.call(this, {
-      h: Fe,
+    }, null)])]), ie = this.$props.showLoader && Ae.call(this, {
+      h: Le,
       template: this.$props.loader,
-      defaultRendering: ft
+      defaultRendering: gt
     });
-    return this.$props.scrollable === "none" ? d(Le, null, [d(Ne, {
+    return this.$props.scrollable === "none" ? d(Ke, null, [d(We, {
       ref: "navRef",
       id: this._gridId,
       navigatable: this.$props.navigatable,
       scrollable: this.$props.scrollable,
       columnVirtualization: this.$props.columnVirtualization
     }, {
-      default: () => [d(je, {
+      default: () => [d(Je, {
         ref: (l) => {
           this.gridNavRef = l;
         },
         columnsRef: this.columnsRef,
         dataRef: this.dataRef,
         id: this.$props.id,
-        style: ge,
+        dir: this.$props.dir,
+        style: Re,
         class: this.nonscrollableWrapperClass,
         onMovetonextpage: this.moveToNextPage,
         onMovetoprevpage: this.moveToPrevPage,
         onColumnreorder: this.columnReorder,
-        onKeyboardselectionchange: this.onKeyboardSelectionChangeHandler
+        onKeyboardselectionchange: this.onKeyboardSelectionChangeHandler,
+        onNavigationaction: this.navigationActionHandler
       }, {
-        default: () => [B, V, d("div", {
+        default: () => [V, O, d("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
           "aria-colcount": this.getAriaColCount,
           "aria-rowcount": this.getAriaRowCount
-        }, [d(Yt, {
+        }, [d(es, {
           selectable: this.computedSelectable,
           class: "k-table",
           ref: y(this, "table")
         }, {
-          default: () => [me, ce, d("tbody", {
+          default: () => [ge, pe, d("tbody", {
             class: "k-table-tbody",
             "data-keyboardnavbody": !0,
             ref: y(this, "tableBody")
-          }, [ee, Ct("  "), ie]), pe]
-        }), te && d(st, {
-          id: P.generateNavigatableId("no-records", w)
+          }, [ee, St("  "), ie]), ue]
+        }), te && d(ot, {
+          id: E.generateNavigatableId("no-records", v)
         }, {
-          default: () => [E.length ? E : d(tt, null, null)]
-        })]), fe, ie, F]
+          default: () => [D.length ? D : d(it, null, null)]
+        })]), me, ie, K]
       })]
-    }), this.renderContextMenu()]) : d(Le, null, [d(Ne, {
+    }), this.renderContextMenu()]) : d(Ke, null, [d(We, {
       ref: "navRef",
       id: this._gridId,
       navigatable: this.$props.navigatable,
       scrollable: this.$props.scrollable,
       columnVirtualization: this.$props.columnVirtualization
     }, {
-      default: () => [d(je, {
+      default: () => [d(Je, {
         ref: (l) => {
           this.gridNavRef = l;
         },
         dataRef: this.dataRef,
         id: this.$props.id,
-        style: ge,
+        dir: this.$props.dir,
+        style: Re,
         class: this.scrollableWrapperClass,
         onMovetonextpage: this.moveToNextPage,
         onMovetoprevpage: this.moveToPrevPage,
         onColumnreorder: this.columnReorder,
         onKeyboardselectionchange: this.onKeyboardSelectionChangeHandler,
-        onSetcurrentontop: this.setCurrentOnTop
+        onSetcurrentontop: this.setCurrentOnTop,
+        onNavigationaction: this.navigationActionHandler
       }, {
-        default: () => [B, V, d("div", {
+        default: () => [V, O, d("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
           "aria-colcount": this.getAriaColCount,
           "aria-rowcount": this.getAriaRowCount
-        }, [ce, this.hasPinnedTopRows && d(rt, {
+        }, [pe, this.hasPinnedTopRows && d(lt, {
           ref: y(this, "pinnedTop"),
           size: this.$props.size,
-          cols: D,
-          dataRowContext: L,
+          cols: G,
+          dataRowContext: _,
           position: "top",
           pinnedItems: this.sortedPinnedTopRows,
           rowHeight: this.$props.rowHeight,
@@ -1734,13 +1788,13 @@ const fi = /* @__PURE__ */ Rt({
         }, null), d("div", {
           class: "k-grid-container",
           role: "presentation"
-        }, [p && h && d(nt, {
+        }, [f && p && d(at, {
           ref: y(this, "stickyHeader"),
           size: this.$props.size,
-          cols: D,
-          dataRowContext: L,
+          cols: G,
+          dataRowContext: _,
           position: "top",
-          groupLevelCount: f,
+          groupLevelCount: u,
           rowHeight: this.$props.rowHeight
         }, null), d("div", {
           role: "presentation",
@@ -1750,7 +1804,7 @@ const fi = /* @__PURE__ */ Rt({
         }, [d("div", {
           class: "k-grid-table-wrap",
           role: "presentation"
-        }, [d(Qt, {
+        }, [d(ts, {
           selectable: this.computedSelectable,
           tableClassName: this.gridTableClass,
           tableStyle: {
@@ -1758,16 +1812,16 @@ const fi = /* @__PURE__ */ Rt({
           },
           ref: y(this, "table")
         }, {
-          default: () => [me, d("tbody", {
+          default: () => [ge, d("tbody", {
             class: "k-table-tbody",
             role: "rowgroup",
             "data-keyboardnavbody": !0,
             ref: y(this, "tableBody")
           }, [ee])]
-        }), te && d(st, {
-          id: P.generateNavigatableId("no-records", w)
+        }), te && d(ot, {
+          id: E.generateNavigatableId("no-records", v)
         }, {
-          default: () => [E.length ? E : d(tt, null, null)]
+          default: () => [D.length ? D : d(it, null, null)]
         })]), !te && d("div", {
           class: "k-height-container",
           role: "presentation"
@@ -1776,29 +1830,29 @@ const fi = /* @__PURE__ */ Rt({
           style: this.$props.scrollable === "virtual" ? {
             height: this._containerHeightRef + "px"
           } : {}
-        }, null)])]), p && u && d(nt, {
+        }, null)])]), f && c && d(at, {
           ref: y(this, "stickyFooter"),
           size: this.$props.size,
-          cols: D,
-          dataRowContext: L,
+          cols: G,
+          dataRowContext: _,
           position: "bottom",
-          groupLevelCount: f,
+          groupLevelCount: u,
           rowHeight: this.$props.rowHeight
-        }, null)]), this.hasPinnedBottomRows && d(rt, {
+        }, null)]), this.hasPinnedBottomRows && d(lt, {
           ref: y(this, "pinnedBottom"),
           size: this.$props.size,
-          cols: D,
-          dataRowContext: L,
+          cols: G,
+          dataRowContext: _,
           position: "bottom",
           pinnedItems: this.sortedPinnedBottomRows,
           rowHeight: this.$props.rowHeight,
           rows: this.$props.rows,
           selectable: this.computedSelectable
-        }, null), pe, N]), fe, ie, F]
+        }, null), ue, W]), me, ie, K]
       })]
     }), this.renderContextMenu()]);
   }
 });
 export {
-  fi as Grid
+  Ri as Grid
 };