@progress/kendo-vue-grid 8.1.2-develop.1 → 8.2.0-develop.1

package/Grid.mjs

@@ -5,51 +5,53 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as ft, createVNode as a, h as De, createTextVNode as gt, ref as f, inject as mt, computed as Le, markRaw as I } from "vue";
-import { isObject as j, cloneArray as Rt, canUseDOM as q, WatermarkOverlay as Ct, getter as D, getTemplate as _e, setRef as $, hasListener as K, getComponentElementRef as Me, getRef as R, RowHeightService as bt, setScrollbarWidth as $t, kendoThemeMaps as Ke, uGrid as wt, isRtl as Be, validatePackage as xt, shouldShowValidationUI as vt, getLicenseMessage as It, guid as Ae } from "@progress/kendo-vue-common";
-import { tableKeyboardNavigationTools as k, combineFilters as St, Pager as yt, normalize as kt, TableKeyboardNavigationProvider as Ve, HeaderCell as Ht, updateLeft as Tt, updateRight as zt, groupExpandReducer as Et, detailExpandReducer as Pt, getSelectedState as Oe, getSelectedStateFromKeyDown as Gt, closestTagName as We, getColumnIndex as Ft, getRowIndex as Dt, getDetailExpandableOptions as Lt, getSelectionOptions as _t, getGroupExpandableOptions as Mt } from "@progress/kendo-vue-data-tools";
-import { Loader as Kt } from "@progress/kendo-vue-indicators";
-import { GridNav as Ne } from "./GridNav.mjs";
-import { GridSelectionCell as Ue } from "./cells/GridSelectionCell.mjs";
-import { GridHierarchyCell as je } from "./cells/GridHierarchyCell.mjs";
-import { GridDetailHierarchyCell as Bt } from "./cells/GridDetailHierarchyCell.mjs";
-import { GridDetailCell as At } from "./cells/GridDetailCell.mjs";
-import { Header as Vt } from "./header/Header.mjs";
-import { HeaderRow as Ot } from "./header/HeaderRow.mjs";
-import { FilterRow as Wt } from "./header/FilterRow.mjs";
-import { GroupPanel as Nt } from "./header/GroupPanel.mjs";
-import { Footer as Ut } from "./footer/Footer.mjs";
-import { FooterRow as jt } from "./footer/FooterRow.mjs";
-import { GridTable as qt } from "./components/table/GridTable.mjs";
-import { GridTableScrollable as Jt } from "./components/table/GridTableScrollable.mjs";
-import { operators as qe } from "./filterCommon.mjs";
-import { VirtualScroll as Qt } from "./VirtualScroll.mjs";
-import { ColumnResize as Xt } from "./drag/ColumnResize.mjs";
-import { CommonDragLogic as Yt } from "./drag/CommonDragLogic.mjs";
-import { DragClue as Zt } from "./drag/DragClue.mjs";
-import { DropClue as es } from "./drag/DropClue.mjs";
-import { applyExpandedState as ts, getColSpan as ss, autoGenerateColumns as is, mapColumns as os, getFlatColumnsState as Je, getRowSpanOptions as Qe, getDataAsArray as rs, groupedFirstItemValue as ls, calcRowHeight as ns, flatData as as, readColumns as ds } from "./utils/main.mjs";
-import { GridGroupCell as Xe } from "./cells/GridGroupCell.mjs";
-import { GridRow as hs } from "./rows/GridRow.mjs";
-import { gridProps as ps } from "./common.mjs";
-import { GridHeaderSelectionCell as Ye } from "./header/GridHeaderSelectionCell.mjs";
-import { GridNoRecords as Ze } from "./components/noRecords/GridNoRecords.mjs";
-import { GridNoRecordsContainer as et } from "./components/noRecords/GridNoRecordsContainer.mjs";
-import { packageMetadata as de } from "./package-metadata.mjs";
-import { pagerMessagesMap as tt } from "./messages/messagesMap.mjs";
-import { process as cs, orderBy as st } from "@progress/kendo-data-query";
-import { KendoKey as us } from "./key.mjs";
-import { getVirtualCellsToRender as fs } from "./utils/virtualColumns.mjs";
-import { StickyGroupTable as it } from "./components/StickyGroupTable.mjs";
-import { getRowContents as gs } from "./getRowContents.mjs";
-import { useStickyGroups as ms } from "./hooks/useStickyGroups.mjs";
-import { PinnedRowsTable as ot } from "./components/PinnedRowsTable.mjs";
-import { GridPinCell as Rs } from "./cells/pincell/GridPinCell.mjs";
-const ri = /* @__PURE__ */ ft({
+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({
   name: "KendoGrid",
   inheritAttrs: !1,
   props: {
-    ...ps,
+    ...fs,
     toolbar: {
       type: Object
     },
@@ -64,7 +66,16 @@ const ri = /* @__PURE__ */ ft({
       navigation: void 0,
       showLicenseWatermark: !1,
       licenseMessage: void 0,
-      notHiddenColumns: []
+      notHiddenColumns: [],
+      contextMenuState: {
+        show: !1,
+        offset: {
+          left: 0,
+          top: 0
+        },
+        dataItem: void 0,
+        field: void 0
+      }
     };
   },
   watch: {
@@ -94,12 +105,12 @@ const ri = /* @__PURE__ */ ft({
     }
   },
   created() {
-    xt(de), this.showLicenseWatermark = vt(de), this.licenseMessage = It(de), this.initialHeight = null, this.columnsRef = [], this.dragLogic = new Yt(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new Xt(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.tableRef = null, this.scrollHeightContainerRef = null, this.forceUpdateTimeout = void 0, this._gridId = Ae(), this._gridRoleElementId = Ae(), this.slicedCurrentData = void 0, this._prevTotal = void 0, this._containerHeightRef = 0, this._minRowHeightRef = 0, this.wrapperScrollTopRef = 0, this.scrollLeftRef = 0;
+    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;
   },
   mounted() {
     var t, s;
     this.setRefs();
-    const e = Be(this._element);
+    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 i = {
         rootMargin: "0px",
@@ -111,7 +122,7 @@ const ri = /* @__PURE__ */ ft({
   updated() {
     var s;
     this.setRefs();
-    const e = Be(this._element);
+    const e = Ve(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());
@@ -127,7 +138,7 @@ const ri = /* @__PURE__ */ ft({
       return this.$props.navigatable ? this.gridId : "";
     },
     groupExpandable() {
-      return Mt(typeof this.$props.groupable == "object" && this.$props.groupable.enabled !== !1 ? this.$props.groupable.expandable : this.$props.groupable);
+      return Bt(typeof this.$props.groupable == "object" && this.$props.groupable.enabled !== !1 ? this.$props.groupable.expandable : this.$props.groupable);
     },
     hierarchClass() {
       return wt.hierarchyCell({});
@@ -136,10 +147,10 @@ const ri = /* @__PURE__ */ ft({
       return Qe(this.$props.rowSpannable);
     },
     computedSelectable() {
-      return _t(this.$props.selectable);
+      return At(this.$props.selectable);
     },
     detailExpandable() {
-      return Lt(!!this.$props.detail);
+      return _t(!!this.$props.detail);
     },
     nonscrollableWrapperClass() {
       const {
@@ -148,7 +159,7 @@ const ri = /* @__PURE__ */ ft({
       return {
         "k-grid": !0,
         "k-grid-md": !e,
-        [`k-grid-${Ke.sizeMap[e] || e}`]: e,
+        [`k-grid-${Be.sizeMap[e] || e}`]: e,
         [t]: !!t
       };
     },
@@ -169,7 +180,7 @@ const ri = /* @__PURE__ */ ft({
         "k-table": !0,
         "k-grid-table": !0,
         "k-grid-md": !e,
-        [`k-table-${Ke.sizeMap[e] || e}`]: e
+        [`k-table-${Be.sizeMap[e] || e}`]: e
       };
     },
     getCorrectHeight() {
@@ -177,7 +188,7 @@ const ri = /* @__PURE__ */ ft({
     },
     currentGroupable() {
       var t;
-      const e = (t = this.gridContext.group) == null ? void 0 : t.value;
+      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;
     },
     computedCollapsed() {
@@ -191,12 +202,12 @@ const ri = /* @__PURE__ */ ft({
     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((r) => {
+      return this.$props.detail ? this._columnsMap.length + (this.$props.filterable ? 1 : 0) + t * 2 + (this.columnsRef.some((n) => {
         var o;
-        return !!(r.footerCell || (o = r.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((r) => {
+        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 !!(r.footerCell || (o = r.cells) != null && o.footerCell);
+        return !!(n.footerCell || (o = n.cells) != null && o.footerCell);
       }) || (i = this.$props.cells) != null && i.footerCell ? 1 : 0);
     },
     // Calculates the value of the ariaColcount attribute.
@@ -212,23 +223,50 @@ const ri = /* @__PURE__ */ ft({
     pinnedSourceSet() {
       var t, s;
       const e = /* @__PURE__ */ new Set();
-      return (t = this.gridContext.pinnedTopRows) != null && t.value && this.gridContext.pinnedTopRows.value.forEach((i) => e.add(i)), (s = this.gridContext.pinnedBottomRows) != null && s.value && this.gridContext.pinnedBottomRows.value.forEach((i) => e.add(i)), e;
+      return (t = this.gridStateContext.pinnedTopRows) != null && t.value && this.gridStateContext.pinnedTopRows.value.forEach((i) => e.add(i)), (s = this.gridStateContext.pinnedBottomRows) != null && s.value && this.gridStateContext.pinnedBottomRows.value.forEach((i) => e.add(i)), e;
     },
     sortedPinnedTopRows() {
       var s, i;
-      const e = ((s = this.gridContext.pinnedTopRows) == null ? void 0 : s.value) || [], t = (i = this.gridContext.sort) == null ? void 0 : i.value;
-      return this.autoProcessData && (t != null && t.length) ? st([...e], t) : e;
+      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;
     },
     sortedPinnedBottomRows() {
       var s, i;
-      const e = ((s = this.gridContext.pinnedBottomRows) == null ? void 0 : s.value) || [], t = (i = this.gridContext.sort) == null ? void 0 : i.value;
-      return this.autoProcessData && (t != null && t.length) ? st([...e], t) : e;
+      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;
     },
     hasPinnedTopRows() {
       return this.$props.pinnable && this.sortedPinnedTopRows.length > 0;
     },
     hasPinnedBottomRows() {
       return this.$props.pinnable && this.sortedPinnedBottomRows.length > 0;
+    },
+    contextMenuColumn() {
+      return this.columnsRef.find((e) => e.field === this.contextMenuState.field);
+    },
+    headMenuItems() {
+      var t;
+      const e = this.$props.sortable && ((t = this.contextMenuColumn) == null ? void 0 : t.sortable);
+      return ws({
+        sortable: !!e,
+        selectable: this.computedSelectable.enabled
+      });
+    },
+    bodyMenuItems() {
+      var e;
+      return this.$props.sortable && ((e = this.contextMenuColumn) == null || e.sortable), $s({
+        selectable: this.computedSelectable.enabled,
+        pinnable: !!this.$props.pinnable
+      });
+    },
+    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;
+        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;
+      }
     }
   },
   methods: {
@@ -241,6 +279,177 @@ const ri = /* @__PURE__ */ ft({
         right: e.right + "px"
       } : {};
     },
+    handleContextMenuOpen(e, t, s) {
+      e.preventDefault(), this.contextMenuState = {
+        show: !0,
+        offset: {
+          left: e.pageX,
+          top: e.pageY
+        },
+        dataItem: t,
+        field: s
+      };
+    },
+    handleContextMenuClose() {
+      this.contextMenuState = {
+        show: !1,
+        offset: {
+          left: 0,
+          top: 0
+        },
+        dataItem: void 0,
+        field: void 0
+      };
+    },
+    handleContextMenuSelect(e) {
+      this.handleContextMenuItemClick({
+        event: e,
+        dataItem: this.contextMenuState.dataItem,
+        field: this.contextMenuState.field
+      });
+    },
+    renderContextMenu() {
+      var e;
+      return d(Is, {
+        show: !!(this.contextMenuState.show && ((e = this.contextMenuItems) != null && e.length)),
+        dataItem: this.contextMenuState.dataItem,
+        field: this.contextMenuState.field,
+        items: this.contextMenuItems,
+        offset: this.contextMenuState.offset,
+        onClose: this.handleContextMenuClose,
+        onSelect: this.handleContextMenuSelect
+      }, 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;
+      });
+    },
+    handleContextMenuItemClick(e) {
+      var i, n, o, r, a, c, f;
+      const t = e.event.event.item, s = {
+        event: e.event,
+        menuItem: t,
+        dataItem: e.dataItem,
+        field: e.field
+      };
+      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);
+            });
+            C && ((a = this.contextMenuColumn) != null && a.field) && w.push({
+              field: this.contextMenuColumn.field,
+              dir: C
+            }), this.sortChangeHandler(w, {
+              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, $ = {
+              ...this.getArguments(e.event),
+              dataItem: h,
+              startDataItem: C,
+              endDataItem: C,
+              startRowIndex: C,
+              endRowIndex: C,
+              startColIndex: I,
+              endColIndex: w,
+              dataItems: R,
+              ctrlKey: !1,
+              altKey: !1,
+              metaKey: !1,
+              shiftKey: !1,
+              isDrag: !1,
+              mode: this.computedSelectable.mode,
+              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 : {}
+            } : {};
+            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);
+          }
+          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;
+            }), this.raiseSelectionEvent({
+              ...this.getArguments(e.event),
+              dataItems: h,
+              dataItem: p,
+              startDataItem: p,
+              endDataItem: R,
+              startRowIndex: 0,
+              endRowIndex: h.length - 1,
+              startColIndex: 0,
+              endColIndex: this.columnsRef.length - 1,
+              ctrlKey: !1,
+              altKey: !1,
+              metaKey: !1,
+              shiftKey: !1,
+              isDrag: !1,
+              mode: this.computedSelectable.mode,
+              cell: this.computedSelectable.cell,
+              componentId: this.$props.id || this._gridId,
+              selectedField: this.$props.selectedField || ""
+            }, u);
+          }
+          break;
+        }
+        case "ClearSelectionCommand":
+          this.computedSelectable.enabled && this.clearSelection({
+            ...this.getArguments(e.event),
+            dataItems: this.getLeafDataItems(),
+            startRowIndex: -1,
+            endRowIndex: -1,
+            startColIndex: -1,
+            endColIndex: -1,
+            ctrlKey: !1,
+            altKey: !1,
+            metaKey: !1,
+            shiftKey: !1,
+            isDrag: !1,
+            mode: this.computedSelectable.mode,
+            cell: this.computedSelectable.cell,
+            componentId: this.$props.id || this._gridId,
+            selectedField: this.$props.selectedField || ""
+          });
+          break;
+        case "PinTopCommand":
+          this.handleRowPin("pinTop", e.dataItem);
+          break;
+        case "PinBottomCommand":
+          this.handleRowPin("pinBottom", e.dataItem);
+          break;
+        case "UnpinCommand":
+          this.handleRowPin("unpin", e.dataItem);
+          break;
+      }
+      this.handleContextMenuClose();
+    },
+    triggerCellContextMenu(e, t, s) {
+      this.$emit("contextmenu", {
+        dataItem: t,
+        field: s,
+        event: e
+      }), this.$props.contextMenu && this.handleContextMenuOpen(e, t, s);
+    },
     handleIntersection(e) {
       const t = {
         rowIndex: this.rowIndexRef.value
@@ -260,12 +469,12 @@ const ri = /* @__PURE__ */ ft({
       const s = this._element;
       if (this.observerRef && s) {
         this.observerRef.disconnect();
-        const r = s.querySelector(`[absolute-row-index="${this.rowIndexRef.value}"]`);
-        r ? this.observerRef.observe(r) : this.setCurrentOnTop(e);
+        const n = s.querySelector(`[absolute-row-index="${this.rowIndexRef.value}"]`);
+        n ? this.observerRef.observe(n) : this.setCurrentOnTop(e);
       }
     },
     setCurrentOnTop(e) {
-      var i, r;
+      var i, n;
       if (!((i = this.vsRef) != null && i.container) || this.$props.scrollable === "none")
         return;
       this.observerRef && this.observerRef.disconnect();
@@ -273,7 +482,7 @@ const ri = /* @__PURE__ */ ft({
         rowIndex: t
       } = e, s = this._element;
       if (this.isVirtualScroll) {
-        const o = ((r = this.vsRef.rowHeightService) == null ? void 0 : r.offset(t)) || 0;
+        const o = ((n = this.vsRef.rowHeightService) == null ? void 0 : n.offset(t)) || 0;
         this.vsRef.container.scroll(0, o);
       } else if (s) {
         const o = t < 1 ? s.querySelector("tbody > tr:nth-child(1)") : s.querySelector(`tbody > tr:nth-child(${t + 1})`);
@@ -285,18 +494,18 @@ const ri = /* @__PURE__ */ ft({
       return Array.isArray(this.$props.dataItems) ? e = e || this.$props.dataItems.length : this.$props.dataItems && (e = e || this.$props.dataItems.total), e;
     },
     readColumnElements() {
-      return ds(this.$props.columns, this.currentColumnsState, {
+      return ps(this.$props.columns, this.currentColumnsState, {
         prevId: 0,
         idPrefix: this.idPrefix
       });
     },
     getResolvedFlatColumnsState() {
-      const e = [], t = (s, i) => s == null ? void 0 : s.forEach((r) => {
-        const o = r.hidden || i;
+      const e = [], t = (s, i) => s == null ? void 0 : s.forEach((n) => {
+        const o = n.hidden || i;
         e.push({
-          ...r,
+          ...n,
           hidden: o
-        }), t(r.children, o);
+        }), t(n.children, o);
       });
       return t(this.currentColumnsState, !1), e;
     },
@@ -304,19 +513,19 @@ const ri = /* @__PURE__ */ ft({
       const t = this.getResolvedFlatColumnsState();
       return [e.filter((s) => {
         var i;
-        return !s.hidden && !((i = t.find((r) => r.id === s.id)) != null && i.hidden);
+        return !s.hidden && !((i = t.find((n) => n.id === s.id)) != null && i.hidden);
       }), e.filter((s) => {
         var i;
-        return s.hidden || ((i = t.find((r) => r.id === s.id)) == null ? void 0 : i.hidden);
+        return s.hidden || ((i = t.find((n) => n.id === s.id)) == null ? void 0 : i.hidden);
       })];
     },
-    getFlatData(e, t, s, i, r, o, l) {
-      const d = [], h = as(d, e, t, {
+    getFlatData(e, t, s, i, n, o, r) {
+      const a = [], c = cs(a, e, t, {
         index: s
-      }, i !== void 0, r, o, this.groupExpandable.defaultExpand, l, this.$props.expandField);
+      }, i !== void 0, n, o, this.groupExpandable.defaultExpand, r, this.$props.expandField);
       return {
-        flattedData: d,
-        resolvedGroupsCount: h
+        flattedData: a,
+        resolvedGroupsCount: c
       };
     },
     getColumnsEssentialProps(e) {
@@ -348,38 +557,38 @@ const ri = /* @__PURE__ */ ft({
      * 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, r) => i.declarationIndex - r.declarationIndex), s.map((i) => {
+      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 {
-          declarationIndex: r,
+          declarationIndex: n,
           parentIndex: o,
-          depth: l,
-          colSpan: d,
-          rowSpan: h,
-          index: c,
-          kFirst: u,
-          children: g,
-          ...C
+          depth: r,
+          colSpan: a,
+          rowSpan: c,
+          index: f,
+          kFirst: h,
+          children: u,
+          ...p
         } = i;
-        return g.length ? {
-          children: t(g),
-          ...C
-        } : C;
+        return u.length ? {
+          children: t(u),
+          ...p
+        } : p;
       }));
       return t(e);
     },
     setRefs() {
-      var o, l, d, h;
+      var o, r, a, c;
       let e = "$el";
-      const t = R(this, "gridNav");
+      const t = x(this, "gridNav");
       t && (this._element = t[e]);
-      const s = R(this, "groupPanelDiv");
+      const s = x(this, "groupPanelDiv");
       if (s) {
-        let c = s[e] || null;
-        this.dragLogic.refGroupPanelDiv(c);
+        let f = s[e] || null;
+        this.dragLogic.refGroupPanelDiv(f);
       }
-      this.stickyHeaderRef = R(this, "stickyHeader"), this.stickyFooterRef = R(this, "stickyFooter"), this.pinnedTopRef = R(this, "pinnedTop"), this.pinnedBottomRef = R(this, "pinnedBottom");
-      const i = R(this, "dropElementClue"), r = R(this, "dragElementClue");
-      this.dragLogic.refDropElementClue(i), this.dragLogic.refDragElementClue(r), this.columnResize.colGroupMain = R(this, "colGroup"), this.columnResize.colGroupStickyHeader = (o = this.stickyHeaderRef) == null ? void 0 : o.colGroupRef, this.columnResize.colGroupStickyFooter = (l = this.stickyFooterRef) == null ? void 0 : l.colGroupRef, this.columnResize.colGroupPinnedTop = (d = this.pinnedTopRef) == null ? void 0 : d.colGroupRef, this.columnResize.colGroupPinnedBottom = (h = this.pinnedBottomRef) == null ? void 0 : h.colGroupRef, this._header = R(this, "header"), this._footer = R(this, "footer"), this.resetTableWidth(), $t();
+      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();
     },
     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);
@@ -396,20 +605,20 @@ const ri = /* @__PURE__ */ ft({
     },
     virtualPageChange(e, t) {
       var i;
-      const s = (i = this.gridContext.group) == null ? void 0 : i.value;
+      const s = (i = this.gridStateContext.group) == null ? void 0 : i.value;
       this.$props.pageable || s != null && s.length ? (this.virtualSkipRef = e.skip, this.$forceUpdate()) : this.pageChangeHandler(e, t);
     },
     initializeVirtualization() {
       const e = this.vsRef, t = this.$props.rowHeight || this._minRowHeightRef || 0;
-      this.tableBodyRef = R(this, "tableBody"), this.scrollTableRef = Me(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 = R(this, "scrollContainer"), e.tableBody = this.tableBodyRef, e.scrollHeightContainer = R(this, "scrollHeightContainer"), e.table = this.scrollTableRef, (!e.rowHeightService || e.total !== this._virtualTotal) && t && (e.total = this._virtualTotal, e.rowHeightService = new bt(this._virtualTotal, t)));
+      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)));
     },
     setContainerHeight() {
-      const e = R(this, "scrollContainer");
+      const e = x(this, "scrollContainer");
       this._containerHeightRef = (e == null ? void 0 : e.offsetHeight) || 0;
     },
     setMinRowHeight() {
       if (!this._minRowHeightRef && !this.$props.rowHeight) {
-        const t = ns(R(this, "tableBody"));
+        const t = hs(x(this, "tableBody"));
         t && (this._minRowHeightRef = t, this.$forceUpdate());
       }
     },
@@ -417,7 +626,7 @@ const ri = /* @__PURE__ */ ft({
       this.setRefs();
     },
     onHeaderScroll(e) {
-      const s = e.target.scrollLeft, i = R(this, "scrollContainer");
+      const s = e.target.scrollLeft, i = x(this, "scrollContainer");
       i && (i.scrollLeft = s), this.scrollLeftRef = s;
     },
     scrollHandler(e) {
@@ -428,8 +637,8 @@ const ri = /* @__PURE__ */ ft({
       }, 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 r = this.isVirtualScroll && this.virtualSkipRef !== i;
-      if (this.$emit("scroll", e), this.wrapperScrollTopRef = s, !r) {
+      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;
       }
@@ -447,29 +656,29 @@ const ri = /* @__PURE__ */ ft({
       });
     },
     loopGroupedItems(e, t, s = 0, i = null) {
-      return e.forEach((r) => {
-        !i && t(r, s) && (i = r), r.items && r.items.length && !i && (i = this.loopGroupedItems(r.items, t, s + 1, i));
+      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));
       }), i;
     },
     updateGroupCollapsed(e) {
       let t = this.computedCollapsed, s = t[e.level];
-      const i = this.$props.uniqueField, r = function(d, h) {
-        return d.value === e.dataItem.value && h === e.level;
-      }, o = this.allGroupedItems ? this.loopGroupedItems(this.allGroupedItems.data, r, 0, null) : e.dataItem, l = ls(o || e.dataItem, i);
+      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);
       if (e.value) {
         if (s && s.length) {
-          const d = s.indexOf(l);
-          d > -1 && s.splice(d, 1);
+          const a = s.indexOf(r);
+          a > -1 && s.splice(a, 1);
         }
       } else
-        s ? s.includes(l) || s.push(l) : s = [l];
+        s ? s.includes(r) || s.push(r) : s = [r];
       return t;
     },
     itemChange(e) {
       var i;
-      const t = K.call(this, "itemchange"), s = (i = this.gridContext.group) == null ? void 0 : i.value;
+      const t = _.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) {
-        K.call(this, "expandchange") && e.dataItem && this.$emit("expandchange", {
+        _.call(this, "expandchange") && e.dataItem && this.$emit("expandchange", {
           ...this.getArguments(e.event),
           collapsedGroups: this.updateGroupCollapsed(e),
           dataItem: e.dataItem,
@@ -519,15 +728,15 @@ const ri = /* @__PURE__ */ ft({
         const {
           event: s,
           dataItem: i,
-          dataIndex: r,
+          dataIndex: n,
           columnIndex: o
-        } = e, l = {
+        } = e, r = {
           ...this.getArguments(s),
           dataItem: i,
           startColIndex: o,
           endColIndex: o,
-          startRowIndex: r,
-          endRowIndex: r,
+          startRowIndex: n,
+          endRowIndex: n,
           dataItems: this.getLeafDataItems(),
           altKey: !1,
           ctrlKey: !1,
@@ -539,10 +748,10 @@ const ri = /* @__PURE__ */ ft({
           componentId: this.$props.id || this._gridId,
           selectedField: this.$props.selectedField || ""
         };
-        this.gridContext.selectionchange({
-          ...l,
-          select: this.$props.dataItemKey ? Oe({
-            event: l,
+        this.gridStateContext.selectionchange({
+          ...r,
+          select: this.$props.dataItemKey ? We({
+            event: r,
             selectedState: (t = this.$props.select) != null ? t : {},
             dataItemKey: this.$props.dataItemKey
           }) : {}
@@ -550,36 +759,36 @@ const ri = /* @__PURE__ */ ft({
       }
     },
     onKeyboardSelectionChangeHandler(e) {
-      var c, u;
+      var f, h;
       if (!this.computedSelectable.enabled || !this.$props.dataItemKey)
         return;
-      const t = (c = this.gridContext.select) == null ? void 0 : c.value, s = {
+      const t = (f = this.gridStateContext.select) == null ? void 0 : f.value, s = {
         dataItems: this.getLeafDataItems(),
         mode: this.computedSelectable.mode,
         cell: this.computedSelectable.cell,
         componentId: this.$props.id,
         selectedField: "",
         ...this.getArguments(e)
-      }, i = Gt({
+      }, i = Ft({
         event: s,
         selectedState: t != null ? t : {},
         dataItemKey: this.$props.dataItemKey
       });
       if (i === t)
         return;
-      const r = e.target, o = We(r, "TD"), l = We(r, "TR"), d = Ft(o), h = Dt(l);
-      if (d !== void 0 && h !== void 0) {
-        const g = (u = rs(this.$props.dataItems)) == null ? void 0 : u[h];
-        this.gridContext.selectionchange({
+      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];
+        this.gridStateContext.selectionchange({
           ...s,
           select: i,
-          dataItem: g,
-          startRowIndex: h,
-          startColIndex: d,
-          startDataItem: g,
-          endDataItem: g,
-          endRowIndex: h,
-          endColIndex: d,
+          dataItem: u,
+          startRowIndex: c,
+          startColIndex: a,
+          startDataItem: u,
+          endDataItem: u,
+          endRowIndex: c,
+          endColIndex: a,
           ctrlKey: e.ctrlKey,
           altKey: e.altKey,
           metaKey: e.metaKey,
@@ -591,8 +800,8 @@ const ri = /* @__PURE__ */ ft({
     onHeaderSelectionChangeHandler(e) {
       if (this.computedSelectable.enabled) {
         const t = this.getLeafDataItems();
-        this.gridContext.headerselectionchange({
-          select: e.event.target.checked ? t.reduce((s, i) => (this.$props.dataItemKey && D(this.$props.dataItemKey)(i) !== void 0 && (s[D(this.$props.dataItemKey)(i)] = !0), s), {}) : {},
+        this.gridStateContext.headerselectionchange({
+          select: e.event.target.checked ? t.reduce((s, i) => (this.$props.dataItemKey && M(this.$props.dataItemKey)(i) !== void 0 && (s[M(this.$props.dataItemKey)(i)] = !0), s), {}) : {},
           field: e.field,
           event: e.event,
           target: this,
@@ -603,7 +812,7 @@ const ri = /* @__PURE__ */ ft({
     selectionRelease(e) {
       var t;
       if (this.computedSelectable.enabled) {
-        const s = this.getLeafDataItems(), i = s[e.startRowIndex], r = s[e.endRowIndex], o = {
+        const s = this.getLeafDataItems(), i = s[e.startRowIndex], n = s[e.endRowIndex], o = {
           event: void 0,
           target: this,
           selectedField: "",
@@ -611,38 +820,38 @@ const ri = /* @__PURE__ */ ft({
           dataItems: s,
           dataItem: null,
           startDataItem: i,
-          endDataItem: r,
+          endDataItem: n,
           ...e
-        }, l = Oe({
+        }, r = We({
           event: o,
           selectedState: (t = this.$props.select) != null ? t : {},
           // 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, l);
+        this.raiseSelectionEvent(o, r);
       }
     },
     clearSelection(e) {
       this.computedSelectable.enabled && this.raiseSelectionEvent(e, {});
     },
     raiseSelectionEvent(e, t) {
-      this.computedSelectable.enabled && this.gridContext.selectionchange({
+      this.computedSelectable.enabled && this.gridStateContext.selectionchange({
         ...e,
         select: t
       });
     },
     moveToNextPage(e) {
-      var r, o, l, d;
-      const t = (l = (o = (r = this.gridContext.take) == null ? void 0 : r.value) != null ? o : this.$props.pageSize) != null ? l : 0, s = (((d = this.gridContext.skip) == null ? void 0 : d.value) || 0) + t, i = this.getTotal();
+      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();
       s < i && this.pageChangeHandler({
         skip: s,
         take: t
       }, e);
     },
     moveToPrevPage(e) {
-      var i, r, o, l;
-      const t = (o = (r = (i = this.gridContext.take) == null ? void 0 : i.value) != null ? r : this.$props.pageSize) != null ? o : 0, s = (((l = this.gridContext.skip) == null ? void 0 : l.value) || 0) - t;
+      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;
       s >= 0 && this.pageChangeHandler({
         skip: s,
         take: t
@@ -683,75 +892,75 @@ const ri = /* @__PURE__ */ ft({
     handleDetailExpandAction(e, t) {
       var s;
       if (this.detailExpandable.enabled) {
-        const i = (s = this.gridContext.detailExpand) == null ? void 0 : s.value, r = Pt(i != null ? i : {}, e);
-        this.gridContext.detailexpandchange({
+        const i = (s = this.gridStateContext.detailExpand) == null ? void 0 : s.value, n = Gt(i != null ? i : {}, e);
+        this.gridStateContext.detailexpandchange({
           ...this.getArguments(t),
-          detailExpand: r
+          detailExpand: n
         });
       }
     },
     handleGroupExpandAction(e, t) {
       var s;
       if (this.groupExpandable.enabled) {
-        const i = (s = this.gridContext.groupExpand) == null ? void 0 : s.value, r = Et(i != null ? i : [], e, this.groupExpandable);
-        this.$props.expandField || this.gridContext.groupexpandchange({
+        const i = (s = this.gridStateContext.groupExpand) == null ? void 0 : s.value, n = Dt(i != null ? i : [], e, this.groupExpandable);
+        this.$props.expandField || this.gridStateContext.groupexpandchange({
           ...this.getArguments(t),
-          groupExpand: r
+          groupExpand: n
         });
       }
       this.scrollToStickyGroup(e.group);
     },
     raiseDataEvent(e, t, s, i) {
       if (this.resetVirtualSkip(), this.$props.autoProcessData)
-        this.gridContext[e]({
+        this.gridStateContext[e]({
           ...this.getArguments(i),
           ...t
         });
-      else if (K.call(this, e))
+      else if (_.call(this, e))
         this.$emit(e, {
           ...this.getArguments(i),
           ...t
         });
-      else if (K.call(this, "datastatechange")) {
-        const r = {
+      else if (_.call(this, "datastatechange")) {
+        const n = {
           ...this.getDataState(),
           ...s
         };
-        this.gridContext.datastatechange({
+        this.gridStateContext.datastatechange({
           ...this.getArguments(i),
-          data: r,
-          dataState: r
+          data: n,
+          dataState: n
         });
       }
     },
     columnReorder(e, t, s) {
-      const i = this.columnsRef[e], r = Je(this.currentColumnsState), o = i.depth, l = (u) => {
+      const i = this.columnsRef[e], n = Ye(this.currentColumnsState), o = i.depth, r = (h) => {
         do
-          u++;
-        while (u < this.columnsRef.length && this.columnsRef[u].depth > o);
-        return u;
-      }, d = this.columnsRef.splice(e, l(e) - e);
-      this.columnsRef.splice(e < t ? l(t - d.length) : t, 0, ...d), this.columnsRef.filter((u) => u.declarationIndex >= 0).forEach((u, g) => {
-        u.orderIndex = g;
-        const C = r.find((b) => b.id === u.id);
-        C && (C.orderIndex = g);
+          h++;
+        while (h < this.columnsRef.length && this.columnsRef[h].depth > o);
+        return h;
+      }, 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);
       });
-      const h = this.columnsRef[e].locked && this.columnsRef[t].locked;
-      Tt(this._columnsMap, this.columnsRef, h || this.shouldUpdateLeftRightRef), zt(this._columnsMap, this.columnsRef, h || this.shouldUpdateLeftRightRef), this.resizedRef && (this.shouldUpdateLeftRightRef = !1, this.resizedRef = !1);
-      const c = this.getColumns();
+      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();
       this.$emit("columnreorder", {
         target: this,
-        columns: c,
+        columns: f,
         event: s,
         prev: e,
         next: t
-      }), this.gridContext.columnsstatechange({
+      }), this.gridStateContext.columnsstatechange({
         columnsState: this.currentColumnsState
       });
     },
     groupReorder(e, t, s) {
-      var r;
-      const i = (r = this.gridContext.group) == null ? void 0 : r.value;
+      var n;
+      const i = (n = this.gridStateContext.group) == null ? void 0 : n.value;
       i !== void 0 && (i.splice(t, 0, ...i.splice(e, 1)), this.groupChangeHandler(i, s));
     },
     columnToGroup(e, t, s) {
@@ -759,10 +968,10 @@ const ri = /* @__PURE__ */ ft({
       const i = this.columnsRef[e].field;
       if (!i)
         return;
-      const r = (((o = this.gridContext.group) == null ? void 0 : o.value) || []).slice();
-      r.splice(t, 0, {
+      const n = (((o = this.gridStateContext.group) == null ? void 0 : o.value) || []).slice();
+      n.splice(t, 0, {
         field: i
-      }), this.groupChangeHandler(r, s);
+      }), this.groupChangeHandler(n, s);
     },
     resetTableWidth() {
       var i;
@@ -770,43 +979,43 @@ const ri = /* @__PURE__ */ ft({
       if (!this.columnResize.colGroupMain)
         return;
       const t = (i = this.columnResize.colGroupMain) == null ? void 0 : i.children;
-      for (let r = 0; r < t.length; r++) {
-        const o = t[r].width;
+      for (let n = 0; n < t.length; n++) {
+        const o = t[n].width;
         if (!o)
           return;
         e += parseFloat(o.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 = Me(this, "table");
+      const s = Ae(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, r, o, l) {
+    onResize(e, t, s, i, n, o, r) {
       this.resetTableWidth(), this.shouldUpdateLeftRightRef = !0, this.resizedRef = !0, this.$emit("columnresize", {
         columns: this.getColumns(),
         index: e,
-        targetColumnId: l,
+        targetColumnId: r,
         event: i,
         newWidth: t,
         oldWidth: s,
-        end: r,
+        end: n,
         target: this
-      }), r && this.gridContext.columnsstatechange({
+      }), n && this.gridStateContext.columnsstatechange({
         columnsState: o
       });
     },
     initColumnsState(e, t) {
       const s = (i) => {
         var o;
-        const r = t.find((l) => l.id === i.id);
-        if (r) {
-          const l = {
-            ...r
+        const n = t.find((r) => r.id === i.id);
+        if (n) {
+          const r = {
+            ...n
           };
-          return l.children = (o = i.children) == null ? void 0 : o.map(s), l;
+          return r.children = (o = i.children) == null ? void 0 : o.map(s), r;
         }
         return i;
       };
@@ -814,13 +1023,13 @@ const ri = /* @__PURE__ */ ft({
     },
     configureColumns(e, t) {
       e.filter((o) => o.columnType === "checkbox").forEach((o) => {
-        o.width = o.width || "50px", o.defaultCell = I(Ue), o.defaultHeaderCell = I(Ye), o._type = "edit", o.columnMenu = !1;
+        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 = I(Ue), o.defaultHeaderCell = I(Ye), o.columnMenu = !1;
+        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 = I(Rs), o.defaultHeaderCell = I(Ht), o.sortable = !1, o.filterable = !1, o.editable = !1;
+        o.width = o.width || "48px", o.defaultCell = k(Ss), o.defaultHeaderCell = k(Pt), o.sortable = !1, o.filterable = !1, o.editable = !1;
       });
-      const s = Je(this.currentColumnsState);
+      const s = Ye(this.currentColumnsState);
       this.initColumnsState(e, s);
       const i = {
         id: "",
@@ -842,54 +1051,54 @@ const ri = /* @__PURE__ */ ft({
         ariaColumnIndex: 0,
         isAccessible: !0
       };
-      let r = 0;
+      let n = 0;
       if (this.detailExpandable.enabled && this.$props.detail && !this.$props.expandField) {
         const o = {
           ...i,
           _type: "expand",
-          id: k.generateNavigatableId(`${r++}`, "expand", "column"),
-          defaultCell: I(je),
+          id: P.generateNavigatableId(`${n++}`, "expand", "column"),
+          defaultCell: k(Je),
           field: this.detailExpandable.column,
           headerClassName: this.hierarchClass
         };
-        e.unshift(o), this.currentColumnsState.unshift(s.find((l) => l.id === o.id) || o);
+        e.unshift(o), this.currentColumnsState.unshift(s.find((r) => r.id === o.id) || o);
       }
-      this.$props.expandField && K.call(this, "expandchange") && this.$props.detail && (e.unshift({
+      this.$props.expandField && _.call(this, "expandchange") && this.$props.detail && (e.unshift({
         ...i,
-        defaultCell: I(je),
+        defaultCell: k(Je),
         field: this.$props.expandField,
         headerClassName: "k-hierarchy-cell k-header",
-        id: k.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
+        id: P.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
         ...this.expandColumn
-      }), r++);
+      }), n++);
       for (let o = 0; o < t; o++) {
-        const l = {
+        const r = {
           ...i,
           isAccessible: !1,
-          defaultCell: I(Xe),
-          id: k.generateNavigatableId(`${r++}`, "group", "column"),
+          defaultCell: k(Ze),
+          id: P.generateNavigatableId(`${n++}`, "group", "column"),
           field: "value",
           locked: this.$props.lockGroups,
           columnMenu: !1
         };
-        e.unshift(l), this.currentColumnsState.unshift(s.find((d) => d.id === l.id) || l);
+        e.unshift(r), this.currentColumnsState.unshift(s.find((a) => a.id === r.id) || r);
       }
-      e.slice(r).forEach((o) => {
-        o.parentIndex >= 0 && (o.parentIndex += r), o.rowSpannable = o.rowSpannable !== void 0 ? Qe(o.rowSpannable) : this.computedRowSpannable;
+      e.slice(n).forEach((o) => {
+        o.parentIndex >= 0 && (o.parentIndex += n), o.rowSpannable = o.rowSpannable !== void 0 ? Qe(o.rowSpannable) : this.computedRowSpannable;
       });
     },
     initColumns(e, t) {
       var o;
       this.columnsRef = this.readColumnElements();
-      const s = (o = this.gridContext.group) == null ? void 0 : o.value;
-      this.columnsRef.filter((l) => !l.hidden).length === 0 && (this.columnsRef = is(e, s, {
+      const s = (o = this.gridStateContext.group) == null ? void 0 : o.value;
+      this.columnsRef.filter((r) => !r.hidden).length === 0 && (this.columnsRef = rs(e, s, {
         column: this.$props.expandField ? this.$props.expandField : this.groupExpandable.column
       }, {
         prevId: 0,
         idPrefix: this.idPrefix
       })), this.configureColumns(this.columnsRef, t);
-      const [i, r] = this.filterColumns(this.columnsRef);
-      this.columnsRef = i, this.hiddenColumnsRef = r, this._columnsMap = os(this.columnsRef, !0);
+      const [i, n] = this.filterColumns(this.columnsRef);
+      this.columnsRef = i, this.hiddenColumnsRef = n, this._columnsMap = ls(this.columnsRef, !0);
     },
     resolveTitle(e) {
       const t = this.findColumnByField(e), s = t && (t.title || t.field);
@@ -914,14 +1123,14 @@ const ri = /* @__PURE__ */ ft({
       return null;
     },
     getDataState() {
-      var o, l, d, h, c;
-      const e = (o = this.gridContext.sort) == null ? void 0 : o.value, t = (l = this.gridContext.filter) == null ? void 0 : l.value, s = (d = this.gridContext.skip) == null ? void 0 : d.value, i = (h = this.gridContext.take) == null ? void 0 : h.value, r = (c = this.gridContext.group) == null ? void 0 : c.value;
+      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;
       return {
         filter: t,
         sort: e,
         skip: s,
         take: i !== void 0 ? i : this.$props.pageSize,
-        group: r
+        group: n
       };
     },
     getArguments(e) {
@@ -943,19 +1152,19 @@ const ri = /* @__PURE__ */ ft({
       }), t;
     },
     searchChange(e) {
-      const t = this.$props.searchFields || this.columnsRef.map((r) => r.field) || [], s = e.event.target.value, i = {
+      const t = this.$props.searchFields || this.columnsRef.map((n) => n.field) || [], s = e.event.target.value, i = {
         logic: "or",
-        filters: t.filter((r) => r !== void 0).map((r) => {
+        filters: t.filter((n) => n !== void 0).map((n) => {
           var o;
-          return typeof r == "string" ? {
-            field: r,
+          return typeof n == "string" ? {
+            field: n,
             value: s,
             operator: "contains"
           } : {
             value: s,
-            operator: (o = r.operator) != null ? o : "contains",
-            field: r.field,
-            ignoreCase: r.ignoreCase
+            operator: (o = n.operator) != null ? o : "contains",
+            field: n.field,
+            ignoreCase: n.ignoreCase
           };
         })
       };
@@ -968,26 +1177,26 @@ const ri = /* @__PURE__ */ ft({
     getCellsToRender(e, t) {
       var o;
       const s = [];
-      let i = null, r = 0;
-      if (t.forEach((l, d) => {
-        const h = parseFloat((l.width || "").toString()) || 10;
-        if (r) {
-          r--, i && (i.width += h);
+      let i = null, n = 0;
+      if (t.forEach((r, a) => {
+        const c = parseFloat((r.width || "").toString()) || 10;
+        if (n) {
+          n--, i && (i.width += c);
           return;
         }
-        const c = Math.min(ss(l, e), t.length - d);
-        r = c - 1, i = {
-          width: h,
-          colSpan: c,
-          columnIndex: d
+        const f = Math.min(ns(r, e), t.length - a);
+        n = f - 1, i = {
+          width: c,
+          colSpan: f,
+          columnIndex: a
         }, s.push(i);
       }), this.$props.columnVirtualization) {
-        const l = this.scrollLeftRef || 0, d = this.tableWidth || parseFloat((((o = this.$attrs.style) == null ? void 0 : o.width) || "").toString());
-        return fs({
+        const r = this.scrollLeftRef || 0, a = this.tableWidth || parseFloat((((o = this.$attrs.style) == null ? void 0 : o.width) || "").toString());
+        return Rs({
           cellModels: s,
           columns: t,
-          tableViewPortWidth: d,
-          scrollLeft: l
+          tableViewPortWidth: a,
+          scrollLeft: r
         });
       }
       return s;
@@ -1006,69 +1215,69 @@ const ri = /* @__PURE__ */ ft({
         if (s)
           return s;
       }
-      const i = this.$props.rowHeight || this._minRowHeightRef, r = this._containerHeightRef;
-      return r && i ? Math.ceil(r / i * 1.5) : 0;
+      const i = this.$props.rowHeight || this._minRowHeightRef, n = this._containerHeightRef;
+      return n && i ? Math.ceil(n / i * 1.5) : 0;
     },
     getRowPinPosition(e) {
-      var o, l;
+      var o, r;
       const {
         dataItemKey: t = ""
-      } = this.$props, s = ((o = this.gridContext.pinnedTopRows) == null ? void 0 : o.value) || [], i = ((l = this.gridContext.pinnedBottomRows) == null ? void 0 : l.value) || [];
+      } = this.$props, s = ((o = this.gridStateContext.pinnedTopRows) == null ? void 0 : o.value) || [], i = ((r = this.gridStateContext.pinnedBottomRows) == null ? void 0 : r.value) || [];
       if (!t || !e)
         return "none";
-      const r = e[t];
-      return s != null && s.some((d) => d[t] === r) ? "top" : i != null && i.some((d) => d[t] === r) ? "bottom" : "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";
     },
     handleRowPin(e, t) {
-      var c, u, g, C;
+      var f, h, u, p;
       if (!this.$props.pinnable)
         return;
       const {
         dataItemKey: s = ""
-      } = this.$props, i = ((c = this.gridContext.pinnedTopRows) == null ? void 0 : c.value) || [], r = ((u = this.gridContext.pinnedBottomRows) == null ? void 0 : u.value) || [], o = t[s], l = i.filter((b) => b[s] !== o), d = r.filter((b) => b[s] !== o);
-      let h;
+      } = 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;
       switch (e) {
         case "pinTop":
-          h = {
-            pinnedTopRows: [...l, t],
-            pinnedBottomRows: d,
+          c = {
+            pinnedTopRows: [...r, t],
+            pinnedBottomRows: a,
             dataItem: t
           };
           break;
         case "pinBottom":
-          h = {
-            pinnedTopRows: l,
-            pinnedBottomRows: [...d, t],
+          c = {
+            pinnedTopRows: r,
+            pinnedBottomRows: [...a, t],
             dataItem: t
           };
           break;
         case "unpin":
-          h = {
-            pinnedTopRows: l,
-            pinnedBottomRows: d,
+          c = {
+            pinnedTopRows: r,
+            pinnedBottomRows: a,
             dataItem: t
           };
           break;
         default:
           return;
       }
-      (C = (g = this.gridContext).rowpinchange) == null || C.call(g, h);
+      (p = (u = this.gridStateContext).rowpinchange) == null || p.call(u, c);
     },
     pinnedSelectionRelease(e, t) {
       const s = this.$props.dataItemKey;
       if (!s || !t)
         return;
-      const i = D(s), r = this.getLeafDataItems().findIndex((o) => i(o) === i(t));
-      r !== -1 && this.selectionRelease({
+      const i = M(s), n = this.getLeafDataItems().findIndex((o) => i(o) === i(t));
+      n !== -1 && this.selectionRelease({
         ...e,
-        startRowIndex: r,
-        endRowIndex: r
+        startRowIndex: n,
+        endRowIndex: n
       });
     }
   },
   provide() {
     return {
-      kendo: {
+      gridContext: {
         dataItemKey: this.$props.dataItemKey,
         searchChange: this.searchChange,
         selectionRelease: this.selectionRelease,
@@ -1078,156 +1287,157 @@ const ri = /* @__PURE__ */ ft({
         scrollToStickyGroup: this.scrollToStickyGroup,
         getCellPositionStyle: this.getCellPositionStyle,
         onRowPin: this.handleRowPin,
-        getRowPinPosition: this.getRowPinPosition
+        getRowPinPosition: this.getRowPinPosition,
+        onContextMenu: this.triggerCellContextMenu
       },
       sticky: this.sticky
     };
   },
   setup(e) {
-    const t = f(null), s = f(null), i = f(null), r = f(null), o = f(null), l = f(null), d = f(null), h = f([]), c = f([]), u = f(null), g = f(null), C = f(null), b = f(null), S = f(null), x = f(null), H = f(!0), w = f(!1), T = new Qt(), E = f(0), B = mt(us, {}), J = typeof e.groupable == "object" && !!e.groupable.stickyHeaders, Q = typeof e.groupable == "object" && !!e.groupable.stickyFooters, z = f([]), X = Le(() => {
-      var L, W;
-      return !!((W = (L = B.group) == null ? void 0 : L.value) != null && W.length);
-    }), A = null, P = f(void 0), y = f({
+    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({
       headerItems: [],
       footerItems: []
     }), {
       scrollToStickyGroup: V,
       update: O
-    } = ms({
-      enabled: J,
-      enabledFooters: Q,
+    } = bs({
+      enabled: X,
+      enabledFooters: Y,
       flatData: z,
-      containerRef: u,
-      stickyHeaderRef: g,
-      stickyFooterRef: C,
-      tableBodyRef: x,
+      containerRef: h,
+      stickyHeaderRef: u,
+      stickyFooterRef: p,
+      tableBodyRef: I,
       rowHeight: e.rowHeight,
-      isGrouped: X,
-      virtualSkipRef: E,
-      rowHeightServiceRef: Le(() => T == null ? void 0 : T.rowHeightService)
+      isGrouped: Q,
+      virtualSkipRef: H,
+      rowHeightServiceRef: Ke(() => b == null ? void 0 : b.rowHeightService)
     });
     return {
-      rowIndexRef: P,
-      observerRef: A,
+      rowIndexRef: E,
+      observerRef: B,
       dataRef: z,
       groupPanelDivRef: t,
       dropElementClueRef: s,
       dragElementClueRef: i,
-      headerRef: r,
+      headerRef: n,
       footerRef: o,
-      gridNavRef: l,
-      colGroupRef: d,
-      scrollContainerRef: u,
-      tableBodyRef: x,
-      gridContext: B,
-      shouldUpdateLeftRightRef: H,
-      resizedRef: w,
+      gridNavRef: r,
+      colGroupRef: a,
+      scrollContainerRef: h,
+      tableBodyRef: I,
+      gridStateContext: A,
+      shouldUpdateLeftRightRef: w,
+      resizedRef: $,
       currentColumnsState: e.columnsState,
-      vsRef: T,
-      virtualSkipRef: E,
-      stickyHeaderItems: h,
-      stickyHeaderRef: g,
-      stickyFooterItems: c,
-      stickyFooterRef: C,
-      pinnedTopRef: b,
-      pinnedBottomRef: S,
-      sticky: y,
+      vsRef: b,
+      virtualSkipRef: H,
+      stickyHeaderItems: c,
+      stickyHeaderRef: u,
+      stickyFooterItems: f,
+      stickyFooterRef: p,
+      pinnedTopRef: R,
+      pinnedBottomRef: C,
+      sticky: T,
       scrollToStickyGroup: V,
       updateStickyGroups: O
     };
   },
   render() {
-    var me, Re, Ce, be, $e, we, xe, ve, Ie, Se, ye, ke, He, Te, ze, Ee, Pe, Ge;
-    const e = (me = this.gridContext.sort) == null ? void 0 : me.value, t = (Re = this.gridContext.filter) == null ? void 0 : Re.value, s = (Ce = this.gridContext.search) == null ? void 0 : Ce.value, i = (be = this.gridContext.select) == null ? void 0 : be.value, r = ($e = this.gridContext.skip) == null ? void 0 : $e.value, o = (we = this.gridContext.take) == null ? void 0 : we.value, l = (xe = this.gridContext.group) == null ? void 0 : xe.value, d = (ve = this.gridContext.groupExpand) == null ? void 0 : ve.value, h = (Ie = this.gridContext.detailExpand) == null ? void 0 : Ie.value, c = (l == null ? void 0 : l.length) || 0, u = typeof this.$props.groupable == "object" && !!this.$props.groupable.stickyHeaders, g = typeof this.$props.groupable == "object" && !!this.$props.groupable.stickyFooters, C = !!(l != null && l.length);
-    let b;
-    this.currentColumnsState = (Se = this.gridContext.columnsState) == null ? void 0 : Se.value;
-    const S = this.$props.autoProcessData === !0 ? {
+    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 ? {
       group: !0,
       sort: !0,
       filter: !0,
       search: !0,
       page: !0
     } : this.$props.autoProcessData;
-    let x;
-    const H = k.getIdPrefix(this.navigation);
-    let w = [];
-    Array.isArray(this.$props.dataItems) ? (w = this.$props.dataItems, x = (ye = this.$props.total) != null ? ye : w.length) : (w = ((ke = ts(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField)) == null ? void 0 : ke.data) || [], x = (ze = (Te = this.$props.total) != null ? Te : (He = this.$props.dataItems) == null ? void 0 : He.total) != null ? ze : w.length);
-    const T = this.$props.groupable === !0 || j(this.$props.groupable) && this.$props.groupable.enabled !== !1;
-    this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = T, this._virtualPageSize = this.calcVirtualPageSize();
-    const E = w.length === x, B = j(this.$props.groupable) && this.$props.groupable.footer || "none";
-    if (S) {
-      const n = S.page && !(this.isVirtualScroll && !this.$props.pageable), {
-        data: m,
+    let I;
+    const w = P.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
-      } = cs(w, {
-        group: S.group ? l : void 0,
-        sort: S.sort ? e : void 0,
-        filter: St(S.filter ? t : void 0, S.search ? s : void 0),
-        ...n ? {
+      } = 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),
+        ...l ? {
           take: this.$props.pageable ? o || 10 : o,
-          skip: r || 0
+          skip: n || 0
         } : {}
       });
-      w = m, x = (Ee = this.$props.total) != null ? Ee : v;
+      $ = S, I = (ze = this.$props.total) != null ? ze : v;
     }
     const {
-      resolvedGroupsCount: J,
-      flattedData: Q
-    } = this.getFlatData(w, B, E ? 0 : this.$props.skip || 0, l, h, d, this.$props.dataItemKey);
-    this.dataRef = Q;
+      resolvedGroupsCount: X,
+      flattedData: Y
+    } = this.getFlatData($, A, H ? 0 : this.$props.skip || 0, r, c, a, this.$props.dataItemKey);
+    this.dataRef = Y;
     const z = this.virtualSkipRef || 0;
-    if (this._virtualTotal = x, this.isVirtualScroll) {
-      let n = r || 0;
-      if ((C || this.$props.pageable) && (n = z, this._virtualTotal = this.dataRef.length), E || C || this.$props.pageable)
+    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)
         if (this._virtualPageSize === 0) {
-          const m = Math.min(o || this.$props.pageSize || 20, this.dataRef.length);
-          b = this.dataRef.slice(n, n + m);
+          const S = Math.min(o || this.$props.pageSize || 20, this.dataRef.length);
+          R = this.dataRef.slice(l, l + S);
         } else
-          b = this.dataRef.slice(n, n + this._virtualPageSize);
+          R = this.dataRef.slice(l, l + this._virtualPageSize);
     }
     this.initializeVirtualization();
-    const X = (Pe = this.selectable) != null && Pe.drag ? "none" : void 0;
-    this.initColumns(this.$props.dataItems, J), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this.columnsRef, this.columnResize.columnsState = Rt(this.currentColumnsState || []), this.dragLogic.columns = this.columnsRef;
-    const A = this.$props.toolbar, P = this.$props.noRecords, y = this.columnsRef.filter((n) => n.children.length === 0), V = T && a(Nt, {
-      ref: (n) => {
-        this.groupPanelDivRef = n;
+    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, {
+      ref: (l) => {
+        this.groupPanelDivRef = l;
       },
-      group: l || [],
+      group: r || [],
       ariaControls: this._gridRoleElementId,
       onGroupChange: this.groupChangeHandler,
       onPressHandler: this.dragLogic.pressHandler,
       onDragHandler: this.dragLogic.dragHandler,
       onReleaseHandler: this.dragLogic.releaseHandler,
       resolveTitle: this.resolveTitle
-    }, null), O = (this.dragLogic.reorderable || this.dragLogic.groupable) && q && document && document.body, L = [O && a(es, {
-      ref: (n) => {
-        this.dropElementClueRef = n;
+    }, null), O = (this.dragLogic.reorderable || this.dragLogic.groupable) && q && document && document.body, F = [O && d(is, {
+      ref: (l) => {
+        this.dropElementClueRef = l;
       }
-    }, null), O && a(Zt, {
-      ref: (n) => {
-        this.dragElementClueRef = n;
+    }, null), O && d(ss, {
+      ref: (l) => {
+        this.dragElementClueRef = l;
       }
-    }, null)], W = this.showLicenseWatermark ? a(Ct, {
+    }, null)], N = this.showLicenseWatermark ? d(xt, {
       message: this.licenseMessage
-    }, null) : null, Y = this.$attrs.style, rt = Y && j(Y) && Y["width"] || "";
-    this.tableWidth = parseFloat(rt.toString());
-    const lt = y.findIndex((n) => typeof n.colSpan == "function") > -1;
-    let N;
-    N = this.getCellsToRender({}, y);
-    const G = y.map(function(n, m) {
-      return a("col", {
-        key: n.id || `col-${m}`,
-        width: n.width !== void 0 ? Math.floor(parseFloat(n.width.toString())) : void 0
+    }, 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) {
+      return d("col", {
+        key: l.id || `col-${S}`,
+        width: l.width !== void 0 ? Math.floor(parseFloat(l.width.toString())) : void 0
       }, null);
-    }, this), he = a(Vt, {
+    }, this), ce = d(Wt, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
-      ref: (n) => {
-        this.headerRef = n;
+      ref: (l) => {
+        this.headerRef = l;
       },
       onHeaderscroll: this.onHeaderScroll,
-      headerRow: a(Ot, {
+      headerRow: d(Ut, {
         grid: this,
         sort: e,
         groupable: this.$props.groupable,
@@ -1236,14 +1446,14 @@ const ri = /* @__PURE__ */ ft({
         onSortChange: this.sortChangeHandler,
         filter: t,
         filterable: this.$props.filterable,
-        filterOperators: this.$props.filterOperators || qe,
+        filterOperators: this.$props.filterOperators || Xe,
         onFilterChange: this.filterChangeHandler,
         columnMenu: this.$props.columnMenu,
         columnMenuIcon: this.$props.columnMenuIcon,
         columnMenuAnimate: this.$props.columnMenuAnimate,
         onSelectionchange: this.onHeaderSelectionChangeHandler,
         columns: this.columnsRef,
-        cellsToRender: N,
+        cellsToRender: W,
         columnVirtualization: this.$props.columnVirtualization,
         columnsInitial: this.$props.columns,
         columnResize: this.columnResize,
@@ -1255,16 +1465,16 @@ const ri = /* @__PURE__ */ ft({
         cells: this.$props.cells,
         isRtl: this.isRtl,
         isColCountDefined: this.getAriaColCount !== void 0,
-        headerSelectionValue: !!(i && this.dataRef.filter((n) => n.rowType === "data").every((n) => i && this.$props.dataItemKey && D(this.$props.dataItemKey)(n.dataItem) !== void 0 ? i[D(this.$props.dataItemKey)(n.dataItem)] : void 0)),
-        filterRow: this.$props.filterable && a(Wt, {
+        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, {
           grid: this,
           size: this.$props.size,
           columns: this.columnsRef,
           columnsMap: this._columnsMap,
-          cellsToRender: N,
+          cellsToRender: W,
           columnVirtualization: this.$props.columnVirtualization,
           filter: t,
-          filterOperators: this.$props.filterOperators || qe,
+          filterOperators: this.$props.filterOperators || Xe,
           onFilterchange: this.filterChangeHandler,
           sort: this.$props.sort,
           cellRender: this.$props.filterCellRender,
@@ -1273,27 +1483,27 @@ const ri = /* @__PURE__ */ ft({
           ariaRowIndex: this._columnsMap.length + 1
         }, null) || void 0
       }, null),
-      cols: G
-    }, null), pe = this.columnsRef.some((n) => {
-      var m;
-      return !!(n.footerCell || (m = n.cells) != null && m.footerCell);
-    }) || (Ge = this.$props.cells) != null && Ge.footerCell ? a(Ut, {
+      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, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
-      ref: (n) => {
-        this.footerRef = n;
+      ref: (l) => {
+        this.footerRef = l;
       },
-      row: a(jt, {
+      row: d(Xt, {
         isRtl: this.isRtl,
         rowIndex: this.getAriaRowCount + 1,
         columns: this.columnsRef,
         cells: this.$props.cells
       }, null),
-      cols: G
-    }, null) : a("span", null, null), _ = {
-      leafColumns: y,
-      cellsToRender: N,
+      cols: D
+    }, null) : d("span", null, null), L = {
+      leafColumns: T,
+      cellsToRender: W,
       selectedField: this.$props.selectedField,
       dataItemKey: this.$props.dataItemKey,
       select: i,
@@ -1302,7 +1512,7 @@ const ri = /* @__PURE__ */ ft({
       cellRender: this.$props.cellRender,
       cells: this.$props.cells,
       getCellsToRender: this.getCellsToRender,
-      hasDynamicColSpan: lt,
+      hasDynamicColSpan: dt,
       itemChange: this.itemChange,
       selectionChangeHandler: this.selectionChangeHandler,
       editHandler: this.editHandler,
@@ -1315,142 +1525,142 @@ const ri = /* @__PURE__ */ ft({
       uniqueField: this.$props.uniqueField,
       columnsRef: this.columnsRef,
       isRtl: this.isRtl,
-      idPrefix: H
-    }, nt = function(n, m, v, ie, oe) {
-      return gs(_, n, m, v, ie, oe);
+      idPrefix: w
+    }, ht = function(l, S, v, oe, ne) {
+      return Cs(L, l, S, v, oe, ne);
     };
-    let at = 0, Z = [];
-    const ee = !this.dataRef.length, ce = (n) => n >= this.dataRef.length - at;
-    let te = 0;
+    let ct = 0, ee = [];
+    const te = !this.dataRef.length, ue = (l) => l >= this.dataRef.length - ct;
+    let se = 0;
     if (this.dataRef.length) {
-      const n = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
-      let m = this.$props.skip || 0, v = -1, ie = 0;
-      const oe = this.computedRowSpannable.enabled ? {} : void 0;
+      const l = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
+      let S = this.$props.skip || 0, v = -1, oe = 0;
+      const ne = this.computedRowSpannable.enabled ? {} : void 0;
       if (this.isVirtualScroll) {
         if (z > 0) {
-          const p = this.dataRef.slice(0, z).filter((M) => M.rowType === "data").length;
-          v += p, m += z;
+          const m = this.dataRef.slice(0, z).filter((K) => K.rowType === "data").length;
+          v += m, S += z;
         }
-        !this.$props.pageable && E && (v += this.$props.skip || 0);
+        !this.$props.pageable && H && (v += this.$props.skip || 0);
       }
-      Z = (b || this.dataRef).map(function(p, M) {
-        p.rowType === "data" && v++;
-        const re = p.dataIndex % 2 !== 0, Fe = this.$props.dataItemKey && D(this.$props.dataItemKey)(p.dataItem), le = M + m, ne = Fe || "ai" + le, ae = ne + "_1", U = nt.call(this, p, ne, v, re, oe), ct = p.rowType === "data" ? this.pinnedSourceSet.has(p.dataItem) : !1, ut = y.length - (this.detailExpandable.enabled ? 1 : 0) - ((l == null ? void 0 : l.length) || 0) || 1;
-        return te = le + n + ie, [a(hs, {
-          key: ne,
-          item: p,
+      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,
-          ariaRowIndex: te,
+          ariaRowIndex: se,
           absoluteRowIndex: le,
           isAltRow: re,
-          isHidden: ce(M),
+          isHidden: ue(K),
           rowHeight: this.$props.rowHeight,
           isSelected: U.isSelected,
           isHighlighted: U.isHighlighted,
           isInEdit: U.isInEdit,
-          rowType: p.rowType,
-          onRowclick: (F) => this.rowClick(F, p),
-          onRowdblclick: (F) => this.rowDoubleClick(F, p),
+          rowType: m.rowType,
+          onRowclick: (G) => this.rowClick(G, m),
+          onRowdblclick: (G) => this.rowDoubleClick(G, m),
           render: this.$props.rowRender,
-          class: this.$props.rowClass ? this.$props.rowClass(p) : "",
-          isPinned: ct,
+          class: this.$props.rowClass ? this.$props.rowClass(m) : "",
+          isPinned: mt,
           rows: this.$props.rows
         }, {
           default: () => [U.row]
-        }), this.$props.detail && p.rowType === "data" && (p.expanded || p.dataItem.expanded) && a("tr", {
-          key: ae,
+        }), this.$props.detail && m.rowType === "data" && (m.expanded || m.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: ce(M) ? "hidden" : "",
+            visibility: ue(K) ? "hidden" : "",
             height: this.$props.detailRowHeight + "px"
           },
           role: "row",
-          "aria-rowindex": te
-        }, [l == null ? void 0 : l.map(function(F) {
-          return a(Xe, {
+          "aria-rowindex": se
+        }, [r == null ? void 0 : r.map(function(G) {
+          return d(Ze, {
             id: "",
-            dataIndex: p.dataIndex,
-            field: F.field,
-            dataItem: p.dataItem,
-            key: `group-${F.field}-${p.dataIndex}`,
+            dataIndex: m.dataIndex,
+            field: G.field,
+            dataItem: m.dataItem,
+            key: `group-${G.field}-${m.dataIndex}`,
             locked: this.$props.lockGroups,
-            group: p.group
+            group: m.group
           }, null);
-        }, this), (this.$props.expandField || this.detailExpandable.enabled) && a(Bt, {
-          id: k.generateNavigatableId(`${ae}-dhcell`, H)
-        }, null), a(At, {
-          dataItem: p.dataItem,
-          dataIndex: p.dataIndex,
-          colSpan: ut,
-          ariaColIndex: 2 + (l ? l.length : 0),
+        }, 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,
+          ariaColIndex: 2 + (r ? r.length : 0),
           detail: this.$props.detail ? this.$props.detail : void 0,
-          id: k.generateNavigatableId(`${ae}-dcell`, H)
+          id: P.generateNavigatableId(`${de}-dcell`, w)
         }, null)])];
       }, this);
     }
-    const dt = this.$props.pageable && a(yt, {
+    const pt = this.$props.pageable && d(Tt, {
       class: "k-grid-pager",
       onPagesizechange: this.pageChangeHandler,
       onPagechange: this.pageChangeHandler,
       size: this.$props.size,
-      total: x,
-      skip: r || 0,
+      total: I,
+      skip: n || 0,
       pageSize: (o !== void 0 ? o : this.$props.pageSize) || 10,
-      messagesMap: tt,
-      settings: kt(this.$props.pageable || {})
-    }, null), ue = _e.call(this, {
-      h: De,
+      messagesMap: it,
+      settings: Mt(this.$props.pageable || {})
+    }, null), fe = _e.call(this, {
+      h: Fe,
       template: this.$props.pager,
-      defaultRendering: dt,
+      defaultRendering: pt,
       additionalProps: {
         ...this.$props,
         skip: this.$props.skip || 0,
-        messagesMap: tt
+        messagesMap: it
       },
       additionalListeners: {
         pagesizechange: this.pageChangeHandler,
         pagechange: this.pageChangeHandler
       }
-    }), ht = (n) => e && e.filter((m) => m.field === n).length > 0, fe = a("colgroup", {
-      ref: $(this, "colGroup")
-    }, [y.map(function(n, m) {
-      return a("col", {
-        key: n.id || `col-${m}`,
-        class: ht(n.field) ? "k-sorted" : void 0,
-        width: n.width !== void 0 ? n.width.toString().indexOf("%") !== -1 ? n.width : Math.floor(parseFloat(n.width.toString())) + "px" : void 0
+    }), ut = (l) => e && e.filter((S) => S.field === l).length > 0, me = d("colgroup", {
+      ref: y(this, "colGroup")
+    }, [T.map(function(l, S) {
+      return d("col", {
+        key: l.id || `col-${S}`,
+        class: ut(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 = {
       height: this.getCorrectHeight,
       ...this.$attrs.style
-    }, pt = a("div", {
+    }, ft = d("div", {
       class: "k-loading-mask"
-    }, [a("div", {
+    }, [d("div", {
       class: "k-loading-color"
-    }, null), a("div", {
+    }, null), d("div", {
       style: {
         height: "100%",
         display: "flex",
         justifyContent: "center",
         alignItems: "center"
       }
-    }, [a(Kt, {
+    }, [d(Vt, {
       size: "large",
       type: "converging-spinner"
-    }, null)])]), se = this.$props.showLoader && _e.call(this, {
-      h: De,
+    }, null)])]), ie = this.$props.showLoader && _e.call(this, {
+      h: Fe,
       template: this.$props.loader,
-      defaultRendering: pt
+      defaultRendering: ft
     });
-    return this.$props.scrollable === "none" ? a(Ve, {
+    return this.$props.scrollable === "none" ? d(Le, null, [d(Ne, {
       ref: "navRef",
       id: this._gridId,
       navigatable: this.$props.navigatable,
       scrollable: this.$props.scrollable,
       columnVirtualization: this.$props.columnVirtualization
     }, {
-      default: () => [a(Ne, {
-        ref: (n) => {
-          this.gridNavRef = n;
+      default: () => [d(je, {
+        ref: (l) => {
+          this.gridNavRef = l;
         },
         columnsRef: this.columnsRef,
         dataRef: this.dataRef,
@@ -1462,38 +1672,38 @@ const ri = /* @__PURE__ */ ft({
         onColumnreorder: this.columnReorder,
         onKeyboardselectionchange: this.onKeyboardSelectionChangeHandler
       }, {
-        default: () => [A, V, a("div", {
+        default: () => [B, V, d("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
           "aria-colcount": this.getAriaColCount,
           "aria-rowcount": this.getAriaRowCount
-        }, [a(qt, {
+        }, [d(Yt, {
           selectable: this.computedSelectable,
           class: "k-table",
-          ref: $(this, "table")
+          ref: y(this, "table")
         }, {
-          default: () => [fe, he, a("tbody", {
+          default: () => [me, ce, d("tbody", {
             class: "k-table-tbody",
             "data-keyboardnavbody": !0,
-            ref: $(this, "tableBody")
-          }, [Z, gt("  "), se]), pe]
-        }), ee && a(et, {
-          id: k.generateNavigatableId("no-records", H)
+            ref: y(this, "tableBody")
+          }, [ee, Ct("  "), ie]), pe]
+        }), te && d(st, {
+          id: P.generateNavigatableId("no-records", w)
         }, {
-          default: () => [P.length ? P : a(Ze, null, null)]
-        })]), ue, se, L]
+          default: () => [E.length ? E : d(tt, null, null)]
+        })]), fe, ie, F]
       })]
-    }) : a(Ve, {
+    }), this.renderContextMenu()]) : d(Le, null, [d(Ne, {
       ref: "navRef",
       id: this._gridId,
       navigatable: this.$props.navigatable,
       scrollable: this.$props.scrollable,
       columnVirtualization: this.$props.columnVirtualization
     }, {
-      default: () => [a(Ne, {
-        ref: (n) => {
-          this.gridNavRef = n;
+      default: () => [d(je, {
+        ref: (l) => {
+          this.gridNavRef = l;
         },
         dataRef: this.dataRef,
         id: this.$props.id,
@@ -1505,90 +1715,90 @@ const ri = /* @__PURE__ */ ft({
         onKeyboardselectionchange: this.onKeyboardSelectionChangeHandler,
         onSetcurrentontop: this.setCurrentOnTop
       }, {
-        default: () => [A, V, a("div", {
+        default: () => [B, V, d("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
           "aria-colcount": this.getAriaColCount,
           "aria-rowcount": this.getAriaRowCount
-        }, [he, this.hasPinnedTopRows && a(ot, {
-          ref: $(this, "pinnedTop"),
+        }, [ce, this.hasPinnedTopRows && d(rt, {
+          ref: y(this, "pinnedTop"),
           size: this.$props.size,
-          cols: G,
-          dataRowContext: _,
+          cols: D,
+          dataRowContext: L,
           position: "top",
           pinnedItems: this.sortedPinnedTopRows,
           rowHeight: this.$props.rowHeight,
           rows: this.$props.rows,
           selectable: this.computedSelectable
-        }, null), a("div", {
+        }, null), d("div", {
           class: "k-grid-container",
           role: "presentation"
-        }, [C && u && a(it, {
-          ref: $(this, "stickyHeader"),
+        }, [p && h && d(nt, {
+          ref: y(this, "stickyHeader"),
           size: this.$props.size,
-          cols: G,
-          dataRowContext: _,
+          cols: D,
+          dataRowContext: L,
           position: "top",
-          groupLevelCount: c,
+          groupLevelCount: f,
           rowHeight: this.$props.rowHeight
-        }, null), a("div", {
+        }, null), d("div", {
           role: "presentation",
-          ref: $(this, "scrollContainer"),
+          ref: y(this, "scrollContainer"),
           class: "k-grid-content k-virtual-content",
           onScroll: this.scrollHandler
-        }, [a("div", {
+        }, [d("div", {
           class: "k-grid-table-wrap",
           role: "presentation"
-        }, [a(Jt, {
+        }, [d(Qt, {
           selectable: this.computedSelectable,
           tableClassName: this.gridTableClass,
           tableStyle: {
-            userSelect: X
+            userSelect: Q
           },
-          ref: $(this, "table")
+          ref: y(this, "table")
         }, {
-          default: () => [fe, a("tbody", {
+          default: () => [me, d("tbody", {
             class: "k-table-tbody",
             role: "rowgroup",
             "data-keyboardnavbody": !0,
-            ref: $(this, "tableBody")
-          }, [Z])]
-        }), ee && a(et, {
-          id: k.generateNavigatableId("no-records", H)
+            ref: y(this, "tableBody")
+          }, [ee])]
+        }), te && d(st, {
+          id: P.generateNavigatableId("no-records", w)
         }, {
-          default: () => [P.length ? P : a(Ze, null, null)]
-        })]), !ee && a("div", {
+          default: () => [E.length ? E : d(tt, null, null)]
+        })]), !te && d("div", {
           class: "k-height-container",
           role: "presentation"
-        }, [a("div", {
-          ref: $(this, "scrollHeightContainer"),
+        }, [d("div", {
+          ref: y(this, "scrollHeightContainer"),
           style: this.$props.scrollable === "virtual" ? {
             height: this._containerHeightRef + "px"
           } : {}
-        }, null)])]), C && g && a(it, {
-          ref: $(this, "stickyFooter"),
+        }, null)])]), p && u && d(nt, {
+          ref: y(this, "stickyFooter"),
           size: this.$props.size,
-          cols: G,
-          dataRowContext: _,
+          cols: D,
+          dataRowContext: L,
           position: "bottom",
-          groupLevelCount: c,
+          groupLevelCount: f,
           rowHeight: this.$props.rowHeight
-        }, null)]), this.hasPinnedBottomRows && a(ot, {
-          ref: $(this, "pinnedBottom"),
+        }, null)]), this.hasPinnedBottomRows && d(rt, {
+          ref: y(this, "pinnedBottom"),
           size: this.$props.size,
-          cols: G,
-          dataRowContext: _,
+          cols: D,
+          dataRowContext: L,
           position: "bottom",
           pinnedItems: this.sortedPinnedBottomRows,
           rowHeight: this.$props.rowHeight,
           rows: this.$props.rows,
           selectable: this.computedSelectable
-        }, null), pe, W]), ue, se, L]
+        }, null), pe, N]), fe, ie, F]
       })]
-    });
+    }), this.renderContextMenu()]);
   }
 });
 export {
-  ri as Grid
+  fi as Grid
 };