@progress/kendo-vue-grid 8.1.0-develop.5 → 8.1.0-develop.7

package/Grid.mjs

@@ -5,49 +5,51 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as pt, createVNode as n, h as _e, createTextVNode as ct, ref as c, inject as ut, computed as Pe, markRaw as x } from "vue";
-import { isObject as W, cloneArray as ft, canUseDOM as B, WatermarkOverlay as gt, getter as P, getTemplate as Me, setRef as w, hasListener as M, getComponentElementRef as Ke, getRef as m, RowHeightService as mt, setScrollbarWidth as Rt, kendoThemeMaps as Ae, uGrid as Ct, isRtl as Ve, validatePackage as bt, shouldShowValidationUI as $t, getLicenseMessage as It, guid as Oe } from "@progress/kendo-vue-common";
-import { tableKeyboardNavigationTools as H, combineFilters as vt, Pager as xt, normalize as wt, TableKeyboardNavigationProvider as Ne, updateLeft as St, updateRight as yt, groupExpandReducer as kt, detailExpandReducer as Ht, getSelectedState as We, getSelectedStateFromKeyDown as Tt, closestTagName as Be, getColumnIndex as zt, getRowIndex as Et, getDetailExpandableOptions as Gt, getSelectionOptions as Ft, getGroupExpandableOptions as Dt } from "@progress/kendo-vue-data-tools";
-import { Loader as Lt } from "@progress/kendo-vue-indicators";
-import { GridNav as Ue } from "./GridNav.mjs";
-import { GridSelectionCell as je } from "./cells/GridSelectionCell.mjs";
-import { GridHierarchyCell as ae } from "./cells/GridHierarchyCell.mjs";
-import { GridDetailHierarchyCell as _t } from "./cells/GridDetailHierarchyCell.mjs";
-import { GridDetailCell as Pt } from "./cells/GridDetailCell.mjs";
-import { Header as Mt } from "./header/Header.mjs";
-import { HeaderRow as Kt } from "./header/HeaderRow.mjs";
-import { FilterRow as At } from "./header/FilterRow.mjs";
-import { GroupPanel as Vt } from "./header/GroupPanel.mjs";
-import { Footer as Ot } from "./footer/Footer.mjs";
-import { FooterRow as Nt } from "./footer/FooterRow.mjs";
-import { GridTable as Wt } from "./components/table/GridTable.mjs";
-import { GridTableScrollable as Bt } from "./components/table/GridTableScrollable.mjs";
+import { defineComponent as ft, createVNode as a, h as De, createTextVNode as gt, ref as f, inject as mt, computed as Le, markRaw as I } from "vue";
+import { isObject as j, cloneArray as Rt, canUseDOM as q, WatermarkOverlay as Ct, getter as D, getTemplate as _e, setRef as $, hasListener as K, getComponentElementRef as Me, getRef as R, RowHeightService as bt, setScrollbarWidth as $t, kendoThemeMaps as Ke, uGrid as wt, isRtl as Be, validatePackage as xt, shouldShowValidationUI as vt, getLicenseMessage as It, guid as Ae } from "@progress/kendo-vue-common";
+import { tableKeyboardNavigationTools as k, combineFilters as St, Pager as yt, normalize as kt, TableKeyboardNavigationProvider as Ve, HeaderCell as Ht, updateLeft as Tt, updateRight as zt, groupExpandReducer as Et, detailExpandReducer as Pt, getSelectedState as Oe, getSelectedStateFromKeyDown as Gt, closestTagName as We, getColumnIndex as Ft, getRowIndex as Dt, getDetailExpandableOptions as Lt, getSelectionOptions as _t, getGroupExpandableOptions as Mt } from "@progress/kendo-vue-data-tools";
+import { Loader as Kt } from "@progress/kendo-vue-indicators";
+import { GridNav as Ne } from "./GridNav.mjs";
+import { GridSelectionCell as Ue } from "./cells/GridSelectionCell.mjs";
+import { GridHierarchyCell as je } from "./cells/GridHierarchyCell.mjs";
+import { GridDetailHierarchyCell as Bt } from "./cells/GridDetailHierarchyCell.mjs";
+import { GridDetailCell as At } from "./cells/GridDetailCell.mjs";
+import { Header as Vt } from "./header/Header.mjs";
+import { HeaderRow as Ot } from "./header/HeaderRow.mjs";
+import { FilterRow as Wt } from "./header/FilterRow.mjs";
+import { GroupPanel as Nt } from "./header/GroupPanel.mjs";
+import { Footer as Ut } from "./footer/Footer.mjs";
+import { FooterRow as jt } from "./footer/FooterRow.mjs";
+import { GridTable as qt } from "./components/table/GridTable.mjs";
+import { GridTableScrollable as Jt } from "./components/table/GridTableScrollable.mjs";
 import { operators as qe } from "./filterCommon.mjs";
-import { VirtualScroll as Ut } from "./VirtualScroll.mjs";
-import { ColumnResize as jt } from "./drag/ColumnResize.mjs";
-import { CommonDragLogic as qt } from "./drag/CommonDragLogic.mjs";
-import { DragClue as Jt } from "./drag/DragClue.mjs";
-import { DropClue as Qt } from "./drag/DropClue.mjs";
-import { applyExpandedState as Xt, getColSpan as Yt, autoGenerateColumns as Zt, mapColumns as es, getFlatColumnsState as Je, getRowSpanOptions as Qe, getDataAsArray as ts, groupedFirstItemValue as ss, calcRowHeight as is, flatData as os, readColumns as rs } from "./utils/main.mjs";
-import { GridGroupCell as ne } from "./cells/GridGroupCell.mjs";
-import { GridRow as ls } from "./rows/GridRow.mjs";
-import { gridProps as as } 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 { VirtualScroll as Qt } from "./VirtualScroll.mjs";
+import { ColumnResize as Xt } from "./drag/ColumnResize.mjs";
+import { CommonDragLogic as Yt } from "./drag/CommonDragLogic.mjs";
+import { DragClue as Zt } from "./drag/DragClue.mjs";
+import { DropClue as es } from "./drag/DropClue.mjs";
+import { applyExpandedState as ts, getColSpan as ss, autoGenerateColumns as is, mapColumns as os, getFlatColumnsState as Je, getRowSpanOptions as Qe, getDataAsArray as rs, groupedFirstItemValue as ls, calcRowHeight as ns, flatData as as, readColumns as ds } from "./utils/main.mjs";
+import { GridGroupCell as Xe } from "./cells/GridGroupCell.mjs";
+import { GridRow as hs } from "./rows/GridRow.mjs";
+import { gridProps as ps } from "./common.mjs";
+import { GridHeaderSelectionCell as Ye } from "./header/GridHeaderSelectionCell.mjs";
+import { GridNoRecords as Ze } from "./components/noRecords/GridNoRecords.mjs";
+import { GridNoRecordsContainer as et } from "./components/noRecords/GridNoRecordsContainer.mjs";
 import { packageMetadata as de } from "./package-metadata.mjs";
