@progress/kendo-vue-grid 8.1.0-develop.6 → 8.1.0-develop.8

package/cells/GridGroupCell.mjs

@@ -6,10 +6,10 @@
  *-------------------------------------------------------------------------------------------
  */
 import { defineComponent as x, createVNode as n, mergeProps as A, h as v } from "vue";
-import { noop as N, Icon as L, getTemplate as w, Keys as D } from "@progress/kendo-vue-common";
-import { KEYBOARD_NAV_DATA_ID as K, KEYBOARD_NAV_DATA_LEVEL as R, GROUP_EXPAND_ACTION as T } from "@progress/kendo-vue-data-tools";
+import { noop as N, Icon as L, getTemplate as w, Keys as K } from "@progress/kendo-vue-common";
+import { KEYBOARD_NAV_DATA_ID as R, KEYBOARD_NAV_DATA_LEVEL as T, GROUP_EXPAND_ACTION as D } from "@progress/kendo-vue-data-tools";
 import { groupCaretAriaLabelCollapse as y, messages as b, groupCaretAriaLabelExpand as I } from "../messages/main.mjs";
-import { provideLocalizationService as S } from "@progress/kendo-vue-intl";
+import { provideLocalizationService as C } from "@progress/kendo-vue-intl";
 import { caretAltDownIcon as E, caretAltRightIcon as O, caretAltLeftIcon as G } from "@progress/kendo-svg-icons";
 const _ = (e) => {
   var t, l;
@@ -100,7 +100,7 @@ const _ = (e) => {
       var t;
       const e = this.kendo;
       (t = e == null ? void 0 : e.dispatchGroupExpand) == null || t.call(e, {
-        type: T.TOGGLE,
+        type: D.TOGGLE,
         group: this.$props.group
       });
     },
@@ -111,7 +111,7 @@ const _ = (e) => {
         dataIndex: this.$props.dataIndex,
         field: this.$props.field,
         expanded: this.$props.expanded
-      }), !e.defaultPrevented && e.keyCode === D.enter && (e.preventDefault(), this.$emit("change", {
+      }), !e.defaultPrevented && e.keyCode === K.enter && (e.preventDefault(), this.$emit("change", {
         dataItem: this.$props.dataItem,
         dataIndex: this.$props.dataIndex,
         event: e,
@@ -137,14 +137,14 @@ const _ = (e) => {
       columnIndex: r,
       level: d,
       columnsCount: s,
-      rowType: C,
+      rowType: S,
       dataItem: i,
       field: p,
       expanded: a,
       render: $,
       locked: c
-    } = this.$props, u = this.getKeyboardNavigationAttributes(this.$props.id), h = S(this).toLanguageString(y, b[y]), m = S(this).toLanguageString(I, b[I]);
-    if (r === void 0 || d === void 0 || r < d || s === void 0 || C !== "groupHeader" || i[p] === void 0)
+    } = this.$props, u = this.getKeyboardNavigationAttributes(this.$props.id), h = C(this).toLanguageString(y, b[y]), m = C(this).toLanguageString(I, b[I]);
+    if (r === void 0 || d === void 0 || r < d || s === void 0 || S !== "groupHeader" || i[p] === void 0)
       t = {
         style: this.$attrs.style,
         key: "g" + r,
@@ -162,8 +162,8 @@ const _ = (e) => {
         "aria-expanded": a,
         "data-grid-col-index": this.$props.columnIndex,
         tabindex: u.tabIndex,
-        "data-keyboardnavlevel": u[R],
-        "data-keyboardnavid": u[K]
+        "data-keyboardnavlevel": u[T],
+        "data-keyboardnavid": u[R]
       }, o = n("p", {
         class: "k-reset"
       }, [n("a", {
@@ -208,8 +208,7 @@ const _ = (e) => {
         keydown: this.triggerKeydown,
         click: this.clickHandler
       },
-      defaultSlots: o,
-      swapDefaultSlots: !0
+      defaultSlots: o
     });
   }
 });

package/cells/GridHierarchyCell.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),l=require("@progress/kendo-vue-common"),d=require("@progress/kendo-vue-data-tools"),g=require("@progress/kendo-vue-intl"),n=require("../messages/main.js"),h=require("@progress/kendo-svg-icons"),m=e=>{var t,a;return(a=(t=e.cells)==null?void 0:t.hierarchy)==null?void 0:a[e.rowType||"data"]},f=i.defineComponent({name:"KendoGridHierarchyCell",inheritAttrs:!1,props:{id:String,field:String,dataItem:Object,format:String,type:String,className:String,colSpan:Number,columnIndex:Number,columnsCount:Number,rowType:String,level:Number,expanded:Boolean,editor:String,isSelected:Boolean,dataIndex:Number,ariaColumnIndex:Number,render:[String,Function,Object],isRtl:Boolean,cells:Object},emits:{change:null,cellkeydown:null},inject:{kendo:{default:null},kendoIntlService:{default:null},kendoLocalizationService:{default:null},getKeyboardNavigationAttributes:{default:l.noop}},methods:{triggerStateChange(){const e=this.kendo;e.dataItemKey&&this.$props.dataItem[e.dataItemKey]!==void 0&&(e==null||e.dispatchDetailExpand({type:d.DETAIL_EXPAND_ACTION.TOGGLE,id:this.$props.dataItem[e.dataItemKey]}))},triggerKeydown(e,t){this.$emit("cellkeydown",{event:e,dataItem:this.$props.dataItem,field:this.$props.field,expanded:t}),!e.defaultPrevented&&e.keyCode===l.Keys.enter&&(e.preventDefault(),this.$emit("change",{dataItem:this.$props.dataItem,dataIndex:this.$props.dataIndex,event:e,field:this.$props.field,value:!t}),this.triggerStateChange())},clickHandler(e,t,a){e.preventDefault(),this.$emit("change",{dataItem:t,event:e,field:void 0,value:!a}),this.triggerStateChange()}},computed:{wrapperClass(){return{"k-table-td":!0,"k-hierarchy-cell":!0,[this.className||""]:this.className}}},render(){let e=null,t,a=null;const s=this.getKeyboardNavigationAttributes(this.$props.id),c=g.provideLocalizationService(this),p=c.toLanguageString(n.collapseDetailAriaLabel,n.messages[n.collapseDetailAriaLabel]),u=c.toLanguageString(n.expandDetailAriaLabel,n.messages[n.expandDetailAriaLabel]);if(this.$props.rowType==="groupFooter")t={class:this.wrapperClass},e=i.createVNode("td",t,null);else if(this.$props.rowType!=="groupHeader"){const r=this.$props.expanded;t={style:this.$attrs.style,class:this.wrapperClass,"aria-expanded":r?"true":"false",role:"gridcell","aria-colindex":this.$props.ariaColumnIndex,tabindex:s.tabIndex,"data-keyboardnavlevel":s[d.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":s[d.KEYBOARD_NAV_DATA_ID]},a=i.createVNode("a",{onClick:o=>{this.clickHandler(o,this.$props.dataItem,r)},href:"#",tabindex:-1,title:r?p:u,"aria-label":r?p:u},[i.createVNode(l.Icon,{name:r?"minus":"plus",icon:r?h.minusIcon:h.plusIcon},null)]),e=i.createVNode("td",i.mergeProps(t,{onKeydown:o=>{this.triggerKeydown(o,r)}}),[a])}return l.getTemplate.call(this,{h:i.h,template:this.$props.render||m(this.$props),defaultRendering:e,additionalProps:{...this.$props,tdProps:t},additionalListeners:{keydown:this.triggerKeydown,click:this.clickHandler},defaultSlots:a,swapDefaultSlots:!0})}});exports.GridHierarchyCell=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),l=require("@progress/kendo-vue-common"),d=require("@progress/kendo-vue-data-tools"),g=require("@progress/kendo-vue-intl"),n=require("../messages/main.js"),h=require("@progress/kendo-svg-icons"),m=e=>{var t,a;return(a=(t=e.cells)==null?void 0:t.hierarchy)==null?void 0:a[e.rowType||"data"]},y=i.defineComponent({name:"KendoGridHierarchyCell",inheritAttrs:!1,props:{id:String,field:String,dataItem:Object,format:String,type:String,className:String,colSpan:Number,columnIndex:Number,columnsCount:Number,rowType:String,level:Number,expanded:Boolean,editor:String,isSelected:Boolean,dataIndex:Number,ariaColumnIndex:Number,render:[String,Function,Object],isRtl:Boolean,cells:Object},emits:{change:null,cellkeydown:null},inject:{kendo:{default:null},kendoIntlService:{default:null},kendoLocalizationService:{default:null},getKeyboardNavigationAttributes:{default:l.noop}},methods:{triggerStateChange(){const e=this.kendo;e.dataItemKey&&this.$props.dataItem[e.dataItemKey]!==void 0&&(e==null||e.dispatchDetailExpand({type:d.DETAIL_EXPAND_ACTION.TOGGLE,id:this.$props.dataItem[e.dataItemKey]}))},triggerKeydown(e,t){this.$emit("cellkeydown",{event:e,dataItem:this.$props.dataItem,field:this.$props.field,expanded:t}),!e.defaultPrevented&&e.keyCode===l.Keys.enter&&(e.preventDefault(),this.$emit("change",{dataItem:this.$props.dataItem,dataIndex:this.$props.dataIndex,event:e,field:this.$props.field,value:!t}),this.triggerStateChange())},clickHandler(e,t,a){e.preventDefault(),this.$emit("change",{dataItem:t,event:e,field:void 0,value:!a}),this.triggerStateChange()}},computed:{wrapperClass(){return{"k-table-td":!0,"k-hierarchy-cell":!0,[this.className||""]:this.className}}},render(){let e=null,t,a=null;const s=this.getKeyboardNavigationAttributes(this.$props.id),c=g.provideLocalizationService(this),p=c.toLanguageString(n.collapseDetailAriaLabel,n.messages[n.collapseDetailAriaLabel]),u=c.toLanguageString(n.expandDetailAriaLabel,n.messages[n.expandDetailAriaLabel]);if(this.$props.rowType==="groupFooter")t={class:this.wrapperClass},e=i.createVNode("td",t,null);else if(this.$props.rowType!=="groupHeader"){const r=this.$props.expanded;t={style:this.$attrs.style,class:this.wrapperClass,"aria-expanded":r?"true":"false",role:"gridcell","aria-colindex":this.$props.ariaColumnIndex,tabindex:s.tabIndex,"data-keyboardnavlevel":s[d.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":s[d.KEYBOARD_NAV_DATA_ID]},a=i.createVNode("a",{onClick:o=>{this.clickHandler(o,this.$props.dataItem,r)},href:"#",tabindex:-1,title:r?p:u,"aria-label":r?p:u},[i.createVNode(l.Icon,{name:r?"minus":"plus",icon:r?h.minusIcon:h.plusIcon},null)]),e=i.createVNode("td",i.mergeProps(t,{onKeydown:o=>{this.triggerKeydown(o,r)}}),[a])}return l.getTemplate.call(this,{h:i.h,template:this.$props.render||m(this.$props),defaultRendering:e,additionalProps:{...this.$props,tdProps:t},additionalListeners:{keydown:this.triggerKeydown,click:this.clickHandler},defaultSlots:a})}});exports.GridHierarchyCell=y;

package/cells/GridHierarchyCell.mjs

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as m, createVNode as i, mergeProps as h, h as g } from "vue";
+import { defineComponent as m, createVNode as r, mergeProps as h, h as g } from "vue";
 import { noop as f, Icon as y, getTemplate as I, Keys as b } from "@progress/kendo-vue-common";
 import { KEYBOARD_NAV_DATA_ID as S, KEYBOARD_NAV_DATA_LEVEL as $, DETAIL_EXPAND_ACTION as k } from "@progress/kendo-vue-data-tools";
 import { provideLocalizationService as x } from "@progress/kendo-vue-intl";
@@ -102,32 +102,32 @@ const v = (e) => {
     if (this.$props.rowType === "groupFooter")
       t = {
         class: this.wrapperClass
-      }, e = i("td", t, null);
+      }, e = r("td", t, null);
     else if (this.$props.rowType !== "groupHeader") {
-      const r = this.$props.expanded;
+      const i = this.$props.expanded;
       t = {
         style: this.$attrs.style,
         class: this.wrapperClass,
-        "aria-expanded": r ? "true" : "false",
+        "aria-expanded": i ? "true" : "false",
         role: "gridcell",
         "aria-colindex": this.$props.ariaColumnIndex,
         tabindex: n.tabIndex,
         "data-keyboardnavlevel": n[$],
         "data-keyboardnavid": n[S]
-      }, a = i("a", {
+      }, a = r("a", {
         onClick: (l) => {
-          this.clickHandler(l, this.$props.dataItem, r);
+          this.clickHandler(l, this.$props.dataItem, i);
         },
         href: "#",
         tabindex: -1,
-        title: r ? o : d,
-        "aria-label": r ? o : d
-      }, [i(y, {
-        name: r ? "minus" : "plus",
-        icon: r ? A : C
-      }, null)]), e = i("td", h(t, {
+        title: i ? o : d,
+        "aria-label": i ? o : d
+      }, [r(y, {
+        name: i ? "minus" : "plus",
+        icon: i ? A : C
+      }, null)]), e = r("td", h(t, {
         onKeydown: (l) => {
-          this.triggerKeydown(l, r);
+          this.triggerKeydown(l, i);
         }
       }), [a]);
     }
@@ -143,8 +143,7 @@ const v = (e) => {
         keydown: this.triggerKeydown,
         click: this.clickHandler
       },
-      defaultSlots: a,
-      swapDefaultSlots: !0
+      defaultSlots: a
     });
   }
 });

package/cells/GridSelectionCell.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),c=require("../utils/main.js"),r=require("@progress/kendo-vue-common"),a=require("@progress/kendo-vue-data-tools"),p=e=>{var n,l;return(l=(n=e.cells)==null?void 0:n.select)==null?void 0:l[e.rowType||"data"]},u=t.defineComponent({name:"KendoGridSelectionCell",inheritAttrs:!1,props:{id:String,field:String,dataItem:Object,format:String,type:String,className:String,colSpan:Number,columnIndex:Number,columnsCount:Number,rowType:String,level:Number,expanded:Boolean,render:[String,Function,Object],isSelected:Boolean,ariaColumnIndex:Number,editor:String,isRtl:Boolean,cells:Object},emits:{selectionchange:null,cellkeydown:null},inject:{kendoIntlService:{default:null},getKeyboardNavigationAttributes:{default:r.noop}},data(){return{inputId:r.guid()}},computed:{tdClass(){const{className:e}=this.$props;return{"k-table-td":!0,[e]:e}}},methods:{triggerKeydown(e){this.$emit("cellkeydown",{event:e,dataItem:this.$props.dataItem,field:this.$props.field})},handleOnChange(e){this.$emit("selectionchange",{event:e,dataItem:this.$props.dataItem})}},render(){let e,n=null;const l=this.$props.isSelected||c.getNestedValue(this.$props.field,this.$props.dataItem),s=typeof l=="boolean"&&l,i=this.$props.render,o=this.getKeyboardNavigationAttributes(this.$props.id),d=this.$props.rowType!=="groupHeader"?(e={style:this.$attrs.style,colspan:this.$props.colSpan,class:this.tdClass,"aria-colindex":this.$props.ariaColumnIndex,role:"gridcell",tabindex:o.tabIndex,"data-keyboardnavlevel":o[a.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":o[a.KEYBOARD_NAV_DATA_ID]},n=t.createVNode(t.Fragment,null,[t.createVNode("span",{class:"k-checkbox-wrap"},[t.createVNode("input",{checked:s,id:this.inputId,type:"checkbox",class:"k-checkbox k-checkbox-md k-rounded-md",onChange:this.handleOnChange},null)]),t.createVNode("label",{class:"k-checkbox-label",for:this.inputId},null)]),t.createVNode("td",t.mergeProps(e,{onKeydown:this.triggerKeydown}),[n])):null;return r.getTemplate.call(this,{h:t.h,template:i||p(this.$props),defaultRendering:d,additionalProps:{...this.$props,tdProps:e},additionalListeners:{keydown:this.triggerKeydown,change:this.handleOnChange},defaultSlots:n,swapDefaultSlots:!0})}});exports.GridSelectionCell=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),c=require("../utils/main.js"),r=require("@progress/kendo-vue-common"),a=require("@progress/kendo-vue-data-tools"),p=e=>{var n,o;return(o=(n=e.cells)==null?void 0:n.select)==null?void 0:o[e.rowType||"data"]},u=t.defineComponent({name:"KendoGridSelectionCell",inheritAttrs:!1,props:{id:String,field:String,dataItem:Object,format:String,type:String,className:String,colSpan:Number,columnIndex:Number,columnsCount:Number,rowType:String,level:Number,expanded:Boolean,render:[String,Function,Object],isSelected:Boolean,ariaColumnIndex:Number,editor:String,isRtl:Boolean,cells:Object},emits:{selectionchange:null,cellkeydown:null},inject:{kendoIntlService:{default:null},getKeyboardNavigationAttributes:{default:r.noop}},data(){return{inputId:r.guid()}},computed:{tdClass(){const{className:e}=this.$props;return{"k-table-td":!0,[e]:e}}},methods:{triggerKeydown(e){this.$emit("cellkeydown",{event:e,dataItem:this.$props.dataItem,field:this.$props.field})},handleOnChange(e){this.$emit("selectionchange",{event:e,dataItem:this.$props.dataItem})}},render(){let e,n=null;const o=this.$props.isSelected||c.getNestedValue(this.$props.field,this.$props.dataItem),s=typeof o=="boolean"&&o,i=this.$props.render,l=this.getKeyboardNavigationAttributes(this.$props.id),d=this.$props.rowType!=="groupHeader"?(e={style:this.$attrs.style,colspan:this.$props.colSpan,class:this.tdClass,"aria-colindex":this.$props.ariaColumnIndex,role:"gridcell",tabindex:l.tabIndex,"data-keyboardnavlevel":l[a.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":l[a.KEYBOARD_NAV_DATA_ID]},n=t.createVNode(t.Fragment,null,[t.createVNode("span",{class:"k-checkbox-wrap"},[t.createVNode("input",{checked:s,id:this.inputId,type:"checkbox",class:"k-checkbox k-checkbox-md k-rounded-md",onChange:this.handleOnChange},null)]),t.createVNode("label",{class:"k-checkbox-label",for:this.inputId},null)]),t.createVNode("td",t.mergeProps(e,{onKeydown:this.triggerKeydown}),[n])):null;return r.getTemplate.call(this,{h:t.h,template:i||p(this.$props),defaultRendering:d,additionalProps:{...this.$props,tdProps:e},additionalListeners:{keydown:this.triggerKeydown,change:this.handleOnChange},defaultSlots:n})}});exports.GridSelectionCell=u;

package/cells/GridSelectionCell.mjs

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as i, createVNode as l, Fragment as d, mergeProps as p, h as c } from "vue";
+import { defineComponent as i, createVNode as l, Fragment as d, mergeProps as c, h as p } from "vue";
 import { getNestedValue as h } from "../utils/main.mjs";
 import { noop as u, getTemplate as m, guid as g } from "@progress/kendo-vue-common";
 import { KEYBOARD_NAV_DATA_ID as b, KEYBOARD_NAV_DATA_LEVEL as f } from "@progress/kendo-vue-data-tools";
@@ -100,11 +100,11 @@ const y = (e) => {
     }, null)]), l("label", {
       class: "k-checkbox-label",
       for: this.inputId
-    }, null)]), l("td", p(e, {
+    }, null)]), l("td", c(e, {
       onKeydown: this.triggerKeydown
     }), [t])) : null;
     return m.call(this, {
-      h: c,
+      h: p,
       template: s || y(this.$props),
       defaultRendering: a,
       additionalProps: {
@@ -115,8 +115,7 @@ const y = (e) => {
         keydown: this.triggerKeydown,
         change: this.handleOnChange
       },
-      defaultSlots: t,
-      swapDefaultSlots: !0
+      defaultSlots: t
     });
   }
 });

