@progress/kendo-vue-grid 8.3.0 → 8.4.0-develop.1

package/Grid.mjs

@@ -5,9 +5,9 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as bt, createVNode as d, h as Le, Fragment as Ke, createTextVNode as St, ref as R, inject as It, computed as _e, markRaw as H } from "vue";
-import { isObject as q, cloneArray as xt, canUseDOM as B, WatermarkOverlay as $t, getter as M, getTemplate as Ae, setRef as y, hasListener as L, getComponentElementRef as Be, getRef as S, RowHeightService as vt, setScrollbarWidth as wt, kendoThemeMaps as Ve, uGrid as yt, isRtl as Oe, validatePackage as kt, shouldShowValidationUI as Ht, getLicenseMessage as Tt, guid as Ne } from "@progress/kendo-vue-common";
-import { tableKeyboardNavigationTools as E, combineFilters as Mt, Pager as Et, normalize as Pt, TableKeyboardNavigationProvider as We, HeaderCell as zt, updateLeft as Dt, updateRight as Gt, groupExpandReducer as Ft, detailExpandReducer as Lt, getSelectedState as Ue, getSelectedStateFromKeyDown as Kt, closestTagName as je, getColumnIndex as _t, getRowIndex as At, ClipboardActionType as he, populateClipboardData as Bt, getDetailExpandableOptions as Vt, getSelectionOptions as Ot, getGroupExpandableOptions as Nt, ClipboardService as qe } from "@progress/kendo-vue-data-tools";
+import { defineComponent as bt, createVNode as d, h as Le, Fragment as Ke, createTextVNode as St, ref as R, inject as xt, computed as _e, markRaw as k } from "vue";
+import { isObject as Y, cloneArray as It, canUseDOM as B, WatermarkOverlay as vt, getter as E, getTemplate as Ae, setRef as w, hasListener as K, getComponentElementRef as Be, getRef as x, RowHeightService as $t, setScrollbarWidth as wt, kendoThemeMaps as Ve, uGrid as yt, isRtl as Oe, validatePackage as kt, shouldShowValidationUI as Ht, getLicenseMessage as Tt, guid as Ne } from "@progress/kendo-vue-common";
+import { tableKeyboardNavigationTools as M, combineFilters as Et, Pager as Mt, normalize as Pt, TableKeyboardNavigationProvider as We, HeaderCell as zt, updateLeft as Dt, updateRight as Gt, groupExpandReducer as Ft, detailExpandReducer as Lt, getSelectedState as Ue, getSelectedStateFromKeyDown as Kt, closestTagName as je, getColumnIndex as _t, getRowIndex as At, ClipboardActionType as he, populateClipboardData as Bt, getDetailExpandableOptions as Vt, getSelectionOptions as Ot, getGroupExpandableOptions as Nt, ClipboardService as qe } from "@progress/kendo-vue-data-tools";
 import { Loader as Wt } from "@progress/kendo-vue-indicators";
 import { GridNav as Je } from "./GridNav.mjs";
 import { GridSelectionCell as Xe } from "./cells/GridSelectionCell.mjs";
@@ -41,13 +41,14 @@ import { process as Cs, orderBy as rt } from "@progress/kendo-data-query";
 import { KendoKey as bs } from "./key.mjs";
 import { getVirtualCellsToRender as Ss } from "./utils/virtualColumns.mjs";
 import { StickyGroupTable as at } from "./components/StickyGroupTable.mjs";
-import { getRowContents as Is } from "./getRowContents.mjs";
-import { useStickyGroups as xs } from "./hooks/useStickyGroups.mjs";
+import { getRowContents as xs } from "./getRowContents.mjs";
+import { useStickyGroups as Is } from "./hooks/useStickyGroups.mjs";
 import { PinnedRowsTable as lt } from "./components/PinnedRowsTable.mjs";
