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

package/Grid.mjs

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