package/common.d.ts

@@ -33,6 +33,7 @@ declare const gridProps: {
         default: () => any;
     };
     cells: PropType<import('.').GridCellsSettings>;
+    rows: PropType<import('./interfaces/GridRowsSettings').GridRowsSettings>;
     defaultColumnsState: {
         type: PropType<import('.').GridColumnState[]>;
         default: () => any;

package/common.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("vue");const t=require("@progress/kendo-vue-common"),n={id:String,autoProcessData:[Boolean,Object],topCacheCount:{type:Number,default:0},collapsedGroups:{type:Array,default:function(){return[]}},uniqueField:String,totalGroupedHeight:Number,allGroupedItems:Object,alternatePerGroup:Boolean,columns:Array,columnsState:{type:Array,default:function(){}},cells:Object,defaultColumnsState:{type:Array,default:function(){}},columnVirtualization:Boolean,dataItems:[Array,Object],sortable:[Boolean,Object],defaultSort:Array,sort:Array,filterable:Boolean,filterOperators:Object,filterCellRender:[String,Function,Object],headerCellRender:[String,Function,Object],showLoader:{type:Boolean,default:void 0},loader:[String,Function,Object],lockGroups:Boolean,pinnable:Boolean,defaultPinnedTopRows:Array,defaultPinnedBottomRows:Array,pinnedTopRows:Array,pinnedBottomRows:Array,defaultFilter:Object,filter:Object,defaultSearch:Object,search:Object,searchFields:Array,highlight:Object,pageable:[Boolean,Object],pageSize:Number,total:Number,fixedScroll:Boolean,skip:Number,defaultSkip:Number,take:Number,defaultTake:Number,expandField:String,expandColumn:Object,selectedField:String,cellRender:[String,Function,Object],rowRender:[String,Function,Object],rowSpannable:[Boolean,Object],resizable:Boolean,reorderable:Boolean,group:Array,defaultGroup:Array,groupable:[Boolean,Object],groupExpand:Array,defaultGroupExpand:Array,detailExpand:Object,defaultDetailExpand:Object,editField:String,rowClass:Function,select:Object,defaultSelect:Object,selectable:[Boolean,Object],scrollable:{type:String,default:"scrollable"},size:{type:String,default:"medium",validator:function(e){return["small","medium"].includes(e)}},pager:[String,Function,Object],rowHeight:Number,detailRowHeight:Number,detail:[String,Function,Object],columnMenu:[Boolean,String,Function,Object],columnMenuAnimate:{type:[Boolean,Object],default:function(){return!0}},columnMenuIcon:t.SvgIcon,dataItemKey:String,navigatable:{type:Boolean,default:!1},onItemchange:Function,onExpandchange:Function,onDatastatechange:Function,onPagechange:Function,onSortchange:Function,onFilterchange:Function,onGroupchange:Function,onSearchchange:Function,onGroupexpandchange:Function,onDetailexpandchange:Function};exports.gridProps=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("vue");const t=require("@progress/kendo-vue-common"),n={id:String,autoProcessData:[Boolean,Object],topCacheCount:{type:Number,default:0},collapsedGroups:{type:Array,default:function(){return[]}},uniqueField:String,totalGroupedHeight:Number,allGroupedItems:Object,alternatePerGroup:Boolean,columns:Array,columnsState:{type:Array,default:function(){}},cells:Object,rows:Object,defaultColumnsState:{type:Array,default:function(){}},columnVirtualization:Boolean,dataItems:[Array,Object],sortable:[Boolean,Object],defaultSort:Array,sort:Array,filterable:Boolean,filterOperators:Object,filterCellRender:[String,Function,Object],headerCellRender:[String,Function,Object],showLoader:{type:Boolean,default:void 0},loader:[String,Function,Object],lockGroups:Boolean,pinnable:Boolean,defaultPinnedTopRows:Array,defaultPinnedBottomRows:Array,pinnedTopRows:Array,pinnedBottomRows:Array,defaultFilter:Object,filter:Object,defaultSearch:Object,search:Object,searchFields:Array,highlight:Object,pageable:[Boolean,Object],pageSize:Number,total:Number,fixedScroll:Boolean,skip:Number,defaultSkip:Number,take:Number,defaultTake:Number,expandField:String,expandColumn:Object,selectedField:String,cellRender:[String,Function,Object],rowRender:[String,Function,Object],rowSpannable:[Boolean,Object],resizable:Boolean,reorderable:Boolean,group:Array,defaultGroup:Array,groupable:[Boolean,Object],groupExpand:Array,defaultGroupExpand:Array,detailExpand:Object,defaultDetailExpand:Object,editField:String,rowClass:Function,select:Object,defaultSelect:Object,selectable:[Boolean,Object],scrollable:{type:String,default:"scrollable"},size:{type:String,default:"medium",validator:function(e){return["small","medium"].includes(e)}},pager:[String,Function,Object],rowHeight:Number,detailRowHeight:Number,detail:[String,Function,Object],columnMenu:[Boolean,String,Function,Object],columnMenuAnimate:{type:[Boolean,Object],default:function(){return!0}},columnMenuIcon:t.SvgIcon,dataItemKey:String,navigatable:{type:Boolean,default:!1},onItemchange:Function,onExpandchange:Function,onDatastatechange:Function,onPagechange:Function,onSortchange:Function,onFilterchange:Function,onGroupchange:Function,onSearchchange:Function,onGroupexpandchange:Function,onDetailexpandchange:Function};exports.gridProps=n;

package/common.mjs

@@ -31,6 +31,7 @@ const a = {
     }
   },
   cells: Object,