-import { GridPinCell as $s } from "./cells/pincell/GridPinCell.mjs";
-import { contextMenuItemsMap as vs, GridContextMenu as ws, getDefaultBodyContextMenuItems as ys, getDefaultHeadContextMenuItems as ks } from "./contextMenu/GridContextMenu.mjs";
-import { GridContextMenuItemNames as J, GridContextMenuAnchorPart as dt } from "./contextMenu/enums.mjs";
-const Ri = /* @__PURE__ */ bt({
+import { GridPinCell as vs } from "./cells/pincell/GridPinCell.mjs";
+import { BaseCSVExport as $s } from "./BaseCSVExport.mjs";
+import { contextMenuItemsMap as ws, GridContextMenu as ys, getDefaultBodyContextMenuItems as ks, getDefaultHeadContextMenuItems as Hs } from "./contextMenu/GridContextMenu.mjs";
+import { GridContextMenuItemNames as Q, GridContextMenuAnchorPart as dt } from "./contextMenu/enums.mjs";
+const bi = /* @__PURE__ */ bt({
   name: "KendoGrid",
   inheritAttrs: !1,
   props: {
@@ -193,7 +194,7 @@ const Ri = /* @__PURE__ */ bt({
     currentGroupable() {
       var t;
       const e = (t = this.gridStateContext.group) == null ? void 0 : t.value;
-      return this.$props.groupable === !0 && (e == null ? void 0 : e.length) || q(this.$props.groupable) && this.$props.groupable.enabled !== !1;
+      return this.$props.groupable === !0 && (e == null ? void 0 : e.length) || Y(this.$props.groupable) && this.$props.groupable.enabled !== !1;
     },
     computedCollapsed() {
       let e = [];
@@ -251,14 +252,14 @@ const Ri = /* @__PURE__ */ bt({
     headMenuItems() {
       var t;
       const e = this.$props.sortable && ((t = this.contextMenuColumn) == null ? void 0 : t.sortable);
-      return ks({
+      return Hs({
         sortable: !!e,
         selectable: this.computedSelectable.enabled
       });
     },
     bodyMenuItems() {
       var e;
-      return this.$props.sortable && ((e = this.contextMenuColumn) == null || e.sortable), ys({
+      return this.$props.sortable && ((e = this.contextMenuColumn) == null || e.sortable), ks({
         selectable: this.computedSelectable.enabled,
         pinnable: !!this.$props.pinnable,
         clipboard: !!this.$props.clipboard
@@ -335,7 +336,7 @@ const Ri = /* @__PURE__ */ bt({
         selectedState: (p = (u = this.$props.select) != null ? u : (h = this.gridStateContext.select) == null ? void 0 : h.value) != null ? p : {},
         previousCopiedItems: this.previousCopiedItems
       });
-      e !== he.paste && (this.previousCopiedItems = a.copiedItems), L.call(this, "clipboard") && this.$emit("clipboard", {
+      e !== he.paste && (this.previousCopiedItems = a.copiedItems), K.call(this, "clipboard") && this.$emit("clipboard", {
         ...n,
         ...a
       });
@@ -349,7 +350,7 @@ const Ri = /* @__PURE__ */ bt({
     },
     renderContextMenu() {
       var e;
-      return d(ws, {
+      return d(ys, {
         show: !!(this.contextMenuState.show && ((e = this.contextMenuItems) != null && e.length)),
         dataItem: this.contextMenuState.dataItem,
         field: this.contextMenuState.field,
@@ -363,10 +364,10 @@ const Ri = /* @__PURE__ */ bt({
       var h, u;
       const t = this.$props.dataItemKey || "", s = this.contextMenuState.dataItem, i = ((h = this.gridStateContext.pinnedTopRows) == null ? void 0 : h.value) || [], o = ((u = this.gridStateContext.pinnedBottomRows) == null ? void 0 : u.value) || [], n = t ? s[t] : void 0, r = n !== void 0 && i.some((p) => p[t] === n), a = n !== void 0 && o.some((p) => p[t] === n);
       return e.map((p) => {
-        const c = typeof p == "string" ? vs[p] : p;
-        return (c == null ? void 0 : c.name) === J.pinRow && c.items ? {
+        const c = typeof p == "string" ? ws[p] : p;
+        return (c == null ? void 0 : c.name) === Q.pinRow && c.items ? {
           ...c,
-          items: c.items.filter((f) => f.name === J.pinTop ? !r : f.name === J.pinBottom ? !a : f.name === J.unpin ? r || a : !0)
+          items: c.items.filter((f) => f.name === Q.pinTop ? !r : f.name === Q.pinBottom ? !a : f.name === Q.unpin ? r || a : !0)
         } : p;
       });
     },
@@ -381,14 +382,14 @@ const Ri = /* @__PURE__ */ bt({
       switch (this.$emit("contextmenuitemclick", s), (i = t.data) == null ? void 0 : i.action) {
         case "SortCommand":
           if (this.contextMenuColumn) {
-            const c = (o = t.name) == null ? void 0 : o.toLowerCase().includes("asc"), m = ((n = t.name) == null ? void 0 : n.toLowerCase().includes("desc")) ? "desc" : void 0, x = c ? "asc" : m, C = t.name ? x : void 0, $ = (((r = this.gridStateContext.sort) == null ? void 0 : r.value) || []).filter((w) => {
-              var I;
-              return w.field !== ((I = this.contextMenuColumn) == null ? void 0 : I.field);
+            const c = (o = t.name) == null ? void 0 : o.toLowerCase().includes("asc"), m = ((n = t.name) == null ? void 0 : n.toLowerCase().includes("desc")) ? "desc" : void 0, I = c ? "asc" : m, C = t.name ? I : void 0, v = (((r = this.gridStateContext.sort) == null ? void 0 : r.value) || []).filter((H) => {
+              var b;
+              return H.field !== ((b = this.contextMenuColumn) == null ? void 0 : b.field);
             });
-            C && ((a = this.contextMenuColumn) != null && a.field) && $.push({
+            C && ((a = this.contextMenuColumn) != null && a.field) && v.push({
               field: this.contextMenuColumn.field,
               dir: C
-            }), this.sortChangeHandler($, {
+            }), this.sortChangeHandler(v, {
               event: e.event
             });
           }
@@ -396,16 +397,16 @@ const Ri = /* @__PURE__ */ bt({
         case "SelectRowCommand": {
           const c = e.dataItem;
           if (this.computedSelectable.enabled && c && this.$props.dataItemKey) {
-            const m = M(this.$props.dataItemKey)(c), x = this.getLeafDataItems(), C = x.findIndex((z) => z[this.$props.dataItemKey] === c[this.$props.dataItemKey]), v = 0, $ = this.columnsRef.length - 1, w = {
+            const m = E(this.$props.dataItemKey)(c), I = this.getLeafDataItems(), C = I.findIndex((P) => P[this.$props.dataItemKey] === c[this.$props.dataItemKey]), $ = 0, v = this.columnsRef.length - 1, H = {
               ...this.getArguments(e.event),
               dataItem: c,
               startDataItem: C,
               endDataItem: C,
               startRowIndex: C,
               endRowIndex: C,
-              startColIndex: v,
-              endColIndex: $,
-              dataItems: x,
+              startColIndex: $,
+              endColIndex: v,
+              dataItems: I,
               ctrlKey: !1,
               altKey: !1,
               metaKey: !1,
@@ -415,25 +416,25 @@ const Ri = /* @__PURE__ */ bt({
               cell: this.computedSelectable.cell,
               componentId: this.$props.id || this._gridId,
               selectedField: this.$props.selectedField || ""
-            }, I = this.computedSelectable.mode === "multiple" ? {
+            }, b = this.computedSelectable.mode === "multiple" ? {
               ...(u = (h = this.gridStateContext.select) == null ? void 0 : h.value) != null ? u : {}
             } : {};
-            I[m] === !0 || Array.isArray(I[m]) && I[m].length === this.columnsRef.length ? delete I[m] : I[m] = this.computedSelectable.cell ? [...Array(this.columnsRef.length).keys()] : !0, this.raiseSelectionEvent(w, I);
+            b[m] === !0 || Array.isArray(b[m]) && b[m].length === this.columnsRef.length ? delete b[m] : b[m] = this.computedSelectable.cell ? [...Array(this.columnsRef.length).keys()] : !0, this.raiseSelectionEvent(H, b);
           }
           break;
         }
         case "SelectAllRowsCommand": {
           if (this.computedSelectable.enabled && this.$props.dataItemKey) {
-            const c = this.getLeafDataItems(), f = {}, m = c[0], x = c[c.length - 1];
+            const c = this.getLeafDataItems(), f = {}, m = c[0], I = c[c.length - 1];
             c.forEach((C) => {
-              const v = M(this.$props.dataItemKey)(C);
-              f[v] = this.computedSelectable.cell ? [...Array(this.columnsRef.length).keys()] : !0;
+              const $ = E(this.$props.dataItemKey)(C);
+              f[$] = this.computedSelectable.cell ? [...Array(this.columnsRef.length).keys()] : !0;
             }), this.raiseSelectionEvent({
               ...this.getArguments(e.event),
               dataItems: c,
               dataItem: m,
               startDataItem: m,
-              endDataItem: x,
+              endDataItem: I,
               startRowIndex: 0,
               endRowIndex: c.length - 1,
               startColIndex: 0,
@@ -540,6 +541,12 @@ const Ri = /* @__PURE__ */ bt({
       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;
     },
+    exportAsCsv() {
+      this.csvExportRef && this.csvExportRef.save();
+    },
+    getCsvBlob() {
+      return this.csvExportRef ? this.csvExportRef.getBlob() : null;
+    },
     readColumnElements() {
       return ms(this.$props.columns, this.currentColumnsState, {
         prevId: 0,
@@ -626,16 +633,16 @@ const Ri = /* @__PURE__ */ bt({
     setRefs() {
       var n, r, a, h;
       let e = "$el";
-      const t = S(this, "gridNav");
+      const t = x(this, "gridNav");
       t && (this._element = t[e]);
-      const s = S(this, "groupPanelDiv");
+      const s = x(this, "groupPanelDiv");
       if (s) {
         let u = s[e] || null;
         this.dragLogic.refGroupPanelDiv(u);
       }
-      this.stickyHeaderRef = S(this, "stickyHeader"), this.stickyFooterRef = S(this, "stickyFooter"), this.pinnedTopRef = S(this, "pinnedTop"), this.pinnedBottomRef = S(this, "pinnedBottom");
-      const i = S(this, "dropElementClue"), o = S(this, "dragElementClue");
-      this.dragLogic.refDropElementClue(i), this.dragLogic.refDragElementClue(o), this.columnResize.colGroupMain = S(this, "colGroup"), this.columnResize.colGroupStickyHeader = (n = this.stickyHeaderRef) == null ? void 0 : n.colGroupRef, this.columnResize.colGroupStickyFooter = (r = this.stickyFooterRef) == null ? void 0 : r.colGroupRef, this.columnResize.colGroupPinnedTop = (a = this.pinnedTopRef) == null ? void 0 : a.colGroupRef, this.columnResize.colGroupPinnedBottom = (h = this.pinnedBottomRef) == null ? void 0 : h.colGroupRef, this._header = S(this, "header"), this._footer = S(this, "footer"), this.resetTableWidth(), wt();
+      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"), o = x(this, "dragElementClue");
+      this.dragLogic.refDropElementClue(i), this.dragLogic.refDragElementClue(o), this.columnResize.colGroupMain = x(this, "colGroup"), this.columnResize.colGroupStickyHeader = (n = this.stickyHeaderRef) == null ? void 0 : n.colGroupRef, this.columnResize.colGroupStickyFooter = (r = this.stickyFooterRef) == null ? void 0 : r.colGroupRef, this.columnResize.colGroupPinnedTop = (a = this.pinnedTopRef) == null ? void 0 : a.colGroupRef, this.columnResize.colGroupPinnedBottom = (h = this.pinnedBottomRef) == null ? void 0 : h.colGroupRef, this._header = x(this, "header"), this._footer = x(this, "footer"), this.resetTableWidth(), wt();
     },
     gridUnmounted() {
       clearTimeout(this.forceUpdateTimeout), this.columnResize.columns = [], this.dragLogic.columns = [], this.dragLogic && this.dragLogic.dragElementClue && (this.dragLogic.dragElementClue.$el.remove(), this.dragLogic.dropElementClue.$el.remove()), this.dataRef = [], this.columnsRef = [], document != null && document.body && this.resizeObserver && this.resizeObserver.disconnect(), this.observerRef && (this.observerRef.disconnect(), this.observerRef = null), this.clipboardServiceRef && (this.clipboardServiceRef.removeEventListeners(document), this.clipboardServiceRef = null);
@@ -657,15 +664,15 @@ const Ri = /* @__PURE__ */ bt({
     },
     initializeVirtualization() {
       const e = this.vsRef, t = this.$props.rowHeight || this._minRowHeightRef || 0;
-      this.tableBodyRef = S(this, "tableBody"), this.scrollTableRef = Be(this, "table"), e && (e.fixedScroll = this.$props.fixedScroll || !1, e.PageChange = this.virtualPageChange, e.pageSize = this._virtualPageSize, e.scrollableVirtual = this.isVirtualScroll, this.scrollContainerRef = e.container = S(this, "scrollContainer"), e.tableBody = this.tableBodyRef, e.scrollHeightContainer = S(this, "scrollHeightContainer"), e.table = this.scrollTableRef, (!e.rowHeightService || e.total !== this._virtualTotal) && t && (e.total = this._virtualTotal, e.rowHeightService = new vt(this._virtualTotal, t)));
+      this.tableBodyRef = x(this, "tableBody"), this.scrollTableRef = Be(this, "table"), e && (e.fixedScroll = this.$props.fixedScroll || !1, e.PageChange = this.virtualPageChange, e.pageSize = this._virtualPageSize, e.scrollableVirtual = this.isVirtualScroll, this.scrollContainerRef = e.container = 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 $t(this._virtualTotal, t)));
     },
     setContainerHeight() {
-      const e = S(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 = us(S(this, "tableBody"));
+        const t = us(x(this, "tableBody"));
         t && (this._minRowHeightRef = t, this.$forceUpdate());
       }
     },
@@ -673,7 +680,7 @@ const Ri = /* @__PURE__ */ bt({
       this.setRefs();
     },
     onHeaderScroll(e) {
-      const s = e.target.scrollLeft, i = S(this, "scrollContainer");
+      const s = e.target.scrollLeft, i = x(this, "scrollContainer");
       i && (i.scrollLeft = s), this.scrollLeftRef = s;
     },
     scrollHandler(e) {
@@ -723,9 +730,9 @@ const Ri = /* @__PURE__ */ bt({
     },
     itemChange(e) {
       var i;
-      const t = L.call(this, "itemchange"), s = (i = this.gridStateContext.group) == null ? void 0 : i.value;
+      const t = K.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) {
-        L.call(this, "expandchange") && e.dataItem && this.$emit("expandchange", {
+        K.call(this, "expandchange") && e.dataItem && this.$emit("expandchange", {
           ...this.getArguments(e.event),
           collapsedGroups: this.updateGroupCollapsed(e),
           dataItem: e.dataItem,
@@ -851,7 +858,7 @@ const Ri = /* @__PURE__ */ bt({
       if (this.computedSelectable.enabled) {
         const t = this.getLeafDataItems();
         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), {}) : {},
+          select: e.event.target.checked ? t.reduce((s, i) => (this.$props.dataItemKey && E(this.$props.dataItemKey)(i) !== void 0 && (s[E(this.$props.dataItemKey)(i)] = !0), s), {}) : {},
           field: e.field,
           event: e.event,
           target: this,
@@ -966,12 +973,12 @@ const Ri = /* @__PURE__ */ bt({
           ...this.getArguments(i),
           ...t
         });
-      else if (L.call(this, e))
+      else if (K.call(this, e))
         this.$emit(e, {
           ...this.getArguments(i),
           ...t
         });
-      else if (L.call(this, "datastatechange")) {
+      else if (K.call(this, "datastatechange")) {
         const o = {
           ...this.getDataState(),
           ...s
@@ -1073,11 +1080,11 @@ const Ri = /* @__PURE__ */ bt({
     },
     configureColumns(e, t) {
       e.filter((n) => n.columnType === "checkbox").forEach((n) => {
-        n.width = n.width || "50px", n.defaultCell = H(Xe), n.defaultHeaderCell = H(st), n._type = "edit", n.columnMenu = !1;
+        n.width = n.width || "50px", n.defaultCell = k(Xe), n.defaultHeaderCell = k(st), n._type = "edit", n.columnMenu = !1;
       }), this.$props.selectedField && this.columnsRef.filter((n) => n.field === this.$props.selectedField).forEach((n) => {
-        n.width = n.width || "50px", n.defaultCell = H(Xe), n.defaultHeaderCell = H(st), n.columnMenu = !1;
+        n.width = n.width || "50px", n.defaultCell = k(Xe), n.defaultHeaderCell = k(st), n.columnMenu = !1;
       }), this.$props.pinnable && e.filter((n) => n.columnType === "pin").forEach((n) => {
-        n.width = n.width || "48px", n.defaultCell = H($s), n.defaultHeaderCell = H(zt), n.sortable = !1, n.filterable = !1, n.editable = !1;
+        n.width = n.width || "48px", n.defaultCell = k(vs), n.defaultHeaderCell = k(zt), n.sortable = !1, n.filterable = !1, n.editable = !1;
       });
       const s = Ze(this.currentColumnsState);
       this.initColumnsState(e, s);
@@ -1106,27 +1113,27 @@ const Ri = /* @__PURE__ */ bt({
         const n = {
           ...i,
           _type: "expand",
-          id: E.generateNavigatableId(`${o++}`, "expand", "column"),
-          defaultCell: H(Ye),
+          id: M.generateNavigatableId(`${o++}`, "expand", "column"),
+          defaultCell: k(Ye),
           field: this.detailExpandable.column,
           headerClassName: this.hierarchClass
         };
         e.unshift(n), this.currentColumnsState.unshift(s.find((r) => r.id === n.id) || n);
       }
-      this.$props.expandField && L.call(this, "expandchange") && this.$props.detail && (e.unshift({
+      this.$props.expandField && K.call(this, "expandchange") && this.$props.detail && (e.unshift({
         ...i,
-        defaultCell: H(Ye),
+        defaultCell: k(Ye),
         field: this.$props.expandField,
         headerClassName: "k-hierarchy-cell k-header",
-        id: E.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
+        id: M.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
         ...this.expandColumn
       }), o++);
       for (let n = 0; n < t; n++) {
         const r = {
           ...i,
           isAccessible: !1,
-          defaultCell: H(tt),
-          id: E.generateNavigatableId(`${o++}`, "group", "column"),
+          defaultCell: k(tt),
+          id: M.generateNavigatableId(`${o++}`, "group", "column"),
           field: "value",
           locked: this.$props.lockGroups,
           columnMenu: !1
@@ -1317,7 +1324,7 @@ const Ri = /* @__PURE__ */ bt({
       const s = this.$props.dataItemKey;
       if (!s || !t)
         return;
-      const i = M(s), o = this.getLeafDataItems().findIndex((n) => i(n) === i(t));
+      const i = E(s), o = this.getLeafDataItems().findIndex((n) => i(n) === i(t));
       o !== -1 && this.selectionRelease({
         ...e,
         startRowIndex: o,
@@ -1338,38 +1345,39 @@ const Ri = /* @__PURE__ */ bt({
         getCellPositionStyle: this.getCellPositionStyle,
         onRowPin: this.handleRowPin,
         getRowPinPosition: this.getRowPinPosition,
-        onContextMenu: this.triggerCellContextMenu
+        onContextMenu: this.triggerCellContextMenu,
+        exportAsCsv: this.exportAsCsv
       },
       sticky: this.sticky
     };
   },
   setup(e) {
-    const t = R(null), s = R(null), i = R(null), o = R(null), n = R(null), r = R(null), a = R(null), h = R([]), u = R([]), p = R(null), c = R(null), f = R(null), m = R(null), x = R(null), C = R(null), v = R(!0), $ = R(!1), w = new ss(), I = R(0), z = It(bs, {}), X = typeof e.groupable == "object" && !!e.groupable.stickyHeaders, Y = typeof e.groupable == "object" && !!e.groupable.stickyFooters, P = R([]), Q = _e(() => {
-      var K, W;
-      return !!((W = (K = z.group) == null ? void 0 : K.value) != null && W.length);
-    }), V = null, D = R(void 0), T = R({
+    const t = R(null), s = R(null), i = R(null), o = R(null), n = R(null), r = R(null), a = R(null), h = R([]), u = R([]), p = R(null), c = R(null), f = R(null), m = R(null), I = R(null), C = R(null), $ = R(null), v = R(!0), H = R(!1), b = new ss(), P = R(0), V = xt(bs, {}), Z = typeof e.groupable == "object" && !!e.groupable.stickyHeaders, z = typeof e.groupable == "object" && !!e.groupable.stickyFooters, O = R([]), N = _e(() => {
+      var q, G;
+      return !!((G = (q = V.group) == null ? void 0 : q.value) != null && G.length);
+    }), D = null, T = R(void 0), W = R({
       headerItems: [],
       footerItems: []
     }), {
-      scrollToStickyGroup: O,
-      update: N
-    } = xs({
-      enabled: X,
-      enabledFooters: Y,
-      flatData: P,
+      scrollToStickyGroup: U,
+      update: j
+    } = Is({
+      enabled: Z,
+      enabledFooters: z,
+      flatData: O,
       containerRef: p,
       stickyHeaderRef: c,
       stickyFooterRef: f,
       tableBodyRef: C,
       rowHeight: e.rowHeight,
-      isGrouped: Q,
-      virtualSkipRef: I,
-      rowHeightServiceRef: _e(() => w == null ? void 0 : w.rowHeightService)
+      isGrouped: N,
+      virtualSkipRef: P,
+      rowHeightServiceRef: _e(() => b == null ? void 0 : b.rowHeightService)
     });
     return {
-      rowIndexRef: D,
-      observerRef: V,
-      dataRef: P,
+      rowIndexRef: T,
+      observerRef: D,
+      dataRef: O,
       groupPanelDivRef: t,
       dropElementClueRef: s,
       dragElementClueRef: i,
@@ -1379,29 +1387,30 @@ const Ri = /* @__PURE__ */ bt({
       colGroupRef: a,
       scrollContainerRef: p,
       tableBodyRef: C,
-      gridStateContext: z,
+      gridStateContext: V,
       shouldUpdateLeftRightRef: v,
-      resizedRef: $,
+      resizedRef: H,
       currentColumnsState: e.columnsState,
-      vsRef: w,
-      virtualSkipRef: I,
+      vsRef: b,
+      virtualSkipRef: P,
       stickyHeaderItems: h,
       stickyHeaderRef: c,
       stickyFooterItems: u,
       stickyFooterRef: f,
       pinnedTopRef: m,
-      pinnedBottomRef: x,
-      sticky: T,
-      scrollToStickyGroup: O,
-      updateStickyGroups: N
+      pinnedBottomRef: I,
+      csvExportRef: $,
+      sticky: W,
+      scrollToStickyGroup: U,
+      updateStickyGroups: j
     };
   },
   render() {
-    var Ce, be, Se, Ie, xe, $e, ve, we, ye, ke, He, Te, Me, Ee, Pe, ze, De, Ge;
-    const e = (Ce = this.gridStateContext.sort) == null ? void 0 : Ce.value, t = (be = this.gridStateContext.filter) == null ? void 0 : be.value, s = (Se = this.gridStateContext.search) == null ? void 0 : Se.value, i = (Ie = this.gridStateContext.select) == null ? void 0 : Ie.value, o = (xe = this.gridStateContext.skip) == null ? void 0 : xe.value, n = ($e = this.gridStateContext.take) == null ? void 0 : $e.value, r = (ve = this.gridStateContext.group) == null ? void 0 : ve.value, a = (we = this.gridStateContext.groupExpand) == null ? void 0 : we.value, h = (ye = this.gridStateContext.detailExpand) == null ? void 0 : ye.value, u = (r == null ? void 0 : r.length) || 0, p = typeof this.$props.groupable == "object" && !!this.$props.groupable.stickyHeaders, c = typeof this.$props.groupable == "object" && !!this.$props.groupable.stickyFooters, f = !!(r != null && r.length);
+    var Ce, be, Se, xe, Ie, ve, $e, we, ye, ke, He, Te, Ee, Me, Pe, ze, De, Ge;
+    const e = (Ce = this.gridStateContext.sort) == null ? void 0 : Ce.value, t = (be = this.gridStateContext.filter) == null ? void 0 : be.value, s = (Se = this.gridStateContext.search) == null ? void 0 : Se.value, i = (xe = this.gridStateContext.select) == null ? void 0 : xe.value, o = (Ie = this.gridStateContext.skip) == null ? void 0 : Ie.value, n = (ve = this.gridStateContext.take) == null ? void 0 : ve.value, r = ($e = this.gridStateContext.group) == null ? void 0 : $e.value, a = (we = this.gridStateContext.groupExpand) == null ? void 0 : we.value, h = (ye = this.gridStateContext.detailExpand) == null ? void 0 : ye.value, u = (r == null ? void 0 : r.length) || 0, p = typeof this.$props.groupable == "object" && !!this.$props.groupable.stickyHeaders, c = typeof this.$props.groupable == "object" && !!this.$props.groupable.stickyFooters, f = !!(r != null && r.length);
     let m;
     this.currentColumnsState = (ke = this.gridStateContext.columnsState) == null ? void 0 : ke.value;
-    const x = this.$props.autoProcessData === !0 ? {
+    const I = this.$props.autoProcessData === !0 ? {
       group: !0,
       sort: !0,
       filter: !0,
@@ -1409,46 +1418,46 @@ const Ri = /* @__PURE__ */ bt({
       page: !0
     } : this.$props.autoProcessData;
     let C;
-    const v = E.getIdPrefix(this.navigation);
-    let $ = [];
-    Array.isArray(this.$props.dataItems) ? ($ = this.$props.dataItems, C = (He = this.$props.total) != null ? He : $.length) : ($ = ((Te = as(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField)) == null ? void 0 : Te.data) || [], C = (Pe = (Ee = this.$props.total) != null ? Ee : (Me = this.$props.dataItems) == null ? void 0 : Me.total) != null ? Pe : $.length);
-    const w = this.$props.groupable === !0 || q(this.$props.groupable) && this.$props.groupable.enabled !== !1;
-    this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = w, this._virtualPageSize = this.calcVirtualPageSize();
-    const I = $.length === C, z = q(this.$props.groupable) && this.$props.groupable.footer || "none";
-    if (x) {
-      const l = x.page && !(this.isVirtualScroll && !this.$props.pageable), {
-        data: b,
-        total: k
-      } = Cs($, {
-        group: x.group ? r : void 0,
-        sort: x.sort ? e : void 0,
-        filter: Mt(x.filter ? t : void 0, x.search ? s : void 0),
+    const $ = M.getIdPrefix(this.navigation);
+    let v = [];
+    Array.isArray(this.$props.dataItems) ? (v = this.$props.dataItems, C = (He = this.$props.total) != null ? He : v.length) : (v = ((Te = as(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField)) == null ? void 0 : Te.data) || [], C = (Pe = (Me = this.$props.total) != null ? Me : (Ee = this.$props.dataItems) == null ? void 0 : Ee.total) != null ? Pe : v.length);
+    const H = this.$props.groupable === !0 || Y(this.$props.groupable) && this.$props.groupable.enabled !== !1;
+    this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = H, this._virtualPageSize = this.calcVirtualPageSize();
+    const b = v.length === C, P = Y(this.$props.groupable) && this.$props.groupable.footer || "none";
+    if (I) {
+      const l = I.page && !(this.isVirtualScroll && !this.$props.pageable), {
+        data: S,
+        total: y
+      } = Cs(v, {
+        group: I.group ? r : void 0,
+        sort: I.sort ? e : void 0,
+        filter: Et(I.filter ? t : void 0, I.search ? s : void 0),
         ...l ? {
           take: this.$props.pageable ? n || 10 : n,
           skip: o || 0
         } : {}
       });
-      $ = b, C = (ze = this.$props.total) != null ? ze : k;
+      v = S, C = (ze = this.$props.total) != null ? ze : y;
     }
     const {
-      resolvedGroupsCount: X,
-      flattedData: Y
-    } = this.getFlatData($, z, I ? 0 : this.$props.skip || 0, r, h, a, this.$props.dataItemKey);
-    this.dataRef = Y;
-    const P = this.virtualSkipRef || 0;
+      resolvedGroupsCount: V,
+      flattedData: Z
+    } = this.getFlatData(v, P, b ? 0 : this.$props.skip || 0, r, h, a, this.$props.dataItemKey);
+    this.dataRef = Z;
+    const z = this.virtualSkipRef || 0;
     if (this._virtualTotal = C, this.isVirtualScroll) {
       let l = o || 0;
-      if ((f || this.$props.pageable) && (l = P, this._virtualTotal = this.dataRef.length), I || f || this.$props.pageable)
+      if ((f || this.$props.pageable) && (l = z, this._virtualTotal = this.dataRef.length), b || f || this.$props.pageable)
         if (this._virtualPageSize === 0) {
-          const b = Math.min(n || this.$props.pageSize || 20, this.dataRef.length);
-          m = this.dataRef.slice(l, l + b);
+          const S = Math.min(n || this.$props.pageSize || 20, this.dataRef.length);
+          m = this.dataRef.slice(l, l + S);
         } else
           m = this.dataRef.slice(l, l + this._virtualPageSize);
     }
     this.initializeVirtualization();
-    const Q = (De = this.selectable) != null && De.drag ? "none" : void 0;
-    this.initColumns(this.$props.dataItems, X), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this.columnsRef, this.columnResize.columnsState = xt(this.currentColumnsState || []), this.dragLogic.columns = this.columnsRef;
-    const V = this.$props.toolbar, D = this.$props.noRecords, T = this.columnsRef.filter((l) => l.children.length === 0), O = w && d(Yt, {
+    const O = (De = this.selectable) != null && De.drag ? "none" : void 0;
+    this.initColumns(this.$props.dataItems, V), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this.columnsRef, this.columnResize.columnsState = It(this.currentColumnsState || []), this.dragLogic.columns = this.columnsRef;
+    const N = this.$props.toolbar, D = this.$props.noRecords, T = this.columnsRef.filter((l) => l.children.length === 0), W = H && d(Yt, {
       ref: (l) => {
         this.groupPanelDivRef = l;
       },
@@ -1459,24 +1468,24 @@ const Ri = /* @__PURE__ */ bt({
       onDragHandler: this.dragLogic.dragHandler,
       onReleaseHandler: this.dragLogic.releaseHandler,
       resolveTitle: this.resolveTitle
-    }, null), N = (this.dragLogic.reorderable || this.dragLogic.groupable) && B && document && document.body, K = [N && d(rs, {
+    }, null), U = (this.dragLogic.reorderable || this.dragLogic.groupable) && B && document && document.body, j = [U && d(rs, {
       ref: (l) => {
         this.dropElementClueRef = l;
       }
-    }, null), N && d(ns, {
+    }, null), U && d(ns, {
       ref: (l) => {
         this.dragElementClueRef = l;
       }
-    }, null)], W = this.showLicenseWatermark ? d($t, {
+    }, null)], q = this.showLicenseWatermark ? d(vt, {
       message: this.licenseMessage
-    }, null) : null, Z = this.$attrs.style, ht = Z && q(Z) && Z["width"] || "";
+    }, null) : null, G = this.$attrs.style, ht = G && Y(G) && G["width"] || "";
     this.tableWidth = parseFloat(ht.toString());
     const ct = T.findIndex((l) => typeof l.colSpan == "function") > -1;
-    let U;
-    U = this.getCellsToRender({}, T);
-    const G = T.map(function(l, b) {
+    let J;
+    J = this.getCellsToRender({}, T);
+    const F = T.map(function(l, S) {
       return d("col", {
-        key: l.id || `col-${b}`,
+        key: l.id || `col-${S}`,
         width: l.width !== void 0 ? Math.floor(parseFloat(l.width.toString())) : void 0
       }, null);
     }, this), pe = d(qt, {
@@ -1503,7 +1512,7 @@ const Ri = /* @__PURE__ */ bt({
         columnMenuAnimate: this.$props.columnMenuAnimate,
         onSelectionchange: this.onHeaderSelectionChangeHandler,
         columns: this.columnsRef,
-        cellsToRender: U,
+        cellsToRender: J,
         columnVirtualization: this.$props.columnVirtualization,
         columnsInitial: this.$props.columns,
         columnResize: this.columnResize,
@@ -1515,13 +1524,13 @@ const Ri = /* @__PURE__ */ bt({
         cells: this.$props.cells,
         isRtl: this.isRtl,
         isColCountDefined: this.getAriaColCount !== void 0,
-        headerSelectionValue: !!(i && this.dataRef.filter((l) => l.rowType === "data").every((l) => i && this.$props.dataItemKey && M(this.$props.dataItemKey)(l.dataItem) !== void 0 ? i[M(this.$props.dataItemKey)(l.dataItem)] : void 0)),
+        headerSelectionValue: !!(i && this.dataRef.filter((l) => l.rowType === "data").every((l) => i && this.$props.dataItemKey && E(this.$props.dataItemKey)(l.dataItem) !== void 0 ? i[E(this.$props.dataItemKey)(l.dataItem)] : void 0)),
         filterRow: this.$props.filterable && d(Xt, {
           grid: this,
           size: this.$props.size,
           columns: this.columnsRef,
           columnsMap: this._columnsMap,
-          cellsToRender: U,
+          cellsToRender: J,
           columnVirtualization: this.$props.columnVirtualization,
           filter: t,
           filterOperators: this.$props.filterOperators || Qe,
@@ -1533,10 +1542,10 @@ const Ri = /* @__PURE__ */ bt({
           ariaRowIndex: this._columnsMap.length + 1
         }, null) || void 0
       }, null),
-      cols: G
+      cols: F
     }, null), ue = this.columnsRef.some((l) => {
-      var b;
-      return !!(l.footerCell || (b = l.cells) != null && b.footerCell);
+      var S;
+      return !!(l.footerCell || (S = l.cells) != null && S.footerCell);
     }) || (Ge = this.$props.cells) != null && Ge.footerCell ? d(Qt, {
       size: this.$props.size,
       columnResize: this.columnResize,
@@ -1550,10 +1559,10 @@ const Ri = /* @__PURE__ */ bt({
         columns: this.columnsRef,
         cells: this.$props.cells
       }, null),
-      cols: G
+      cols: F
     }, null) : d("span", null, null), _ = {
       leafColumns: T,
-      cellsToRender: U,
+      cellsToRender: J,
       selectedField: this.$props.selectedField,
       dataItemKey: this.$props.dataItemKey,
       select: i,
@@ -1575,48 +1584,48 @@ const Ri = /* @__PURE__ */ bt({
       uniqueField: this.$props.uniqueField,
       columnsRef: this.columnsRef,
       isRtl: this.isRtl,
-      idPrefix: v
-    }, pt = function(l, b, k, oe, ne) {
-      return Is(_, l, b, k, oe, ne);
+      idPrefix: $
+    }, pt = function(l, S, y, oe, ne) {
+      return xs(_, l, S, y, oe, ne);
     };
     let ut = 0, ee = [];
     const te = !this.dataRef.length, fe = (l) => l >= this.dataRef.length - ut;
     let se = 0;
     if (this.dataRef.length) {
       const l = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
-      let b = this.$props.skip || 0, k = -1, oe = 0;
+      let S = this.$props.skip || 0, y = -1, oe = 0;
       const ne = this.computedRowSpannable.enabled ? {} : void 0;
       if (this.isVirtualScroll) {
-        if (P > 0) {
-          const g = this.dataRef.slice(0, P).filter((A) => A.rowType === "data").length;
-          k += g, b += P;
+        if (z > 0) {
+          const g = this.dataRef.slice(0, z).filter((A) => A.rowType === "data").length;
+          y += g, S += z;
         }
-        !this.$props.pageable && I && (k += this.$props.skip || 0);
+        !this.$props.pageable && b && (y += this.$props.skip || 0);
       }
       ee = (m || this.dataRef).map(function(g, A) {
-        g.rowType === "data" && k++;
-        const re = g.dataIndex % 2 !== 0, Fe = this.$props.dataItemKey && M(this.$props.dataItemKey)(g.dataItem), ae = A + b, le = Fe || "ai" + ae, de = le + "_1", j = pt.call(this, g, le, k, re, ne), Rt = g.rowType === "data" ? this.pinnedSourceSet.has(g.dataItem) : !1, Ct = T.length - (this.detailExpandable.enabled ? 1 : 0) - ((r == null ? void 0 : r.length) || 0) || 1;
+        g.rowType === "data" && y++;
+        const re = g.dataIndex % 2 !== 0, Fe = this.$props.dataItemKey && E(this.$props.dataItemKey)(g.dataItem), ae = A + S, le = Fe || "ai" + ae, de = le + "_1", X = pt.call(this, g, le, y, re, ne), Rt = g.rowType === "data" ? this.pinnedSourceSet.has(g.dataItem) : !1, Ct = T.length - (this.detailExpandable.enabled ? 1 : 0) - ((r == null ? void 0 : r.length) || 0) || 1;
         return se = ae + l + oe, [d(gs, {
           key: le,
           item: g,
-          dataIndex: k,
+          dataIndex: y,
           ariaRowIndex: se,
           absoluteRowIndex: ae,
           isAltRow: re,
           isHidden: fe(A),
           rowHeight: this.$props.rowHeight,
-          isSelected: j.isSelected,
-          isHighlighted: j.isHighlighted,
-          isInEdit: j.isInEdit,
+          isSelected: X.isSelected,
+          isHighlighted: X.isHighlighted,
+          isInEdit: X.isInEdit,
           rowType: g.rowType,
-          onRowclick: (F) => this.rowClick(F, g),
-          onRowdblclick: (F) => this.rowDoubleClick(F, g),
+          onRowclick: (L) => this.rowClick(L, g),
+          onRowdblclick: (L) => this.rowDoubleClick(L, g),
           render: this.$props.rowRender,
           class: this.$props.rowClass ? this.$props.rowClass(g) : "",
           isPinned: Rt,
           rows: this.$props.rows
         }, {
-          default: () => [j.row]
+          default: () => [X.row]
         }), this.$props.detail && g.rowType === "data" && (g.expanded || g.dataItem.expanded) && d("tr", {
           key: de,
           class: re ? "k-table-row k-table-alt-row k-detail-row" : "k-table-row k-detail-row",
@@ -1626,29 +1635,29 @@ const Ri = /* @__PURE__ */ bt({
           },
           role: "row",
           "aria-rowindex": se
-        }, [r == null ? void 0 : r.map(function(F) {
+        }, [r == null ? void 0 : r.map(function(L) {
           return d(tt, {
             id: "",
             dataIndex: g.dataIndex,
-            field: F.field,
+            field: L.field,
             dataItem: g.dataItem,
-            key: `group-${F.field}-${g.dataIndex}`,
+            key: `group-${L.field}-${g.dataIndex}`,
             locked: this.$props.lockGroups,
             group: g.group
           }, null);
         }, this), (this.$props.expandField || this.detailExpandable.enabled) && d(Ut, {
-          id: E.generateNavigatableId(`${de}-dhcell`, v)
+          id: M.generateNavigatableId(`${de}-dhcell`, $)
         }, null), d(jt, {
           dataItem: g.dataItem,
           dataIndex: g.dataIndex,
           colSpan: Ct,
           ariaColIndex: 2 + (r ? r.length : 0),
           detail: this.$props.detail ? this.$props.detail : void 0,
-          id: E.generateNavigatableId(`${de}-dcell`, v)
+          id: M.generateNavigatableId(`${de}-dcell`, $)
         }, null)])];
       }, this);
     }
-    const ft = this.$props.pageable && d(Et, {
+    const ft = this.$props.pageable && d(Mt, {
       class: "k-grid-pager",
       onPagesizechange: this.pageChangeHandler,
       onPagechange: this.pageChangeHandler,
@@ -1671,11 +1680,11 @@ const Ri = /* @__PURE__ */ bt({
         pagesizechange: this.pageChangeHandler,
         pagechange: this.pageChangeHandler
       }
-    }), mt = (l) => e && e.filter((b) => b.field === l).length > 0, ge = d("colgroup", {
-      ref: y(this, "colGroup")
-    }, [T.map(function(l, b) {
+    }), mt = (l) => e && e.filter((S) => S.field === l).length > 0, ge = d("colgroup", {
+      ref: w(this, "colGroup")
+    }, [T.map(function(l, S) {
       return d("col", {
-        key: l.id || `col-${b}`,
+        key: l.id || `col-${S}`,
         class: mt(l.field) ? "k-sorted" : void 0,
         width: l.width !== void 0 ? l.width.toString().indexOf("%") !== -1 ? l.width : Math.floor(parseFloat(l.width.toString())) + "px" : void 0
       }, null);
@@ -1724,7 +1733,7 @@ const Ri = /* @__PURE__ */ bt({
         onKeyboardselectionchange: this.onKeyboardSelectionChangeHandler,
         onNavigationaction: this.navigationActionHandler
       }, {
-        default: () => [V, O, d("div", {
+        default: () => [N, W, d("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
@@ -1733,18 +1742,18 @@ const Ri = /* @__PURE__ */ bt({
         }, [d(es, {
           selectable: this.computedSelectable,
           class: "k-table",
-          ref: y(this, "table")
+          ref: w(this, "table")
         }, {
           default: () => [ge, pe, d("tbody", {
             class: "k-table-tbody",
             "data-keyboardnavbody": !0,
-            ref: y(this, "tableBody")
+            ref: w(this, "tableBody")
           }, [ee, St("  "), ie]), ue]
         }), te && d(ot, {
-          id: E.generateNavigatableId("no-records", v)
+          id: M.generateNavigatableId("no-records", $)
         }, {
           default: () => [D.length ? D : d(it, null, null)]
-        })]), me, ie, K]
+        })]), me, ie, j]
       })]
     }), this.renderContextMenu()]) : d(Ke, null, [d(We, {
       ref: "navRef",
@@ -1769,16 +1778,16 @@ const Ri = /* @__PURE__ */ bt({
         onSetcurrentontop: this.setCurrentOnTop,
         onNavigationaction: this.navigationActionHandler
       }, {
-        default: () => [V, O, d("div", {
+        default: () => [N, W, d("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
           "aria-colcount": this.getAriaColCount,
           "aria-rowcount": this.getAriaRowCount
         }, [pe, this.hasPinnedTopRows && d(lt, {
-          ref: y(this, "pinnedTop"),
+          ref: w(this, "pinnedTop"),
           size: this.$props.size,
-          cols: G,
+          cols: F,
           dataRowContext: _,
           position: "top",
           pinnedItems: this.sortedPinnedTopRows,
@@ -1789,16 +1798,16 @@ const Ri = /* @__PURE__ */ bt({
           class: "k-grid-container",
           role: "presentation"
         }, [f && p && d(at, {
-          ref: y(this, "stickyHeader"),
+          ref: w(this, "stickyHeader"),
           size: this.$props.size,
-          cols: G,
+          cols: F,
           dataRowContext: _,
           position: "top",
           groupLevelCount: u,
           rowHeight: this.$props.rowHeight
         }, null), d("div", {
           role: "presentation",
-          ref: y(this, "scrollContainer"),
+          ref: w(this, "scrollContainer"),
           class: "k-grid-content k-virtual-content",
           onScroll: this.scrollHandler
         }, [d("div", {
@@ -1808,51 +1817,60 @@ const Ri = /* @__PURE__ */ bt({
           selectable: this.computedSelectable,
           tableClassName: this.gridTableClass,
           tableStyle: {
-            userSelect: Q
+            userSelect: O
           },
-          ref: y(this, "table")
+          ref: w(this, "table")
         }, {
           default: () => [ge, d("tbody", {
             class: "k-table-tbody",
             role: "rowgroup",
             "data-keyboardnavbody": !0,
-            ref: y(this, "tableBody")
+            ref: w(this, "tableBody")
           }, [ee])]
         }), te && d(ot, {
-          id: E.generateNavigatableId("no-records", v)
+          id: M.generateNavigatableId("no-records", $)
         }, {
           default: () => [D.length ? D : d(it, null, null)]
         })]), !te && d("div", {
           class: "k-height-container",
           role: "presentation"
         }, [d("div", {
-          ref: y(this, "scrollHeightContainer"),
+          ref: w(this, "scrollHeightContainer"),
           style: this.$props.scrollable === "virtual" ? {
             height: this._containerHeightRef + "px"
           } : {}
         }, null)])]), f && c && d(at, {
-          ref: y(this, "stickyFooter"),
+          ref: w(this, "stickyFooter"),
           size: this.$props.size,
-          cols: G,
+          cols: F,
           dataRowContext: _,
           position: "bottom",
           groupLevelCount: u,
           rowHeight: this.$props.rowHeight
         }, null)]), this.hasPinnedBottomRows && d(lt, {
-          ref: y(this, "pinnedBottom"),
+          ref: w(this, "pinnedBottom"),
           size: this.$props.size,
-          cols: G,
+          cols: F,
           dataRowContext: _,
           position: "bottom",
           pinnedItems: this.sortedPinnedBottomRows,
           rowHeight: this.$props.rowHeight,
           rows: this.$props.rows,
           selectable: this.computedSelectable
-        }, null), ue, W]), me, ie, K]
+        }, null), ue, q]), me, ie, j]
       })]
-    }), this.renderContextMenu()]);
+    }), this.renderContextMenu(), this.$props.csv && d($s, {
+      ref: (l) => {
+        this.csvExportRef = l;
+      },
+      gridProps: this.$props,
+      csv: this.$props.csv,
+      fileName: typeof this.$props.csv == "object" ? this.$props.csv.fileName : void 0,
+      onCsvexport: this.$props.onCsvexport,
+      columnsState: this.currentColumnsState
+    }, null)]);
   }
 });
 export {
-  Ri as Grid
+  bi as Grid
 };