@progress/kendo-vue-grid 3.7.4-dev.202211280833 → 3.7.4-dev.202212020747

package/dist/es/Grid.js

@@ -36,7 +36,7 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var markRaw = allVue.markRaw;
-import { templateRendering, hasListener, getListeners, getDefaultSlots, guid, getter, isRtl, validatePackage, getTemplate, canUseDOM, templateDefinition, isObject, setRef, getRef } from '@progress/kendo-vue-common';
+import { templateRendering, hasListener, getListeners, getDefaultSlots, guid, getter, isRtl, validatePackage, getTemplate, canUseDOM, templateDefinition, isObject, setRef, getRef, kendoThemeMaps } from '@progress/kendo-vue-common';
 import { tableColumnsVirtualization, Pager, normalize, tableKeyboardNavigationTools as navigationTools, TableKeyboardNavigationProvider } from '@progress/kendo-vue-data-tools';
 import { Loader } from '@progress/kendo-vue-indicators';
 import { GridNav } from './GridNav';
@@ -117,6 +117,13 @@ var GridVue2 = {
       type: String,
       default: 'scrollable'
     },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium'].includes(value);
+      }
+    },
     pager: templateDefinition,
     rowHeight: Number,
     detail: templateDefinition,
@@ -188,6 +195,29 @@ var GridVue2 = {
     this.gridUnmounted();
   },
   computed: {
+    nonscrollableWrapperClass: function nonscrollableWrapperClass() {
+      var _a;
+      var size = this.$props.size;
+      return _a = {
+        'k-grid': true,
+        'k-grid-md': !size
+      }, _a["k-grid-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a;
+    },
+    scrollableWrapperClass: function scrollableWrapperClass() {
+      var scrollable = this.$props.scrollable;
+      return __assign(__assign({}, this.nonscrollableWrapperClass), {
+        'k-grid-virtual': scrollable === 'virtual'
+      });
+    },
+    gridTableClass: function gridTableClass() {
+      var _a;
+      var size = this.$props.size;
+      return _a = {
+        'k-table': true,
+        'k-grid-table': true,
+        'k-grid-md': !size
+      }, _a["k-table-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a;
+    },
     getCorrectHeight: {
       get: function get() {
         if (this.$props.scrollable === 'virtual') {
@@ -721,7 +751,7 @@ var GridVue2 = {
         if (item.expanded !== false && item.items) {
           allRowsCount = _this.addSubItems(item.items, allRowsCount);
         }
-        if (_this.$props.groupable.footer === 'always' || item.expanded !== false && _this.$props.groupable.footer === 'visible') {
+        if (_this.group && _this.group.length && (_this.$props.groupable.footer === 'always' || item.expanded !== false && _this.$props.groupable.footer === 'visible')) {
           allRowsCount++;
         }
       });
@@ -845,8 +875,9 @@ var GridVue2 = {
     })];
     // @ts-ignore
     var header = h(Header, {
-      columnResize: this.columnResize,
+      size: this.$props.size,
       attrs: this.v3 ? undefined : {
+        size: this.$props.size,
         columnResize: this.columnResize,
         staticHeaders: this.$props.scrollable !== 'none',
         // @ts-ignore
@@ -958,6 +989,7 @@ var GridVue2 = {
           });
         }, this)
       },
+      columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== 'none',
       ref: this.v3 ? function (el) {
         _this.headerRef = el;
@@ -1073,8 +1105,9 @@ var GridVue2 = {
     }) ?
     // @ts-ignore
     h(Footer, {
-      columnResize: this.columnResize,
+      size: this.$props.size,
       attrs: this.v3 ? undefined : {
+        size: this.$props.size,
         columnResize: this.columnResize,
         staticHeaders: this.$props.scrollable !== 'none',
         row:
@@ -1105,6 +1138,7 @@ var GridVue2 = {
           });
         }, this)
       },
+      columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== 'none',
       ref: this.v3 ? function (el) {
         _this.footerRef = el;
@@ -1542,6 +1576,7 @@ var GridVue2 = {
       var _this = this;
       if (item.rowType === 'data') {
         absoluteDataIndex++;
+        dataIndex++;
       }
       if (this.$props.alternatePerGroup && item.rowType === 'groupHeader') {
         absoluteDataIndex = 0;
@@ -1768,7 +1803,7 @@ var GridVue2 = {
             },
             style: wrapperStyle,
             role: "grid",
-            "class": "k-widget k-grid"
+            "class": _this3.nonscrollableWrapperClass
           }, _this3.v3 ? function () {
             return [toolbar, groupingPanel, h("table", {
               style: {
@@ -1801,7 +1836,7 @@ var GridVue2 = {
           },
           style: wrapperStyle,
           role: "grid",
-          "class": "k-widget k-grid"
+          "class": _this3.nonscrollableWrapperClass
         }, _this3.v3 ? function () {
           return [toolbar, groupingPanel, h("table", {
             style: {
@@ -1849,7 +1884,7 @@ var GridVue2 = {
           },
           style: wrapperStyle,
           role: "grid",
-          "class": 'k-widget k-grid' + (_this3.$props.scrollable === 'virtual' ? ' k-grid-virtual' : '')
+          "class": _this3.scrollableWrapperClass
         }, _this3.v3 ? function () {
           return [toolbar, groupingPanel, header, h("div", {
             "class": "k-grid-container",
@@ -1879,7 +1914,7 @@ var GridVue2 = {
               tabindex: -1
             },
             tabindex: -1,
-            "class": 'k-grid-table',
+            "class": _this3.gridTableClass,
             ref: setRef(_this3, 'scrollTable')
           }, [colGroups, h("tbody", {
             role: "presentation",
@@ -1928,7 +1963,7 @@ var GridVue2 = {
             tabindex: -1
           },
           tabindex: -1,
-          "class": 'k-grid-table',
+          "class": _this3.gridTableClass,
           ref: setRef(_this3, 'scrollTable')
         }, [colGroups, h("tbody", {
           role: "presentation",
@@ -1960,7 +1995,7 @@ var GridVue2 = {
         },
         style: wrapperStyle,
         role: "grid",
-        "class": 'k-widget k-grid' + (_this3.$props.scrollable === 'virtual' ? ' k-grid-virtual' : '')
+        "class": _this3.scrollableWrapperClass
       }, _this3.v3 ? function () {
         return [toolbar, groupingPanel, header, h("div", {
           "class": "k-grid-container",
@@ -1990,7 +2025,7 @@ var GridVue2 = {
             tabindex: -1
           },
           tabindex: -1,
-          "class": 'k-grid-table',
+          "class": _this3.gridTableClass,
           ref: setRef(_this3, 'scrollTable')
         }, [colGroups, h("tbody", {
           role: "presentation",
@@ -2039,7 +2074,7 @@ var GridVue2 = {
           tabindex: -1
         },
         tabindex: -1,
-        "class": 'k-grid-table',
+        "class": _this3.gridTableClass,
         ref: setRef(_this3, 'scrollTable')
       }, [colGroups, h("tbody", {
         role: "presentation",

package/dist/es/GridToolbar.d.ts

@@ -7,7 +7,19 @@ import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } fr
 /**
  * @hidden
  */
-declare let GridToolbarVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<{}>, {}, RecordPropsDefinition<GridToolbarProps>>;
+export interface GridToolbarComputed {
+    [key: string]: any;
+    wrapperClass: object;
+}
+/**
+ * @hidden
+ */
+export interface GridToolbarAll extends GridToolbarProps, GridToolbarComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let GridToolbarVue2: ComponentOptions<GridToolbarAll, DefaultData<{}>, DefaultMethods<{}>, {}, RecordPropsDefinition<GridToolbarProps>>;
 /**
  * Represents the GridToolbar component.
  *

package/dist/es/GridToolbar.js

@@ -3,12 +3,31 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { getDefaultSlots } from '@progress/kendo-vue-common';
+import { getDefaultSlots, kendoThemeMaps } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
 var GridToolbarVue2 = {
   name: 'GridToolbar',
+  props: {
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium'].includes(value);
+      }
+    }
+  },
+  computed: {
+    wrapperClass: function wrapperClass() {
+      var _a;
+      var size = this.$props.size;
+      return _a = {
+        'k-toolbar': true,
+        'k-grid-toolbar': true
+      }, _a["k-toolbar-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a;
+    }
+  },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
     var v3 = !!isV3;
@@ -21,7 +40,7 @@ var GridToolbarVue2 = {
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
     return h("div", {
-      "class": "k-toolbar k-grid-toolbar"
+      "class": this.wrapperClass
     }, [defaultSlot]);
   }
 };

package/dist/es/cells/GridFilterCell.js

@@ -221,8 +221,10 @@ var GridFilterCellVue2 = {
       }
     };
     var defaultRendering = h("div", {
-      "class": "k-filtercell"
-    }, [h("span", [filterComponent.call(this, this.$props.filterType, this.$props.value), h("div", {
+      "class": "k-cell-inner"
+    }, [h("span", {
+      "class": "k-link"
+    }, [filterComponent.call(this, this.$props.filterType, this.$props.value), h("div", {
       "class": "k-filtercell-operator"
     }, [renderOperatorEditor.call(this),
     // @ts-ignore function children 

package/dist/es/footer/Footer.d.ts

@@ -13,6 +13,7 @@ export interface FooterProps {
         colGroupFooter: HTMLTableColElement | null;
     };
     cols: any[];
+    size: string;
 }
 export interface FooterComputed {
     [key: string]: any;

package/dist/es/footer/Footer.js

@@ -6,7 +6,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 import { BrowserSupportService } from '../utils/browser-support.service';
 import { isRtl } from '../utils/main';
-import { getRef, setRef } from '@progress/kendo-vue-common';
+import { getRef, kendoThemeMaps, setRef } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -16,7 +16,8 @@ var FooterVue2 = {
     staticHeaders: Boolean,
     row: Object,
     columnResize: Object,
-    cols: Array
+    cols: Array,
+    size: String
   },
   data: function data() {
     return {
@@ -26,6 +27,14 @@ var FooterVue2 = {
     };
   },
   computed: {
+    tableClass: function tableClass() {
+      var _a;
+      var size = this.$props.size;
+      return _a = {
+        'k-table': true,
+        'k-grid-footer-table': true
+      }, _a["k-table-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a;
+    },
     divStyle: {
       get: function get() {
         var padding = this.$data.scrollbarWidth + 'px';
@@ -86,6 +95,7 @@ var FooterVue2 = {
       "class": "k-grid-footer-wrap",
       ref: setRef(this, 'footerWrap')
     }, [h("table", {
+      "class": this.tableClass,
       style: this.tableStyle
     }, [h("colgroup", {
       ref: setRef(this, 'colGroupHeader')

package/dist/es/header/FilterRow.js

@@ -9,6 +9,7 @@ import { GridFilterCell } from '../cells/GridFilterCell';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { filterAriaLabel, messages } from '../messages/main';
 import { tableKeyboardNavigationTools as navigationTools, HeaderThElement } from '@progress/kendo-vue-data-tools';
+import { classNames } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -156,7 +157,7 @@ var FilterRowVue2 = {
         },
         navigatable: column.navigatable,
         style: style,
-        "class": this.headerCellClassName(column.field, column.locked) || undefined,
+        "class": classNames('k-header', this.headerCellClassName(column.field, column.locked) || undefined),
         ariaLabel: ariaAttrs.ariaLabel,
         ariaColumnIndex: ariaAttrs.ariaColumnIndex
       }, this.v3 ? function () {
@@ -175,7 +176,7 @@ var FilterRowVue2 = {
         },
         navigatable: column.navigatable,
         style: style,
-        "class": this.headerCellClassName(column.field, column.locked) || undefined,
+        "class": classNames('k-header', this.headerCellClassName(column.field, column.locked) || undefined),
         ariaLabel: ariaAttrs.ariaLabel,
         ariaColumnIndex: ariaAttrs.ariaColumnIndex
       });

package/dist/es/header/Header.d.ts

@@ -10,6 +10,7 @@ export interface HeaderProps {
     ref?: string;
     staticHeaders: boolean;
     headerRow: any;
+    size: string;
     columnResize: {
         colGroupHeader: any | null;
         setIsRtl: (isRtl: boolean) => void;

package/dist/es/header/Header.js

@@ -6,7 +6,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 import { BrowserSupportService } from '../utils/browser-support.service';
 import { isRtl } from '../utils/main';
-import { getRef, setRef } from '@progress/kendo-vue-common';
+import { getRef, kendoThemeMaps, setRef } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -16,6 +16,7 @@ var HeaderVue2 = {
     headerRow: Object,
     columnResize: Object,
     cols: Array,
+    size: String,
     draggable: Boolean
   },
   data: function data() {
@@ -32,6 +33,14 @@ var HeaderVue2 = {
         'k-grid-header': true,
         'k-grid-draggable-header': this.$props.draggable
       };
+    },
+    tableClass: function tableClass() {
+      var _a;
+      var size = this.$props.size;
+      return _a = {
+        'k-table': true,
+        'k-grid-header-table': true
+      }, _a["k-table-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a;
     }
   },
   mounted: function mounted() {
@@ -96,6 +105,7 @@ var HeaderVue2 = {
         role: "presentation"
       }
     }, [h("table", {
+      "class": this.tableClass,
       ref: setRef(this, 'table'),
       role: "presentation",
       attrs: this.v3 ? undefined : {

package/dist/es/header/HeaderRow.js

@@ -200,11 +200,15 @@ var HeaderRowVue2 = {
           }
           return iconSortIndex >= 0 && [h("span", {
             key: 1,
+            "class": 'k-sort-icon'
+          }, [h("span", {
             "class": 'k-icon k-i-sort-' + _this.$props.sort[iconSortIndex].dir + '-small'
-          }), _this.$props.sort.length > 1 && h("span", {
+          })]), _this.$props.sort.length > 1 && h("span", {
             key: 2,
+            "class": 'k-sort-icon'
+          }, [h("span", {
             "class": "k-sort-order"
-          }, [iconSortIndex + 1])];
+          }, [iconSortIndex + 1])])];
         };
         var sortIcon = sortIconRenderer(sortIndex);
         var className = (column.kFirst ? 'k-first ' : '') + this.cellClass(column.field, column.headerClassName, column.locked);

package/dist/es/interfaces/GridColumnProps.d.ts

@@ -140,8 +140,8 @@ export interface GridColumnProps {
     locked?: boolean;
     /**
      * The type of the data which will be used when formatting the cell data.
-     * Could be one of the following values 'text' | 'numeric' | 'boolean' | 'date'.
-     * Defaults to `text`.
+     * Could be one of the following values 'string' | 'number' | 'boolean' | 'date'.
+     * Defaults to `string`.
      */
-    type?: 'text' | 'numeric' | 'boolean' | 'date';
+    type?: 'string' | 'number' | 'boolean' | 'date';
 }

package/dist/es/interfaces/GridProps.d.ts

@@ -207,6 +207,16 @@ export interface GridProps {
      * while the user is scrolling the content.
      */
     scrollable?: string;
+    /**
+     * Configures the `size` of the Grid.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     *
+     * @default `medium`
+     */
+    size?: 'small' | 'medium' | string;
     /**
      * Defines the row height and forces an equal height to all rows
      * ([see example]({% slug scrollmmodes_grid %})).

package/dist/es/interfaces/GridToolbarProps.d.ts

@@ -3,7 +3,13 @@
  */
 export interface GridToolbarProps {
     /**
-     * The Vue slot elements that will be rendered inside the toolbar of the Grid.
+     * Configures the `size` of the Grid.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     *
+     * @default `medium`
      */
-    children?: any;
+    size?: 'small' | 'medium' | string;
 }

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-grid',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1669623966,
+    publishDate: 1669966840,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/esm/Grid.js

@@ -36,7 +36,7 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var markRaw = allVue.markRaw;
-import { templateRendering, hasListener, getListeners, getDefaultSlots, guid, getter, isRtl, validatePackage, getTemplate, canUseDOM, templateDefinition, isObject, setRef, getRef } from '@progress/kendo-vue-common';
+import { templateRendering, hasListener, getListeners, getDefaultSlots, guid, getter, isRtl, validatePackage, getTemplate, canUseDOM, templateDefinition, isObject, setRef, getRef, kendoThemeMaps } from '@progress/kendo-vue-common';
 import { tableColumnsVirtualization, Pager, normalize, tableKeyboardNavigationTools as navigationTools, TableKeyboardNavigationProvider } from '@progress/kendo-vue-data-tools';
 import { Loader } from '@progress/kendo-vue-indicators';
 import { GridNav } from './GridNav.js';
@@ -117,6 +117,13 @@ var GridVue2 = {
       type: String,
       default: 'scrollable'
     },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium'].includes(value);
+      }
+    },
     pager: templateDefinition,
     rowHeight: Number,
     detail: templateDefinition,
@@ -188,6 +195,29 @@ var GridVue2 = {
     this.gridUnmounted();
   },
   computed: {
+    nonscrollableWrapperClass: function nonscrollableWrapperClass() {
+      var _a;
+      var size = this.$props.size;
+      return _a = {
+        'k-grid': true,
+        'k-grid-md': !size
+      }, _a["k-grid-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a;
+    },
+    scrollableWrapperClass: function scrollableWrapperClass() {
+      var scrollable = this.$props.scrollable;
+      return __assign(__assign({}, this.nonscrollableWrapperClass), {
+        'k-grid-virtual': scrollable === 'virtual'
+      });
+    },
+    gridTableClass: function gridTableClass() {
+      var _a;
+      var size = this.$props.size;
+      return _a = {
+        'k-table': true,
+        'k-grid-table': true,
+        'k-grid-md': !size
+      }, _a["k-table-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a;
+    },
     getCorrectHeight: {
       get: function get() {
         if (this.$props.scrollable === 'virtual') {
@@ -721,7 +751,7 @@ var GridVue2 = {
         if (item.expanded !== false && item.items) {
           allRowsCount = _this.addSubItems(item.items, allRowsCount);
         }
-        if (_this.$props.groupable.footer === 'always' || item.expanded !== false && _this.$props.groupable.footer === 'visible') {
+        if (_this.group && _this.group.length && (_this.$props.groupable.footer === 'always' || item.expanded !== false && _this.$props.groupable.footer === 'visible')) {
           allRowsCount++;
         }
       });
@@ -845,8 +875,9 @@ var GridVue2 = {
     })];
     // @ts-ignore
     var header = h(Header, {
-      columnResize: this.columnResize,
+      size: this.$props.size,
       attrs: this.v3 ? undefined : {
+        size: this.$props.size,
         columnResize: this.columnResize,
         staticHeaders: this.$props.scrollable !== 'none',
         // @ts-ignore
@@ -958,6 +989,7 @@ var GridVue2 = {
           });
         }, this)
       },
+      columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== 'none',
       ref: this.v3 ? function (el) {
         _this.headerRef = el;
@@ -1073,8 +1105,9 @@ var GridVue2 = {
     }) ?
     // @ts-ignore
     h(Footer, {
-      columnResize: this.columnResize,
+      size: this.$props.size,
       attrs: this.v3 ? undefined : {
+        size: this.$props.size,
         columnResize: this.columnResize,
         staticHeaders: this.$props.scrollable !== 'none',
         row:
@@ -1105,6 +1138,7 @@ var GridVue2 = {
           });
         }, this)
       },
+      columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== 'none',
       ref: this.v3 ? function (el) {
         _this.footerRef = el;
@@ -1542,6 +1576,7 @@ var GridVue2 = {
       var _this = this;
       if (item.rowType === 'data') {
         absoluteDataIndex++;
+        dataIndex++;
       }
       if (this.$props.alternatePerGroup && item.rowType === 'groupHeader') {
         absoluteDataIndex = 0;
@@ -1768,7 +1803,7 @@ var GridVue2 = {
             },
             style: wrapperStyle,
             role: "grid",
-            "class": "k-widget k-grid"
+            "class": _this3.nonscrollableWrapperClass
           }, _this3.v3 ? function () {
             return [toolbar, groupingPanel, h("table", {
               style: {
@@ -1801,7 +1836,7 @@ var GridVue2 = {
           },
           style: wrapperStyle,
           role: "grid",
-          "class": "k-widget k-grid"
+          "class": _this3.nonscrollableWrapperClass
         }, _this3.v3 ? function () {
           return [toolbar, groupingPanel, h("table", {
             style: {
@@ -1849,7 +1884,7 @@ var GridVue2 = {
           },
           style: wrapperStyle,
           role: "grid",
-          "class": 'k-widget k-grid' + (_this3.$props.scrollable === 'virtual' ? ' k-grid-virtual' : '')
+          "class": _this3.scrollableWrapperClass
         }, _this3.v3 ? function () {
           return [toolbar, groupingPanel, header, h("div", {
             "class": "k-grid-container",
@@ -1879,7 +1914,7 @@ var GridVue2 = {
               tabindex: -1
             },
             tabindex: -1,
-            "class": 'k-grid-table',
+            "class": _this3.gridTableClass,
             ref: setRef(_this3, 'scrollTable')
           }, [colGroups, h("tbody", {
             role: "presentation",
@@ -1928,7 +1963,7 @@ var GridVue2 = {
             tabindex: -1
           },
           tabindex: -1,
-          "class": 'k-grid-table',
+          "class": _this3.gridTableClass,
           ref: setRef(_this3, 'scrollTable')
         }, [colGroups, h("tbody", {
           role: "presentation",
@@ -1960,7 +1995,7 @@ var GridVue2 = {
         },
         style: wrapperStyle,
         role: "grid",
-        "class": 'k-widget k-grid' + (_this3.$props.scrollable === 'virtual' ? ' k-grid-virtual' : '')
+        "class": _this3.scrollableWrapperClass
       }, _this3.v3 ? function () {
         return [toolbar, groupingPanel, header, h("div", {
           "class": "k-grid-container",
@@ -1990,7 +2025,7 @@ var GridVue2 = {
             tabindex: -1
           },
           tabindex: -1,
-          "class": 'k-grid-table',
+          "class": _this3.gridTableClass,
           ref: setRef(_this3, 'scrollTable')
         }, [colGroups, h("tbody", {
           role: "presentation",
@@ -2039,7 +2074,7 @@ var GridVue2 = {
           tabindex: -1
         },
         tabindex: -1,
-        "class": 'k-grid-table',
+        "class": _this3.gridTableClass,
         ref: setRef(_this3, 'scrollTable')
       }, [colGroups, h("tbody", {
         role: "presentation",

package/dist/esm/GridToolbar.d.ts

@@ -7,7 +7,19 @@ import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } fr
 /**
  * @hidden
  */
-declare let GridToolbarVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<{}>, {}, RecordPropsDefinition<GridToolbarProps>>;
+export interface GridToolbarComputed {
+    [key: string]: any;
+    wrapperClass: object;
+}
+/**
+ * @hidden
+ */
+export interface GridToolbarAll extends GridToolbarProps, GridToolbarComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let GridToolbarVue2: ComponentOptions<GridToolbarAll, DefaultData<{}>, DefaultMethods<{}>, {}, RecordPropsDefinition<GridToolbarProps>>;
 /**
  * Represents the GridToolbar component.
  *