+  rows: Object,
   defaultColumnsState: {
     type: Array,
     default: function() {

package/components/PinnedRowsTable.d.ts

@@ -37,7 +37,6 @@ export declare const PinnedRowsTable: import('vue').DefineComponent<import('vue'
     isTop: import('vue').ComputedRef<boolean>;
     pinnedRef: import('vue').ComputedRef<any>;
     handlePinnedScroll: (event: UIEvent) => void;
-    rowTemplateSettings: import('vue').ComputedRef<import('../interfaces/GridRowsSettings').GridRowsSettings>;
     pinnedRows: import('vue').ComputedRef<import("vue/jsx-runtime").JSX.Element[]>;
     containerClassName: import('vue').ComputedRef<string>;
     tableClassName: import('vue').ComputedRef<string>;

package/components/PinnedRowsTable.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),n=require("@progress/kendo-vue-common"),c=require("@progress/kendo-vue-data-tools"),b=require("@progress/kendo-vue-intl"),v=require("../rows/GridRow.js"),L=require("../getRowContents.js"),l=require("../messages/main.js"),I=t.defineComponent({name:"PinnedRowsTable",props:{size:String,cols:Array,dataRowContext:Object,position:String,pinnedItems:Array,rowHeight:Number,rows:Object,selectable:Object},inject:{gridContext:{default:()=>({})},kendoLocalizationService:{default:null}},mounted(){this.tableRef=n.getRef(this,"table"),this.colGroupRefEl=n.getRef(this,"colGroup")},updated(){this.tableRef=n.getRef(this,"table"),this.colGroupRefEl=n.getRef(this,"colGroup")},methods:{setWidth(e){const a=n.getRef(this,"table");a&&(a.style.width=e?e+"px":"")},setScrollLeft(e){const a=n.getRef(this,"pinnedRef");a&&a.scrollLeft!==e&&(a.scrollLeft=e)}},setup(e){const a=t.inject("kendo",{}),d=t.computed(()=>e.position==="top"),R=t.computed(()=>d.value?a.pinnedTopRef:a.pinnedBottomRef),m=t.ref(!1),p=s=>{const o=a.containerElementRef;if(!o||m.value)return;const i=s.currentTarget.scrollLeft;o.scrollLeft!==i&&(o.scrollLeft=i)},w=t.computed(()=>{var s;return(s=e.rows)!=null&&s.pinnedData?{...e.rows,data:e.rows.pinnedData}:e.rows}),g=t.computed(()=>!e.pinnedItems||!e.dataRowContext?[]:e.pinnedItems.map((s,o)=>{const i={dataItem:s,rowType:"data",level:0,expanded:!1,dataIndex:o},r=e.dataRowContext.dataItemKey,u="pinned_"+((r?n.getter(r)(s):void 0)||"ai"+o),f=L.getRowContents(e.dataRowContext,i,u,o);return t.createVNode(v.GridRow,{key:u,rowType:"data",item:i,dataIndex:o,ariaRowIndex:o+1,absoluteRowIndex:o,isAltRow:o%2!==0,isHidden:!1,rowHeight:e.rowHeight,isSelected:f.isSelected},{default:()=>[f.row]})})),h=t.computed(()=>n.classNames("k-grid-pinned-container",{"k-pos-bottom":!d.value})),S=t.computed(()=>n.classNames(n.uGrid.table({size:e.size}))),y=s=>{var i,r;const o=(i=e.pinnedItems)==null?void 0:i[s.startRowIndex];o&&((r=a.pinnedSelectionRelease)==null||r.call(a,s,o))},N=t.computed(()=>e.selectable?{...typeof e.selectable=="object"?e.selectable:{},enabled:!0,drag:!1}:e.selectable),T=t.computed(()=>d.value?c.tableKeyboardNavigationTopPinnedAttributes:c.tableKeyboardNavigationBottomPinnedAttributes);return{isTop:d,pinnedRef:R,handlePinnedScroll:p,rowTemplateSettings:w,pinnedRows:g,containerClassName:h,tableClassName:S,handleSelectionRelease:y,pinnedSelectable:N,pinnedBodyAttributes:T}},render(){return t.createVNode("div",{class:this.containerClassName,role:"presentation",style:{display:this.pinnedRows.length?"":"none"}},[t.createVNode("div",{class:"k-grid-pinned-wrap",ref:n.setRef(this,"pinnedRef"),onScroll:this.handlePinnedScroll},[t.createVNode(c.TableSelection,{selectable:this.pinnedSelectable,onRelease:this.handleSelectionRelease},{default:()=>[t.createVNode("table",{ref:n.setRef(this,"table"),class:this.tableClassName,"aria-label":this.isTop?b.provideLocalizationService(this).toLanguageString(l.pinnedTopRowsAriaLabel,l.messages[l.pinnedTopRowsAriaLabel]):b.provideLocalizationService(this).toLanguageString(l.pinnedBottomRowsAriaLabel,l.messages[l.pinnedBottomRowsAriaLabel])},[t.createVNode("colgroup",{ref:n.setRef(this,"colGroup")},[this.$props.cols]),t.createVNode("tbody",t.mergeProps({class:n.classNames(n.uGrid.tbody({}))},this.pinnedBodyAttributes),[this.pinnedRows])])]})])])}});exports.PinnedRowsTable=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),n=require("@progress/kendo-vue-common"),c=require("@progress/kendo-vue-data-tools"),b=require("@progress/kendo-vue-intl"),v=require("../rows/GridRow.js"),L=require("../getRowContents.js"),l=require("../messages/main.js"),T=t.defineComponent({name:"PinnedRowsTable",props:{size:String,cols:Array,dataRowContext:Object,position:String,pinnedItems:Array,rowHeight:Number,rows:Object,selectable:Object},inject:{gridContext:{default:()=>({})},kendoLocalizationService:{default:null}},mounted(){this.tableRef=n.getRef(this,"table"),this.colGroupRefEl=n.getRef(this,"colGroup")},updated(){this.tableRef=n.getRef(this,"table"),this.colGroupRefEl=n.getRef(this,"colGroup")},methods:{setWidth(e){const s=n.getRef(this,"table");s&&(s.style.width=e?e+"px":"")},setScrollLeft(e){const s=n.getRef(this,"pinnedRef");s&&s.scrollLeft!==e&&(s.scrollLeft=e)}},setup(e){const s=t.inject("kendo",{}),d=t.computed(()=>e.position==="top"),R=t.computed(()=>d.value?s.pinnedTopRef:s.pinnedBottomRef),m=t.ref(!1),p=a=>{const o=s.containerElementRef;if(!o||m.value)return;const i=a.currentTarget.scrollLeft;o.scrollLeft!==i&&(o.scrollLeft=i)},g=t.computed(()=>!e.pinnedItems||!e.dataRowContext?[]:e.pinnedItems.map((a,o)=>{const i={dataItem:a,rowType:"data",level:0,expanded:!1,dataIndex:o},r=e.dataRowContext.dataItemKey,u="pinned_"+((r?n.getter(r)(a):void 0)||"ai"+o),f=L.getRowContents(e.dataRowContext,i,u,o);return t.createVNode(v.GridRow,{key:u,rowType:"data",item:i,dataIndex:o,ariaRowIndex:o+1,absoluteRowIndex:o,isAltRow:o%2!==0,isHidden:!1,rowHeight:e.rowHeight,isSelected:f.isSelected,rows:e.rows},{default:()=>[f.row]})})),h=t.computed(()=>n.classNames("k-grid-pinned-container",{"k-pos-bottom":!d.value})),w=t.computed(()=>n.classNames(n.uGrid.table({size:e.size}))),S=a=>{var i,r;const o=(i=e.pinnedItems)==null?void 0:i[a.startRowIndex];o&&((r=s.pinnedSelectionRelease)==null||r.call(s,a,o))},y=t.computed(()=>e.selectable?{...typeof e.selectable=="object"?e.selectable:{},enabled:!0,drag:!1}:e.selectable),N=t.computed(()=>d.value?c.tableKeyboardNavigationTopPinnedAttributes:c.tableKeyboardNavigationBottomPinnedAttributes);return{isTop:d,pinnedRef:R,handlePinnedScroll:p,pinnedRows:g,containerClassName:h,tableClassName:w,handleSelectionRelease:S,pinnedSelectable:y,pinnedBodyAttributes:N}},render(){return t.createVNode("div",{class:this.containerClassName,role:"presentation",style:{display:this.pinnedRows.length?"":"none"}},[t.createVNode("div",{class:"k-grid-pinned-wrap",ref:n.setRef(this,"pinnedRef"),onScroll:this.handlePinnedScroll},[t.createVNode(c.TableSelection,{selectable:this.pinnedSelectable,onRelease:this.handleSelectionRelease},{default:()=>[t.createVNode("table",{ref:n.setRef(this,"table"),class:this.tableClassName,"aria-label":this.isTop?b.provideLocalizationService(this).toLanguageString(l.pinnedTopRowsAriaLabel,l.messages[l.pinnedTopRowsAriaLabel]):b.provideLocalizationService(this).toLanguageString(l.pinnedBottomRowsAriaLabel,l.messages[l.pinnedBottomRowsAriaLabel])},[t.createVNode("colgroup",{ref:n.setRef(this,"colGroup")},[this.$props.cols]),t.createVNode("tbody",t.mergeProps({class:n.classNames(n.uGrid.tbody({}))},this.pinnedBodyAttributes),[this.pinnedRows])])]})])])}});exports.PinnedRowsTable=T;

package/components/PinnedRowsTable.mjs

@@ -5,14 +5,14 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as k, createVNode as s, mergeProps as G, inject as P, computed as a, ref as j } from "vue";
-import { setRef as c, classNames as f, uGrid as u, getter as x, getRef as l } from "@progress/kendo-vue-common";
-import { TableSelection as K, tableKeyboardNavigationTopPinnedAttributes as z, tableKeyboardNavigationBottomPinnedAttributes as B } from "@progress/kendo-vue-data-tools";
-import { provideLocalizationService as R } from "@progress/kendo-vue-intl";
-import { GridRow as E } from "../rows/GridRow.mjs";
-import { getRowContents as H } from "../getRowContents.mjs";
-import { pinnedTopRowsAriaLabel as p, messages as h, pinnedBottomRowsAriaLabel as w } from "../messages/main.mjs";
-const J = /* @__PURE__ */ k({
+import { defineComponent as N, createVNode as s, mergeProps as k, inject as G, computed as a, ref as P } from "vue";
+import { setRef as c, classNames as f, uGrid as p, getter as j, getRef as l } from "@progress/kendo-vue-common";
+import { TableSelection as x, tableKeyboardNavigationTopPinnedAttributes as K, tableKeyboardNavigationBottomPinnedAttributes as z } from "@progress/kendo-vue-data-tools";
+import { provideLocalizationService as u } from "@progress/kendo-vue-intl";
+import { GridRow as B } from "../rows/GridRow.mjs";
+import { getRowContents as E } from "../getRowContents.mjs";
+import { pinnedTopRowsAriaLabel as R, messages as h, pinnedBottomRowsAriaLabel as w } from "../messages/main.mjs";
+const D = /* @__PURE__ */ N({
   name: "PinnedRowsTable",
   props: {
     size: String,
@@ -49,27 +49,21 @@ const J = /* @__PURE__ */ k({
     }
   },
   setup(e) {
-    const n = P("kendo", {}), d = a(() => e.position === "top"), g = a(() => d.value ? n.pinnedTopRef : n.pinnedBottomRef), S = j(!1), y = (o) => {
+    const n = G("kendo", {}), d = a(() => e.position === "top"), g = a(() => d.value ? n.pinnedTopRef : n.pinnedBottomRef), y = P(!1), S = (o) => {
       const t = n.containerElementRef;
-      if (!t || S.value)
+      if (!t || y.value)
         return;
       const i = o.currentTarget.scrollLeft;
       t.scrollLeft !== i && (t.scrollLeft = i);
-    }, I = a(() => {
-      var o;
-      return (o = e.rows) != null && o.pinnedData ? {
-        ...e.rows,
-        data: e.rows.pinnedData
-      } : e.rows;
-    }), L = a(() => !e.pinnedItems || !e.dataRowContext ? [] : e.pinnedItems.map((o, t) => {
+    }, I = a(() => !e.pinnedItems || !e.dataRowContext ? [] : e.pinnedItems.map((o, t) => {
       const i = {
         dataItem: o,
         rowType: "data",
         level: 0,
         expanded: !1,
         dataIndex: t
-      }, r = e.dataRowContext.dataItemKey, b = "pinned_" + ((r ? x(r)(o) : void 0) || "ai" + t), m = H(e.dataRowContext, i, b, t);
-      return s(E, {
+      }, r = e.dataRowContext.dataItemKey, b = "pinned_" + ((r ? j(r)(o) : void 0) || "ai" + t), m = E(e.dataRowContext, i, b, t);
+      return s(B, {
         key: b,
         rowType: "data",
         item: i,
@@ -79,34 +73,34 @@ const J = /* @__PURE__ */ k({
         isAltRow: t % 2 !== 0,
         isHidden: !1,
         rowHeight: e.rowHeight,
-        isSelected: m.isSelected
+        isSelected: m.isSelected,
+        rows: e.rows
       }, {
         default: () => [m.row]
       });
-    })), T = a(() => f("k-grid-pinned-container", {
+    })), L = a(() => f("k-grid-pinned-container", {
       "k-pos-bottom": !d.value
-    })), v = a(() => f(u.table({
+    })), v = a(() => f(p.table({
       size: e.size
-    }))), C = (o) => {
+    }))), T = (o) => {
       var i, r;
       const t = (i = e.pinnedItems) == null ? void 0 : i[o.startRowIndex];
       t && ((r = n.pinnedSelectionRelease) == null || r.call(n, o, t));
-    }, A = a(() => e.selectable ? {
+    }, C = a(() => e.selectable ? {
       ...typeof e.selectable == "object" ? e.selectable : {},
       enabled: !0,
       drag: !1
-    } : e.selectable), N = a(() => d.value ? z : B);
+    } : e.selectable), A = a(() => d.value ? K : z);
     return {
       isTop: d,
       pinnedRef: g,
-      handlePinnedScroll: y,
-      rowTemplateSettings: I,
-      pinnedRows: L,
-      containerClassName: T,
+      handlePinnedScroll: S,
+      pinnedRows: I,
+      containerClassName: L,
       tableClassName: v,
-      handleSelectionRelease: C,
-      pinnedSelectable: A,
-      pinnedBodyAttributes: N
+      handleSelectionRelease: T,
+      pinnedSelectable: C,
+      pinnedBodyAttributes: A
     };
   },
   render() {
@@ -120,22 +114,22 @@ const J = /* @__PURE__ */ k({
       class: "k-grid-pinned-wrap",
       ref: c(this, "pinnedRef"),
       onScroll: this.handlePinnedScroll
-    }, [s(K, {
+    }, [s(x, {
       selectable: this.pinnedSelectable,
       onRelease: this.handleSelectionRelease
     }, {
       default: () => [s("table", {
         ref: c(this, "table"),
         class: this.tableClassName,
-        "aria-label": this.isTop ? R(this).toLanguageString(p, h[p]) : R(this).toLanguageString(w, h[w])
+        "aria-label": this.isTop ? u(this).toLanguageString(R, h[R]) : u(this).toLanguageString(w, h[w])
       }, [s("colgroup", {
         ref: c(this, "colGroup")
-      }, [this.$props.cols]), s("tbody", G({
-        class: f(u.tbody({}))
+      }, [this.$props.cols]), s("tbody", k({
+        class: f(p.tbody({}))
       }, this.pinnedBodyAttributes), [this.pinnedRows])])]
     })])]);
   }
 });
 export {
-  J as PinnedRowsTable
+  D as PinnedRowsTable
 };