@progress/kendo-vue-grid 8.0.3-develop.4 → 8.1.0-develop.2

package/Grid.mjs

@@ -5,46 +5,48 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as ut, createVNode as n, h as Pe, createTextVNode as Me, ref as v, inject as ct, markRaw as E } from "vue";
-import { isObject as V, cloneArray as gt, canUseDOM as X, WatermarkOverlay as ft, getter as Y, getTemplate as Ae, setRef as G, hasListener as P, getRef as $, RowHeightService as mt, setScrollbarWidth as Ct, kendoThemeMaps as Ve, uGrid as bt, isRtl as Ne, validatePackage as $t, shouldShowValidationUI as Rt, getLicenseMessage as xt, guid as Oe, getNestedValue as We } from "@progress/kendo-vue-common";
-import { tableKeyboardNavigationTools as z, combineFilters as vt, Pager as It, normalize as wt, TableKeyboardNavigationProvider as Ke, updateLeft as St, updateRight as yt, groupExpandReducer as Ht, detailExpandReducer as kt, getDetailExpandableOptions as _t, getGroupExpandableOptions as Et } from "@progress/kendo-vue-data-tools";
-import { Loader as zt } from "@progress/kendo-vue-indicators";
-import { GridNav as Ue } from "./GridNav.mjs";
-import { GridSelectionCell as Be } from "./cells/GridSelectionCell.mjs";
-import { GridHierarchyCell as Z } from "./cells/GridHierarchyCell.mjs";
-import { GridDetailHierarchyCell as Tt } from "./cells/GridDetailHierarchyCell.mjs";
-import { GridDetailCell as Dt } from "./cells/GridDetailCell.mjs";
-import { GridEditCell as Gt } from "./cells/GridEditCell.mjs";
-import { Header as Ft } from "./header/Header.mjs";
-import { HeaderRow as Lt } from "./header/HeaderRow.mjs";
-import { FilterRow as Pt } from "./header/FilterRow.mjs";
-import { GroupPanel as Mt } from "./header/GroupPanel.mjs";
-import { Footer as At } from "./footer/Footer.mjs";
-import { FooterRow as Vt } from "./footer/FooterRow.mjs";
-import { operators as je } from "./filterCommon.mjs";
-import { VirtualScroll as Nt } from "./VirtualScroll.mjs";
-import { ColumnResize as Ot } from "./drag/ColumnResize.mjs";
-import { CommonDragLogic as Wt } from "./drag/CommonDragLogic.mjs";
-import { DragClue as Kt } from "./drag/DragClue.mjs";
-import { DropClue as Ut } from "./drag/DropClue.mjs";
-import { applyExpandedState as Bt, getColSpan as jt, autoGenerateColumns as qt, mapColumns as Jt, getFlatColumnsState as qe, getRowSpanOptions as Je, groupedFirstItemValue as Qe, calcRowHeight as Qt, flatData as Xt, readColumns as Yt } from "./utils/main.mjs";
-import { GridCell as Zt } from "./cells/GridCell.mjs";
-import { GridGroupCell as ee } from "./cells/GridGroupCell.mjs";
-import { GridRow as ei } from "./rows/GridRow.mjs";
-import { gridProps as ti } from "./common.mjs";
-import { GridHeaderSelectionCell as Xe } from "./header/GridHeaderSelectionCell.mjs";
-import { GridNoRecords as Ye } from "./components/noRecords/GridNoRecords.mjs";
-import { GridNoRecordsContainer as Ze } from "./components/noRecords/GridNoRecordsContainer.mjs";
-import { packageMetadata as te } from "./package-metadata.mjs";
-import { pagerMessagesMap as et } from "./messages/messagesMap.mjs";
-import { process as ii } from "@progress/kendo-data-query";
-import { KendoKey as si } from "./key.mjs";
-import { getVirtualCellsToRender as ri } from "./utils/virtualColumns.mjs";
-const Oi = /* @__PURE__ */ ut({
+import { defineComponent as $t, createVNode as d, h as Ve, createTextVNode as It, ref as S, inject as xt, markRaw as T } from "vue";
+import { isObject as N, cloneArray as vt, canUseDOM as te, WatermarkOverlay as St, getter as E, getTemplate as Ne, setRef as F, hasListener as M, getComponentElementRef as Oe, getRef as I, RowHeightService as yt, setScrollbarWidth as wt, kendoThemeMaps as We, uGrid as Ht, isRtl as Be, validatePackage as kt, shouldShowValidationUI as Tt, getLicenseMessage as Et, guid as Ue, getNestedValue as je } from "@progress/kendo-vue-common";
+import { tableKeyboardNavigationTools as D, combineFilters as Dt, Pager as zt, normalize as _t, TableKeyboardNavigationProvider as qe, updateLeft as Pt, updateRight as Lt, groupExpandReducer as Ft, detailExpandReducer as Gt, getSelectedState as Je, getSelectedStateFromKeyDown as Mt, closestTagName as Qe, getColumnIndex as Kt, getRowIndex as At, getDetailExpandableOptions as Vt, getSelectionOptions as Nt, getGroupExpandableOptions as Ot } from "@progress/kendo-vue-data-tools";
+import { Loader as Wt } from "@progress/kendo-vue-indicators";
+import { GridNav as Xe } from "./GridNav.mjs";
+import { GridSelectionCell as Ye } from "./cells/GridSelectionCell.mjs";
+import { GridHierarchyCell as ie } from "./cells/GridHierarchyCell.mjs";
+import { GridDetailHierarchyCell as Bt } from "./cells/GridDetailHierarchyCell.mjs";
+import { GridDetailCell as Ut } from "./cells/GridDetailCell.mjs";
+import { GridEditCell as jt } from "./cells/GridEditCell.mjs";
+import { Header as qt } from "./header/Header.mjs";
+import { HeaderRow as Jt } from "./header/HeaderRow.mjs";
+import { FilterRow as Qt } from "./header/FilterRow.mjs";
+import { GroupPanel as Xt } from "./header/GroupPanel.mjs";
+import { Footer as Yt } from "./footer/Footer.mjs";
+import { FooterRow as Zt } from "./footer/FooterRow.mjs";
+import { GridTable as ei } from "./components/table/GridTable.mjs";
+import { GridTableScrollable as ti } from "./components/table/GridTableScrollable.mjs";
+import { operators as Ze } from "./filterCommon.mjs";
+import { VirtualScroll as ii } from "./VirtualScroll.mjs";
+import { ColumnResize as si } from "./drag/ColumnResize.mjs";
+import { CommonDragLogic as li } from "./drag/CommonDragLogic.mjs";
+import { DragClue as ai } from "./drag/DragClue.mjs";
+import { DropClue as ri } from "./drag/DropClue.mjs";
+import { applyExpandedState as oi, getColSpan as ni, autoGenerateColumns as di, mapColumns as hi, getFlatColumnsState as et, getRowSpanOptions as tt, getDataAsArray as pi, groupedFirstItemValue as it, calcRowHeight as ci, flatData as ui, readColumns as fi } from "./utils/main.mjs";
+import { GridCell as gi } from "./cells/GridCell.mjs";
+import { GridGroupCell as se } from "./cells/GridGroupCell.mjs";
+import { GridRow as mi } from "./rows/GridRow.mjs";
+import { gridProps as Ci } from "./common.mjs";
+import { GridHeaderSelectionCell as st } from "./header/GridHeaderSelectionCell.mjs";
+import { GridNoRecords as lt } from "./components/noRecords/GridNoRecords.mjs";
+import { GridNoRecordsContainer as at } from "./components/noRecords/GridNoRecordsContainer.mjs";
+import { packageMetadata as le } from "./package-metadata.mjs";
+import { pagerMessagesMap as rt } from "./messages/messagesMap.mjs";
+import { process as bi } from "@progress/kendo-data-query";
+import { KendoKey as Ri } from "./key.mjs";
+import { getVirtualCellsToRender as $i } from "./utils/virtualColumns.mjs";
+const rs = /* @__PURE__ */ $t({
   name: "KendoGrid",
   inheritAttrs: !1,
   props: {
-    ...ti,
+    ...Ci,
     toolbar: {
       type: Object
     },
@@ -89,18 +91,18 @@ const Oi = /* @__PURE__ */ ut({
     }
   },
   created() {
-    $t(te), this.showLicenseWatermark = Rt(te), this.licenseMessage = xt(te), this.initialHeight = null, this._columns = [], this.vsRef = new Nt(), this.dragLogic = new Wt(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new Ot(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.tableBodyRef = null, this.tableRef = null, this.scrollHeightContainerRef = null, this.forceUpdateTimeout = void 0, this._gridId = Oe(), this._gridRoleElementId = Oe(), this.slicedCurrentData = void 0, this._prevTotal = void 0, this._containerHeightRef = 0, this._minRowHeightRef = 0, this._virtualSkipRef = 0, this.wrapperScrollTopRef = 0, this.scrollLeftRef = 0;
+    kt(le), this.showLicenseWatermark = Tt(le), this.licenseMessage = Et(le), this.initialHeight = null, this.columnsRef = [], this.vsRef = new ii(), this.dragLogic = new li(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new si(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.tableBodyRef = null, this.tableRef = null, this.scrollHeightContainerRef = null, this.forceUpdateTimeout = void 0, this._gridId = Ue(), this._gridRoleElementId = Ue(), this.slicedCurrentData = void 0, this._prevTotal = void 0, this._containerHeightRef = 0, this._minRowHeightRef = 0, this._virtualSkipRef = 0, this.wrapperScrollTopRef = 0, this.scrollLeftRef = 0;
   },
   mounted() {
     var t, i;
     this.setRefs();
-    const e = Ne(this._element);
-    this._prevTotal = this.$props.total, this.isRtl = e, this.initialHeight = ((i = (t = this._element) == null ? void 0 : t.style) == null ? void 0 : i.height) || null, this.resizeObserver = X && (window == null ? void 0 : window.ResizeObserver) && new ResizeObserver(this.calculateMedia), document != null && document.body && this.resizeObserver && this.resizeObserver.observe(document.body);
+    const e = Be(this._element);
+    this._prevTotal = this.$props.total, this.isRtl = e, this.initialHeight = ((i = (t = this._element) == null ? void 0 : t.style) == null ? void 0 : i.height) || null, this.resizeObserver = te && (window == null ? void 0 : window.ResizeObserver) && new ResizeObserver(this.calculateMedia), document != null && document.body && this.resizeObserver && this.resizeObserver.observe(document.body);
   },
   updated() {
     var t;
     this.setRefs();
-    const e = Ne(this._element);
+    const e = Be(this._element);
     this.isRtl = e, this._prevTotal = this.$props.total, this.vsRef.tableTransform && this.vsRef.table && (this.vsRef.table.style.transform = this.vsRef.tableTransform, this.vsRef.tableTransform = ""), this.isVirtualScroll && (this.setContainerHeight(), this.setMinRowHeight(), (t = this.vsRef) == null || t.update());
   },
   unmounted() {
@@ -114,16 +116,19 @@ const Oi = /* @__PURE__ */ ut({
       return this.$props.navigatable ? this.gridId : "";
     },
     groupExpandable() {
-      return Et(typeof this.$props.groupable == "object" && this.$props.groupable.enabled !== !1 ? this.$props.groupable.expandable : this.$props.groupable);
+      return Ot(typeof this.$props.groupable == "object" && this.$props.groupable.enabled !== !1 ? this.$props.groupable.expandable : this.$props.groupable);
     },
     hierarchClass() {
-      return bt.hierarchyCell({});
+      return Ht.hierarchyCell({});
     },
     computedRowSpannable() {
-      return Je(this.$props.rowSpannable);
+      return tt(this.$props.rowSpannable);
+    },
+    computedSelectable() {
+      return Nt(this.$props.selectable);
     },
     detailExpandable() {
-      return _t(!!this.$props.detail);
+      return Vt(!!this.$props.detail);
     },
     nonscrollableWrapperClass() {
       const {
@@ -132,7 +137,7 @@ const Oi = /* @__PURE__ */ ut({
       return {
         "k-grid": !0,
         "k-grid-md": !e,
-        [`k-grid-${Ve.sizeMap[e] || e}`]: e,
+        [`k-grid-${We.sizeMap[e] || e}`]: e,
         [t]: !!t
       };
     },
@@ -153,7 +158,7 @@ const Oi = /* @__PURE__ */ ut({
         "k-table": !0,
         "k-grid-table": !0,
         "k-grid-md": !e,
-        [`k-table-${Ve.sizeMap[e] || e}`]: e
+        [`k-table-${We.sizeMap[e] || e}`]: e
       };
     },
     getCorrectHeight() {
@@ -162,7 +167,7 @@ const Oi = /* @__PURE__ */ ut({
     currentGroupable() {
       var t;
       const e = (t = this.gridContext.group) == null ? void 0 : t.value;
-      return this.$props.groupable === !0 && (e == null ? void 0 : e.length) || V(this.$props.groupable) && this.$props.groupable.enabled !== !1;
+      return this.$props.groupable === !0 && (e == null ? void 0 : e.length) || N(this.$props.groupable) && this.$props.groupable.enabled !== !1;
     },
     computedCollapsed() {
       let e = [];
@@ -174,7 +179,7 @@ const Oi = /* @__PURE__ */ ut({
     // Calculates the value of the ariaRowcount attribute.
     getAriaRowCount() {
       const e = this.$props.dataItems, t = this.$props.total || (e == null ? void 0 : e.total) || (e == null ? void 0 : e.length) || 0;
-      return this.$props.detail ? this._columnsMap.length + (this.$props.filterable ? 1 : 0) + t * 2 + (this._columns.some((i) => !!i.footerCell) ? 1 : 0) : !this.$props.pageable && this.$props.scrollable === "scrollable" ? void 0 : this.$props.groupable ? -1 : this._columnsMap.length + (this.$props.filterable ? 1 : 0) + t + (this._columns.some((i) => !!i.footerCell) ? 1 : 0);
+      return this.$props.detail ? this._columnsMap.length + (this.$props.filterable ? 1 : 0) + t * 2 + (this.columnsRef.some((i) => !!i.footerCell) ? 1 : 0) : !this.$props.pageable && this.$props.scrollable === "scrollable" ? void 0 : this.$props.groupable ? -1 : this._columnsMap.length + (this.$props.filterable ? 1 : 0) + t + (this.columnsRef.some((i) => !!i.footerCell) ? 1 : 0);
     },
     // Calculates the value of the ariaColcount attribute.
     // Based on the result of this method the ariaColIndex is rendered or not in the HeaderRow TH elements
@@ -188,19 +193,23 @@ const Oi = /* @__PURE__ */ ut({
     }
   },
   methods: {
+    getTotal() {
+      let e = this.$props.total || 0;
+      return Array.isArray(this.$props.dataItems) ? e = e || this.$props.dataItems.length : this.$props.dataItems && (e = e || this.$props.dataItems.total), e;
+    },
     readColumnElements() {
-      return Yt(this.$props.columns, this.currentColumnsState, {
+      return fi(this.$props.columns, this.currentColumnsState, {
         prevId: 0,
         idPrefix: this.idPrefix
       });
     },
     getResolvedFlatColumnsState() {
-      const e = [], t = (i, s) => i == null ? void 0 : i.forEach((r) => {
-        const l = r.hidden || s;
+      const e = [], t = (i, s) => i == null ? void 0 : i.forEach((l) => {
+        const a = l.hidden || s;
         e.push({
-          ...r,
-          hidden: l
-        }), t(r.children, l);
+          ...l,
+          hidden: a
+        }), t(l.children, a);
       });
       return t(this.currentColumnsState, !1), e;
     },
@@ -208,16 +217,16 @@ const Oi = /* @__PURE__ */ ut({
       const t = this.getResolvedFlatColumnsState();
       return [e.filter((i) => {
         var s;
-        return !i.hidden && !((s = t.find((r) => r.id === i.id)) != null && s.hidden);
+        return !i.hidden && !((s = t.find((l) => l.id === i.id)) != null && s.hidden);
       }), e.filter((i) => {
         var s;
-        return i.hidden || ((s = t.find((r) => r.id === i.id)) == null ? void 0 : s.hidden);
+        return i.hidden || ((s = t.find((l) => l.id === i.id)) == null ? void 0 : s.hidden);
       })];
     },
-    getFlatData(e, t, i, s, r, l, d) {
-      const h = [], c = Xt(h, e, t, {
+    getFlatData(e, t, i, s, l, a, o) {
+      const h = [], c = ui(h, e, t, {
         index: i
-      }, s !== void 0, r, l, this.groupExpandable.defaultExpand, d, this.$props.expandField);
+      }, s !== void 0, l, a, this.groupExpandable.defaultExpand, o, this.$props.expandField);
       return {
         flattedData: h,
         resolvedGroupsCount: c
@@ -242,7 +251,7 @@ const Oi = /* @__PURE__ */ ut({
         ...i,
         children: i.children && i.children.length > 0 ? this.filterHiddenColumns(i.children) : i.children
       });
-      return [...e].filter((i) => !i.hidden).filter((i) => X && i && i.media ? window.matchMedia(i.media).matches : i).map((i) => t(i));
+      return [...e].filter((i) => !i.hidden).filter((i) => te && i && i.media ? window.matchMedia(i.media).matches : i).map((i) => t(i));
     },
     /**
      * A getter of the current columns. Gets the current column width or current columns,
@@ -252,39 +261,39 @@ const Oi = /* @__PURE__ */ ut({
      * and check the properties afterwards. You can check the result in the browser console.
      */
     getColumns() {
-      const e = this._columns.filter((i) => i.declarationIndex >= 0 && i.parentIndex === -1), t = (i) => (i.sort((s, r) => s.declarationIndex - r.declarationIndex), i.map((s) => {
+      const e = this.columnsRef.filter((i) => i.declarationIndex >= 0 && i.parentIndex === -1), t = (i) => (i.sort((s, l) => s.declarationIndex - l.declarationIndex), i.map((s) => {
         const {
-          declarationIndex: r,
-          parentIndex: l,
-          depth: d,
+          declarationIndex: l,
+          parentIndex: a,
+          depth: o,
           colSpan: h,
           rowSpan: c,
-          index: f,
+          index: m,
           kFirst: u,
-          children: m,
-          ...R
+          children: f,
+          ...C
         } = s;
-        return m.length ? {
-          children: t(m),
-          ...R
-        } : R;
+        return f.length ? {
+          children: t(f),
+          ...C
+        } : C;
       }));
       return t(e);
     },
     setRefs() {
       let e = "$el";
-      const t = $(this, "gridNav");
+      const t = I(this, "gridNav");
       t && (this._element = t[e]);
-      const i = $(this, "groupPanelDiv");
+      const i = I(this, "groupPanelDiv");
       if (i) {
-        let l = i[e] || null;
-        this.dragLogic.refGroupPanelDiv(l);
+        let a = i[e] || null;
+        this.dragLogic.refGroupPanelDiv(a);
       }
-      const s = $(this, "dropElementClue"), r = $(this, "dragElementClue");
-      this.dragLogic.refDropElementClue(s), this.dragLogic.refDragElementClue(r), this.columnResize.colGroupMain = $(this, "colGroup"), this._header = $(this, "header"), this._footer = $(this, "footer"), this.resetTableWidth(), Ct();
+      const s = I(this, "dropElementClue"), l = I(this, "dragElementClue");
+      this.dragLogic.refDropElementClue(s), this.dragLogic.refDragElementClue(l), this.columnResize.colGroupMain = I(this, "colGroup"), this._header = I(this, "header"), this._footer = I(this, "footer"), this.resetTableWidth(), wt();
     },
     gridUnmounted() {
-      clearTimeout(this.forceUpdateTimeout), this.columnResize.columns = [], this.dragLogic.columns = [], this.dragLogic && this.dragLogic.dragElementClue && (this.dragLogic.dragElementClue.$el.remove(), this.dragLogic.dropElementClue.$el.remove()), this.currentData = [], this._columns = [], document != null && document.body && this.resizeObserver && this.resizeObserver.disconnect();
+      clearTimeout(this.forceUpdateTimeout), this.columnResize.columns = [], this.dragLogic.columns = [], this.dragLogic && this.dragLogic.dragElementClue && (this.dragLogic.dragElementClue.$el.remove(), this.dragLogic.dropElementClue.$el.remove()), this.currentData = [], this.columnsRef = [], document != null && document.body && this.resizeObserver && this.resizeObserver.disconnect();
     },
     isAllData() {
       const {
@@ -302,21 +311,25 @@ const Oi = /* @__PURE__ */ ut({
     },
     initializeVirtualization() {
       const e = this.vsRef, t = this.$props.rowHeight || this._minRowHeightRef || 0;
-      e && (e.fixedScroll = this.$props.fixedScroll || !1, e.PageChange = this.virtualPageChange, e.pageSize = this._virtualPageSize, e.scrollableVirtual = this.isVirtualScroll, e.container = $(this, "scrollContainer"), e.tableBody = $(this, "tableBody"), e.scrollHeightContainer = $(this, "scrollHeightContainer"), e.table = $(this, "table"), (!e.rowHeightService || e.total !== this._virtualTotal) && t && (e.total = this._virtualTotal, e.rowHeightService = new mt(this._virtualTotal, t)));
+      e && (e.fixedScroll = this.$props.fixedScroll || !1, e.PageChange = this.virtualPageChange, e.pageSize = this._virtualPageSize, e.scrollableVirtual = this.isVirtualScroll, e.container = I(this, "scrollContainer"), e.tableBody = I(this, "tableBody"), e.scrollHeightContainer = I(this, "scrollHeightContainer"), e.table = Oe(this, "table"), (!e.rowHeightService || e.total !== this._virtualTotal) && t && (e.total = this._virtualTotal, e.rowHeightService = new yt(this._virtualTotal, t)));
     },
     setContainerHeight() {
-      const e = $(this, "scrollContainer");
+      const e = I(this, "scrollContainer");
       this._containerHeightRef = (e == null ? void 0 : e.offsetHeight) || 0;
     },
     setMinRowHeight() {
       if (!this._minRowHeightRef && !this.$props.rowHeight) {
-        const t = Qt($(this, "tableBody"));
+        const t = ci(I(this, "tableBody"));
         t && (this._minRowHeightRef = t, this.$forceUpdate());
       }
     },
     onRowHeightChanged(e, t) {
       this.setRefs();
     },
+    onHeaderScroll(e) {
+      const i = e.target.scrollLeft, s = I(this, "scrollContainer");
+      s && (s.scrollLeft = i), this.scrollLeftRef = i;
+    },
     scrollHandler(e) {
       clearTimeout(this.forceUpdateTimeout);
       const t = e.currentTarget.scrollLeft, i = e.currentTarget.scrollTop;
@@ -337,29 +350,29 @@ const Oi = /* @__PURE__ */ ut({
       });
     },
     loopGroupedItems(e, t, i = 0, s = null) {
-      return e.forEach((r) => {
-        !s && t(r, i) && (s = r), r.items && r.items.length && !s && (s = this.loopGroupedItems(r.items, t, i + 1, s));
+      return e.forEach((l) => {
+        !s && t(l, i) && (s = l), l.items && l.items.length && !s && (s = this.loopGroupedItems(l.items, t, i + 1, s));
       }), s;
     },
     updateGroupCollapsed(e) {
       let t = this.computedCollapsed, i = t[e.level];
-      const s = this.$props.uniqueField, r = function(h, c) {
+      const s = this.$props.uniqueField, l = function(h, c) {
         return h.value === e.dataItem.value && c === e.level;
-      }, l = this.allGroupedItems ? this.loopGroupedItems(this.allGroupedItems.data, r, 0, null) : e.dataItem, d = Qe(l || e.dataItem, s);
+      }, a = this.allGroupedItems ? this.loopGroupedItems(this.allGroupedItems.data, l, 0, null) : e.dataItem, o = it(a || e.dataItem, s);
       if (e.value) {
         if (i && i.length) {
-          const h = i.indexOf(d);
+          const h = i.indexOf(o);
           h > -1 && i.splice(h, 1);
         }
       } else
-        i ? i.includes(d) || i.push(d) : i = [d];
+        i ? i.includes(o) || i.push(o) : i = [o];
       return t;
     },
     itemChange(e) {
       var s;
-      const t = P.call(this, "itemchange"), i = (s = this.gridContext.group) == null ? void 0 : s.value;
+      const t = M.call(this, "itemchange"), i = (s = this.gridContext.group) == null ? void 0 : s.value;
       if (e.field === this.$props.expandField || (i || this.$props.detail) && e.field === void 0) {
-        P.call(this, "expandchange") && e.dataItem && this.$emit("expandchange", {
+        M.call(this, "expandchange") && e.dataItem && this.$emit("expandchange", {
           ...this.getArguments(e.event),
           collapsedGroups: this.updateGroupCollapsed(e),
           dataItem: e.dataItem,
@@ -404,36 +417,140 @@ const Oi = /* @__PURE__ */ ut({
       });
     },
     selectionChangeHandler(e) {
-      const {
-        event: t,
-        dataItem: i,
-        dataIndex: s,
-        columnIndex: r
-      } = e;
-      this.$emit("selectionchange", {
-        ...this.getArguments(t.event),
-        dataItem: i,
-        startColIndex: r,
-        endColIndex: r,
-        startRowIndex: s,
-        endRowIndex: s,
+      var t;
+      if (this.computedSelectable.enabled) {
+        const {
+          event: i,
+          dataItem: s,
+          dataIndex: l,
+          columnIndex: a
+        } = e, o = {
+          ...this.getArguments(i),
+          dataItem: s,
+          startColIndex: a,
+          endColIndex: a,
+          startRowIndex: l,
+          endRowIndex: l,
+          dataItems: this.getLeafDataItems(),
+          altKey: !1,
+          ctrlKey: !1,
+          shiftKey: !1,
+          metaKey: !1,
+          mode: this.computedSelectable.mode,
+          cell: this.computedSelectable.cell,
+          isDrag: !1,
+          componentId: this.$props.id || this._gridId,
+          selectedField: this.$props.selectedField || ""
+        };
+        this.gridContext.selectionchange({
+          ...o,
+          select: this.$props.dataItemKey ? Je({
+            event: o,
+            selectedState: (t = this.$props.select) != null ? t : {},
+            dataItemKey: this.$props.dataItemKey
+          }) : {}
+        });
+      }
+    },
+    onKeyboardSelectionChangeHandler(e) {
+      var m, u;
+      if (!this.computedSelectable.enabled || !this.$props.dataItemKey)
+        return;
+      const t = (m = this.gridContext.select) == null ? void 0 : m.value, i = {
         dataItems: this.getLeafDataItems(),
-        altKey: !1,
-        ctrlKey: !1,
-        shiftKey: !1,
-        metaKey: !1,
-        isDrag: !1,
-        componentId: this._gridId,
-        selectedField: this.$props.selectedField || ""
+        mode: this.computedSelectable.mode,
+        cell: this.computedSelectable.cell,
+        componentId: this.$props.id,
+        selectedField: "",
+        ...this.getArguments(e)
+      }, s = Mt({
+        event: i,
+        selectedState: t != null ? t : {},
+        dataItemKey: this.$props.dataItemKey
       });
+      if (s === t)
+        return;
+      const l = e.target, a = Qe(l, "TD"), o = Qe(l, "TR"), h = Kt(a), c = At(o);
+      if (h !== void 0 && c !== void 0) {
+        const f = (u = pi(this.$props.dataItems)) == null ? void 0 : u[c];
+        this.gridContext.selectionchange({
+          ...i,
+          select: s,
+          dataItem: f,
+          startRowIndex: c,
+          startColIndex: h,
+          startDataItem: f,
+          endDataItem: f,
+          endRowIndex: c,
+          endColIndex: h,
+          ctrlKey: e.ctrlKey,
+          altKey: e.altKey,
+          metaKey: e.metaKey,
+          shiftKey: e.shiftKey,
+          isDrag: !1
+        });
+      }
     },
     onHeaderSelectionChangeHandler(e) {
-      this.$emit("headerselectionchange", {
-        field: e.field,
-        event: e.event,
-        target: this
+      if (this.computedSelectable.enabled) {
+        const t = this.getLeafDataItems();
+        this.gridContext.headerselectionchange({
+          select: e.event.target.checked ? t.reduce((i, s) => (this.$props.dataItemKey && E(this.$props.dataItemKey)(s) !== void 0 && (i[E(this.$props.dataItemKey)(s)] = !0), i), {}) : {},
+          field: e.field,
+          event: e.event,
+          target: this,
+          dataItems: t
+        });
+      }
+    },
+    selectionRelease(e) {
+      var t;
+      if (this.computedSelectable.enabled) {
+        const i = this.getLeafDataItems(), s = i[e.startRowIndex], l = i[e.endRowIndex], a = {
+          event: void 0,
+          target: this,
+          selectedField: "",
+          componentId: this.$props.id || this._gridId,
+          dataItems: i,
+          dataItem: null,
+          startDataItem: s,
+          endDataItem: l,
+          ...e
+        }, o = Je({
+          event: a,
+          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(a, o);
+      }
+    },
+    clearSelection(e) {
+      this.computedSelectable.enabled && this.raiseSelectionEvent(e, {});
+    },
+    raiseSelectionEvent(e, t) {
+      this.computedSelectable.enabled && this.gridContext.selectionchange({
+        ...e,
+        select: t
       });
     },
+    moveToNextPage(e) {
+      var l, a, o, h;
+      const t = (o = (a = (l = this.gridContext.take) == null ? void 0 : l.value) != null ? a : this.$props.pageSize) != null ? o : 0, i = (((h = this.gridContext.skip) == null ? void 0 : h.value) || 0) + t, s = this.getTotal();
+      i < s && this.pageChangeHandler({
+        skip: i,
+        take: t
+      }, e);
+    },
+    moveToPrevPage(e) {
+      var s, l, a, o;
+      const t = (a = (l = (s = this.gridContext.take) == null ? void 0 : s.value) != null ? l : this.$props.pageSize) != null ? a : 0, i = (((o = this.gridContext.skip) == null ? void 0 : o.value) || 0) - t;
+      i >= 0 && this.pageChangeHandler({
+        skip: i,
+        take: t
+      }, e);
+    },
     pageChangeHandler(e, t) {
       this.raiseDataEvent("pagechange", {
         page: e,
@@ -469,20 +586,20 @@ const Oi = /* @__PURE__ */ ut({
     handleDetailExpandAction(e, t) {
       var i;
       if (this.detailExpandable.enabled) {
-        const s = (i = this.gridContext.detailExpand) == null ? void 0 : i.value, r = kt(s != null ? s : {}, e);
+        const s = (i = this.gridContext.detailExpand) == null ? void 0 : i.value, l = Gt(s != null ? s : {}, e);
         this.gridContext.detailexpandchange({
           ...this.getArguments(t),
-          detailExpand: r
+          detailExpand: l
         });
       }
     },
     handleGroupExpandAction(e, t) {
       var i;
       if (this.groupExpandable.enabled) {
-        const s = (i = this.gridContext.groupExpand) == null ? void 0 : i.value, r = Ht(s != null ? s : [], e, this.groupExpandable);
+        const s = (i = this.gridContext.groupExpand) == null ? void 0 : i.value, l = Ft(s != null ? s : [], e, this.groupExpandable);
         this.$props.expandField || this.gridContext.groupexpandchange({
           ...this.getArguments(t),
-          groupExpand: r
+          groupExpand: l
         });
       }
     },
@@ -492,41 +609,41 @@ const Oi = /* @__PURE__ */ ut({
           ...this.getArguments(s),
           ...t
         });
-      else if (P.call(this, e))
+      else if (M.call(this, e))
         this.$emit(e, {
           ...this.getArguments(s),
           ...t
         });
-      else if (P.call(this, "datastatechange")) {
-        const r = {
+      else if (M.call(this, "datastatechange")) {
+        const l = {
           ...this.getDataState(),
           ...i
         };
         this.gridContext.datastatechange({
           ...this.getArguments(s),
-          data: r,
-          dataState: r
+          data: l,
+          dataState: l
         });
       }
     },
     columnReorder(e, t, i) {
-      const s = this._columns[e], r = qe(this.currentColumnsState), l = s.depth, d = (u) => {
+      const s = this.columnsRef[e], l = et(this.currentColumnsState), a = s.depth, o = (u) => {
         do
           u++;
-        while (u < this._columns.length && this._columns[u].depth > l);
+        while (u < this.columnsRef.length && this.columnsRef[u].depth > a);
         return u;
-      }, h = this._columns.splice(e, d(e) - e);
-      this._columns.splice(e < t ? d(t - h.length) : t, 0, ...h), this._columns.filter((u) => u.declarationIndex >= 0).forEach((u, m) => {
-        u.orderIndex = m;
-        const R = r.find((x) => x.id === u.id);
-        R && (R.orderIndex = m);
+      }, h = this.columnsRef.splice(e, o(e) - e);
+      this.columnsRef.splice(e < t ? o(t - h.length) : t, 0, ...h), this.columnsRef.filter((u) => u.declarationIndex >= 0).forEach((u, f) => {
+        u.orderIndex = f;
+        const C = l.find((w) => w.id === u.id);
+        C && (C.orderIndex = f);
       });
-      const c = this._columns[e].locked && this._columns[t].locked;
-      St(this._columnsMap, this._columns, c || this.shouldUpdateLeftRightRef), yt(this._columnsMap, this._columns, c || this.shouldUpdateLeftRightRef), this.resizedRef && (this.shouldUpdateLeftRightRef = !1, this.resizedRef = !1);
-      const f = this.getColumns();
+      const c = this.columnsRef[e].locked && this.columnsRef[t].locked;
+      Pt(this._columnsMap, this.columnsRef, c || this.shouldUpdateLeftRightRef), Lt(this._columnsMap, this.columnsRef, c || this.shouldUpdateLeftRightRef), this.resizedRef && (this.shouldUpdateLeftRightRef = !1, this.resizedRef = !1);
+      const m = this.getColumns();
       this.$emit("columnreorder", {
         target: this,
-        columns: f,
+        columns: m,
         event: i,
         prev: e,
         next: t
@@ -535,19 +652,19 @@ const Oi = /* @__PURE__ */ ut({
       });
     },
     groupReorder(e, t, i) {
-      var r;
-      const s = (r = this.gridContext.group) == null ? void 0 : r.value;
+      var l;
+      const s = (l = this.gridContext.group) == null ? void 0 : l.value;
       s !== void 0 && (s.splice(t, 0, ...s.splice(e, 1)), this.groupChangeHandler(s, i));
     },
     columnToGroup(e, t, i) {
-      var l;
-      const s = this._columns[e].field;
+      var a;
+      const s = this.columnsRef[e].field;
       if (!s)
         return;
-      const r = (((l = this.gridContext.group) == null ? void 0 : l.value) || []).slice();
-      r.splice(t, 0, {
+      const l = (((a = this.gridContext.group) == null ? void 0 : a.value) || []).slice();
+      l.splice(t, 0, {
         field: s
-      }), this.groupChangeHandler(r, i);
+      }), this.groupChangeHandler(l, i);
     },
     resetTableWidth() {
       var s;
@@ -555,51 +672,51 @@ const Oi = /* @__PURE__ */ ut({
       if (!this.columnResize.colGroupMain)
         return;
       const t = (s = this.columnResize.colGroupMain) == null ? void 0 : s.children;
-      for (let r = 0; r < t.length; r++) {
-        const l = t[r].width;
-        if (!l)
+      for (let l = 0; l < t.length; l++) {
+        const a = t[l].width;
+        if (!a)
           return;
-        e += parseFloat(l.toString());
+        e += parseFloat(a.toString());
       }
       e = Math.round(e), this._header && this._header.setWidth(e), this._footer && this._footer.setWidth(e);
-      const i = $(this, "table");
+      const i = Oe(this, "table");
       i && e && (i.style.width = e + "px");
     },
-    onResize(e, t, i, s, r, l, d) {
+    onResize(e, t, i, s, l, a, o) {
       this.resetTableWidth(), this.shouldUpdateLeftRightRef = !0, this.resizedRef = !0, this.$emit("columnresize", {
         columns: this.getColumns(),
         index: e,
-        targetColumnId: d,
+        targetColumnId: o,
         event: s,
         newWidth: t,
         oldWidth: i,
-        end: r,
+        end: l,
         target: this
-      }), r && this.gridContext.columnsstatechange({
-        columnsState: l
+      }), l && this.gridContext.columnsstatechange({
+        columnsState: a
       });
     },
     initColumnsState(e, t) {
       const i = (s) => {
-        var l;
-        const r = t.find((d) => d.id === s.id);
-        if (r) {
-          const d = {
-            ...r
+        var a;
+        const l = t.find((o) => o.id === s.id);
+        if (l) {
+          const o = {
+            ...l
           };
-          return d.children = (l = s.children) == null ? void 0 : l.map(i), d;
+          return o.children = (a = s.children) == null ? void 0 : a.map(i), o;
         }
         return s;
       };
       this.currentColumnsState = e.filter((s) => s.parentIndex === -1).map(i);
     },
     configureColumns(e, t) {
-      e.filter((l) => l.columnType === "checkbox").forEach((l) => {
-        l.width = l.width || "50px", l.defaultCell = E(Be), l.defaultHeaderCell = E(Xe), l._type = "edit";
-      }), this.$props.selectedField && this._columns.filter((l) => l.field === this.$props.selectedField).forEach((l) => {
-        l.width = l.width || "50px", l.internalCell = E(Be), l.internalHeaderCell = E(Xe);
+      e.filter((a) => a.columnType === "checkbox").forEach((a) => {
+        a.width = a.width || "50px", a.internalCell = T(Ye), a.internalHeaderCell = T(st), a._type = "edit", a.columnMenu = !1;
+      }), this.$props.selectedField && this.columnsRef.filter((a) => a.field === this.$props.selectedField).forEach((a) => {
+        a.width = a.width || "50px", a.internalCell = T(Ye), a.internalHeaderCell = T(st), a.columnMenu = !1;
       });
-      const i = qe(this.currentColumnsState);
+      const i = et(this.currentColumnsState);
       this.initColumnsState(e, i);
       const s = {
         id: "",
@@ -621,55 +738,56 @@ const Oi = /* @__PURE__ */ ut({
         ariaColumnIndex: 0,
         isAccessible: !0
       };
-      let r = 0;
+      let l = 0;
       if (this.detailExpandable.enabled && this.$props.detail && !this.$props.expandField) {
-        const l = {
+        const a = {
           ...s,
           _type: "expand",
-          id: z.generateNavigatableId(`${r++}`, "expand", "column"),
-          defaultCell: E(Z),
-          internalCell: E(Z),
+          id: D.generateNavigatableId(`${l++}`, "expand", "column"),
+          defaultCell: T(ie),
+          internalCell: T(ie),
           field: this.detailExpandable.column,
           headerClassName: this.hierarchClass
         };
-        e.unshift(l), this.currentColumnsState.unshift(i.find((d) => d.id === l.id) || l);
+        e.unshift(a), this.currentColumnsState.unshift(i.find((o) => o.id === a.id) || a);
       }
-      this.$props.expandField && P.call(this, "expandchange") && this.$props.detail && (e.unshift({
+      this.$props.expandField && M.call(this, "expandchange") && this.$props.detail && (e.unshift({
         ...s,
-        internalCell: E(Z),
+        internalCell: T(ie),
         field: this.$props.expandField,
         headerClassName: "k-hierarchy-cell k-header",
-        id: z.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
+        id: D.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
         ...this.expandColumn
-      }), r++);
-      for (let l = 0; l < t; l++) {
-        const d = {
+      }), l++);
+      for (let a = 0; a < t; a++) {
+        const o = {
           ...s,
           isAccessible: !1,
-          defaultCell: E(ee),
-          internalCell: E(ee),
-          id: z.generateNavigatableId(`${r++}`, "group", "column"),
+          defaultCell: T(se),
+          internalCell: T(se),
+          id: D.generateNavigatableId(`${l++}`, "group", "column"),
           field: "value",
-          locked: this.$props.lockGroups
+          locked: this.$props.lockGroups,
+          columnMenu: !1
         };
-        e.unshift(d), this.currentColumnsState.unshift(i.find((h) => h.id === d.id) || d);
+        e.unshift(o), this.currentColumnsState.unshift(i.find((h) => h.id === o.id) || o);
       }
-      e.slice(r).forEach((l) => {
-        l.parentIndex >= 0 && (l.parentIndex += r), l.rowSpannable = l.rowSpannable !== void 0 ? Je(l.rowSpannable) : this.computedRowSpannable;
+      e.slice(l).forEach((a) => {
+        a.parentIndex >= 0 && (a.parentIndex += l), a.rowSpannable = a.rowSpannable !== void 0 ? tt(a.rowSpannable) : this.computedRowSpannable;
       });
     },
     initColumns(e, t) {
-      var l;
-      this._columns = this.readColumnElements();
-      const i = (l = this.gridContext.group) == null ? void 0 : l.value;
-      this._columns.filter((d) => !d.hidden).length === 0 && (this._columns = qt(e, i, {
+      var a;
+      this.columnsRef = this.readColumnElements();
+      const i = (a = this.gridContext.group) == null ? void 0 : a.value;
+      this.columnsRef.filter((o) => !o.hidden).length === 0 && (this.columnsRef = di(e, i, {
         column: this.$props.expandField ? this.$props.expandField : this.groupExpandable.column
       }, {
         prevId: 0,
         idPrefix: this.idPrefix
-      })), this.configureColumns(this._columns, t);
-      const [s, r] = this.filterColumns(this._columns);
-      this._columns = s, this.hiddenColumnsRef = r, this._columnsMap = Jt(this._columns, !0);
+      })), this.configureColumns(this.columnsRef, t);
+      const [s, l] = this.filterColumns(this.columnsRef);
+      this.columnsRef = s, this.hiddenColumnsRef = l, this._columnsMap = hi(this.columnsRef, !0);
     },
     resolveTitle(e) {
       const t = this.findColumnByField(e), i = t && (t.title || t.field);
@@ -694,14 +812,14 @@ const Oi = /* @__PURE__ */ ut({
       return null;
     },
     getDataState() {
-      var l, d, h, c, f;
-      const e = (l = this.gridContext.sort) == null ? void 0 : l.value, t = (d = this.gridContext.filter) == null ? void 0 : d.value, i = (h = this.gridContext.skip) == null ? void 0 : h.value, s = (c = this.gridContext.take) == null ? void 0 : c.value, r = (f = this.gridContext.group) == null ? void 0 : f.value;
+      var a, o, h, c, m;
+      const e = (a = this.gridContext.sort) == null ? void 0 : a.value, t = (o = this.gridContext.filter) == null ? void 0 : o.value, i = (h = this.gridContext.skip) == null ? void 0 : h.value, s = (c = this.gridContext.take) == null ? void 0 : c.value, l = (m = this.gridContext.group) == null ? void 0 : m.value;
       return {
         filter: t,
         sort: e,
         skip: i,
         take: s !== void 0 ? s : this.$props.pageSize,
-        group: r
+        group: l
       };
     },
     getArguments(e) {
@@ -723,19 +841,19 @@ const Oi = /* @__PURE__ */ ut({
       }), t;
     },
     searchChange(e) {
-      const t = this.$props.searchFields || this._columns.map((r) => r.field) || [], i = e.event.target.value, s = {
+      const t = this.$props.searchFields || this.columnsRef.map((l) => l.field) || [], i = e.event.target.value, s = {
         logic: "or",
-        filters: t.filter((r) => r !== void 0).map((r) => {
-          var l;
-          return typeof r == "string" ? {
-            field: r,
+        filters: t.filter((l) => l !== void 0).map((l) => {
+          var a;
+          return typeof l == "string" ? {
+            field: l,
             value: i,
             operator: "contains"
           } : {
             value: i,
-            operator: (l = r.operator) != null ? l : "contains",
-            field: r.field,
-            ignoreCase: r.ignoreCase
+            operator: (a = l.operator) != null ? a : "contains",
+            field: l.field,
+            ignoreCase: l.ignoreCase
           };
         })
       };
@@ -746,28 +864,28 @@ const Oi = /* @__PURE__ */ ut({
       }, e);
     },
     getCellsToRender(e, t) {
-      var l;
+      var a;
       const i = [];
-      let s = null, r = 0;
-      if (t.forEach((d, h) => {
-        const c = parseFloat((d.width || "").toString()) || 10;
-        if (r) {
-          r--, s && (s.width += c);
+      let s = null, l = 0;
+      if (t.forEach((o, h) => {
+        const c = parseFloat((o.width || "").toString()) || 10;
+        if (l) {
+          l--, s && (s.width += c);
           return;
         }
-        const f = Math.min(jt(d, e), t.length - h);
-        r = f - 1, s = {
+        const m = Math.min(ni(o, e), t.length - h);
+        l = m - 1, s = {
           width: c,
-          colSpan: f,
+          colSpan: m,
           columnIndex: h
         }, i.push(s);
       }), this.$props.columnVirtualization) {
-        const d = this.scrollLeftRef || 0, h = this.tableWidth || parseFloat((((l = this.$attrs.style) == null ? void 0 : l.width) || "").toString());
-        return ri({
+        const o = this.scrollLeftRef || 0, h = this.tableWidth || parseFloat((((a = this.$attrs.style) == null ? void 0 : a.width) || "").toString());
+        return $i({
           cellModels: i,
           columns: t,
           tableViewPortWidth: h,
-          scrollLeft: d
+          scrollLeft: o
         });
       }
       return i;
@@ -786,8 +904,8 @@ const Oi = /* @__PURE__ */ ut({
         if (i)
           return i;
       }
-      const s = this.$props.rowHeight || this._minRowHeightRef, r = this._containerHeightRef;
-      return r && s ? Math.ceil(r / s * 1.5) : 0;
+      const s = this.$props.rowHeight || this._minRowHeightRef, l = this._containerHeightRef;
+      return l && s ? Math.ceil(l / s * 1.5) : 0;
     }
   },
   provide() {
@@ -795,121 +913,125 @@ const Oi = /* @__PURE__ */ ut({
       kendo: {
         dataItemKey: this.$props.dataItemKey,
         searchChange: this.searchChange,
+        selectionRelease: this.selectionRelease,
         dispatchGroupExpand: this.handleGroupExpandAction,
         dispatchDetailExpand: this.handleDetailExpandAction
       }
     };
   },
   setup(e) {
-    const t = v(null), i = v(null), s = v(null), r = v(null), l = v(null), d = v(null), h = v(null), c = v(null), f = v(null), u = v(null), m = v(!0), R = v(!1), x = ct(si, {});
+    const t = S(null), i = S(null), s = S(null), l = S(null), a = S(null), o = S(null), h = S(null), c = S(null), m = S(null), u = S(null), f = S(!0), C = S(!1), w = xt(Ri, {});
     return {
       groupPanelDivRef: t,
       dropElementClueRef: i,
       dragElementClueRef: s,
-      headerRef: r,
-      footerRef: l,
-      gridNavRef: d,
+      headerRef: l,
+      footerRef: a,
+      gridNavRef: o,
       colGroupRef: h,
       scrollContainerRef: c,
-      scrollTableRef: f,
+      scrollTableRef: m,
       scrollTableBodyRef: u,
-      gridContext: x,
-      shouldUpdateLeftRightRef: m,
-      resizedRef: R,
+      gridContext: w,
+      shouldUpdateLeftRightRef: f,
+      resizedRef: C,
       currentColumnsState: e.columnsState
     };
   },
   render() {
-    var fe, me, Ce, be, $e, Re, xe, ve, Ie, we, Se, ye, He, ke, _e;
-    const e = (fe = this.gridContext.sort) == null ? void 0 : fe.value, t = (me = this.gridContext.filter) == null ? void 0 : me.value, i = (Ce = this.gridContext.search) == null ? void 0 : Ce.value, s = (be = this.gridContext.skip) == null ? void 0 : be.value, r = ($e = this.gridContext.take) == null ? void 0 : $e.value, l = (Re = this.gridContext.group) == null ? void 0 : Re.value, d = (xe = this.gridContext.groupExpand) == null ? void 0 : xe.value, h = (ve = this.gridContext.detailExpand) == null ? void 0 : ve.value, c = !!(l != null && l.length);
-    let f;
-    this.currentColumnsState = (Ie = this.gridContext.columnsState) == null ? void 0 : Ie.value;
-    const u = this.$props.autoProcessData === !0 ? {
+    var Ce, be, Re, $e, Ie, xe, ve, Se, ye, we, He, ke, Te, Ee, De, ze, _e;
+    const e = (Ce = this.gridContext.sort) == null ? void 0 : Ce.value, t = (be = this.gridContext.filter) == null ? void 0 : be.value, i = (Re = this.gridContext.search) == null ? void 0 : Re.value, s = ($e = this.gridContext.select) == null ? void 0 : $e.value, l = (Ie = this.gridContext.skip) == null ? void 0 : Ie.value, a = (xe = this.gridContext.take) == null ? void 0 : xe.value, o = (ve = this.gridContext.group) == null ? void 0 : ve.value, h = (Se = this.gridContext.groupExpand) == null ? void 0 : Se.value, c = (ye = this.gridContext.detailExpand) == null ? void 0 : ye.value, m = !!(o != null && o.length);
+    let u;
+    this.currentColumnsState = (we = this.gridContext.columnsState) == null ? void 0 : we.value;
+    const f = this.$props.autoProcessData === !0 ? {
       group: !0,
       sort: !0,
       filter: !0,
       search: !0,
       page: !0
     } : this.$props.autoProcessData;
-    let m;
-    const R = z.getIdPrefix(this.navigation);
-    let x = [];
-    Array.isArray(this.$props.dataItems) ? (x = this.$props.dataItems, m = (we = this.$props.total) != null ? we : x.length) : (x = ((Se = Bt(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField)) == null ? void 0 : Se.data) || [], m = (ke = (He = this.$props.total) != null ? He : (ye = this.$props.dataItems) == null ? void 0 : ye.total) != null ? ke : x.length);
-    const ie = this.$props.groupable === !0 || V(this.$props.groupable) && this.$props.groupable.enabled !== !1;
-    this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = ie, this._virtualPageSize = this.calcVirtualPageSize();
-    const N = x.length === m, tt = V(this.$props.groupable) && this.$props.groupable.footer || "none";
-    if (this.currentData = [], u) {
-      const a = u.page && !(this.isVirtualScroll && !this.$props.pageable), {
-        data: C,
-        total: S
-      } = ii(x, {
-        group: u.group ? l : void 0,
-        sort: u.sort ? e : void 0,
-        filter: vt(u.filter ? t : void 0, u.search ? i : void 0),
-        ...a ? {
-          take: this.$props.pageable ? r || 10 : r,
-          skip: s || 0
+    let C;
+    const w = D.getIdPrefix(this.navigation);
+    let z = [];
+    Array.isArray(this.$props.dataItems) ? (z = this.$props.dataItems, C = (He = this.$props.total) != null ? He : z.length) : (z = ((ke = oi(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField)) == null ? void 0 : ke.data) || [], C = (De = (Ee = this.$props.total) != null ? Ee : (Te = this.$props.dataItems) == null ? void 0 : Te.total) != null ? De : z.length);
+    const ae = this.$props.groupable === !0 || N(this.$props.groupable) && this.$props.groupable.enabled !== !1;
+    this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = ae, this._virtualPageSize = this.calcVirtualPageSize();
+    const O = z.length === C, ot = N(this.$props.groupable) && this.$props.groupable.footer || "none";
+    if (this.currentData = [], f) {
+      const r = f.page && !(this.isVirtualScroll && !this.$props.pageable), {
+        data: b,
+        total: y
+      } = bi(z, {
+        group: f.group ? o : void 0,
+        sort: f.sort ? e : void 0,
+        filter: Dt(f.filter ? t : void 0, f.search ? i : void 0),
+        ...r ? {
+          take: this.$props.pageable ? a || 10 : a,
+          skip: l || 0
         } : {}
       });
-      x = C, m = (_e = this.$props.total) != null ? _e : S;
+      z = b, C = (ze = this.$props.total) != null ? ze : y;
     }
     const {
-      resolvedGroupsCount: it,
-      flattedData: st
-    } = this.getFlatData(x, tt, N ? 0 : this.$props.skip || 0, l, h, d, this.$props.dataItemKey);
-    this.currentData = st;
-    const O = this._virtualSkipRef || 0;
-    if (this._virtualTotal = m, this.isVirtualScroll) {
-      let a = s || 0;
-      if ((c || this.$props.pageable) && (a = O, this._virtualTotal = this.currentData.length), N || c || this.$props.pageable)
+      resolvedGroupsCount: nt,
+      flattedData: dt
+    } = this.getFlatData(z, ot, O ? 0 : this.$props.skip || 0, o, c, h, this.$props.dataItemKey);
+    this.currentData = dt;
+    const W = this._virtualSkipRef || 0;
+    if (this._virtualTotal = C, this.isVirtualScroll) {
+      let r = l || 0;
+      if ((m || this.$props.pageable) && (r = W, this._virtualTotal = this.currentData.length), O || m || this.$props.pageable)
         if (this._virtualPageSize === 0) {
-          const C = Math.min(r || this.$props.pageSize || 20, this.currentData.length);
-          f = this.currentData.slice(a, a + C);
+          const b = Math.min(a || this.$props.pageSize || 20, this.currentData.length);
+          u = this.currentData.slice(r, r + b);
         } else
-          f = this.currentData.slice(a, a + this._virtualPageSize);
+          u = this.currentData.slice(r, r + this._virtualPageSize);
     }
-    this.initializeVirtualization(), this.initColumns(this.$props.dataItems, it), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this._columns, this.columnResize.columnsState = gt(this.currentColumnsState || []), this.dragLogic.columns = this._columns;
-    const se = this.$props.toolbar, M = this.$props.noRecords, k = this._columns.filter((a) => a.children.length === 0), re = ie && n(Mt, {
-      ref: (a) => {
-        this.groupPanelDivRef = a;
+    this.initializeVirtualization();
+    const ht = (_e = this.selectable) != null && _e.drag ? "none" : void 0;
+    this.initColumns(this.$props.dataItems, nt), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this.columnsRef, this.columnResize.columnsState = vt(this.currentColumnsState || []), this.dragLogic.columns = this.columnsRef;
+    const re = this.$props.toolbar, K = this.$props.noRecords, H = this.columnsRef.filter((r) => r.children.length === 0), oe = ae && d(Xt, {
+      ref: (r) => {
+        this.groupPanelDivRef = r;
       },
-      group: l || [],
+      group: o || [],
       ariaControls: this._gridRoleElementId,
       onGroupChange: this.groupChangeHandler,
       onPressHandler: this.dragLogic.pressHandler,
       onDragHandler: this.dragLogic.dragHandler,
       onReleaseHandler: this.dragLogic.releaseHandler,
       resolveTitle: this.resolveTitle
-    }, null), le = (this.dragLogic.reorderable || this.dragLogic.groupable) && X && document && document.body, ae = [le && n(Ut, {
-      ref: (a) => {
-        this.dropElementClueRef = a;
+    }, null), ne = (this.dragLogic.reorderable || this.dragLogic.groupable) && te && document && document.body, de = [ne && d(ri, {
+      ref: (r) => {
+        this.dropElementClueRef = r;
       }
-    }, null), le && n(Kt, {
-      ref: (a) => {
-        this.dragElementClueRef = a;
+    }, null), ne && d(ai, {
+      ref: (r) => {
+        this.dragElementClueRef = r;
       }
-    }, null)], rt = this.showLicenseWatermark ? n(ft, {
+    }, null)], pt = this.showLicenseWatermark ? d(St, {
       message: this.licenseMessage
-    }, null) : null, W = this.$attrs.style, lt = W && V(W) && W["width"] || "";
-    this.tableWidth = parseFloat(lt.toString());
-    const oe = k.findIndex((a) => typeof a.colSpan == "function") > -1;
-    let F;
-    oe || (F = this.getCellsToRender(null, k));
-    const ne = (this.$props.columnVirtualization ? this.getCellsToRender(null, k).map(({
-      columnIndex: a
-    }) => k[a]) : k).map(function(a, C) {
-      return n("col", {
-        key: a.id || `col-${C}`,
-        width: a.width !== void 0 ? Math.floor(parseFloat(a.width.toString())) : void 0
+    }, null) : null, B = this.$attrs.style, ct = B && N(B) && B["width"] || "";
+    this.tableWidth = parseFloat(ct.toString());
+    const ut = H.findIndex((r) => typeof r.colSpan == "function") > -1;
+    let G;
+    G = this.getCellsToRender({}, H);
+    const he = (this.$props.columnVirtualization ? this.getCellsToRender({}, H).map(({
+      columnIndex: r
+    }) => H[r]) : H).map(function(r, b) {
+      return d("col", {
+        key: r.id || `col-${b}`,
+        width: r.width !== void 0 ? Math.floor(parseFloat(r.width.toString())) : void 0
       }, null);
-    }, this), de = n(Ft, {
+    }, this), pe = d(qt, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
-      ref: (a) => {
-        this.headerRef = a;
+      ref: (r) => {
+        this.headerRef = r;
       },
-      headerRow: n(Lt, {
+      onHeaderscroll: this.onHeaderScroll,
+      headerRow: d(Jt, {
         grid: this,
         sort: e,
         groupable: this.$props.groupable,
@@ -918,14 +1040,14 @@ const Oi = /* @__PURE__ */ ut({
         onSortChange: this.sortChangeHandler,
         filter: t,
         filterable: this.$props.filterable,
-        filterOperators: this.$props.filterOperators || je,
+        filterOperators: this.$props.filterOperators || Ze,
         onFilterChange: this.filterChangeHandler,
         columnMenu: this.$props.columnMenu,
         columnMenuIcon: this.$props.columnMenuIcon,
         columnMenuAnimate: this.$props.columnMenuAnimate,
         onSelectionchange: this.onHeaderSelectionChangeHandler,
-        columns: this._columns,
-        cellsToRender: F,
+        columns: this.columnsRef,
+        cellsToRender: G,
         columnVirtualization: this.$props.columnVirtualization,
         columnsInitial: this.$props.columns,
         columnResize: this.columnResize,
@@ -936,14 +1058,16 @@ const Oi = /* @__PURE__ */ ut({
         cellRender: this.$props.headerCellRender,
         isRtl: this.isRtl,
         isColCountDefined: this.getAriaColCount !== void 0,
-        filterRow: this.$props.filterable && n(Pt, {
+        headerSelectionValue: !!(s && this.currentData.filter((r) => r.rowType === "data").every((r) => s && this.$props.dataItemKey && E(this.$props.dataItemKey)(r.dataItem) !== void 0 ? s[E(this.$props.dataItemKey)(r.dataItem)] : void 0)),
+        filterRow: this.$props.filterable && d(Qt, {
           grid: this,
           size: this.$props.size,
-          columns: this._columns,
-          cellsToRender: F,
+          columns: this.columnsRef,
+          columnsMap: this._columnsMap,
+          cellsToRender: G,
           columnVirtualization: this.$props.columnVirtualization,
           filter: t,
-          filterOperators: this.$props.filterOperators || je,
+          filterOperators: this.$props.filterOperators || Ze,
           onFilterchange: this.filterChangeHandler,
           sort: this.$props.sort,
           cellRender: this.$props.filterCellRender,
@@ -951,121 +1075,124 @@ const Oi = /* @__PURE__ */ ut({
           ariaRowIndex: this._columnsMap.length + 1
         }, null) || void 0
       }, null),
-      cols: ne
-    }, null), he = this._columns.some((a) => !!a.footerCell) ? n(At, {
+      cols: he
+    }, null), ce = this.columnsRef.some((r) => !!r.footerCell) ? d(Yt, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
-      ref: (a) => {
-        this.footerRef = a;
+      ref: (r) => {
+        this.footerRef = r;
       },
-      row: n(Vt, {
+      row: d(Zt, {
         isRtl: this.isRtl,
         rowIndex: this.getAriaRowCount + 1,
-        columns: this._columns
+        columns: this.columnsRef
       }, null),
-      cols: ne
-    }, null) : n("span", null, null), at = function(a, C, S, Ee, _) {
+      cols: he
+    }, null) : d("span", null, null), ft = function(r, b, y, Pe, k) {
       let p = !1;
-      const T = this.$props.selectedField, y = T ? We(T, a.dataItem) : void 0, I = this.$props.highlight && this.$props.dataItemKey && Y(this.$props.dataItemKey)(a.dataItem) !== void 0 ? this.$props.highlight[Y(this.$props.dataItemKey)(a.dataItem)] : void 0;
-      return oe && (F = this.getCellsToRender(a.dataItem, k)), {
-        row: F.map(function({
-          columnIndex: b,
-          colSpan: D
+      const _ = this.$props.selectedField, L = this.$props.dataItemKey, A = s && L && E(L)(r.dataItem) !== void 0 ? s[E(L)(r.dataItem)] : void 0, x = _ ? je(_, r.dataItem) : A, v = this.$props.highlight && this.$props.dataItemKey && E(this.$props.dataItemKey)(r.dataItem) !== void 0 ? this.$props.highlight[E(this.$props.dataItemKey)(r.dataItem)] : void 0;
+      return ut && (G = this.getCellsToRender(r.dataItem, H)), {
+        row: G.map(function({
+          columnIndex: R,
+          colSpan: P
         }) {
-          var De, Ge, Fe, Le;
-          const o = k[b];
-          let w;
-          if ((De = o.rowSpannable) != null && De.enabled && a.rowType === "data" && o.field && _) {
-            const g = o.field ? (Fe = (Ge = o.rowSpannable).valueGetter) == null ? void 0 : Fe.call(Ge, a.dataItem, o.field) : null;
-            w = {
+          var Ge, Me, Ke, Ae;
+          const n = H[R];
+          let $;
+          if ((Ge = n.rowSpannable) != null && Ge.enabled && r.rowType === "data" && n.field && k) {
+            const g = n.field ? (Ke = (Me = n.rowSpannable).valueGetter) == null ? void 0 : Ke.call(Me, r.dataItem, n.field) : null;
+            $ = {
               value: g,
               count: 1
-            }, _[o.field] && ((Le = _[o.field]) == null ? void 0 : Le.value) === g && _[o.field] !== null ? (_[o.field].count++, w.count = null) : _[o.field] = w;
+            }, k[n.field] && ((Ae = k[n.field]) == null ? void 0 : Ae.value) === g && k[n.field] !== null ? (k[n.field].count++, $.count = null) : k[n.field] = $;
           }
-          const L = `${o.className ? o.className + " " : ""}${o.locked ? "k-grid-content-sticky" : ""}`, H = o.locked && o.left !== void 0 ? this.isRtl ? {
-            left: o.right + "px",
-            right: o.left + "px"
+          const Q = `${n.className ? n.className + " " : ""}${n.locked ? "k-grid-content-sticky" : ""}`, X = n.locked && n.left !== void 0 ? this.isRtl ? {
+            left: n.right + "px",
+            right: n.left + "px"
           } : {
-            left: o.left + "px",
-            right: o.right + "px"
+            left: n.left + "px",
+            right: n.right + "px"
           } : void 0;
-          let ze = !1;
-          if (o.editable && this.$props.editField) {
-            const g = We(this.$props.editField, a.dataItem);
-            (g === !0 || g === o.field) && (p = !0, ze = !0);
+          let Le = !1;
+          if (n.editable && this.$props.editField) {
+            const g = je(this.$props.editField, r.dataItem);
+            (g === !0 || g === n.field) && (p = !0, Le = !0);
           }
-          let A;
-          o.cell && (A = o.cell);
-          const Te = this.computedCollapsed && this.computedCollapsed[a.level] && this.computedCollapsed[a.level].some((g) => g === Qe(a.dataItem, this.$props.uniqueField)), q = o.id ? o.id : b, J = Te ? !Te : a.expanded || a.dataItem.expanded, pt = o._type === "expand", Q = z.generateNavigatableId(`${C}-${String(b)}`, R, pt || a.rowType === "groupHeader" || a.rowType === "groupFooter" || o.field === "value" ? "nodata" : "cell");
-          return o.internalCell ? n(o.internalCell, {
-            key: q,
-            id: Q,
-            colSpan: D,
-            dataItem: a.dataItem,
-            field: o.field || "",
-            editor: o.editor,
-            format: o.format,
-            readFormat: o.readFormat,
-            type: o.type,
-            className: L,
-            render: A || this.$props.cellRender,
+          let V;
+          n.cell && (V = n.cell);
+          const Fe = this.computedCollapsed && this.computedCollapsed[r.level] && this.computedCollapsed[r.level].some((g) => g === it(r.dataItem, this.$props.uniqueField)), Y = n.id ? n.id : R, Z = Fe ? !Fe : r.expanded || r.dataItem.expanded, Rt = n._type === "expand", ee = D.generateNavigatableId(`${b}-${String(R)}`, w, Rt || r.rowType === "groupHeader" || r.rowType === "groupFooter" || n.field === "value" ? "nodata" : "cell");
+          return n.internalCell ? d(n.internalCell, {
+            key: Y,
+            id: ee,
+            colSpan: P,
+            dataItem: r.dataItem,
+            field: n.field || "",
+            editor: n.editor,
+            format: n.format,
+            readFormat: n.readFormat,
+            type: n.type,
+            columnType: n.columnType,
+            className: Q,
+            render: V || this.$props.cellRender,
             onChange: this.itemChange,
             onSelectionchange: (g) => this.selectionChangeHandler({
               event: g,
-              dataItem: a.dataItem,
-              dataIndex: S,
-              columnIndex: b
+              dataItem: r.dataItem,
+              dataIndex: y,
+              columnIndex: R
             }),
-            columnIndex: b,
-            columnsCount: this._columns.filter((g) => !g.children.length).length,
-            rowType: a.rowType,
-            level: a.level,
-            expanded: J,
-            dataIndex: a.dataIndex,
-            style: H,
-            ariaColumnIndex: o.ariaColumnIndex,
+            columnIndex: R,
+            columnsCount: this.columnsRef.filter((g) => !g.children.length).length,
+            rowType: r.rowType,
+            level: r.level,
+            expanded: Z,
+            dataIndex: r.dataIndex,
+            style: X,
+            ariaColumnIndex: n.ariaColumnIndex,
             isRtl: this.isRtl,
-            isSelected: Array.isArray(y) && y.indexOf(b) > -1,
-            isHighlighted: !!(typeof I != "boolean" && I && o.field && I[o.field] === !0),
-            group: a.group,
-            rowSpan: w
-          }, null) : ze ? n(Gt, {
-            id: Q,
-            key: q,
-            colSpan: D,
-            dataItem: a.dataItem,
-            field: o.field || "",
-            editor: o.editor,
-            format: o.format,
-            readFormat: o.readFormat,
-            type: o.type,
-            className: L,
-            render: A || this.$props.cellRender,
+            isSelected: !!((n == null ? void 0 : n._type) === "edit" ? x : Array.isArray(x) && x.indexOf(R) > -1),
+            isHighlighted: !!(typeof v != "boolean" && v && n.field && v[n.field] === !0),
+            group: r.group,
+            rowSpan: $
+          }, null) : Le ? d(jt, {
+            id: ee,
+            key: Y,
+            colSpan: P,
+            dataItem: r.dataItem,
+            field: n.field || "",
+            editor: n.editor,
+            format: n.format,
+            readFormat: n.readFormat,
+            type: n.type,
+            columnType: n.columnType,
+            className: Q,
+            render: V || this.$props.cellRender,
             onEdit: this.editHandler,
             onRemove: this.removeHandler,
             onSave: this.saveHandler,
             onCancel: this.cancelHandler,
             onChange: this.itemChange,
-            columnIndex: b,
-            columnsCount: this._columns.filter((g) => !g.children.length).length,
-            rowType: a.rowType,
-            level: a.level,
-            expanded: J,
-            dataIndex: a.dataIndex,
-            style: H
-          }, null) : n(Zt, {
-            key: q,
-            id: Q,
-            colSpan: D,
-            dataItem: a.dataItem,
-            field: o.field || "",
-            editor: o.editor,
-            format: o.format,
-            readFormat: o.readFormat,
-            type: o.type,
-            className: L,
-            render: A || this.$props.cellRender,
+            columnIndex: R,
+            columnsCount: this.columnsRef.filter((g) => !g.children.length).length,
+            rowType: r.rowType,
+            level: r.level,
+            expanded: Z,
+            dataIndex: r.dataIndex,
+            style: X
+          }, null) : d(gi, {
+            key: Y,
+            id: ee,
+            colSpan: P,
+            dataItem: r.dataItem,
+            field: n.field || "",
+            editor: n.editor,
+            format: n.format,
+            readFormat: n.readFormat,
+            type: n.type,
+            columnType: n.columnType,
+            className: Q,
+            render: V || this.$props.cellRender,
             onCellclick: this.cellClickHandler,
             onCellkeydown: this.cellKeydownHandler,
             onEdit: this.editHandler,
@@ -1075,239 +1202,256 @@ const Oi = /* @__PURE__ */ ut({
             onChange: this.itemChange,
             onSelectionchange: (g) => this.selectionChangeHandler({
               event: g,
-              dataItem: a.dataItem,
-              dataIndex: S,
-              columnIndex: b
+              dataItem: r.dataItem,
+              dataIndex: y,
+              columnIndex: R
             }),
-            columnIndex: b,
-            columnsCount: this._columns.filter((g) => !g.children.length).length,
-            rowType: a.rowType,
-            level: a.level,
-            expanded: J,
-            dataIndex: a.dataIndex,
-            style: H,
-            rowSpan: w,
-            isSelected: Array.isArray(y) && y.indexOf(b) > -1,
-            isHighlighted: !!(typeof I != "boolean" && I && o.field && I[o.field] === !0)
+            columnIndex: R,
+            columnsCount: this.columnsRef.filter((g) => !g.children.length).length,
+            rowType: r.rowType,
+            level: r.level,
+            expanded: Z,
+            dataIndex: r.dataIndex,
+            style: X,
+            rowSpan: $,
+            isSelected: !!((n == null ? void 0 : n._type) === "edit" ? x : Array.isArray(x) && x.indexOf(R) > -1),
+            isHighlighted: !!(typeof v != "boolean" && v && n.field && v[n.field] === !0)
           }, null);
         }, this),
         isInEdit: p,
-        isSelected: typeof y == "boolean" && y,
-        isHighlighted: typeof I == "boolean" && I
+        isSelected: typeof x == "boolean" && x,
+        isHighlighted: typeof v == "boolean" && v
       };
     };
-    let ot = 0, K = [];
-    const U = !this.currentData.length, pe = (a) => a >= this.currentData.length - ot;
-    let B = 0;
+    let gt = 0, U = [];
+    const j = !this.currentData.length, ue = (r) => r >= this.currentData.length - gt;
+    let q = 0;
     if (this.currentData.length) {
-      const a = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
-      let C = this.$props.skip || 0, S = -1, Ee = 0;
-      const _ = this.computedRowSpannable.enabled ? {} : void 0;
+      const r = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
+      let b = this.$props.skip || 0, y = -1, Pe = 0;
+      const k = this.computedRowSpannable.enabled ? {} : void 0;
       if (this.isVirtualScroll) {
-        if (O > 0) {
-          const p = this.currentData.slice(0, O).filter((T) => T.rowType === "data").length;
-          S += p, C += p;
+        if (W > 0) {
+          const p = this.currentData.slice(0, W).filter((_) => _.rowType === "data").length;
+          y += p, b += p;
         }
-        !this.$props.pageable && N && (S += this.$props.skip || 0);
+        !this.$props.pageable && O && (y += this.$props.skip || 0);
       }
-      K = (f || this.currentData).map(function(p, T) {
-        p.rowType === "data" && S++;
-        const y = p.dataIndex % 2 !== 0, I = this.$props.dataItemKey && Y(this.$props.dataItemKey)(p.dataItem), b = T + C, D = I || "ai" + b, o = D + "_1", w = at.call(this, p, D, S, y, _), L = k.length - (this.detailExpandable.enabled ? 1 : 0) - ((l == null ? void 0 : l.length) || 0) || 1;
-        return B = b + a + Ee, [n(ei, {
-          key: D,
+      U = (u || this.currentData).map(function(p, _) {
+        p.rowType === "data" && y++;
+        const L = p.dataIndex % 2 !== 0, A = this.$props.dataItemKey && E(this.$props.dataItemKey)(p.dataItem), x = _ + b, v = A || "ai" + x, R = v + "_1", P = ft.call(this, p, v, y, L, k), n = H.length - (this.detailExpandable.enabled ? 1 : 0) - ((o == null ? void 0 : o.length) || 0) || 1;
+        return q = x + r + Pe, [d(mi, {
+          key: v,
           item: p,
-          dataIndex: S,
-          ariaRowIndex: B,
-          absoluteRowIndex: b,
-          isAltRow: y,
-          isHidden: pe(T),
+          dataIndex: y,
+          ariaRowIndex: q,
+          absoluteRowIndex: x,
+          isAltRow: L,
+          isHidden: ue(_),
           rowHeight: this.$props.rowHeight,
-          isSelected: w.isSelected,
-          isHighlighted: w.isHighlighted,
-          isInEdit: w.isInEdit,
+          isSelected: P.isSelected,
+          isHighlighted: P.isHighlighted,
+          isInEdit: P.isInEdit,
           rowType: p.rowType,
-          onRowclick: (H) => this.rowClick(H, p),
-          onRowdblclick: (H) => this.rowDoubleClick(H, p),
+          onRowclick: ($) => this.rowClick($, p),
+          onRowdblclick: ($) => this.rowDoubleClick($, p),
           render: this.$props.rowRender,
           class: this.$props.rowClass ? this.$props.rowClass(p) : ""
         }, {
-          default: () => [w.row]
-        }), this.$props.detail && p.rowType === "data" && (p.expanded || p.dataItem.expanded) && n("tr", {
-          key: o,
-          class: y ? "k-table-row k-table-alt-row k-detail-row" : "k-table-row k-detail-row",
+          default: () => [P.row]
+        }), this.$props.detail && p.rowType === "data" && (p.expanded || p.dataItem.expanded) && d("tr", {
+          key: R,
+          class: L ? "k-table-row k-table-alt-row k-detail-row" : "k-table-row k-detail-row",
           style: {
-            visibility: pe(T) ? "hidden" : "",
+            visibility: ue(_) ? "hidden" : "",
             height: this.$props.detailRowHeight + "px"
           },
           role: "row",
-          "aria-rowindex": B
-        }, [l == null ? void 0 : l.map(function(H) {
-          return n(ee, {
+          "aria-rowindex": q
+        }, [o == null ? void 0 : o.map(function($) {
+          return d(se, {
             id: "",
             dataIndex: p.dataIndex,
-            field: H.field,
+            field: $.field,
             dataItem: p.dataItem,
-            key: `group-${H.field}-${p.dataIndex}`,
+            key: `group-${$.field}-${p.dataIndex}`,
             group: p.group
           }, null);
-        }, this), (this.$props.expandField || this.detailExpandable.enabled) && n(Tt, {
-          id: z.generateNavigatableId(`${o}-dhcell`, R)
-        }, null), n(Dt, {
+        }, this), (this.$props.expandField || this.detailExpandable.enabled) && d(Bt, {
+          id: D.generateNavigatableId(`${R}-dhcell`, w)
+        }, null), d(Ut, {
           dataItem: p.dataItem,
           dataIndex: p.dataIndex,
-          colSpan: L,
-          ariaColIndex: 2 + (l ? l.length : 0),
+          colSpan: n,
+          ariaColIndex: 2 + (o ? o.length : 0),
           detail: this.$props.detail ? this.$props.detail : void 0,
-          id: z.generateNavigatableId(`${o}-dcell`, R)
+          id: D.generateNavigatableId(`${R}-dcell`, w)
         }, null)])];
       }, this);
     }
-    const nt = this.$props.pageable && n(It, {
+    const mt = this.$props.pageable && d(zt, {
       class: "k-grid-pager",
       onPagesizechange: this.pageChangeHandler,
       onPagechange: this.pageChangeHandler,
       size: this.$props.size,
-      total: m,
-      skip: s || 0,
-      pageSize: (r !== void 0 ? r : this.$props.pageSize) || 10,
-      messagesMap: et,
-      settings: wt(this.$props.pageable || {})
-    }, null), ue = Ae.call(this, {
-      h: Pe,
+      total: C,
+      skip: l || 0,
+      pageSize: (a !== void 0 ? a : this.$props.pageSize) || 10,
+      messagesMap: rt,
+      settings: _t(this.$props.pageable || {})
+    }, null), fe = Ne.call(this, {
+      h: Ve,
       template: this.$props.pager,
-      defaultRendering: nt,
+      defaultRendering: mt,
       additionalProps: {
         ...this.$props,
         skip: this.$props.skip || 0,
-        messagesMap: et
+        messagesMap: rt
       },
       additionalListeners: {
         pagesizechange: this.pageChangeHandler,
         pagechange: this.pageChangeHandler
       }
-    }), dt = (a) => e && e.filter((C) => C.field === a).length > 0, ce = n("colgroup", {
-      ref: G(this, "colGroup")
-    }, [k.map(function(a, C) {
-      return n("col", {
-        key: a.id || `col-${C}`,
-        class: dt(a.field) ? "k-sorted" : void 0,
-        width: a.width !== void 0 ? a.width.toString().indexOf("%") !== -1 ? a.width : Math.floor(parseFloat(a.width.toString())) + "px" : void 0
+    }), Ct = (r) => e && e.filter((b) => b.field === r).length > 0, ge = d("colgroup", {
+      ref: F(this, "colGroup")
+    }, [H.map(function(r, b) {
+      return d("col", {
+        key: r.id || `col-${b}`,
+        class: Ct(r.field) ? "k-sorted" : void 0,
+        width: r.width !== void 0 ? r.width.toString().indexOf("%") !== -1 ? r.width : Math.floor(parseFloat(r.width.toString())) + "px" : void 0
       }, null);
-    }, this)]), ge = {
+    }, this)]), me = {
       height: this.getCorrectHeight,
       ...this.$attrs.style
-    }, ht = n("div", {
+    }, bt = d("div", {
       class: "k-loading-mask"
-    }, [n("div", {
+    }, [d("div", {
       class: "k-loading-color"
-    }, null), n("div", {
+    }, null), d("div", {
       style: {
         height: "100%",
         display: "flex",
         justifyContent: "center",
         alignItems: "center"
       }
-    }, [n(zt, {
+    }, [d(Wt, {
       size: "large",
       type: "converging-spinner"
-    }, null)])]), j = this.$props.showLoader && Ae.call(this, {
-      h: Pe,
+    }, null)])]), J = this.$props.showLoader && Ne.call(this, {
+      h: Ve,
       template: this.$props.loader,
-      defaultRendering: ht
+      defaultRendering: bt
     });
-    return this.$props.scrollable === "none" ? n(Ke, {
+    return this.$props.scrollable === "none" ? d(qe, {
       ref: "navRef",
       id: this._gridId,
-      navigatable: this.$props.navigatable
+      navigatable: this.$props.navigatable,
+      scrollable: this.$props.scrollable,
+      columnVirtualization: this.$props.columnVirtualization
     }, {
-      default: () => [n(Ue, {
-        ref: (a) => {
-          this.gridNavRef = a;
+      default: () => [d(Xe, {
+        ref: (r) => {
+          this.gridNavRef = r;
         },
+        columnsRef: this.columnsRef,
         currentData: this.currentData,
         id: this.$props.id,
-        style: ge,
-        class: this.nonscrollableWrapperClass
+        style: me,
+        class: this.nonscrollableWrapperClass,
+        onMovetonextpage: this.moveToNextPage,
+        onMovetoprevpage: this.moveToPrevPage,
+        onColumnreorder: this.columnReorder,
+        onKeyboardselectionchange: this.onKeyboardSelectionChangeHandler
       }, {
-        default: () => [se, re, n("div", {
+        default: () => [re, oe, d("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
           "aria-colcount": this.getAriaColCount,
           "aria-rowcount": this.getAriaRowCount
-        }, [n("table", {
+        }, [d(ei, {
+          selectable: this.computedSelectable,
           class: "k-table",
-          style: {
-            tableLayout: "fixed"
-          },
-          ref: G(this, "table"),
-          role: "none"
-        }, [Me(" "), ce, de, n("tbody", {
-          class: "k-table-tbody",
-          "data-keyboardnavbody": !0
-        }, [K, Me("  "), j]), he]), U && n(Ze, {
-          id: z.generateNavigatableId("no-records", R)
+          ref: F(this, "table")
+        }, {
+          default: () => [ge, pe, d("tbody", {
+            class: "k-table-tbody",
+            "data-keyboardnavbody": !0
+          }, [U, It("  "), J]), ce]
+        }), j && d(at, {
+          id: D.generateNavigatableId("no-records", w)
         }, {
-          default: () => [M.length ? M : n(Ye, null, null)]
-        })]), ue, j, ae]
+          default: () => [K.length ? K : d(lt, null, null)]
+        })]), fe, J, de]
       })]
-    }) : n(Ke, {
+    }) : d(qe, {
       ref: "navRef",
       id: this._gridId,
-      navigatable: this.$props.navigatable
+      navigatable: this.$props.navigatable,
+      scrollable: this.$props.scrollable,
+      columnVirtualization: this.$props.columnVirtualization
     }, {
-      default: () => [n(Ue, {
-        ref: (a) => {
-          this.gridNavRef = a;
+      default: () => [d(Xe, {
+        ref: (r) => {
+          this.gridNavRef = r;
         },
         currentData: this.currentData,
         id: this.$props.id,
-        style: ge,
-        class: this.scrollableWrapperClass
+        style: me,
+        class: this.scrollableWrapperClass,
+        onMovetonextpage: this.moveToNextPage,
+        onMovetoprevpage: this.moveToPrevPage,
+        onColumnreorder: this.columnReorder,
+        onKeyboardselectionchange: this.onKeyboardSelectionChangeHandler
       }, {
-        default: () => [se, re, n("div", {
+        default: () => [re, oe, d("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
           "aria-colcount": this.getAriaColCount,
           "aria-rowcount": this.getAriaRowCount
-        }, [de, n("div", {
+        }, [pe, d("div", {
           class: "k-grid-container",
           role: "presentation"
-        }, [n("div", {
+        }, [d("div", {
           role: "presentation",
-          ref: G(this, "scrollContainer"),
+          ref: F(this, "scrollContainer"),
           class: "k-grid-content k-virtual-content",
           onScroll: this.scrollHandler
-        }, [n("div", {
+        }, [d("div", {
           class: "k-grid-table-wrap",
           role: "presentation"
-        }, [n("table", {
-          role: "none",
-          class: this.gridTableClass,
-          ref: G(this, "table")
-        }, [ce, n("tbody", {
-          class: "k-table-tbody",
-          role: "rowgroup",
-          "data-keyboardnavbody": !0,
-          ref: G(this, "tableBody")
-        }, [K])]), U && n(Ze, {
-          id: z.generateNavigatableId("no-records", R)
+        }, [d(ti, {
+          selectable: this.computedSelectable,
+          tableClassName: this.gridTableClass,
+          tableStyle: {
+            userSelect: ht
+          },
+          ref: F(this, "table")
+        }, {
+          default: () => [ge, d("tbody", {
+            class: "k-table-tbody",
+            role: "rowgroup",
+            "data-keyboardnavbody": !0,
+            ref: F(this, "tableBody")
+          }, [U])]
+        }), j && d(at, {
+          id: D.generateNavigatableId("no-records", w)
         }, {
-          default: () => [M.length ? M : n(Ye, null, null)]
-        })]), !U && n("div", {
+          default: () => [K.length ? K : d(lt, null, null)]
+        })]), !j && d("div", {
           class: "k-height-container",
           role: "presentation"
-        }, [n("div", {
-          ref: G(this, "scrollHeightContainer"),
+        }, [d("div", {
+          ref: F(this, "scrollHeightContainer"),
           style: this.$props.scrollable === "virtual" ? {
             height: this._containerHeightRef + "px"
           } : {}
-        }, null)])])]), he, rt]), ue, j, ae]
+        }, null)])])]), ce, pt]), fe, J, de]
       })]
     });
   }
 });
 export {
-  Oi as Grid
+  rs as Grid
 };