-import { pagerMessagesMap as et } from "./messages/messagesMap.mjs";
-import { process as ns } from "@progress/kendo-data-query";
-import { KendoKey as ds } from "./key.mjs";
-import { getVirtualCellsToRender as hs } from "./utils/virtualColumns.mjs";
-import { StickyGroupTable as tt } from "./components/StickyGroupTable.mjs";
-import { getRowContents as ps } from "./getRowContents.mjs";
-import { useStickyGroups as cs } from "./hooks/useStickyGroups.mjs";
-const Ys = /* @__PURE__ */ pt({
+import { pagerMessagesMap as tt } from "./messages/messagesMap.mjs";
+import { process as cs, orderBy as st } from "@progress/kendo-data-query";
+import { KendoKey as us } from "./key.mjs";
+import { getVirtualCellsToRender as fs } from "./utils/virtualColumns.mjs";
+import { StickyGroupTable as it } from "./components/StickyGroupTable.mjs";
+import { getRowContents as gs } from "./getRowContents.mjs";
+import { useStickyGroups as ms } from "./hooks/useStickyGroups.mjs";
+import { PinnedRowsTable as ot } from "./components/PinnedRowsTable.mjs";
+import { GridPinCell as Rs } from "./cells/pincell/GridPinCell.mjs";
+const ri = /* @__PURE__ */ ft({
   name: "KendoGrid",
   inheritAttrs: !1,
   props: {
-    ...as,
+    ...ps,
     toolbar: {
       type: Object
     },
@@ -92,13 +94,13 @@ const Ys = /* @__PURE__ */ pt({
     }
   },
   created() {
-    bt(de), this.showLicenseWatermark = $t(de), this.licenseMessage = It(de), this.initialHeight = null, this.columnsRef = [], this.dragLogic = new qt(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new jt(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.tableRef = null, this.scrollHeightContainerRef = null, this.forceUpdateTimeout = void 0, this._gridId = Oe(), this._gridRoleElementId = Oe(), this.slicedCurrentData = void 0, this._prevTotal = void 0, this._containerHeightRef = 0, this._minRowHeightRef = 0, this.wrapperScrollTopRef = 0, this.scrollLeftRef = 0;
+    xt(de), this.showLicenseWatermark = vt(de), this.licenseMessage = It(de), this.initialHeight = null, this.columnsRef = [], this.dragLogic = new Yt(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new Xt(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.tableRef = null, this.scrollHeightContainerRef = null, this.forceUpdateTimeout = void 0, this._gridId = Ae(), this._gridRoleElementId = Ae(), this.slicedCurrentData = void 0, this._prevTotal = void 0, this._containerHeightRef = 0, this._minRowHeightRef = 0, this.wrapperScrollTopRef = 0, this.scrollLeftRef = 0;
   },
   mounted() {
     var t, s;
     this.setRefs();
-    const e = Ve(this._element);
-    if (this._prevTotal = this.$props.total, this.isRtl = e, this.initialHeight = ((s = (t = this._element) == null ? void 0 : t.style) == null ? void 0 : s.height) || null, this.resizeObserver = B && (window == null ? void 0 : window.ResizeObserver) && new ResizeObserver(this.calculateMedia), document != null && document.body && this.resizeObserver && this.resizeObserver.observe(document.body), B) {
+    const e = Be(this._element);
+    if (this._prevTotal = this.$props.total, this.isRtl = e, this.initialHeight = ((s = (t = this._element) == null ? void 0 : t.style) == null ? void 0 : s.height) || null, this.resizeObserver = q && (window == null ? void 0 : window.ResizeObserver) && new ResizeObserver(this.calculateMedia), document != null && document.body && this.resizeObserver && this.resizeObserver.observe(document.body), q) {
       const i = {
         rootMargin: "0px",
         threshold: 0.9
@@ -109,7 +111,7 @@ const Ys = /* @__PURE__ */ pt({
   updated() {
     var s;
     this.setRefs();
-    const e = Ve(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 = "");
     const t = this.updateStickyGroups();
     this.sticky.headerItems = t == null ? void 0 : t.stickyHeaderItems, this.sticky.footerItems = t == null ? void 0 : t.stickyFooterItems, this.isVirtualScroll && (this.setContainerHeight(), this.setMinRowHeight(), (s = this.vsRef) == null || s.update());
@@ -125,19 +127,19 @@ const Ys = /* @__PURE__ */ pt({
       return this.$props.navigatable ? this.gridId : "";
     },
     groupExpandable() {
-      return Dt(typeof this.$props.groupable == "object" && this.$props.groupable.enabled !== !1 ? this.$props.groupable.expandable : this.$props.groupable);
+      return Mt(typeof this.$props.groupable == "object" && this.$props.groupable.enabled !== !1 ? this.$props.groupable.expandable : this.$props.groupable);
     },
     hierarchClass() {
-      return Ct.hierarchyCell({});
+      return wt.hierarchyCell({});
     },
     computedRowSpannable() {
       return Qe(this.$props.rowSpannable);
     },
     computedSelectable() {
-      return Ft(this.$props.selectable);
+      return _t(this.$props.selectable);
     },
     detailExpandable() {
-      return Gt(!!this.$props.detail);
+      return Lt(!!this.$props.detail);
     },
     nonscrollableWrapperClass() {
       const {
@@ -146,7 +148,7 @@ const Ys = /* @__PURE__ */ pt({
       return {
         "k-grid": !0,
         "k-grid-md": !e,
-        [`k-grid-${Ae.sizeMap[e] || e}`]: e,
+        [`k-grid-${Ke.sizeMap[e] || e}`]: e,
         [t]: !!t
       };
     },
@@ -167,7 +169,7 @@ const Ys = /* @__PURE__ */ pt({
         "k-table": !0,
         "k-grid-table": !0,
         "k-grid-md": !e,
-        [`k-table-${Ae.sizeMap[e] || e}`]: e
+        [`k-table-${Ke.sizeMap[e] || e}`]: e
       };
     },
     getCorrectHeight() {
@@ -176,7 +178,7 @@ const Ys = /* @__PURE__ */ pt({
     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) || W(this.$props.groupable) && this.$props.groupable.enabled !== !1;
+      return this.$props.groupable === !0 && (e == null ? void 0 : e.length) || j(this.$props.groupable) && this.$props.groupable.enabled !== !1;
     },
     computedCollapsed() {
       let e = [];
@@ -189,12 +191,12 @@ const Ys = /* @__PURE__ */ pt({
     getAriaRowCount() {
       var s, i;
       const e = this.$props.dataItems, t = this.$props.total || (e == null ? void 0 : e.total) || (e == null ? void 0 : e.length) || 0;
-      return this.$props.detail ? this._columnsMap.length + (this.$props.filterable ? 1 : 0) + t * 2 + (this.columnsRef.some((o) => {
-        var r;
-        return !!(o.footerCell || (r = o.cells) != null && r.footerCell);
-      }) || (s = this.$props.cells) != null && s.footerCell ? 1 : 0) : !this.$props.pageable && this.$props.scrollable === "scrollable" ? void 0 : this.$props.groupable ? -1 : this._columnsMap.length + (this.$props.filterable ? 1 : 0) + t + (this.columnsRef.some((o) => {
-        var r;
-        return !!(o.footerCell || (r = o.cells) != null && r.footerCell);
+      return this.$props.detail ? this._columnsMap.length + (this.$props.filterable ? 1 : 0) + t * 2 + (this.columnsRef.some((r) => {
+        var o;
+        return !!(r.footerCell || (o = r.cells) != null && o.footerCell);
+      }) || (s = this.$props.cells) != null && s.footerCell ? 1 : 0) : !this.$props.pageable && this.$props.scrollable === "scrollable" ? void 0 : this.$props.groupable ? -1 : this._columnsMap.length + (this.$props.filterable ? 1 : 0) + t + (this.columnsRef.some((r) => {
+        var o;
+        return !!(r.footerCell || (o = r.cells) != null && o.footerCell);
       }) || (i = this.$props.cells) != null && i.footerCell ? 1 : 0);
     },
     // Calculates the value of the ariaColcount attribute.
@@ -206,9 +208,39 @@ const Ys = /* @__PURE__ */ pt({
     },
     isVirtualScroll() {
       return this.$props.scrollable === "virtual" || this.$props.scrollable === void 0 || !1;
+    },
+    pinnedSourceSet() {
+      var t, s;
+      const e = /* @__PURE__ */ new Set();
+      return (t = this.gridContext.pinnedTopRows) != null && t.value && this.gridContext.pinnedTopRows.value.forEach((i) => e.add(i)), (s = this.gridContext.pinnedBottomRows) != null && s.value && this.gridContext.pinnedBottomRows.value.forEach((i) => e.add(i)), e;
+    },
+    sortedPinnedTopRows() {
+      var s, i;
+      const e = ((s = this.gridContext.pinnedTopRows) == null ? void 0 : s.value) || [], t = (i = this.gridContext.sort) == null ? void 0 : i.value;
+      return this.autoProcessData && (t != null && t.length) ? st([...e], t) : e;
+    },
+    sortedPinnedBottomRows() {
+      var s, i;
+      const e = ((s = this.gridContext.pinnedBottomRows) == null ? void 0 : s.value) || [], t = (i = this.gridContext.sort) == null ? void 0 : i.value;
+      return this.autoProcessData && (t != null && t.length) ? st([...e], t) : e;
+    },
+    hasPinnedTopRows() {
+      return this.$props.pinnable && this.sortedPinnedTopRows.length > 0;
+    },
+    hasPinnedBottomRows() {
+      return this.$props.pinnable && this.sortedPinnedBottomRows.length > 0;
     }
   },
   methods: {
+    getCellPositionStyle(e, t) {
+      return e.left !== void 0 ? t ? {
+        left: e.right + "px",
+        right: e.left + "px"
+      } : {
+        left: e.left + "px",
+        right: e.right + "px"
+      } : {};
+    },
     handleIntersection(e) {
       const t = {
         rowIndex: this.rowIndexRef.value
@@ -226,26 +258,26 @@ const Ys = /* @__PURE__ */ pt({
       } = e;
       this.rowIndexRef.value = t;
       const s = this._element;
-      if (this.observerRef.value && s) {
-        this.observerRef.value.disconnect();
-        const o = s.querySelector(`[absolute-row-index="${this.rowIndexRef.value}"]`);
-        o ? this.observerRef.value.observe(o) : this.setCurrentOnTop(e);
+      if (this.observerRef && s) {
+        this.observerRef.disconnect();
+        const r = s.querySelector(`[absolute-row-index="${this.rowIndexRef.value}"]`);
+        r ? this.observerRef.observe(r) : this.setCurrentOnTop(e);
       }
     },
     setCurrentOnTop(e) {
-      var i, o;
+      var i, r;
       if (!((i = this.vsRef) != null && i.container) || this.$props.scrollable === "none")
         return;
-      this.observerRef.value && this.observerRef.value.disconnect();
+      this.observerRef && this.observerRef.disconnect();
       const {
         rowIndex: t
       } = e, s = this._element;
       if (this.isVirtualScroll) {
-        const r = ((o = this.vsRef.rowHeightService) == null ? void 0 : o.offset(t)) || 0;
-        this.vsRef.container.scroll(0, r);
+        const o = ((r = this.vsRef.rowHeightService) == null ? void 0 : r.offset(t)) || 0;
+        this.vsRef.container.scroll(0, o);
       } else if (s) {
-        const r = t < 1 ? s.querySelector("tbody > tr:nth-child(1)") : s.querySelector(`tbody > tr:nth-child(${t + 1})`);
-        r && this.containerElementRef && (this.containerElementRef.scrollTop = r.offsetTop);
+        const o = t < 1 ? s.querySelector("tbody > tr:nth-child(1)") : s.querySelector(`tbody > tr:nth-child(${t + 1})`);
+        o && this.containerElementRef && (this.containerElementRef.scrollTop = o.offsetTop);
       }
     },
     getTotal() {
@@ -253,18 +285,18 @@ const Ys = /* @__PURE__ */ pt({
       return Array.isArray(this.$props.dataItems) ? e = e || this.$props.dataItems.length : this.$props.dataItems && (e = e || this.$props.dataItems.total), e;
     },
     readColumnElements() {
-      return rs(this.$props.columns, this.currentColumnsState, {
+      return ds(this.$props.columns, this.currentColumnsState, {
         prevId: 0,
         idPrefix: this.idPrefix
       });
     },
     getResolvedFlatColumnsState() {
-      const e = [], t = (s, i) => s == null ? void 0 : s.forEach((o) => {
-        const r = o.hidden || i;
+      const e = [], t = (s, i) => s == null ? void 0 : s.forEach((r) => {
+        const o = r.hidden || i;
         e.push({
-          ...o,
-          hidden: r
-        }), t(o.children, r);
+          ...r,
+          hidden: o
+        }), t(r.children, o);
       });
       return t(this.currentColumnsState, !1), e;
     },
@@ -272,16 +304,16 @@ const Ys = /* @__PURE__ */ pt({
       const t = this.getResolvedFlatColumnsState();
       return [e.filter((s) => {
         var i;
-        return !s.hidden && !((i = t.find((o) => o.id === s.id)) != null && i.hidden);
+        return !s.hidden && !((i = t.find((r) => r.id === s.id)) != null && i.hidden);
       }), e.filter((s) => {
         var i;
-        return s.hidden || ((i = t.find((o) => o.id === s.id)) == null ? void 0 : i.hidden);
+        return s.hidden || ((i = t.find((r) => r.id === s.id)) == null ? void 0 : i.hidden);
       })];
     },
-    getFlatData(e, t, s, i, o, r, l) {
-      const d = [], h = os(d, e, t, {
+    getFlatData(e, t, s, i, r, o, l) {
+      const d = [], h = as(d, e, t, {
         index: s
-      }, i !== void 0, o, r, this.groupExpandable.defaultExpand, l, this.$props.expandField);
+      }, i !== void 0, r, o, this.groupExpandable.defaultExpand, l, this.$props.expandField);
       return {
         flattedData: d,
         resolvedGroupsCount: h
@@ -306,7 +338,7 @@ const Ys = /* @__PURE__ */ pt({
         ...s,
         children: s.children && s.children.length > 0 ? this.filterHiddenColumns(s.children) : s.children
       });
-      return [...e].filter((s) => !s.hidden).filter((s) => B && s && s.media ? window.matchMedia(s.media).matches : s).map((s) => t(s));
+      return [...e].filter((s) => !s.hidden).filter((s) => q && s && s.media ? window.matchMedia(s.media).matches : s).map((s) => t(s));
     },
     /**
      * A getter of the current columns. Gets the current column width or current columns,
@@ -316,41 +348,41 @@ const Ys = /* @__PURE__ */ pt({
      * and check the properties afterwards. You can check the result in the browser console.
      */
     getColumns() {
-      const e = this.columnsRef.filter((s) => s.declarationIndex >= 0 && s.parentIndex === -1), t = (s) => (s.sort((i, o) => i.declarationIndex - o.declarationIndex), s.map((i) => {
+      const e = this.columnsRef.filter((s) => s.declarationIndex >= 0 && s.parentIndex === -1), t = (s) => (s.sort((i, r) => i.declarationIndex - r.declarationIndex), s.map((i) => {
         const {
-          declarationIndex: o,
-          parentIndex: r,
+          declarationIndex: r,
+          parentIndex: o,
           depth: l,
           colSpan: d,
           rowSpan: h,
-          index: g,
+          index: c,
           kFirst: u,
-          children: R,
+          children: g,
           ...C
         } = i;
-        return R.length ? {
-          children: t(R),
+        return g.length ? {
+          children: t(g),
           ...C
         } : C;
       }));
       return t(e);
     },
     setRefs() {
-      var r, l;
+      var o, l, d, h;
       let e = "$el";
-      const t = m(this, "gridNav");
+      const t = R(this, "gridNav");
       t && (this._element = t[e]);
-      const s = m(this, "groupPanelDiv");
+      const s = R(this, "groupPanelDiv");
       if (s) {
-        let d = s[e] || null;
-        this.dragLogic.refGroupPanelDiv(d);
+        let c = s[e] || null;
+        this.dragLogic.refGroupPanelDiv(c);
       }
-      this.stickyHeaderRef = m(this, "stickyHeader"), this.stickyFooterRef = m(this, "stickyFooter");
-      const i = m(this, "dropElementClue"), o = m(this, "dragElementClue");
-      this.dragLogic.refDropElementClue(i), this.dragLogic.refDragElementClue(o), this.columnResize.colGroupMain = m(this, "colGroup"), this.columnResize.colGroupStickyHeader = (r = this.stickyHeaderRef) == null ? void 0 : r.colGroupRef, this.columnResize.colGroupStickyFooter = (l = this.stickyFooterRef) == null ? void 0 : l.colGroupRef, this._header = m(this, "header"), this._footer = m(this, "footer"), this.resetTableWidth(), Rt();
+      this.stickyHeaderRef = R(this, "stickyHeader"), this.stickyFooterRef = R(this, "stickyFooter"), this.pinnedTopRef = R(this, "pinnedTop"), this.pinnedBottomRef = R(this, "pinnedBottom");
+      const i = R(this, "dropElementClue"), r = R(this, "dragElementClue");
+      this.dragLogic.refDropElementClue(i), this.dragLogic.refDragElementClue(r), this.columnResize.colGroupMain = R(this, "colGroup"), this.columnResize.colGroupStickyHeader = (o = this.stickyHeaderRef) == null ? void 0 : o.colGroupRef, this.columnResize.colGroupStickyFooter = (l = this.stickyFooterRef) == null ? void 0 : l.colGroupRef, this.columnResize.colGroupPinnedTop = (d = this.pinnedTopRef) == null ? void 0 : d.colGroupRef, this.columnResize.colGroupPinnedBottom = (h = this.pinnedBottomRef) == null ? void 0 : h.colGroupRef, this._header = R(this, "header"), this._footer = R(this, "footer"), this.resetTableWidth(), $t();
     },
     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();
+      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);
     },
     isAllData() {
       const {
@@ -369,15 +401,15 @@ const Ys = /* @__PURE__ */ pt({
     },
     initializeVirtualization() {
       const e = this.vsRef, t = this.$props.rowHeight || this._minRowHeightRef || 0;
-      this.tableBodyRef = m(this, "tableBody"), this.scrollTableRef = Ke(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 = m(this, "scrollContainer"), e.tableBody = this.tableBodyRef, e.scrollHeightContainer = m(this, "scrollHeightContainer"), e.table = this.scrollTableRef, (!e.rowHeightService || e.total !== this._virtualTotal) && t && (e.total = this._virtualTotal, e.rowHeightService = new mt(this._virtualTotal, t)));
+      this.tableBodyRef = R(this, "tableBody"), this.scrollTableRef = Me(this, "table"), e && (e.fixedScroll = this.$props.fixedScroll || !1, e.PageChange = this.virtualPageChange, e.pageSize = this._virtualPageSize, e.scrollableVirtual = this.isVirtualScroll, this.scrollContainerRef = e.container = R(this, "scrollContainer"), e.tableBody = this.tableBodyRef, e.scrollHeightContainer = R(this, "scrollHeightContainer"), e.table = this.scrollTableRef, (!e.rowHeightService || e.total !== this._virtualTotal) && t && (e.total = this._virtualTotal, e.rowHeightService = new bt(this._virtualTotal, t)));
     },
     setContainerHeight() {
-      const e = m(this, "scrollContainer");
+      const e = R(this, "scrollContainer");
       this._containerHeightRef = (e == null ? void 0 : e.offsetHeight) || 0;
     },
     setMinRowHeight() {
       if (!this._minRowHeightRef && !this.$props.rowHeight) {
-        const t = is(m(this, "tableBody"));
+        const t = ns(R(this, "tableBody"));
         t && (this._minRowHeightRef = t, this.$forceUpdate());
       }
     },
@@ -385,22 +417,21 @@ const Ys = /* @__PURE__ */ pt({
       this.setRefs();
     },
     onHeaderScroll(e) {
-      const s = e.target.scrollLeft, i = m(this, "scrollContainer");
+      const s = e.target.scrollLeft, i = R(this, "scrollContainer");
       i && (i.scrollLeft = s), this.scrollLeftRef = s;
     },
     scrollHandler(e) {
-      var r, l;
       clearTimeout(this.forceUpdateTimeout);
       const t = e.currentTarget.scrollLeft, s = e.currentTarget.scrollTop;
       this.$props.columnVirtualization && (!this.isVirtualScroll || s === this.wrapperScrollTopRef) && (this.forceUpdateTimeout = setTimeout(() => {
         this.$forceUpdate();
-      }, 0)), this.scrollLeftRef = t, this._header && this._header.setScrollLeft(e.currentTarget.scrollLeft), this._footer && this._footer.setScrollLeft(e.currentTarget.scrollLeft), this.stickyHeaderRef && this.stickyHeaderRef.setScrollLeft(e.currentTarget.scrollLeft), this.stickyFooterRef && this.stickyFooterRef.setScrollLeft(e.currentTarget.scrollLeft), this.vsRef && s !== this.wrapperScrollTopRef && this.vsRef.scrollHandler(e);
-      const i = (r = this.virtualSkipRef) == null ? void 0 : r.current;
-      this.vsRef.current && s !== this.wrapperScrollTopRef && this.vsRef.current.scrollHandler(e);
-      const o = this.isVirtualScroll && ((l = this.virtualSkipRef) == null ? void 0 : l.current) !== i;
-      if (this.$emit("scroll", e), this.wrapperScrollTopRef = s, !o) {
-        const d = this.updateStickyGroups();
-        this.sticky.headerItems = d == null ? void 0 : d.stickyHeaderItems, this.sticky.footerItems = d == null ? void 0 : d.stickyFooterItems;
+      }, 0)), this.scrollLeftRef = t, this._header && this._header.setScrollLeft(e.currentTarget.scrollLeft), this._footer && this._footer.setScrollLeft(e.currentTarget.scrollLeft), this.stickyHeaderRef && this.stickyHeaderRef.setScrollLeft(e.currentTarget.scrollLeft), this.stickyFooterRef && this.stickyFooterRef.setScrollLeft(e.currentTarget.scrollLeft), this.pinnedTopRef && this.pinnedTopRef.setScrollLeft(t), this.pinnedBottomRef && this.pinnedBottomRef.setScrollLeft(t), this.vsRef && s !== this.wrapperScrollTopRef && this.vsRef.scrollHandler(e);
+      const i = this.virtualSkipRef;
+      this.vsRef && s !== this.wrapperScrollTopRef && this.vsRef.scrollHandler(e);
+      const r = this.isVirtualScroll && this.virtualSkipRef !== i;
+      if (this.$emit("scroll", e), this.wrapperScrollTopRef = s, !r) {
+        const o = this.updateStickyGroups();
+        this.sticky.headerItems = o == null ? void 0 : o.stickyHeaderItems, this.sticky.footerItems = o == null ? void 0 : o.stickyFooterItems;
       }
     },
     rowClick(e, t) {
@@ -416,15 +447,15 @@ const Ys = /* @__PURE__ */ pt({
       });
     },
     loopGroupedItems(e, t, s = 0, i = null) {
-      return e.forEach((o) => {
-        !i && t(o, s) && (i = o), o.items && o.items.length && !i && (i = this.loopGroupedItems(o.items, t, s + 1, i));
+      return e.forEach((r) => {
+        !i && t(r, s) && (i = r), r.items && r.items.length && !i && (i = this.loopGroupedItems(r.items, t, s + 1, i));
       }), i;
     },
     updateGroupCollapsed(e) {
       let t = this.computedCollapsed, s = t[e.level];
-      const i = this.$props.uniqueField, o = function(d, h) {
+      const i = this.$props.uniqueField, r = function(d, h) {
         return d.value === e.dataItem.value && h === e.level;
-      }, r = this.allGroupedItems ? this.loopGroupedItems(this.allGroupedItems.data, o, 0, null) : e.dataItem, l = ss(r || e.dataItem, i);
+      }, o = this.allGroupedItems ? this.loopGroupedItems(this.allGroupedItems.data, r, 0, null) : e.dataItem, l = ls(o || e.dataItem, i);
       if (e.value) {
         if (s && s.length) {
           const d = s.indexOf(l);
@@ -436,9 +467,9 @@ const Ys = /* @__PURE__ */ pt({
     },
     itemChange(e) {
       var i;
-      const t = M.call(this, "itemchange"), s = (i = this.gridContext.group) == null ? void 0 : i.value;
+      const t = K.call(this, "itemchange"), s = (i = this.gridContext.group) == null ? void 0 : i.value;
       if (e.field === this.$props.expandField || (s || this.$props.detail) && e.field === void 0) {
-        M.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,
@@ -488,15 +519,15 @@ const Ys = /* @__PURE__ */ pt({
         const {
           event: s,
           dataItem: i,
-          dataIndex: o,
-          columnIndex: r
+          dataIndex: r,
+          columnIndex: o
         } = e, l = {
           ...this.getArguments(s),
           dataItem: i,
-          startColIndex: r,
-          endColIndex: r,
-          startRowIndex: o,
-          endRowIndex: o,
+          startColIndex: o,
+          endColIndex: o,
+          startRowIndex: r,
+          endRowIndex: r,
           dataItems: this.getLeafDataItems(),
           altKey: !1,
           ctrlKey: !1,
@@ -510,7 +541,7 @@ const Ys = /* @__PURE__ */ pt({
         };
         this.gridContext.selectionchange({
           ...l,
-          select: this.$props.dataItemKey ? We({
+          select: this.$props.dataItemKey ? Oe({
             event: l,
             selectedState: (t = this.$props.select) != null ? t : {},
             dataItemKey: this.$props.dataItemKey
@@ -519,34 +550,34 @@ const Ys = /* @__PURE__ */ pt({
       }
     },
     onKeyboardSelectionChangeHandler(e) {
-      var g, u;
+      var c, u;
       if (!this.computedSelectable.enabled || !this.$props.dataItemKey)
         return;
-      const t = (g = this.gridContext.select) == null ? void 0 : g.value, s = {
+      const t = (c = this.gridContext.select) == null ? void 0 : c.value, s = {
         dataItems: this.getLeafDataItems(),
         mode: this.computedSelectable.mode,
         cell: this.computedSelectable.cell,
         componentId: this.$props.id,
         selectedField: "",
         ...this.getArguments(e)
-      }, i = Tt({
+      }, i = Gt({
         event: s,
         selectedState: t != null ? t : {},
         dataItemKey: this.$props.dataItemKey
       });
       if (i === t)
         return;
-      const o = e.target, r = Be(o, "TD"), l = Be(o, "TR"), d = zt(r), h = Et(l);
+      const r = e.target, o = We(r, "TD"), l = We(r, "TR"), d = Ft(o), h = Dt(l);
       if (d !== void 0 && h !== void 0) {
-        const R = (u = ts(this.$props.dataItems)) == null ? void 0 : u[h];
+        const g = (u = rs(this.$props.dataItems)) == null ? void 0 : u[h];
         this.gridContext.selectionchange({
           ...s,
           select: i,
-          dataItem: R,
+          dataItem: g,
           startRowIndex: h,
           startColIndex: d,
-          startDataItem: R,
-          endDataItem: R,
+          startDataItem: g,
+          endDataItem: g,
           endRowIndex: h,
           endColIndex: d,
           ctrlKey: e.ctrlKey,
@@ -561,7 +592,7 @@ const Ys = /* @__PURE__ */ pt({
       if (this.computedSelectable.enabled) {
         const t = this.getLeafDataItems();
         this.gridContext.headerselectionchange({
-          select: e.event.target.checked ? t.reduce((s, i) => (this.$props.dataItemKey && P(this.$props.dataItemKey)(i) !== void 0 && (s[P(this.$props.dataItemKey)(i)] = !0), s), {}) : {},
+          select: e.event.target.checked ? t.reduce((s, i) => (this.$props.dataItemKey && D(this.$props.dataItemKey)(i) !== void 0 && (s[D(this.$props.dataItemKey)(i)] = !0), s), {}) : {},
           field: e.field,
           event: e.event,
           target: this,
@@ -572,7 +603,7 @@ const Ys = /* @__PURE__ */ pt({
     selectionRelease(e) {
       var t;
       if (this.computedSelectable.enabled) {
-        const s = this.getLeafDataItems(), i = s[e.startRowIndex], o = s[e.endRowIndex], r = {
+        const s = this.getLeafDataItems(), i = s[e.startRowIndex], r = s[e.endRowIndex], o = {
           event: void 0,
           target: this,
           selectedField: "",
@@ -580,16 +611,16 @@ const Ys = /* @__PURE__ */ pt({
           dataItems: s,
           dataItem: null,
           startDataItem: i,
-          endDataItem: o,
+          endDataItem: r,
           ...e
-        }, l = We({
-          event: r,
+        }, l = Oe({
+          event: o,
           selectedState: (t = this.$props.select) != null ? t : {},
           // Thats kinda strange, even through the `dataItemKey` is required by the `getSelectedState`
           // it does work correctly even without it
           dataItemKey: this.$props.dataItemKey
         });
-        this.raiseSelectionEvent(r, l);
+        this.raiseSelectionEvent(o, l);
       }
     },
     clearSelection(e) {
@@ -602,16 +633,16 @@ const Ys = /* @__PURE__ */ pt({
       });
     },
     moveToNextPage(e) {
-      var o, r, l, d;
-      const t = (l = (r = (o = this.gridContext.take) == null ? void 0 : o.value) != null ? r : this.$props.pageSize) != null ? l : 0, s = (((d = this.gridContext.skip) == null ? void 0 : d.value) || 0) + t, i = this.getTotal();
+      var r, o, l, d;
+      const t = (l = (o = (r = this.gridContext.take) == null ? void 0 : r.value) != null ? o : this.$props.pageSize) != null ? l : 0, s = (((d = this.gridContext.skip) == null ? void 0 : d.value) || 0) + t, i = this.getTotal();
       s < i && this.pageChangeHandler({
         skip: s,
         take: t
       }, e);
     },
     moveToPrevPage(e) {
-      var i, o, r, l;
-      const t = (r = (o = (i = this.gridContext.take) == null ? void 0 : i.value) != null ? o : this.$props.pageSize) != null ? r : 0, s = (((l = this.gridContext.skip) == null ? void 0 : l.value) || 0) - t;
+      var i, r, o, l;
+      const t = (o = (r = (i = this.gridContext.take) == null ? void 0 : i.value) != null ? r : this.$props.pageSize) != null ? o : 0, s = (((l = this.gridContext.skip) == null ? void 0 : l.value) || 0) - t;
       s >= 0 && this.pageChangeHandler({
         skip: s,
         take: t
@@ -652,20 +683,20 @@ const Ys = /* @__PURE__ */ pt({
     handleDetailExpandAction(e, t) {
       var s;
       if (this.detailExpandable.enabled) {
-        const i = (s = this.gridContext.detailExpand) == null ? void 0 : s.value, o = Ht(i != null ? i : {}, e);
+        const i = (s = this.gridContext.detailExpand) == null ? void 0 : s.value, r = Pt(i != null ? i : {}, e);
         this.gridContext.detailexpandchange({
           ...this.getArguments(t),
-          detailExpand: o
+          detailExpand: r
         });
       }
     },
     handleGroupExpandAction(e, t) {
       var s;
       if (this.groupExpandable.enabled) {
-        const i = (s = this.gridContext.groupExpand) == null ? void 0 : s.value, o = kt(i != null ? i : [], e, this.groupExpandable);
+        const i = (s = this.gridContext.groupExpand) == null ? void 0 : s.value, r = Et(i != null ? i : [], e, this.groupExpandable);
         this.$props.expandField || this.gridContext.groupexpandchange({
           ...this.getArguments(t),
-          groupExpand: o
+          groupExpand: r
         });
       }
       this.scrollToStickyGroup(e.group);
@@ -676,41 +707,41 @@ const Ys = /* @__PURE__ */ pt({
           ...this.getArguments(i),
           ...t
         });
-      else if (M.call(this, e))
+      else if (K.call(this, e))
         this.$emit(e, {
           ...this.getArguments(i),
           ...t
         });
-      else if (M.call(this, "datastatechange")) {
-        const o = {
+      else if (K.call(this, "datastatechange")) {
+        const r = {
           ...this.getDataState(),
           ...s
         };
         this.gridContext.datastatechange({
           ...this.getArguments(i),
-          data: o,
-          dataState: o
+          data: r,
+          dataState: r
         });
       }
     },
     columnReorder(e, t, s) {
-      const i = this.columnsRef[e], o = Je(this.currentColumnsState), r = i.depth, l = (u) => {
+      const i = this.columnsRef[e], r = Je(this.currentColumnsState), o = i.depth, l = (u) => {
         do
           u++;
-        while (u < this.columnsRef.length && this.columnsRef[u].depth > r);
+        while (u < this.columnsRef.length && this.columnsRef[u].depth > o);
         return u;
       }, d = this.columnsRef.splice(e, l(e) - e);
-      this.columnsRef.splice(e < t ? l(t - d.length) : t, 0, ...d), this.columnsRef.filter((u) => u.declarationIndex >= 0).forEach((u, R) => {
-        u.orderIndex = R;
-        const C = o.find((S) => S.id === u.id);
-        C && (C.orderIndex = R);
+      this.columnsRef.splice(e < t ? l(t - d.length) : t, 0, ...d), this.columnsRef.filter((u) => u.declarationIndex >= 0).forEach((u, g) => {
+        u.orderIndex = g;
+        const C = r.find((b) => b.id === u.id);
+        C && (C.orderIndex = g);
       });
       const h = this.columnsRef[e].locked && this.columnsRef[t].locked;
-      St(this._columnsMap, this.columnsRef, h || this.shouldUpdateLeftRightRef), yt(this._columnsMap, this.columnsRef, h || this.shouldUpdateLeftRightRef), this.resizedRef && (this.shouldUpdateLeftRightRef = !1, this.resizedRef = !1);
-      const g = this.getColumns();
+      Tt(this._columnsMap, this.columnsRef, h || this.shouldUpdateLeftRightRef), zt(this._columnsMap, this.columnsRef, h || this.shouldUpdateLeftRightRef), this.resizedRef && (this.shouldUpdateLeftRightRef = !1, this.resizedRef = !1);
+      const c = this.getColumns();
       this.$emit("columnreorder", {
         target: this,
-        columns: g,
+        columns: c,
         event: s,
         prev: e,
         next: t
@@ -719,19 +750,19 @@ const Ys = /* @__PURE__ */ pt({
       });
     },
     groupReorder(e, t, s) {
-      var o;
-      const i = (o = this.gridContext.group) == null ? void 0 : o.value;
+      var r;
+      const i = (r = this.gridContext.group) == null ? void 0 : r.value;
       i !== void 0 && (i.splice(t, 0, ...i.splice(e, 1)), this.groupChangeHandler(i, s));
     },
     columnToGroup(e, t, s) {
-      var r;
+      var o;
       const i = this.columnsRef[e].field;
       if (!i)
         return;
-      const o = (((r = this.gridContext.group) == null ? void 0 : r.value) || []).slice();
-      o.splice(t, 0, {
+      const r = (((o = this.gridContext.group) == null ? void 0 : o.value) || []).slice();
+      r.splice(t, 0, {
         field: i
-      }), this.groupChangeHandler(o, s);
+      }), this.groupChangeHandler(r, s);
     },
     resetTableWidth() {
       var i;
@@ -739,17 +770,21 @@ const Ys = /* @__PURE__ */ pt({
       if (!this.columnResize.colGroupMain)
         return;
       const t = (i = this.columnResize.colGroupMain) == null ? void 0 : i.children;
-      for (let o = 0; o < t.length; o++) {
-        const r = t[o].width;
-        if (!r)
+      for (let r = 0; r < t.length; r++) {
+        const o = t[r].width;
+        if (!o)
           return;
-        e += parseFloat(r.toString());
+        e += parseFloat(o.toString());
       }
-      e = Math.round(e), this._header && this._header.setWidth(e), this._footer && this._footer.setWidth(e), this.stickyHeaderRef && this.stickyHeaderRef.setWidth(e), this.stickyFooterRef && this.stickyFooterRef.setWidth(e);
-      const s = Ke(this, "table");
-      s && e && (s.style.width = e + "px");
+      e = Math.round(e), this._header && this._header.setWidth(e), this._footer && this._footer.setWidth(e), this.stickyHeaderRef && this.stickyHeaderRef.setWidth(e), this.stickyFooterRef && this.stickyFooterRef.setWidth(e), this.pinnedTopRef && this.pinnedTopRef.setWidth(e), this.pinnedBottomRef && this.pinnedBottomRef.setWidth(e);
+      const s = Me(this, "table");
+      s && e && (s.style.width = e + "px"), this.stickyFooterRef && this.setStickyFooterOffset();
+    },
+    setStickyFooterOffset() {
+      const e = this.containerElementRef, t = e ? e.scrollWidth > e.clientWidth : !1;
+      this.stickyFooterRef && (this.stickyFooterRef.$el.style.marginBlockEnd = t ? "var(--kendo-scrollbar-width, 0px)" : "");
     },
-    onResize(e, t, s, i, o, r, l) {
+    onResize(e, t, s, i, r, o, l) {
       this.resetTableWidth(), this.shouldUpdateLeftRightRef = !0, this.resizedRef = !0, this.$emit("columnresize", {
         columns: this.getColumns(),
         index: e,
@@ -757,31 +792,33 @@ const Ys = /* @__PURE__ */ pt({
         event: i,
         newWidth: t,
         oldWidth: s,
-        end: o,
+        end: r,
         target: this
-      }), o && this.gridContext.columnsstatechange({
-        columnsState: r
+      }), r && this.gridContext.columnsstatechange({
+        columnsState: o
       });
     },
     initColumnsState(e, t) {
       const s = (i) => {
-        var r;
-        const o = t.find((l) => l.id === i.id);
-        if (o) {
+        var o;
+        const r = t.find((l) => l.id === i.id);
+        if (r) {
           const l = {
-            ...o
+            ...r
           };
-          return l.children = (r = i.children) == null ? void 0 : r.map(s), l;
+          return l.children = (o = i.children) == null ? void 0 : o.map(s), l;
         }
         return i;
       };
       this.currentColumnsState = e.filter((i) => i.parentIndex === -1).map(s);
     },
     configureColumns(e, t) {
-      e.filter((r) => r.columnType === "checkbox").forEach((r) => {
-        r.width = r.width || "50px", r.internalCell = x(je), r.internalHeaderCell = x(Xe), r._type = "edit", r.columnMenu = !1;
-      }), this.$props.selectedField && this.columnsRef.filter((r) => r.field === this.$props.selectedField).forEach((r) => {
-        r.width = r.width || "50px", r.internalCell = x(je), r.internalHeaderCell = x(Xe), r.columnMenu = !1;
+      e.filter((o) => o.columnType === "checkbox").forEach((o) => {
+        o.width = o.width || "50px", o.defaultCell = I(Ue), o.defaultHeaderCell = I(Ye), o._type = "edit", o.columnMenu = !1;
+      }), this.$props.selectedField && this.columnsRef.filter((o) => o.field === this.$props.selectedField).forEach((o) => {
+        o.width = o.width || "50px", o.defaultCell = I(Ue), o.defaultHeaderCell = I(Ye), o.columnMenu = !1;
+      }), this.$props.pinnable && e.filter((o) => o.columnType === "pin").forEach((o) => {
+        o.width = o.width || "48px", o.defaultCell = I(Rs), o.defaultHeaderCell = I(Ht), o.sortable = !1, o.filterable = !1, o.editable = !1;
       });
       const s = Je(this.currentColumnsState);
       this.initColumnsState(e, s);
@@ -805,56 +842,54 @@ const Ys = /* @__PURE__ */ pt({
         ariaColumnIndex: 0,
         isAccessible: !0
       };
-      let o = 0;
+      let r = 0;
       if (this.detailExpandable.enabled && this.$props.detail && !this.$props.expandField) {
-        const r = {
+        const o = {
           ...i,
           _type: "expand",
-          id: H.generateNavigatableId(`${o++}`, "expand", "column"),
-          defaultCell: x(ae),
-          internalCell: x(ae),
+          id: k.generateNavigatableId(`${r++}`, "expand", "column"),
+          defaultCell: I(je),
           field: this.detailExpandable.column,
           headerClassName: this.hierarchClass
         };
-        e.unshift(r), this.currentColumnsState.unshift(s.find((l) => l.id === r.id) || r);
+        e.unshift(o), this.currentColumnsState.unshift(s.find((l) => l.id === o.id) || o);
       }
-      this.$props.expandField && M.call(this, "expandchange") && this.$props.detail && (e.unshift({
+      this.$props.expandField && K.call(this, "expandchange") && this.$props.detail && (e.unshift({
         ...i,
-        internalCell: x(ae),
+        defaultCell: I(je),
         field: this.$props.expandField,
         headerClassName: "k-hierarchy-cell k-header",
-        id: H.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
+        id: k.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
         ...this.expandColumn
-      }), o++);
-      for (let r = 0; r < t; r++) {
+      }), r++);
+      for (let o = 0; o < t; o++) {
         const l = {
           ...i,
           isAccessible: !1,
-          defaultCell: x(ne),
-          internalCell: x(ne),
-          id: H.generateNavigatableId(`${o++}`, "group", "column"),
+          defaultCell: I(Xe),
+          id: k.generateNavigatableId(`${r++}`, "group", "column"),
           field: "value",
           locked: this.$props.lockGroups,
           columnMenu: !1
         };
         e.unshift(l), this.currentColumnsState.unshift(s.find((d) => d.id === l.id) || l);
       }
-      e.slice(o).forEach((r) => {
-        r.parentIndex >= 0 && (r.parentIndex += o), r.rowSpannable = r.rowSpannable !== void 0 ? Qe(r.rowSpannable) : this.computedRowSpannable;
+      e.slice(r).forEach((o) => {
+        o.parentIndex >= 0 && (o.parentIndex += r), o.rowSpannable = o.rowSpannable !== void 0 ? Qe(o.rowSpannable) : this.computedRowSpannable;
       });
     },
     initColumns(e, t) {
-      var r;
+      var o;
       this.columnsRef = this.readColumnElements();
-      const s = (r = this.gridContext.group) == null ? void 0 : r.value;
-      this.columnsRef.filter((l) => !l.hidden).length === 0 && (this.columnsRef = Zt(e, s, {
+      const s = (o = this.gridContext.group) == null ? void 0 : o.value;
+      this.columnsRef.filter((l) => !l.hidden).length === 0 && (this.columnsRef = is(e, s, {
         column: this.$props.expandField ? this.$props.expandField : this.groupExpandable.column
       }, {
         prevId: 0,
         idPrefix: this.idPrefix
       })), this.configureColumns(this.columnsRef, t);
-      const [i, o] = this.filterColumns(this.columnsRef);
-      this.columnsRef = i, this.hiddenColumnsRef = o, this._columnsMap = es(this.columnsRef, !0);
+      const [i, r] = this.filterColumns(this.columnsRef);
+      this.columnsRef = i, this.hiddenColumnsRef = r, this._columnsMap = os(this.columnsRef, !0);
     },
     resolveTitle(e) {
       const t = this.findColumnByField(e), s = t && (t.title || t.field);
@@ -879,14 +914,14 @@ const Ys = /* @__PURE__ */ pt({
       return null;
     },
     getDataState() {
-      var r, l, d, h, g;
-      const e = (r = this.gridContext.sort) == null ? void 0 : r.value, t = (l = this.gridContext.filter) == null ? void 0 : l.value, s = (d = this.gridContext.skip) == null ? void 0 : d.value, i = (h = this.gridContext.take) == null ? void 0 : h.value, o = (g = this.gridContext.group) == null ? void 0 : g.value;
+      var o, l, d, h, c;
+      const e = (o = this.gridContext.sort) == null ? void 0 : o.value, t = (l = this.gridContext.filter) == null ? void 0 : l.value, s = (d = this.gridContext.skip) == null ? void 0 : d.value, i = (h = this.gridContext.take) == null ? void 0 : h.value, r = (c = this.gridContext.group) == null ? void 0 : c.value;
       return {
         filter: t,
         sort: e,
         skip: s,
         take: i !== void 0 ? i : this.$props.pageSize,
-        group: o
+        group: r
       };
     },
     getArguments(e) {
@@ -908,19 +943,19 @@ const Ys = /* @__PURE__ */ pt({
       }), t;
     },
     searchChange(e) {
-      const t = this.$props.searchFields || this.columnsRef.map((o) => o.field) || [], s = e.event.target.value, i = {
+      const t = this.$props.searchFields || this.columnsRef.map((r) => r.field) || [], s = e.event.target.value, i = {
         logic: "or",
-        filters: t.filter((o) => o !== void 0).map((o) => {
-          var r;
-          return typeof o == "string" ? {
-            field: o,
+        filters: t.filter((r) => r !== void 0).map((r) => {
+          var o;
+          return typeof r == "string" ? {
+            field: r,
             value: s,
             operator: "contains"
           } : {
             value: s,
-            operator: (r = o.operator) != null ? r : "contains",
-            field: o.field,
-            ignoreCase: o.ignoreCase
+            operator: (o = r.operator) != null ? o : "contains",
+            field: r.field,
+            ignoreCase: r.ignoreCase
           };
         })
       };
@@ -931,24 +966,24 @@ const Ys = /* @__PURE__ */ pt({
       }, e);
     },
     getCellsToRender(e, t) {
-      var r;
+      var o;
       const s = [];
-      let i = null, o = 0;
+      let i = null, r = 0;
       if (t.forEach((l, d) => {
         const h = parseFloat((l.width || "").toString()) || 10;
-        if (o) {
-          o--, i && (i.width += h);
+        if (r) {
+          r--, i && (i.width += h);
           return;
         }
-        const g = Math.min(Yt(l, e), t.length - d);
-        o = g - 1, i = {
+        const c = Math.min(ss(l, e), t.length - d);
+        r = c - 1, i = {
           width: h,
-          colSpan: g,
+          colSpan: c,
           columnIndex: d
         }, s.push(i);
       }), this.$props.columnVirtualization) {
-        const l = this.scrollLeftRef || 0, d = this.tableWidth || parseFloat((((r = this.$attrs.style) == null ? void 0 : r.width) || "").toString());
-        return hs({
+        const l = this.scrollLeftRef || 0, d = this.tableWidth || parseFloat((((o = this.$attrs.style) == null ? void 0 : o.width) || "").toString());
+        return fs({
           cellModels: s,
           columns: t,
           tableViewPortWidth: d,
@@ -971,8 +1006,64 @@ const Ys = /* @__PURE__ */ pt({
         if (s)
           return s;
       }
-      const i = this.$props.rowHeight || this._minRowHeightRef, o = this._containerHeightRef;
-      return o && i ? Math.ceil(o / i * 1.5) : 0;
+      const i = this.$props.rowHeight || this._minRowHeightRef, r = this._containerHeightRef;
+      return r && i ? Math.ceil(r / i * 1.5) : 0;
+    },
+    getRowPinPosition(e) {
+      var o, l;
+      const {
+        dataItemKey: t = ""
+      } = this.$props, s = ((o = this.gridContext.pinnedTopRows) == null ? void 0 : o.value) || [], i = ((l = this.gridContext.pinnedBottomRows) == null ? void 0 : l.value) || [];
+      if (!t || !e)
+        return "none";
+      const r = e[t];
+      return s != null && s.some((d) => d[t] === r) ? "top" : i != null && i.some((d) => d[t] === r) ? "bottom" : "none";
+    },
+    handleRowPin(e, t) {
+      var c, u, g, C;
+      if (!this.$props.pinnable)
+        return;
+      const {
+        dataItemKey: s = ""
+      } = this.$props, i = ((c = this.gridContext.pinnedTopRows) == null ? void 0 : c.value) || [], r = ((u = this.gridContext.pinnedBottomRows) == null ? void 0 : u.value) || [], o = t[s], l = i.filter((b) => b[s] !== o), d = r.filter((b) => b[s] !== o);
+      let h;
+      switch (e) {
+        case "pinTop":
+          h = {
+            pinnedTopRows: [...l, t],
+            pinnedBottomRows: d,
+            dataItem: t
+          };
+          break;
+        case "pinBottom":
+          h = {
+            pinnedTopRows: l,
+            pinnedBottomRows: [...d, t],
+            dataItem: t
+          };
+          break;
+        case "unpin":
+          h = {
+            pinnedTopRows: l,
+            pinnedBottomRows: d,
+            dataItem: t
+          };
+          break;
+        default:
+          return;
+      }
+      (C = (g = this.gridContext).rowpinchange) == null || C.call(g, h);
+    },
+    pinnedSelectionRelease(e, t) {
+      const s = this.$props.dataItemKey;
+      if (!s || !t)
+        return;
+      const i = D(s), r = this.getLeafDataItems().findIndex((o) => i(o) === i(t));
+      r !== -1 && this.selectionRelease({
+        ...e,
+        startRowIndex: r,
+        endRowIndex: r
+      });
     }
   },
   provide() {
@@ -981,119 +1072,125 @@ const Ys = /* @__PURE__ */ pt({
         dataItemKey: this.$props.dataItemKey,
         searchChange: this.searchChange,
         selectionRelease: this.selectionRelease,
+        pinnedSelectionRelease: this.pinnedSelectionRelease,
         dispatchGroupExpand: this.handleGroupExpandAction,
         dispatchDetailExpand: this.handleDetailExpandAction,
-        scrollToStickyGroup: this.scrollToStickyGroup
+        scrollToStickyGroup: this.scrollToStickyGroup,
+        getCellPositionStyle: this.getCellPositionStyle,
+        onRowPin: this.handleRowPin,
+        getRowPinPosition: this.getRowPinPosition
       },
       sticky: this.sticky
     };
   },
   setup(e) {
-    const t = c(null), s = c(null), i = c(null), o = c(null), r = c(null), l = c(null), d = c(null), h = c([]), g = c([]), u = c(null), R = c(null), C = c(null), S = c(null), y = c(!0), k = c(!1), $ = new Ut(), b = c(0), G = ut(ds, {}), F = typeof e.groupable == "object" && !!e.groupable.stickyHeaders, U = typeof e.groupable == "object" && !!e.groupable.stickyFooters, K = c([]), j = Pe(() => {
-      var D, L;
-      return !!((L = (D = G.group) == null ? void 0 : D.value) != null && L.length);
-    }), T = c(null), q = c(void 0), A = c({
+    const t = f(null), s = f(null), i = f(null), r = f(null), o = f(null), l = f(null), d = f(null), h = f([]), c = f([]), u = f(null), g = f(null), C = f(null), b = f(null), S = f(null), x = f(null), H = f(!0), w = f(!1), T = new Qt(), E = f(0), B = mt(us, {}), J = typeof e.groupable == "object" && !!e.groupable.stickyHeaders, Q = typeof e.groupable == "object" && !!e.groupable.stickyFooters, z = f([]), X = Le(() => {
+      var L, W;
+      return !!((W = (L = B.group) == null ? void 0 : L.value) != null && W.length);
+    }), A = null, P = f(void 0), y = f({
       headerItems: [],
       footerItems: []
     }), {
-      scrollToStickyGroup: z,
-      update: I
-    } = cs({
-      enabled: F,
-      enabledFooters: U,
-      flatData: K,
+      scrollToStickyGroup: V,
+      update: O
+    } = ms({
+      enabled: J,
+      enabledFooters: Q,
+      flatData: z,
       containerRef: u,
-      stickyHeaderRef: R,
+      stickyHeaderRef: g,
       stickyFooterRef: C,
-      tableBodyRef: S,
+      tableBodyRef: x,
       rowHeight: e.rowHeight,
-      isGrouped: j,
-      virtualSkipRef: b,
-      rowHeightServiceRef: Pe(() => $ == null ? void 0 : $.rowHeightService)
+      isGrouped: X,
+      virtualSkipRef: E,
+      rowHeightServiceRef: Le(() => T == null ? void 0 : T.rowHeightService)
     });
     return {
-      rowIndexRef: q,
-      observerRef: T,
-      dataRef: K,
+      rowIndexRef: P,
+      observerRef: A,
+      dataRef: z,
       groupPanelDivRef: t,
       dropElementClueRef: s,
       dragElementClueRef: i,
-      headerRef: o,
-      footerRef: r,
+      headerRef: r,
+      footerRef: o,
       gridNavRef: l,
       colGroupRef: d,
       scrollContainerRef: u,
-      tableBodyRef: S,
-      gridContext: G,
-      shouldUpdateLeftRightRef: y,
-      resizedRef: k,
+      tableBodyRef: x,
+      gridContext: B,
+      shouldUpdateLeftRightRef: H,
+      resizedRef: w,
       currentColumnsState: e.columnsState,
-      vsRef: $,
-      virtualSkipRef: b,
+      vsRef: T,
+      virtualSkipRef: E,
       stickyHeaderItems: h,
-      stickyHeaderRef: R,
-      stickyFooterItems: g,
+      stickyHeaderRef: g,
+      stickyFooterItems: c,
       stickyFooterRef: C,
-      sticky: A,
-      scrollToStickyGroup: z,
-      updateStickyGroups: I
+      pinnedTopRef: b,
+      pinnedBottomRef: S,
+      sticky: y,
+      scrollToStickyGroup: V,
+      updateStickyGroups: O
     };
   },
   render() {
-    var Re, Ce, be, $e, Ie, ve, xe, we, Se, ye, ke, He, Te, ze, Ee, Ge, Fe, De;
-    const e = (Re = this.gridContext.sort) == null ? void 0 : Re.value, t = (Ce = this.gridContext.filter) == null ? void 0 : Ce.value, s = (be = this.gridContext.search) == null ? void 0 : be.value, i = ($e = this.gridContext.select) == null ? void 0 : $e.value, o = (Ie = this.gridContext.skip) == null ? void 0 : Ie.value, r = (ve = this.gridContext.take) == null ? void 0 : ve.value, l = (xe = this.gridContext.group) == null ? void 0 : xe.value, d = (we = this.gridContext.groupExpand) == null ? void 0 : we.value, h = (Se = this.gridContext.detailExpand) == null ? void 0 : Se.value, g = (l == null ? void 0 : l.length) || 0, u = typeof this.$props.groupable == "object" && !!this.$props.groupable.stickyHeaders, R = typeof this.$props.groupable == "object" && !!this.$props.groupable.stickyFooters, C = !!(l != null && l.length);
-    let S;
-    this.currentColumnsState = (ye = this.gridContext.columnsState) == null ? void 0 : ye.value;
-    const y = this.$props.autoProcessData === !0 ? {
+    var me, Re, Ce, be, $e, we, xe, ve, Ie, Se, ye, ke, He, Te, ze, Ee, Pe, Ge;
+    const e = (me = this.gridContext.sort) == null ? void 0 : me.value, t = (Re = this.gridContext.filter) == null ? void 0 : Re.value, s = (Ce = this.gridContext.search) == null ? void 0 : Ce.value, i = (be = this.gridContext.select) == null ? void 0 : be.value, r = ($e = this.gridContext.skip) == null ? void 0 : $e.value, o = (we = this.gridContext.take) == null ? void 0 : we.value, l = (xe = this.gridContext.group) == null ? void 0 : xe.value, d = (ve = this.gridContext.groupExpand) == null ? void 0 : ve.value, h = (Ie = this.gridContext.detailExpand) == null ? void 0 : Ie.value, c = (l == null ? void 0 : l.length) || 0, u = typeof this.$props.groupable == "object" && !!this.$props.groupable.stickyHeaders, g = typeof this.$props.groupable == "object" && !!this.$props.groupable.stickyFooters, C = !!(l != null && l.length);
+    let b;
+    this.currentColumnsState = (Se = this.gridContext.columnsState) == null ? void 0 : Se.value;
+    const S = this.$props.autoProcessData === !0 ? {
       group: !0,
       sort: !0,
       filter: !0,
       search: !0,
       page: !0
     } : this.$props.autoProcessData;
-    let k;
-    const $ = H.getIdPrefix(this.navigation);
-    let b = [];
-    Array.isArray(this.$props.dataItems) ? (b = this.$props.dataItems, k = (ke = this.$props.total) != null ? ke : b.length) : (b = ((He = Xt(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField)) == null ? void 0 : He.data) || [], k = (Ee = (ze = this.$props.total) != null ? ze : (Te = this.$props.dataItems) == null ? void 0 : Te.total) != null ? Ee : b.length);
-    const G = this.$props.groupable === !0 || W(this.$props.groupable) && this.$props.groupable.enabled !== !1;
-    this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = G, this._virtualPageSize = this.calcVirtualPageSize();
-    const F = b.length === k, U = W(this.$props.groupable) && this.$props.groupable.footer || "none";
-    if (y) {
-      const a = y.page && !(this.isVirtualScroll && !this.$props.pageable), {
-        data: f,
+    let x;
+    const H = k.getIdPrefix(this.navigation);
+    let w = [];
+    Array.isArray(this.$props.dataItems) ? (w = this.$props.dataItems, x = (ye = this.$props.total) != null ? ye : w.length) : (w = ((ke = ts(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField)) == null ? void 0 : ke.data) || [], x = (ze = (Te = this.$props.total) != null ? Te : (He = this.$props.dataItems) == null ? void 0 : He.total) != null ? ze : w.length);
+    const T = this.$props.groupable === !0 || j(this.$props.groupable) && this.$props.groupable.enabled !== !1;
+    this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = T, this._virtualPageSize = this.calcVirtualPageSize();
+    const E = w.length === x, B = j(this.$props.groupable) && this.$props.groupable.footer || "none";
+    if (S) {
+      const n = S.page && !(this.isVirtualScroll && !this.$props.pageable), {
+        data: m,
         total: v
-      } = ns(b, {
-        group: y.group ? l : void 0,
-        sort: y.sort ? e : void 0,
-        filter: vt(y.filter ? t : void 0, y.search ? s : void 0),
-        ...a ? {
-          take: this.$props.pageable ? r || 10 : r,
-          skip: o || 0
+      } = cs(w, {
+        group: S.group ? l : void 0,
+        sort: S.sort ? e : void 0,
+        filter: St(S.filter ? t : void 0, S.search ? s : void 0),
+        ...n ? {
+          take: this.$props.pageable ? o || 10 : o,
+          skip: r || 0
         } : {}
       });
-      b = f, k = (Ge = this.$props.total) != null ? Ge : v;
+      w = m, x = (Ee = this.$props.total) != null ? Ee : v;
     }
     const {
-      resolvedGroupsCount: K,
-      flattedData: j
-    } = this.getFlatData(b, U, F ? 0 : this.$props.skip || 0, l, h, d, this.$props.dataItemKey);
-    this.dataRef = j;
-    const T = this.virtualSkipRef || 0;
-    if (this._virtualTotal = k, this.isVirtualScroll) {
-      let a = o || 0;
-      if ((C || this.$props.pageable) && (a = T, this._virtualTotal = this.dataRef.length), F || C || this.$props.pageable)
+      resolvedGroupsCount: J,
+      flattedData: Q
+    } = this.getFlatData(w, B, E ? 0 : this.$props.skip || 0, l, h, d, this.$props.dataItemKey);
+    this.dataRef = Q;
+    const z = this.virtualSkipRef || 0;
+    if (this._virtualTotal = x, this.isVirtualScroll) {
+      let n = r || 0;
+      if ((C || this.$props.pageable) && (n = z, this._virtualTotal = this.dataRef.length), E || C || this.$props.pageable)
         if (this._virtualPageSize === 0) {
-          const f = Math.min(r || this.$props.pageSize || 20, this.dataRef.length);
-          S = this.dataRef.slice(a, a + f);
+          const m = Math.min(o || this.$props.pageSize || 20, this.dataRef.length);
+          b = this.dataRef.slice(n, n + m);
         } else
-          S = this.dataRef.slice(a, a + this._virtualPageSize);
+          b = this.dataRef.slice(n, n + this._virtualPageSize);
     }
     this.initializeVirtualization();
-    const q = (Fe = this.selectable) != null && Fe.drag ? "none" : void 0;
-    this.initColumns(this.$props.dataItems, K), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this.columnsRef, this.columnResize.columnsState = ft(this.currentColumnsState || []), this.dragLogic.columns = this.columnsRef;
-    const A = this.$props.toolbar, z = this.$props.noRecords, I = this.columnsRef.filter((a) => a.children.length === 0), D = G && n(Vt, {
-      ref: (a) => {
-        this.groupPanelDivRef = a;
+    const X = (Pe = this.selectable) != null && Pe.drag ? "none" : void 0;
+    this.initColumns(this.$props.dataItems, J), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this.columnsRef, this.columnResize.columnsState = Rt(this.currentColumnsState || []), this.dragLogic.columns = this.columnsRef;
+    const A = this.$props.toolbar, P = this.$props.noRecords, y = this.columnsRef.filter((n) => n.children.length === 0), V = T && a(Nt, {
+      ref: (n) => {
+        this.groupPanelDivRef = n;
       },
       group: l || [],
       ariaControls: this._gridRoleElementId,
@@ -1102,37 +1199,35 @@ const Ys = /* @__PURE__ */ pt({
       onDragHandler: this.dragLogic.dragHandler,
       onReleaseHandler: this.dragLogic.releaseHandler,
       resolveTitle: this.resolveTitle
-    }, null), L = (this.dragLogic.reorderable || this.dragLogic.groupable) && B && document && document.body, he = [L && n(Qt, {
-      ref: (a) => {
-        this.dropElementClueRef = a;
+    }, null), O = (this.dragLogic.reorderable || this.dragLogic.groupable) && q && document && document.body, L = [O && a(es, {
+      ref: (n) => {
+        this.dropElementClueRef = n;
       }
-    }, null), L && n(Jt, {
-      ref: (a) => {
-        this.dragElementClueRef = a;
+    }, null), O && a(Zt, {
+      ref: (n) => {
+        this.dragElementClueRef = n;
       }
-    }, null)], st = this.showLicenseWatermark ? n(gt, {
+    }, null)], W = this.showLicenseWatermark ? a(Ct, {
       message: this.licenseMessage
-    }, null) : null, J = this.$attrs.style, it = J && W(J) && J["width"] || "";
-    this.tableWidth = parseFloat(it.toString());
-    const ot = I.findIndex((a) => typeof a.colSpan == "function") > -1;
-    let V;
-    V = this.getCellsToRender({}, I);
-    const O = (this.$props.columnVirtualization ? this.getCellsToRender({}, I).map(({
-      columnIndex: a
-    }) => I[a]) : I).map(function(a, f) {
-      return n("col", {
-        key: a.id || `col-${f}`,
-        width: a.width !== void 0 ? Math.floor(parseFloat(a.width.toString())) : void 0
+    }, null) : null, Y = this.$attrs.style, rt = Y && j(Y) && Y["width"] || "";
+    this.tableWidth = parseFloat(rt.toString());
+    const lt = y.findIndex((n) => typeof n.colSpan == "function") > -1;
+    let N;
+    N = this.getCellsToRender({}, y);
+    const G = y.map(function(n, m) {
+      return a("col", {
+        key: n.id || `col-${m}`,
+        width: n.width !== void 0 ? Math.floor(parseFloat(n.width.toString())) : void 0
       }, null);
-    }, this), pe = n(Mt, {
+    }, this), he = a(Vt, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
-      ref: (a) => {
-        this.headerRef = a;
+      ref: (n) => {
+        this.headerRef = n;
       },
       onHeaderscroll: this.onHeaderScroll,
-      headerRow: n(Kt, {
+      headerRow: a(Ot, {
         grid: this,
         sort: e,
         groupable: this.$props.groupable,
@@ -1148,7 +1243,7 @@ const Ys = /* @__PURE__ */ pt({
         columnMenuAnimate: this.$props.columnMenuAnimate,
         onSelectionchange: this.onHeaderSelectionChangeHandler,
         columns: this.columnsRef,
-        cellsToRender: V,
+        cellsToRender: N,
         columnVirtualization: this.$props.columnVirtualization,
         columnsInitial: this.$props.columns,
         columnResize: this.columnResize,
@@ -1157,46 +1252,48 @@ const Ys = /* @__PURE__ */ pt({
         onReleaseHandler: this.dragLogic.releaseHandler,
         columnsMap: this._columnsMap,
         cellRender: this.$props.headerCellRender,
+        cells: this.$props.cells,
         isRtl: this.isRtl,
         isColCountDefined: this.getAriaColCount !== void 0,
-        headerSelectionValue: !!(i && this.dataRef.filter((a) => a.rowType === "data").every((a) => i && this.$props.dataItemKey && P(this.$props.dataItemKey)(a.dataItem) !== void 0 ? i[P(this.$props.dataItemKey)(a.dataItem)] : void 0)),
-        filterRow: this.$props.filterable && n(At, {
+        headerSelectionValue: !!(i && this.dataRef.filter((n) => n.rowType === "data").every((n) => i && this.$props.dataItemKey && D(this.$props.dataItemKey)(n.dataItem) !== void 0 ? i[D(this.$props.dataItemKey)(n.dataItem)] : void 0)),
+        filterRow: this.$props.filterable && a(Wt, {
           grid: this,
           size: this.$props.size,
           columns: this.columnsRef,
           columnsMap: this._columnsMap,
-          cellsToRender: V,
+          cellsToRender: N,
           columnVirtualization: this.$props.columnVirtualization,
           filter: t,
           filterOperators: this.$props.filterOperators || qe,
           onFilterchange: this.filterChangeHandler,
           sort: this.$props.sort,
           cellRender: this.$props.filterCellRender,
+          cells: this.$props.cells,
           isRtl: this.isRtl,
           ariaRowIndex: this._columnsMap.length + 1
         }, null) || void 0
       }, null),
-      cols: O
-    }, null), ce = this.columnsRef.some((a) => {
-      var f;
-      return !!(a.footerCell || (f = a.cells) != null && f.footerCell);
-    }) || (De = this.$props.cells) != null && De.footerCell ? n(Ot, {
+      cols: G
+    }, null), pe = this.columnsRef.some((n) => {
+      var m;
+      return !!(n.footerCell || (m = n.cells) != null && m.footerCell);
+    }) || (Ge = this.$props.cells) != null && Ge.footerCell ? a(Ut, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
-      ref: (a) => {
-        this.footerRef = a;
+      ref: (n) => {
+        this.footerRef = n;
       },
-      row: n(Nt, {
+      row: a(jt, {
         isRtl: this.isRtl,
         rowIndex: this.getAriaRowCount + 1,
         columns: this.columnsRef,
         cells: this.$props.cells
       }, null),
-      cols: O
-    }, null) : n("span", null, null), Q = {
-      leafColumns: I,
-      cellsToRender: V,
+      cols: G
+    }, null) : a("span", null, null), _ = {
+      leafColumns: y,
+      cellsToRender: N,
       selectedField: this.$props.selectedField,
       dataItemKey: this.$props.dataItemKey,
       select: i,
@@ -1205,7 +1302,7 @@ const Ys = /* @__PURE__ */ pt({
       cellRender: this.$props.cellRender,
       cells: this.$props.cells,
       getCellsToRender: this.getCellsToRender,
-      hasDynamicColSpan: ot,
+      hasDynamicColSpan: lt,
       itemChange: this.itemChange,
       selectionChangeHandler: this.selectionChangeHandler,
       editHandler: this.editHandler,
@@ -1218,187 +1315,189 @@ const Ys = /* @__PURE__ */ pt({
       uniqueField: this.$props.uniqueField,
       columnsRef: this.columnsRef,
       isRtl: this.isRtl,
-      idPrefix: $
-    }, rt = function(a, f, v, te, se) {
-      return ps(Q, a, f, v, te, se);
+      idPrefix: H
+    }, nt = function(n, m, v, ie, oe) {
+      return gs(_, n, m, v, ie, oe);
     };
-    let lt = 0, X = [];
-    const Y = !this.dataRef.length, ue = (a) => a >= this.dataRef.length - lt;
-    let Z = 0;
+    let at = 0, Z = [];
+    const ee = !this.dataRef.length, ce = (n) => n >= this.dataRef.length - at;
+    let te = 0;
     if (this.dataRef.length) {
-      const a = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
-      let f = this.$props.skip || 0, v = -1, te = 0;
-      const se = this.computedRowSpannable.enabled ? {} : void 0;
+      const n = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
+      let m = this.$props.skip || 0, v = -1, ie = 0;
+      const oe = this.computedRowSpannable.enabled ? {} : void 0;
       if (this.isVirtualScroll) {
-        if (T > 0) {
-          const p = this.dataRef.slice(0, T).filter((_) => _.rowType === "data").length;
-          v += p, f += T;
+        if (z > 0) {
+          const p = this.dataRef.slice(0, z).filter((M) => M.rowType === "data").length;
+          v += p, m += z;
         }
-        !this.$props.pageable && F && (v += this.$props.skip || 0);
+        !this.$props.pageable && E && (v += this.$props.skip || 0);
       }
-      X = (S || this.dataRef).map(function(p, _) {
+      Z = (b || this.dataRef).map(function(p, M) {
         p.rowType === "data" && v++;
-        const ie = p.dataIndex % 2 !== 0, Le = this.$props.dataItemKey && P(this.$props.dataItemKey)(p.dataItem), oe = _ + f, re = Le || "ai" + oe, le = re + "_1", N = rt.call(this, p, re, v, ie, se), ht = I.length - (this.detailExpandable.enabled ? 1 : 0) - ((l == null ? void 0 : l.length) || 0) || 1;
-        return Z = oe + a + te, [n(ls, {
-          key: re,
+        const re = p.dataIndex % 2 !== 0, Fe = this.$props.dataItemKey && D(this.$props.dataItemKey)(p.dataItem), le = M + m, ne = Fe || "ai" + le, ae = ne + "_1", U = nt.call(this, p, ne, v, re, oe), ct = p.rowType === "data" ? this.pinnedSourceSet.has(p.dataItem) : !1, ut = y.length - (this.detailExpandable.enabled ? 1 : 0) - ((l == null ? void 0 : l.length) || 0) || 1;
+        return te = le + n + ie, [a(hs, {
+          key: ne,
           item: p,
           dataIndex: v,
-          ariaRowIndex: Z,
-          absoluteRowIndex: oe,
-          isAltRow: ie,
-          isHidden: ue(_),
+          ariaRowIndex: te,
+          absoluteRowIndex: le,
+          isAltRow: re,
+          isHidden: ce(M),
           rowHeight: this.$props.rowHeight,
-          isSelected: N.isSelected,
-          isHighlighted: N.isHighlighted,
-          isInEdit: N.isInEdit,
+          isSelected: U.isSelected,
+          isHighlighted: U.isHighlighted,
+          isInEdit: U.isInEdit,
           rowType: p.rowType,
-          onRowclick: (E) => this.rowClick(E, p),
-          onRowdblclick: (E) => this.rowDoubleClick(E, p),
+          onRowclick: (F) => this.rowClick(F, p),
+          onRowdblclick: (F) => this.rowDoubleClick(F, p),
           render: this.$props.rowRender,
-          class: this.$props.rowClass ? this.$props.rowClass(p) : ""
+          class: this.$props.rowClass ? this.$props.rowClass(p) : "",
+          isPinned: ct,
+          rows: this.$props.rows
         }, {
-          default: () => [N.row]
-        }), this.$props.detail && p.rowType === "data" && (p.expanded || p.dataItem.expanded) && n("tr", {
-          key: le,
-          class: ie ? "k-table-row k-table-alt-row k-detail-row" : "k-table-row k-detail-row",
+          default: () => [U.row]
+        }), this.$props.detail && p.rowType === "data" && (p.expanded || p.dataItem.expanded) && a("tr", {
+          key: ae,
+          class: re ? "k-table-row k-table-alt-row k-detail-row" : "k-table-row k-detail-row",
           style: {
-            visibility: ue(_) ? "hidden" : "",
+            visibility: ce(M) ? "hidden" : "",
             height: this.$props.detailRowHeight + "px"
           },
           role: "row",
-          "aria-rowindex": Z
-        }, [l == null ? void 0 : l.map(function(E) {
-          return n(ne, {
+          "aria-rowindex": te
+        }, [l == null ? void 0 : l.map(function(F) {
+          return a(Xe, {
             id: "",
             dataIndex: p.dataIndex,
-            field: E.field,
+            field: F.field,
             dataItem: p.dataItem,
-            key: `group-${E.field}-${p.dataIndex}`,
+            key: `group-${F.field}-${p.dataIndex}`,
             locked: this.$props.lockGroups,
             group: p.group
           }, null);
-        }, this), (this.$props.expandField || this.detailExpandable.enabled) && n(_t, {
-          id: H.generateNavigatableId(`${le}-dhcell`, $)
-        }, null), n(Pt, {
+        }, this), (this.$props.expandField || this.detailExpandable.enabled) && a(Bt, {
+          id: k.generateNavigatableId(`${ae}-dhcell`, H)
+        }, null), a(At, {
           dataItem: p.dataItem,
           dataIndex: p.dataIndex,
-          colSpan: ht,
+          colSpan: ut,
           ariaColIndex: 2 + (l ? l.length : 0),
           detail: this.$props.detail ? this.$props.detail : void 0,
-          id: H.generateNavigatableId(`${le}-dcell`, $)
+          id: k.generateNavigatableId(`${ae}-dcell`, H)
         }, null)])];
       }, this);
     }
-    const at = this.$props.pageable && n(xt, {
+    const dt = this.$props.pageable && a(yt, {
       class: "k-grid-pager",
       onPagesizechange: this.pageChangeHandler,
       onPagechange: this.pageChangeHandler,
       size: this.$props.size,
-      total: k,
-      skip: o || 0,
-      pageSize: (r !== void 0 ? r : this.$props.pageSize) || 10,
-      messagesMap: et,
-      settings: wt(this.$props.pageable || {})
-    }, null), fe = Me.call(this, {
-      h: _e,
+      total: x,
+      skip: r || 0,
+      pageSize: (o !== void 0 ? o : this.$props.pageSize) || 10,
+      messagesMap: tt,
+      settings: kt(this.$props.pageable || {})
+    }, null), ue = _e.call(this, {
+      h: De,
       template: this.$props.pager,
-      defaultRendering: at,
+      defaultRendering: dt,
       additionalProps: {
         ...this.$props,
         skip: this.$props.skip || 0,
-        messagesMap: et
+        messagesMap: tt
       },
       additionalListeners: {
         pagesizechange: this.pageChangeHandler,
         pagechange: this.pageChangeHandler
       }
-    }), nt = (a) => e && e.filter((f) => f.field === a).length > 0, ge = n("colgroup", {
-      ref: w(this, "colGroup")
-    }, [I.map(function(a, f) {
-      return n("col", {
-        key: a.id || `col-${f}`,
-        class: nt(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
+    }), ht = (n) => e && e.filter((m) => m.field === n).length > 0, fe = a("colgroup", {
+      ref: $(this, "colGroup")
+    }, [y.map(function(n, m) {
+      return a("col", {
+        key: n.id || `col-${m}`,
+        class: ht(n.field) ? "k-sorted" : void 0,
+        width: n.width !== void 0 ? n.width.toString().indexOf("%") !== -1 ? n.width : Math.floor(parseFloat(n.width.toString())) + "px" : void 0
       }, null);
-    }, this)]), me = {
+    }, this)]), ge = {
       height: this.getCorrectHeight,
       ...this.$attrs.style
-    }, dt = n("div", {
+    }, pt = a("div", {
       class: "k-loading-mask"
-    }, [n("div", {
+    }, [a("div", {
       class: "k-loading-color"
-    }, null), n("div", {
+    }, null), a("div", {
       style: {
         height: "100%",
         display: "flex",
         justifyContent: "center",
         alignItems: "center"
       }
-    }, [n(Lt, {
+    }, [a(Kt, {
       size: "large",
       type: "converging-spinner"
-    }, null)])]), ee = this.$props.showLoader && Me.call(this, {
-      h: _e,
+    }, null)])]), se = this.$props.showLoader && _e.call(this, {
+      h: De,
       template: this.$props.loader,
-      defaultRendering: dt
+      defaultRendering: pt
     });
-    return this.$props.scrollable === "none" ? n(Ne, {
+    return this.$props.scrollable === "none" ? a(Ve, {
       ref: "navRef",
       id: this._gridId,
       navigatable: this.$props.navigatable,
       scrollable: this.$props.scrollable,
       columnVirtualization: this.$props.columnVirtualization
     }, {
-      default: () => [n(Ue, {
-        ref: (a) => {
-          this.gridNavRef = a;
+      default: () => [a(Ne, {
+        ref: (n) => {
+          this.gridNavRef = n;
         },
         columnsRef: this.columnsRef,
         dataRef: this.dataRef,
         id: this.$props.id,
-        style: me,
+        style: ge,
         class: this.nonscrollableWrapperClass,
         onMovetonextpage: this.moveToNextPage,
         onMovetoprevpage: this.moveToPrevPage,
         onColumnreorder: this.columnReorder,
         onKeyboardselectionchange: this.onKeyboardSelectionChangeHandler
       }, {
-        default: () => [A, D, n("div", {
+        default: () => [A, V, a("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
           "aria-colcount": this.getAriaColCount,
           "aria-rowcount": this.getAriaRowCount
-        }, [n(Wt, {
+        }, [a(qt, {
           selectable: this.computedSelectable,
           class: "k-table",
-          ref: w(this, "table")
+          ref: $(this, "table")
         }, {
-          default: () => [ge, pe, n("tbody", {
+          default: () => [fe, he, a("tbody", {
             class: "k-table-tbody",
             "data-keyboardnavbody": !0,
-            ref: w(this, "tableBody")
-          }, [X, ct("  "), ee]), ce]
-        }), Y && n(Ze, {
-          id: H.generateNavigatableId("no-records", $)
+            ref: $(this, "tableBody")
+          }, [Z, gt("  "), se]), pe]
+        }), ee && a(et, {
+          id: k.generateNavigatableId("no-records", H)
         }, {
-          default: () => [z.length ? z : n(Ye, null, null)]
-        })]), fe, ee, he]
+          default: () => [P.length ? P : a(Ze, null, null)]
+        })]), ue, se, L]
       })]
-    }) : n(Ne, {
+    }) : a(Ve, {
       ref: "navRef",
       id: this._gridId,
       navigatable: this.$props.navigatable,
       scrollable: this.$props.scrollable,
       columnVirtualization: this.$props.columnVirtualization
     }, {
-      default: () => [n(Ue, {
-        ref: (a) => {
-          this.gridNavRef = a;
+      default: () => [a(Ne, {
+        ref: (n) => {
+          this.gridNavRef = n;
         },
         dataRef: this.dataRef,
         id: this.$props.id,
-        style: me,
+        style: ge,
         class: this.scrollableWrapperClass,
         onMovetonextpage: this.moveToNextPage,
         onMovetoprevpage: this.moveToPrevPage,
@@ -1406,70 +1505,90 @@ const Ys = /* @__PURE__ */ pt({
         onKeyboardselectionchange: this.onKeyboardSelectionChangeHandler,
         onSetcurrentontop: this.setCurrentOnTop
       }, {
-        default: () => [A, D, n("div", {
+        default: () => [A, V, a("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
           "aria-colcount": this.getAriaColCount,
           "aria-rowcount": this.getAriaRowCount
-        }, [pe, n("div", {
+        }, [he, this.hasPinnedTopRows && a(ot, {
+          ref: $(this, "pinnedTop"),
+          size: this.$props.size,
+          cols: G,
+          dataRowContext: _,
+          position: "top",
+          pinnedItems: this.sortedPinnedTopRows,
+          rowHeight: this.$props.rowHeight,
+          rows: this.$props.rows,
+          selectable: this.computedSelectable
+        }, null), a("div", {
           class: "k-grid-container",
           role: "presentation"
-        }, [C && u && n(tt, {
-          ref: w(this, "stickyHeader"),
+        }, [C && u && a(it, {
+          ref: $(this, "stickyHeader"),
           size: this.$props.size,
-          cols: O,
-          dataRowContext: Q,
+          cols: G,
+          dataRowContext: _,
           position: "top",
-          groupLevelCount: g,
+          groupLevelCount: c,
           rowHeight: this.$props.rowHeight
-        }, null), n("div", {
+        }, null), a("div", {
           role: "presentation",
-          ref: w(this, "scrollContainer"),
+          ref: $(this, "scrollContainer"),
           class: "k-grid-content k-virtual-content",
           onScroll: this.scrollHandler
-        }, [n("div", {
+        }, [a("div", {
           class: "k-grid-table-wrap",
           role: "presentation"
-        }, [n(Bt, {
+        }, [a(Jt, {
           selectable: this.computedSelectable,
           tableClassName: this.gridTableClass,
           tableStyle: {
-            userSelect: q
+            userSelect: X
           },
-          ref: w(this, "table")
+          ref: $(this, "table")
         }, {
-          default: () => [ge, n("tbody", {
+          default: () => [fe, a("tbody", {
             class: "k-table-tbody",
             role: "rowgroup",
             "data-keyboardnavbody": !0,
-            ref: w(this, "tableBody")
-          }, [X])]
-        }), Y && n(Ze, {
-          id: H.generateNavigatableId("no-records", $)
+            ref: $(this, "tableBody")
+          }, [Z])]
+        }), ee && a(et, {
+          id: k.generateNavigatableId("no-records", H)
         }, {
-          default: () => [z.length ? z : n(Ye, null, null)]
-        })]), !Y && n("div", {
+          default: () => [P.length ? P : a(Ze, null, null)]
+        })]), !ee && a("div", {
           class: "k-height-container",
           role: "presentation"
-        }, [n("div", {
-          ref: w(this, "scrollHeightContainer"),
+        }, [a("div", {
+          ref: $(this, "scrollHeightContainer"),
           style: this.$props.scrollable === "virtual" ? {
             height: this._containerHeightRef + "px"
           } : {}
-        }, null)])]), C && R && n(tt, {
-          ref: w(this, "stickyFooter"),
+        }, null)])]), C && g && a(it, {
+          ref: $(this, "stickyFooter"),
           size: this.$props.size,
-          cols: O,
-          dataRowContext: Q,
+          cols: G,
+          dataRowContext: _,
           position: "bottom",
-          groupLevelCount: g,
+          groupLevelCount: c,
           rowHeight: this.$props.rowHeight
-        }, null)]), ce, st]), fe, ee, he]
+        }, null)]), this.hasPinnedBottomRows && a(ot, {
+          ref: $(this, "pinnedBottom"),
+          size: this.$props.size,
+          cols: G,
+          dataRowContext: _,
+          position: "bottom",
+          pinnedItems: this.sortedPinnedBottomRows,
+          rowHeight: this.$props.rowHeight,
+          rows: this.$props.rows,
+          selectable: this.computedSelectable
+        }, null), pe, W]), ue, se, L]
       })]
     });
   }
 });
 export {
-  Ys as Grid
+  ri as Grid
 };