@progress/kendo-vue-grid 3.5.0 → 3.5.1-dev.202208100944

package/dist/esm/Grid.js

@@ -0,0 +1,2086 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+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 { 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';
+import { GridSelectionCell } from './cells/GridSelectionCell.js';
+import { GridHierarchyCell } from './cells/GridHierarchyCell.js';
+import { GridDetailHierarchyCell } from './cells/GridDetailHierarchyCell.js';
+import { GridDetailCell } from './cells/GridDetailCell.js';
+import { GridEditCell } from './cells/GridEditCell.js';
+import { Header } from './header/Header.js';
+import { HeaderRow } from './header/HeaderRow.js';
+import { FilterRow } from './header/FilterRow.js';
+import { GroupPanel } from './header/GroupPanel.js';
+import { Footer } from './footer/Footer.js';
+import { FooterRow } from './footer/FooterRow.js';
+import { operators } from './filterCommon.js';
+import { VirtualScroll } from './VirtualScroll.js';
+import { ColumnResize } from './drag/ColumnResize.js';
+import { CommonDragLogic } from './drag/CommonDragLogic.js';
+import { DragClue } from './drag/DragClue.js';
+import { DropClue } from './drag/DropClue.js';
+import { getNestedValue, flatData, mapColumns, readColumns, autoGenerateColumns, applyExpandedState, groupedFirstItemValue } from './utils/index.js';
+import { GridCell } from './cells/GridCell.js';
+import { GridGroupCell } from './cells/GridGroupCell.js';
+import { GridRow } from './rows/GridRow.js';
+import { GridHeaderSelectionCell } from './header/GridHeaderSelectionCell.js';
+import { GridNoRecords } from './GridNoRecords.js';
+import { packageMetadata } from './package-metadata.js';
+import { pagerMessagesMap } from './messages.js';
+/**
+ * @hidden
+ */
+
+var GridVue2 = {
+  name: 'KendoGrid',
+  props: {
+    topCacheCount: {
+      type: Number,
+      default: 0
+    },
+    collapsedGroups: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    uniqueField: String,
+    totalGroupedHeight: Number,
+    allGroupedItems: Object,
+    alternatePerGroup: Boolean,
+    columns: Array,
+    columnVirtualization: Boolean,
+    dataItems: [Array, Object],
+    sortable: [Boolean, Object],
+    sort: Array,
+    filterable: Boolean,
+    filterOperators: Object,
+    filterCellRender: templateDefinition,
+    headerCellRender: templateDefinition,
+    loader: [String, Function, Object, Boolean],
+    filter: Object,
+    pageable: [Boolean, Object],
+    pageSize: Number,
+    total: Number,
+    skip: Number,
+    take: Number,
+    expandField: String,
+    selectedField: String,
+    cellRender: templateDefinition,
+    rowRender: templateDefinition,
+    resizable: Boolean,
+    reorderable: Boolean,
+    group: Array,
+    groupable: [Boolean, Object],
+    editField: String,
+    scrollable: {
+      type: String,
+      default: 'scrollable'
+    },
+    pager: templateDefinition,
+    rowHeight: Number,
+    detail: templateDefinition,
+    columnMenu: [Boolean, String, Function, Object],
+    columnMenuAnimate: {
+      type: [Boolean, Object],
+      default: function _default() {
+        return true;
+      }
+    },
+    dataItemKey: String,
+    navigatable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function data() {
+    return {
+      isRtl: false,
+      context: undefined,
+      navigation: undefined
+    };
+  },
+  watch: {
+    skip: function skip(value, oldValue) {
+      // @ts-ignore
+      this.onSkipChanged(value, oldValue);
+    },
+    total: function total(value, oldValue) {
+      // @ts-ignore
+      this.onTotalChanged(value, oldValue);
+    },
+    rowHeight: function rowHeight(value, oldValue) {
+      // @ts-ignore
+      this.onRowHeightChanged(value, oldValue);
+    }
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this.initialHeight = null;
+    this._columns = [];
+    var groupable = this.currentGroupable;
+    this.vs = new VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0, this.$props.topCacheCount);
+    this.dragLogic = new CommonDragLogic(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this));
+    this.columnResize = new ColumnResize(this.onResize.bind(this));
+    this._columnsMap = [[]];
+    this._header = null;
+    this._footer = null;
+    this.forceUpdateTimeout = undefined;
+    this._gridId = guid();
+  },
+  mounted: function mounted() {
+    this.setRefs();
+    var rtl = isRtl(this._element);
+    this.isRtl = rtl; // @ts-ignore
+
+    this.initialHeight = this._element.style ? this._element.style.height : null;
+  },
+  updated: function updated() {
+    this.setRefs();
+    var rtl = isRtl(this._element);
+    this.isRtl = rtl;
+  },
+  destroyed: !!isV3 ? undefined : function () {
+    this.gridUnmounted();
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    this.gridUnmounted();
+  },
+  computed: {
+    getCorrectHeight: {
+      get: function get() {
+        if (this.$props.scrollable === 'virtual') {
+          return this.initialHeight || '450px';
+        } else {
+          return null;
+        }
+      }
+    },
+    currentGroupable: function currentGroupable() {
+      return this.$props.groupable === true && this.$props.group && this.$props.group.length || isObject(this.$props.groupable) && this.$props.groupable.enabled !== false;
+    },
+    computedCollapsed: function computedCollapsed() {
+      var newCollapsed = [];
+
+      if (this.$props.group) {
+        for (var i = 0; i < this.$props.group.length; i++) {
+          if (this.$props.collapsedGroups[i]) {
+            newCollapsed.push(this.$props.collapsedGroups[i]);
+          } else {
+            newCollapsed.push([]);
+          }
+        }
+      }
+
+      return newCollapsed;
+    }
+  },
+  methods: {
+    /**
+     * A getter of the current columns. Gets the current column width or current columns,
+     * or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column.
+     * Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the `ref`
+     * callback. The following example demonstrates how to reorder the columns by dragging their handlers
+     * and check the properties afterwards. You can check the result in the browser console.
+     */
+    getColumns: function getColumns() {
+      var shuffledColumns = this._columns.filter(function (q) {
+        return q.declarationIndex >= 0 && q.parentIndex === -1;
+      });
+
+      var sanitize = function sanitize(columns) {
+        columns.sort(function (a, b) {
+          return a.declarationIndex - b.declarationIndex;
+        });
+        return columns.map(function (column) {
+          var declarationIndex = column.declarationIndex,
+              parentIndex = column.parentIndex,
+              depth = column.depth,
+              colSpan = column.colSpan,
+              rowSpan = column.rowSpan,
+              index = column.index,
+              kFirst = column.kFirst,
+              children = column.children,
+              props = __rest(column, ["declarationIndex", "parentIndex", "depth", "colSpan", "rowSpan", "index", "kFirst", "children"]);
+
+          return children.length ? __assign({
+            children: sanitize(children)
+          }, props) : props;
+        });
+      };
+
+      return sanitize(shuffledColumns);
+    },
+    setRefs: function setRefs() {
+      var elementString = '$el';
+      var element = getRef(this, 'gridNav');
+
+      if (element) {
+        this._element = element[elementString];
+      }
+
+      var groupPanelDiv = getRef(this, 'groupPanelDiv');
+
+      if (groupPanelDiv) {
+        var groupPanelDivElement = groupPanelDiv[elementString] || null;
+        this.dragLogic.refGroupPanelDiv(groupPanelDivElement);
+      }
+
+      var dropElementClue = getRef(this, 'dropElementClue');
+      var dragElementClue = getRef(this, 'dragElementClue');
+      this.dragLogic.refDropElementClue(dropElementClue);
+      this.dragLogic.refDragElementClue(dragElementClue);
+      this.columnResize.colGroupMain = getRef(this, 'colGroup');
+      this._header = getRef(this, 'header');
+      this._footer = getRef(this, 'footer');
+      this.vs.container = getRef(this, 'scrollContainer');
+      this.vs.table = getRef(this, 'scrollTable');
+      this.resetTableWidth();
+      this.vs.tableBody = getRef(this, 'scrollTableBody');
+    },
+    gridUnmounted: function gridUnmounted() {
+      clearTimeout(this.forceUpdateTimeout);
+      this.columnResize.columns = [];
+      this.dragLogic.columns = [];
+
+      if (this.dragLogic && this.dragLogic.dragElementClue) {
+        this.dragLogic.dragElementClue.$el.remove();
+        this.dragLogic.dropElementClue.$el.remove();
+      }
+
+      this.currentData = [];
+      this._columns = [];
+    },
+    resetVirtual: function resetVirtual() {
+      this.vs.PageChange = this.pageChangeHandler;
+      this.vs.realSkip = this.$props.skip || 0;
+      this.vs.pageSize = (this.$props.take !== undefined ? this.$props.take : this.$props.pageSize) || 0;
+      this.vs.scrollableVirtual = this.$props.scrollable === 'virtual';
+      this.vs.propsSkip = (this.$props.skip || 0) + (this.$props.scrollable === 'virtual' ? this.vs.topCacheCount + (this.vs.attendedSkip - (this.$props.skip || 0)) : 0);
+    },
+    onSkipChanged: function onSkipChanged(value, _oldValue) {
+      if (Math.max(0, this.vs.attendedSkip) !== value && value !== undefined) {
+        this.vs.attendedSkip = value;
+        this.vs.propsSkip = (value || 0) + (this.$props.scrollable === 'virtual' ? this.vs.topCacheCount + (this.vs.attendedSkip - (value || 0)) : 0);
+        this.vs.syncScroll();
+      }
+    },
+    onTotalChanged: function onTotalChanged(_value, _oldValue) {
+      var groupable = this.currentGroupable;
+      this.vs.reset();
+      this.vs = new VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0, this.$props.topCacheCount);
+      this.resetVirtual();
+      this.setRefs();
+    },
+    onRowHeightChanged: function onRowHeightChanged(_value, _oldValue) {
+      var groupable = this.currentGroupable;
+      this.vs.reset();
+      this.vs = new VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0, this.$props.topCacheCount);
+      this.resetVirtual();
+      this.setRefs();
+    },
+    scrollHandler: function scrollHandler(event) {
+      var _this = this;
+
+      clearTimeout(this.forceUpdateTimeout);
+
+      if (this.$props.columnVirtualization && !this.vs.scrollableVirtual) {
+        this.forceUpdateTimeout = setTimeout(function () {
+          _this.$forceUpdate();
+        }, 0);
+      }
+
+      if (this._header) {
+        this._header.setScrollLeft(event.currentTarget.scrollLeft);
+      }
+
+      if (this._footer) {
+        this._footer.setScrollLeft(event.currentTarget.scrollLeft);
+      }
+
+      if (this.vs) {
+        this.vs.scrollHandler(event);
+      }
+
+      this.$emit('scroll', event);
+    },
+    rowClick: function rowClick(e, item) {
+      if (e.target.type !== 'checkbox') {
+        this.$emit('rowclick', __assign({
+          dataItem: item.dataItem
+        }, this.getArguments(e)));
+      }
+    },
+    rowDoubleClick: function rowDoubleClick(e, item) {
+      if (e.target.type !== 'checkbox') {
+        this.$emit('rowdblclick', __assign({
+          dataItem: item.dataItem
+        }, this.getArguments(e)));
+      }
+    },
+    loopGroupedItems: function loopGroupedItems(dataItems, func, level, item) {
+      var _this = this;
+
+      if (level === void 0) {
+        level = 0;
+      }
+
+      if (item === void 0) {
+        item = null;
+      }
+
+      dataItems.forEach(function (di) {
+        if (!item && func(di, level)) {
+          item = di;
+        }
+
+        if (di.items && di.items.length && !item) {
+          item = _this.loopGroupedItems(di.items, func, level + 1, item);
+        }
+      });
+      return item;
+    },
+    updateGroupCollapsed: function updateGroupCollapsed(event) {
+      var collapsed = this.computedCollapsed;
+      var collapsedLevel = collapsed[event.level];
+      var uniqueField = this.$props.uniqueField;
+
+      var allItemsItem = function allItemsItem(item, level) {
+        return item.value === event.dataItem.value && level === event.level;
+      };
+
+      var dataItem = this.allGroupedItems ? this.loopGroupedItems(this.allGroupedItems.data, allItemsItem, 0, null) : event.dataItem;
+      var uniqueItemValue = groupedFirstItemValue(dataItem || event.dataItem, uniqueField);
+
+      if (event.value) {
+        if (collapsedLevel && collapsedLevel.length) {
+          var expandedIndex = collapsedLevel.indexOf(uniqueItemValue);
+
+          if (expandedIndex > -1) {
+            collapsedLevel.splice(expandedIndex, 1);
+          }
+        }
+      } else {
+        if (collapsedLevel) {
+          if (!collapsedLevel.includes(uniqueItemValue)) {
+            collapsedLevel.push(uniqueItemValue);
+          }
+        } else {
+          collapsedLevel = [uniqueItemValue];
+        }
+      }
+
+      return collapsed;
+    },
+    itemChange: function itemChange(event) {
+      var itemChange = hasListener.call(this, 'itemchange');
+
+      if (event.field === this.$props.expandField || (this.$props.group || this.$props.detail) && event.field === undefined) {
+        var expandChange = hasListener.call(this, 'expandchange');
+
+        if (expandChange && event.dataItem) {
+          this.$emit('expandchange', __assign(__assign({}, this.getArguments(event.event)), {
+            collapsedGroups: this.updateGroupCollapsed(event),
+            dataItem: event.dataItem,
+            value: event.value
+          }));
+        }
+
+        return;
+      }
+
+      if (itemChange) {
+        this.$emit('itemchange', __assign(__assign({}, this.getArguments(event.event)), {
+          dataItem: event.dataItem,
+          field: event.field,
+          value: event.value
+        }));
+      }
+    },
+    cellClickHandler: function cellClickHandler(event) {
+      this.$emit('cellclick', {
+        dataItem: event.dataItem,
+        field: event.field
+      });
+    },
+    cellKeydownHandler: function cellKeydownHandler(event) {
+      this.$emit('cellkeydown', event);
+    },
+    editHandler: function editHandler(dataItem) {
+      this.$emit('edit', {
+        dataItem: dataItem
+      });
+    },
+    removeHandler: function removeHandler(dataItem) {
+      this.$emit('remove', {
+        dataItem: dataItem
+      });
+    },
+    saveHandler: function saveHandler(dataItem) {
+      this.$emit('save', {
+        dataItem: dataItem
+      });
+    },
+    cancelHandler: function cancelHandler(dataItem) {
+      this.$emit('cancel', {
+        dataItem: dataItem
+      });
+    },
+    selectionChangeHandler: function selectionChangeHandler(options) {
+      var event = options.event,
+          dataItem = options.dataItem,
+          dataIndex = options.dataIndex,
+          columnIndex = options.columnIndex;
+      this.$emit('selectionchange', __assign(__assign({}, this.getArguments(event.event)), {
+        dataItem: dataItem,
+        startColIndex: columnIndex,
+        endColIndex: columnIndex,
+        startRowIndex: dataIndex,
+        endRowIndex: dataIndex,
+        dataItems: this.getLeafDataItems(),
+        altKey: false,
+        ctrlKey: false,
+        shiftKey: false,
+        metaKey: false,
+        isDrag: false,
+        componentId: this._gridId,
+        selectedField: this.$props.selectedField || ''
+      }));
+    },
+    onHeaderSelectionChangeHandler: function onHeaderSelectionChangeHandler(event) {
+      this.$emit('headerselectionchange', {
+        field: event.field,
+        event: event.event,
+        target: this
+      });
+    },
+    pageChangeHandler: function pageChangeHandler(page, event) {
+      this.raiseDataEvent('pagechange', {
+        page: page,
+        event: event
+      }, {
+        skip: page.skip,
+        take: page.take
+      }, event);
+    },
+    sortChangeHandler: function sortChangeHandler(sort, event) {
+      this.raiseDataEvent('sortchange', {
+        sort: sort
+      }, {
+        sort: sort
+      }, event);
+    },
+    filterChangeHandler: function filterChangeHandler(filter, event) {
+      this.raiseDataEvent('filterchange', {
+        filter: filter
+      }, {
+        filter: filter,
+        skip: 0
+      }, event);
+    },
+    groupChangeHandler: function groupChangeHandler(groups, event) {
+      this.raiseDataEvent('groupchange', {
+        group: groups
+      }, {
+        group: groups,
+        skip: 0
+      }, event);
+    },
+    raiseDataEvent: function raiseDataEvent(handler, data, moreData, event) {
+      if (hasListener.call(this, handler)) {
+        this.$emit(handler, __assign(__assign({}, this.getArguments(event)), data));
+      } else if (hasListener.call(this, 'datastatechange')) {
+        this.$emit('datastatechange', __assign(__assign({}, this.getArguments(event)), {
+          data: __assign(__assign({}, this.getDataState()), moreData)
+        }));
+      }
+    },
+    columnReorder: function columnReorder(prev, next, event) {
+      var _a;
+
+      var _this = this;
+
+      var depth = this._columns[prev].depth;
+
+      var end = function end(index) {
+        do {
+          index++;
+        } while (index < _this._columns.length && _this._columns[index].depth > depth);
+
+        return index;
+      };
+
+      var spliced = this._columns.splice(prev, end(prev) - prev);
+
+      (_a = this._columns).splice.apply(_a, __spreadArray([prev < next ? end(next - spliced.length) : next, 0], spliced, false));
+
+      this._columns.filter(function (q) {
+        return q.declarationIndex >= 0;
+      }).forEach(function (c, i) {
+        return c.orderIndex = i;
+      });
+
+      var eventColumnProps = this.getColumns();
+      this.$emit('columnreorder', {
+        target: this,
+        columns: eventColumnProps,
+        event: event
+      });
+    },
+    groupReorder: function groupReorder(prevIndex, nextIndex, event) {
+      if (this.$props.group === undefined) {
+        return;
+      }
+
+      var group = this.$props.group.slice();
+      group.splice.apply(group, __spreadArray([nextIndex, 0], group.splice(prevIndex, 1), false));
+      this.groupChangeHandler(group, event);
+    },
+    columnToGroup: function columnToGroup(columnIndex, groupIndex, event) {
+      var field = this._columns[columnIndex].field;
+
+      if (!field) {
+        return;
+      }
+
+      var group = (this.$props.group || []).slice();
+      group.splice(groupIndex, 0, {
+        field: field
+      });
+      this.groupChangeHandler(group, event);
+    },
+    resetTableWidth: function resetTableWidth() {
+      var totalWidth = 0;
+
+      if (!this.columnResize.colGroupMain) {
+        return;
+      }
+
+      var colElements = this.columnResize.colGroupMain.children;
+
+      for (var i = 0; i < colElements.length; i++) {
+        var width = colElements[i].width;
+
+        if (!width) {
+          return;
+        }
+
+        totalWidth += parseFloat(width.toString());
+      }
+
+      totalWidth = Math.round(totalWidth);
+
+      if (this._header) {
+        this._header.setWidth(totalWidth);
+      }
+
+      if (this._footer) {
+        this._footer.setWidth(totalWidth);
+      }
+
+      if (this.vs.table) {
+        this.vs.table.style.width = totalWidth + 'px';
+      }
+    },
+    onResize: function onResize(index, newWidth, oldWidth, event, end) {
+      this.resetTableWidth();
+      this.$emit('columnresize', {
+        columns: this.getColumns(),
+        index: index,
+        event: event,
+        newWidth: newWidth,
+        oldWidth: oldWidth,
+        end: end,
+        target: this
+      });
+    },
+    initColumns: function initColumns(columnElements, groupCount) {
+      var _this = this;
+
+      var idPrefix = navigationTools.getIdPrefix(this.navigation);
+      this._columns = readColumns(columnElements, this.getColumns(), {
+        prevId: 0,
+        idPrefix: idPrefix
+      });
+
+      if (this._columns.length === 0) {
+        var currentColumns = autoGenerateColumns(this.$props.dataItems, this.$props.group, this.$props.expandField, {
+          prevId: 0,
+          idPrefix: idPrefix
+        });
+        this._columns = currentColumns;
+      }
+
+      if (this.$props.selectedField) {
+        var that_1 = this;
+
+        this._columns.filter(function (c) {
+          return c.field === _this.$props.selectedField;
+        }).forEach(function (c) {
+          c.width = c.width || '50px';
+          c.internalCell = that_1.v3 ? markRaw(GridSelectionCell) : GridSelectionCell;
+          c.internalHeaderCell = that_1.v3 ? markRaw(GridHeaderSelectionCell) : GridHeaderSelectionCell;
+        });
+      }
+
+      var defaultServiceProps = {
+        id: '',
+        resizable: true,
+        width: '32px',
+        title: ' ',
+        declarationIndex: -1,
+        orderIndex: -1,
+        children: [],
+        parentIndex: -1,
+        depth: 0,
+        colSpan: 0,
+        rowSpan: 0,
+        left: 0,
+        right: 0,
+        // position: 'sticky',
+        index: 0,
+        rightBorder: false,
+        ariaColumnIndex: 0,
+        isAccessible: true
+      };
+      var columnIndexOffset = 0;
+
+      if (this.$props.expandField && hasListener.call(this, 'expandchange') && this.$props.detail) {
+        this._columns.unshift(__assign(__assign({}, defaultServiceProps), {
+          internalCell: this.v3 ? markRaw(GridHierarchyCell) : GridHierarchyCell,
+          field: this.$props.expandField,
+          headerClassName: 'k-hierarchy-cell k-header',
+          id: navigationTools.generateNavigatableId("".concat(this._columns.length), idPrefix, 'column')
+        }));
+
+        columnIndexOffset++;
+      }
+
+      for (var i = 0; i < groupCount; i++) {
+        this._columns.unshift(__assign(__assign({}, defaultServiceProps), {
+          isAccessible: false,
+          internalCell: this.v3 ? markRaw(GridGroupCell) : GridGroupCell,
+          field: 'value'
+        }));
+
+        columnIndexOffset++;
+      }
+
+      this._columns.slice(columnIndexOffset).forEach(function (c) {
+        return c.parentIndex >= 0 && (c.parentIndex += columnIndexOffset);
+      });
+
+      this._columnsMap = mapColumns(this._columns);
+      this.columnResize.columns = this._columns;
+      this.dragLogic.columns = this._columns;
+    },
+    resolveTitle: function resolveTitle(field) {
+      var column = this.findColumnByField(field);
+      var title = column && (column.title || column.field);
+      return title === undefined ? field : title;
+    },
+    findColumnByField: function findColumnByField(field) {
+      var _this = this;
+
+      var column;
+      this.$props.columns.forEach(function (c) {
+        var columnFound = _this.searchColumn(c, field);
+
+        if (columnFound) {
+          column = columnFound;
+        }
+      });
+      return column;
+    },
+    searchColumn: function searchColumn(column, field) {
+      if (column.field === field) {
+        return column;
+      } else if (column.children) {
+        var i = void 0,
+            result = null;
+
+        for (i = 0; result == null && i < column.children.length; i++) {
+          result = this.searchColumn(column.children[i], field);
+        }
+
+        return result;
+      }
+
+      return null;
+    },
+    getDataState: function getDataState() {
+      return {
+        filter: this.$props.filter,
+        sort: this.$props.sort,
+        skip: this.$props.skip,
+        take: this.$props.take !== undefined ? this.$props.take : this.$props.pageSize,
+        group: this.$props.group
+      };
+    },
+    getArguments: function getArguments(event) {
+      return {
+        event: event,
+        target: this
+      };
+    },
+    getLeafDataItems: function getLeafDataItems() {
+      return this.currentData.filter(function (item) {
+        return item.rowType === 'data';
+      }).map(function (item) {
+        return item.dataItem;
+      });
+    },
+    totalGroupedRows: function totalGroupedRows(gridData) {
+      var allRowsCount = 0;
+
+      if (gridData) {
+        allRowsCount = this.addSubItems(gridData, allRowsCount);
+      }
+
+      return allRowsCount;
+    },
+    addSubItems: function addSubItems(gridData, allRowsCount) {
+      var _this = this;
+
+      gridData.forEach(function (item) {
+        allRowsCount++;
+
+        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') {
+          allRowsCount++;
+        }
+      });
+      return allRowsCount;
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var groupPanelDivRef = ref(null);
+    var dropElementClueRef = ref(null);
+    var dragElementClueRef = ref(null);
+    var headerRef = ref(null);
+    var footerRef = ref(null);
+    var gridNavRef = ref(null);
+    var colGroupRef = ref(null);
+    var scrollContainerRef = ref(null);
+    var scrollTableRef = ref(null);
+    var scrollTableBodyRef = ref(null);
+    return {
+      v3: v3,
+      groupPanelDivRef: groupPanelDivRef,
+      dropElementClueRef: dropElementClueRef,
+      dragElementClueRef: dragElementClueRef,
+      headerRef: headerRef,
+      footerRef: footerRef,
+      gridNavRef: gridNavRef,
+      colGroupRef: colGroupRef,
+      scrollContainerRef: scrollContainerRef,
+      scrollTableRef: scrollTableRef,
+      scrollTableBodyRef: scrollTableBodyRef
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this3 = this;
+
+    var _this = this;
+
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    var total = this.$props.total || 0;
+    var idPrefix = navigationTools.getIdPrefix(this.navigation);
+    var gridData = [];
+
+    if (Array.isArray(this.$props.dataItems)) {
+      gridData = this.$props.dataItems;
+    } else if (this.$props.dataItems) {
+      gridData = applyExpandedState(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField).data;
+      total = total || this.$props.dataItems.total;
+    }
+
+    var groupable = this.$props.groupable === true || isObject(this.$props.groupable) && this.$props.groupable.enabled !== false;
+    this.columnResize.resizable = this.$props.resizable || false;
+    this.dragLogic.reorderable = this.$props.reorderable || false;
+    this.dragLogic.groupable = groupable;
+    this.resetVirtual();
+    this.vs.total = total;
+
+    if (this.$props.rowHeight !== undefined && this.$props.rowHeight > 0 && !this.currentGroupable) {
+      this.vs.containerHeight = Math.min(1533915, this.$props.rowHeight * (total || 0));
+    } else {
+      if (this.$props.totalGroupedHeight) {
+        this.vs.containerHeight = Math.min(1533915, this.$props.totalGroupedHeight);
+      } else if (this.$props.allGroupedItems && this.$props.allGroupedItems.data) {
+        var allGroupedTotal = this.totalGroupedRows(applyExpandedState(this.$props.allGroupedItems, this.computedCollapsed, this.$props.uniqueField).data);
+        this.vs.containerHeight = Math.min(1533915, this.$props.rowHeight * allGroupedTotal);
+      } else {
+        this.vs.containerHeight = 1533915;
+      }
+    }
+
+    var children = defaultSlot || [];
+    var groupingFooter = isObject(this.$props.groupable) && this.$props.groupable.footer || 'none';
+    this.currentData = [];
+    var resolvedGroupsCount = flatData(this.currentData, gridData, groupingFooter, {
+      index: this.$props.skip || 0
+    }, this.$props.group !== undefined, this.$props.expandField);
+    var notHiddenColumns = this.$props.columns ? this.$props.columns.filter(function (column) {
+      return !column.hidden;
+    }) : this.$props.columns;
+    this.initColumns(notHiddenColumns, resolvedGroupsCount);
+    var toolbar = children.filter(function (child) {
+      return child && child.tag && child.tag.toLowerCase().indexOf('toolbar') !== -1 || child.componentOptions && child.componentOptions.tag && child.componentOptions.tag.toLowerCase().indexOf('toolbar') !== -1 || child.type && child.type.name && child.type.name.toLowerCase().indexOf('toolbar') !== -1;
+    });
+    var noRecords = children.filter(function (child) {
+      return child && child.tag && child.tag.toLowerCase().indexOf('records') !== -1 || child.componentOptions && child.componentOptions.tag && child.componentOptions.tag.toLowerCase().indexOf('records') !== -1 || child.type && child.type.name && child.type.name.toLowerCase().indexOf('records') !== -1;
+    });
+
+    var columnsWithColGroup = this._columns.filter(function (c) {
+      return c.children.length === 0;
+    }); // @ts-ignore
+
+
+    var groupingPanel = groupable && h(GroupPanel, {
+      ref: this.v3 ? function (el) {
+        _this.groupPanelDivRef = el;
+      } : 'groupPanelDiv',
+      group: this.$props.group || [],
+      attrs: this.v3 ? undefined : {
+        group: this.$props.group || [],
+        resolveTitle: this.resolveTitle
+      },
+      onGroupChange: this.groupChangeHandler,
+      on: this.v3 ? undefined : {
+        "groupChange": this.groupChangeHandler,
+        "pressHandler": this.dragLogic.pressHandler,
+        "dragHandler": this.dragLogic.dragHandler,
+        "releaseHandler": this.dragLogic.releaseHandler
+      },
+      onPressHandler: this.dragLogic.pressHandler,
+      onDragHandler: this.dragLogic.dragHandler,
+      onReleaseHandler: this.dragLogic.releaseHandler,
+      resolveTitle: this.resolveTitle
+    });
+    var clues = (this.dragLogic.reorderable || this.dragLogic.groupable) && canUseDOM && document && document.body // @ts-ignore
+    && [h(DropClue, {
+      ref: this.v3 ? function (el) {
+        _this.dropElementClueRef = el;
+      } : 'dropElementClue'
+    }), // @ts-ignore
+    h(DragClue, {
+      ref: this.v3 ? function (el) {
+        _this.dragElementClueRef = el;
+      } : 'dragElementClue'
+    })]; // @ts-ignore
+
+    var header = h(Header, {
+      columnResize: this.columnResize,
+      attrs: this.v3 ? undefined : {
+        columnResize: this.columnResize,
+        staticHeaders: this.$props.scrollable !== 'none',
+        // @ts-ignore
+        headerRow: h(HeaderRow, {
+          grid: this,
+          attrs: this.v3 ? undefined : {
+            grid: this,
+            sort: this.$props.sort,
+            groupable: this.$props.groupable,
+            reorderable: this.$props.reorderable,
+            sortable: this.$props.sortable,
+            filter: this.$props.filter,
+            filterable: this.$props.filterable,
+            filterOperators: this.$props.filterOperators || operators,
+            columnMenu: this.$props.columnMenu,
+            columnMenuAnimate: this.$props.columnMenuAnimate,
+            columns: this._columns,
+            columnResize: this.columnResize,
+            columnsMap: this._columnsMap,
+            cellRender: this.$props.headerCellRender,
+            isRtl: this.isRtl,
+            filterRow: this.$props.filterable // @ts-ignore    
+            && h(FilterRow, {
+              grid: this,
+              attrs: this.v3 ? undefined : {
+                grid: this,
+                columns: this._columns,
+                filter: this.$props.filter,
+                filterOperators: this.$props.filterOperators || operators,
+                sort: this.$props.sort,
+                cellRender: this.$props.filterCellRender,
+                isRtl: this.isRtl,
+                ariaRowIndex: this._columnsMap.length + 1
+              },
+              columns: this._columns,
+              filter: this.$props.filter,
+              filterOperators: this.$props.filterOperators || operators,
+              onFilterchange: this.filterChangeHandler,
+              on: this.v3 ? undefined : {
+                "filterchange": this.filterChangeHandler
+              },
+              sort: this.$props.sort,
+              cellRender: this.$props.filterCellRender,
+              isRtl: this.isRtl,
+              ariaRowIndex: this._columnsMap.length + 1
+            }) || undefined
+          },
+          sort: this.$props.sort,
+          groupable: this.$props.groupable,
+          reorderable: this.$props.reorderable,
+          sortable: this.$props.sortable,
+          onSortChange: this.sortChangeHandler,
+          on: this.v3 ? undefined : {
+            "sortChange": this.sortChangeHandler,
+            "filterChange": this.filterChangeHandler,
+            "selectionchange": this.onHeaderSelectionChangeHandler,
+            "pressHandler": this.dragLogic.pressHandler,
+            "dragHandler": this.dragLogic.dragHandler,
+            "releaseHandler": this.dragLogic.releaseHandler
+          },
+          filter: this.$props.filter,
+          filterable: this.$props.filterable,
+          filterOperators: this.$props.filterOperators || operators,
+          onFilterChange: this.filterChangeHandler,
+          columnMenu: this.$props.columnMenu,
+          columnMenuAnimate: this.$props.columnMenuAnimate,
+          onSelectionchange: this.onHeaderSelectionChangeHandler,
+          columns: this._columns,
+          columnResize: this.columnResize,
+          onPressHandler: this.dragLogic.pressHandler,
+          onDragHandler: this.dragLogic.dragHandler,
+          onReleaseHandler: this.dragLogic.releaseHandler,
+          columnsMap: this._columnsMap,
+          cellRender: this.$props.headerCellRender,
+          isRtl: this.isRtl,
+          filterRow: this.$props.filterable && h(FilterRow, {
+            grid: this,
+            attrs: this.v3 ? undefined : {
+              grid: this,
+              columns: this._columns,
+              filter: this.$props.filter,
+              filterOperators: this.$props.filterOperators || operators,
+              sort: this.$props.sort,
+              cellRender: this.$props.filterCellRender,
+              isRtl: this.isRtl,
+              ariaRowIndex: this._columnsMap.length + 1
+            },
+            columns: this._columns,
+            filter: this.$props.filter,
+            filterOperators: this.$props.filterOperators || operators,
+            onFilterchange: this.filterChangeHandler,
+            on: this.v3 ? undefined : {
+              "filterchange": this.filterChangeHandler
+            },
+            sort: this.$props.sort,
+            cellRender: this.$props.filterCellRender,
+            isRtl: this.isRtl,
+            ariaRowIndex: this._columnsMap.length + 1
+          }) || undefined
+        }),
+        cols: columnsWithColGroup.map(function (column, index) {
+          return h("col", {
+            key: index.toString(),
+            width: column.width !== undefined ? Math.floor(parseFloat(column.width.toString())) + 'px' : undefined,
+            attrs: this.v3 ? undefined : {
+              width: column.width !== undefined ? Math.floor(parseFloat(column.width.toString())) + 'px' : undefined
+            }
+          });
+        }, this)
+      },
+      staticHeaders: this.$props.scrollable !== 'none',
+      ref: this.v3 ? function (el) {
+        _this.headerRef = el;
+      } : 'header',
+      headerRow: h(HeaderRow, {
+        grid: this,
+        attrs: this.v3 ? undefined : {
+          grid: this,
+          sort: this.$props.sort,
+          groupable: this.$props.groupable,
+          reorderable: this.$props.reorderable,
+          sortable: this.$props.sortable,
+          filter: this.$props.filter,
+          filterable: this.$props.filterable,
+          filterOperators: this.$props.filterOperators || operators,
+          columnMenu: this.$props.columnMenu,
+          columnMenuAnimate: this.$props.columnMenuAnimate,
+          columns: this._columns,
+          columnResize: this.columnResize,
+          columnsMap: this._columnsMap,
+          cellRender: this.$props.headerCellRender,
+          isRtl: this.isRtl,
+          filterRow: this.$props.filterable && h(FilterRow, {
+            grid: this,
+            attrs: this.v3 ? undefined : {
+              grid: this,
+              columns: this._columns,
+              filter: this.$props.filter,
+              filterOperators: this.$props.filterOperators || operators,
+              sort: this.$props.sort,
+              cellRender: this.$props.filterCellRender,
+              isRtl: this.isRtl,
+              ariaRowIndex: this._columnsMap.length + 1
+            },
+            columns: this._columns,
+            filter: this.$props.filter,
+            filterOperators: this.$props.filterOperators || operators,
+            onFilterchange: this.filterChangeHandler,
+            on: this.v3 ? undefined : {
+              "filterchange": this.filterChangeHandler
+            },
+            sort: this.$props.sort,
+            cellRender: this.$props.filterCellRender,
+            isRtl: this.isRtl,
+            ariaRowIndex: this._columnsMap.length + 1
+          }) || undefined
+        },
+        sort: this.$props.sort,
+        groupable: this.$props.groupable,
+        reorderable: this.$props.reorderable,
+        sortable: this.$props.sortable,
+        onSortChange: this.sortChangeHandler,
+        on: this.v3 ? undefined : {
+          "sortChange": this.sortChangeHandler,
+          "filterChange": this.filterChangeHandler,
+          "selectionchange": this.onHeaderSelectionChangeHandler,
+          "pressHandler": this.dragLogic.pressHandler,
+          "dragHandler": this.dragLogic.dragHandler,
+          "releaseHandler": this.dragLogic.releaseHandler
+        },
+        filter: this.$props.filter,
+        filterable: this.$props.filterable,
+        filterOperators: this.$props.filterOperators || operators,
+        onFilterChange: this.filterChangeHandler,
+        columnMenu: this.$props.columnMenu,
+        columnMenuAnimate: this.$props.columnMenuAnimate,
+        onSelectionchange: this.onHeaderSelectionChangeHandler,
+        columns: this._columns,
+        columnResize: this.columnResize,
+        onPressHandler: this.dragLogic.pressHandler,
+        onDragHandler: this.dragLogic.dragHandler,
+        onReleaseHandler: this.dragLogic.releaseHandler,
+        columnsMap: this._columnsMap,
+        cellRender: this.$props.headerCellRender,
+        isRtl: this.isRtl,
+        filterRow: this.$props.filterable && h(FilterRow, {
+          grid: this,
+          attrs: this.v3 ? undefined : {
+            grid: this,
+            columns: this._columns,
+            filter: this.$props.filter,
+            filterOperators: this.$props.filterOperators || operators,
+            sort: this.$props.sort,
+            cellRender: this.$props.filterCellRender,
+            isRtl: this.isRtl,
+            ariaRowIndex: this._columnsMap.length + 1
+          },
+          columns: this._columns,
+          filter: this.$props.filter,
+          filterOperators: this.$props.filterOperators || operators,
+          onFilterchange: this.filterChangeHandler,
+          on: this.v3 ? undefined : {
+            "filterchange": this.filterChangeHandler
+          },
+          sort: this.$props.sort,
+          cellRender: this.$props.filterCellRender,
+          isRtl: this.isRtl,
+          ariaRowIndex: this._columnsMap.length + 1
+        }) || undefined
+      }),
+      cols: columnsWithColGroup.map(function (column, index) {
+        return h("col", {
+          key: index.toString(),
+          width: column.width !== undefined ? Math.floor(parseFloat(column.width.toString())) + 'px' : undefined,
+          attrs: this.v3 ? undefined : {
+            width: column.width !== undefined ? Math.floor(parseFloat(column.width.toString())) + 'px' : undefined
+          }
+        });
+      }, this)
+    });
+    var footer = this._columns.some(function (c) {
+      return Boolean(c.footerCell);
+    }) ? // @ts-ignore
+    h(Footer, {
+      columnResize: this.columnResize,
+      attrs: this.v3 ? undefined : {
+        columnResize: this.columnResize,
+        staticHeaders: this.$props.scrollable !== 'none',
+        row: // @ts-ignore
+        h(FooterRow, {
+          isRtl: this.isRtl,
+          attrs: this.v3 ? undefined : {
+            isRtl: this.isRtl,
+            columns: this._columns.map(function (col) {
+              return __assign(__assign({}, col), {
+                footerCell: templateRendering.call(this, col.footerCell, getListeners.call(this))
+              });
+            }, this)
+          },
+          columns: this._columns.map(function (col) {
+            return __assign(__assign({}, col), {
+              footerCell: templateRendering.call(this, col.footerCell, getListeners.call(this))
+            });
+          }, this)
+        }),
+        cols: columnsWithColGroup.map(function (column, index) {
+          return h("col", {
+            key: index.toString(),
+            width: column.width !== undefined ? Math.floor(parseFloat(column.width.toString())) + 'px' : undefined,
+            attrs: this.v3 ? undefined : {
+              width: column.width !== undefined ? Math.floor(parseFloat(column.width.toString())) + 'px' : undefined
+            }
+          });
+        }, this)
+      },
+      staticHeaders: this.$props.scrollable !== 'none',
+      ref: this.v3 ? function (el) {
+        _this.footerRef = el;
+      } : 'footer',
+      row: h(FooterRow, {
+        isRtl: this.isRtl,
+        attrs: this.v3 ? undefined : {
+          isRtl: this.isRtl,
+          columns: this._columns.map(function (col) {
+            return __assign(__assign({}, col), {
+              footerCell: templateRendering.call(this, col.footerCell, getListeners.call(this))
+            });
+          }, this)
+        },
+        columns: this._columns.map(function (col) {
+          return __assign(__assign({}, col), {
+            footerCell: templateRendering.call(this, col.footerCell, getListeners.call(this))
+          });
+        }, this)
+      }),
+      cols: columnsWithColGroup.map(function (column, index) {
+        return h("col", {
+          key: index.toString(),
+          width: column.width !== undefined ? Math.floor(parseFloat(column.width.toString())) + 'px' : undefined,
+          attrs: this.v3 ? undefined : {
+            width: column.width !== undefined ? Math.floor(parseFloat(column.width.toString())) + 'px' : undefined
+          }
+        });
+      }, this)
+    }) : h("span");
+    var cellRenderFunction = templateRendering.call(this, this.$props.cellRender, getListeners.call(this));
+    var leftWidth = 0;
+    var vnodeDataStyle = this.v3 ? this.$attrs.style : this.$vnode && this.$vnode.data ? this.$vnode.data.style : null;
+    var widthProp = 'width';
+    var elementInlineStyleWidth = vnodeDataStyle && isObject(vnodeDataStyle) ? vnodeDataStyle[widthProp] || '' : '';
+    var tableWidth = parseFloat(elementInlineStyleWidth.toString());
+    var scrollLeft = this.vs && this.vs.container && this.vs.container.scrollLeft || 0;
+
+    var _a = tableColumnsVirtualization({
+      enabled: this.$props.columnVirtualization,
+      columns: this._columns,
+      tableViewPortWidth: tableWidth,
+      scrollLeft: scrollLeft
+    }),
+        colSpans = _a.colSpans,
+        isColHidden = _a.hiddenColumns;
+
+    var dataRow = function dataRow(item, rowId, rowDataIndex) {
+      var isInEdit = false;
+      var selectedValue = this.$props.selectedField ? getNestedValue(this.$props.selectedField, item.dataItem) : undefined;
+      return {
+        row: this._columns.map(function (column, index) {
+          var _this = this;
+
+          if (isColHidden[index]) {
+            return null;
+          }
+
+          var className = "".concat(column.className ? column.className + ' ' : '') + "".concat(column.locked ? 'k-grid-content-sticky' : '');
+          var style = column.left !== undefined ? !this.isRtl ? {
+            left: column.left + 'px',
+            right: column.right + 'px'
+          } : {
+            left: column.right + 'px',
+            right: column.left + 'px'
+          } : {};
+          var currentColumnIsInEdit = false;
+
+          if (column.editable && this.$props.editField) {
+            var inEdit = getNestedValue(this.$props.editField, item.dataItem);
+
+            if (inEdit === true || inEdit === column.field) {
+              isInEdit = true;
+              currentColumnIsInEdit = true;
+            }
+          }
+
+          var columnCellRenderFunction;
+
+          if (column.cell) {
+            columnCellRenderFunction = templateRendering.call(this, column.cell, getListeners.call(this));
+          }
+
+          var isCollapsed = this.computedCollapsed && this.computedCollapsed[item.level] && this.computedCollapsed[item.level].some(function (c) {
+            return c === groupedFirstItemValue(item.dataItem, _this.$props.uniqueField);
+          });
+          var isExpanded = isCollapsed ? !isCollapsed : item.expanded;
+
+          if (column.internalCell) {
+            return h(column.internalCell, {
+              key: index,
+              id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(index)), idPrefix),
+              attrs: this.v3 ? undefined : {
+                id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(index)), idPrefix),
+                colSpan: colSpans[index],
+                dataItem: item.dataItem,
+                field: column.field || '',
+                editor: column.editor,
+                format: column.format,
+                readFormat: column.readFormat,
+                type: column.type,
+                className: className,
+                render: columnCellRenderFunction || cellRenderFunction,
+                columnIndex: index,
+                columnsCount: this._columns.filter(function (c) {
+                  return !c.children.length;
+                }).length,
+                rowType: item.rowType,
+                level: item.level,
+                expanded: isExpanded,
+                dataIndex: item.dataIndex,
+                ariaColumnIndex: column.ariaColumnIndex,
+                isSelected: Array.isArray(selectedValue) && selectedValue.indexOf(index) > -1
+              },
+              colSpan: colSpans[index],
+              dataItem: item.dataItem,
+              field: column.field || '',
+              editor: column.editor,
+              format: column.format,
+              readFormat: column.readFormat,
+              type: column.type,
+              className: className,
+              render: columnCellRenderFunction || cellRenderFunction,
+              onChange: this.itemChange,
+              on: this.v3 ? undefined : {
+                "change": this.itemChange,
+                "selectionchange": function selectionchange(e) {
+                  return _this.selectionChangeHandler({
+                    event: e,
+                    dataItem: item.dataItem,
+                    dataIndex: rowDataIndex,
+                    columnIndex: index
+                  });
+                }
+              },
+              onSelectionchange: function selectionchange(e) {
+                return _this.selectionChangeHandler({
+                  event: e,
+                  dataItem: item.dataItem,
+                  dataIndex: rowDataIndex,
+                  columnIndex: index
+                });
+              },
+              columnIndex: index,
+              columnsCount: this._columns.filter(function (c) {
+                return !c.children.length;
+              }).length,
+              rowType: item.rowType,
+              level: item.level,
+              expanded: isExpanded,
+              dataIndex: item.dataIndex,
+              style: style,
+              ariaColumnIndex: column.ariaColumnIndex,
+              isSelected: Array.isArray(selectedValue) && selectedValue.indexOf(index) > -1
+            });
+          }
+
+          if (currentColumnIsInEdit) {
+            // @ts-ignore
+            return h(GridEditCell, {
+              id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(index)), idPrefix),
+              attrs: this.v3 ? undefined : {
+                id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(index)), idPrefix),
+                colSpan: colSpans[index],
+                dataItem: item.dataItem,
+                field: column.field || '' // todo
+                ,
+                editor: column.editor,
+                format: column.format,
+                readFormat: column.readFormat,
+                type: column.type,
+                className: className,
+                render: columnCellRenderFunction || cellRenderFunction,
+                columnIndex: index,
+                columnsCount: this._columns.filter(function (c) {
+                  return !c.children.length;
+                }).length,
+                rowType: item.rowType,
+                level: item.level,
+                expanded: isExpanded,
+                dataIndex: item.dataIndex
+              },
+              key: index,
+              colSpan: colSpans[index],
+              dataItem: item.dataItem,
+              field: column.field || '',
+              editor: column.editor,
+              format: column.format,
+              readFormat: column.readFormat,
+              type: column.type,
+              className: className,
+              render: columnCellRenderFunction || cellRenderFunction,
+              onEdit: this.editHandler,
+              on: this.v3 ? undefined : {
+                "edit": this.editHandler,
+                "remove": this.removeHandler,
+                "save": this.saveHandler,
+                "cancel": this.cancelHandler,
+                "change": this.itemChange
+              },
+              onRemove: this.removeHandler,
+              onSave: this.saveHandler,
+              onCancel: this.cancelHandler,
+              onChange: this.itemChange,
+              columnIndex: index,
+              columnsCount: this._columns.filter(function (c) {
+                return !c.children.length;
+              }).length,
+              rowType: item.rowType,
+              level: item.level,
+              expanded: isExpanded,
+              dataIndex: item.dataIndex,
+              style: style
+            });
+          } // @ts-ignore
+
+
+          var inbuiltSlot = h(GridCell, {
+            key: index,
+            id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(index)), idPrefix),
+            attrs: this.v3 ? undefined : {
+              id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(index)), idPrefix),
+              colSpan: colSpans[index],
+              dataItem: item.dataItem,
+              field: column.field || '' // todo
+              ,
+              editor: column.editor,
+              format: column.format,
+              readFormat: column.readFormat,
+              type: column.type,
+              className: className,
+              render: columnCellRenderFunction || cellRenderFunction,
+              columnIndex: index,
+              columnsCount: this._columns.filter(function (c) {
+                return !c.children.length;
+              }).length,
+              rowType: item.rowType,
+              level: item.level,
+              expanded: isExpanded,
+              dataIndex: item.dataIndex
+            },
+            colSpan: colSpans[index],
+            dataItem: item.dataItem,
+            field: column.field || '',
+            editor: column.editor,
+            format: column.format,
+            readFormat: column.readFormat,
+            type: column.type,
+            className: className,
+            render: columnCellRenderFunction || cellRenderFunction,
+            onCellclick: this.cellClickHandler,
+            on: this.v3 ? undefined : {
+              "cellclick": this.cellClickHandler,
+              "cellkeydown": this.cellKeydownHandler,
+              "edit": this.editHandler,
+              "remove": this.removeHandler,
+              "save": this.saveHandler,
+              "cancel": this.cancelHandler,
+              "change": this.itemChange,
+              "selectionchange": function selectionchange(e) {
+                return _this.selectionChangeHandler({
+                  event: e,
+                  dataItem: item.dataItem,
+                  dataIndex: rowDataIndex,
+                  columnIndex: index
+                });
+              }
+            },
+            onCellkeydown: this.cellKeydownHandler,
+            onEdit: this.editHandler,
+            onRemove: this.removeHandler,
+            onSave: this.saveHandler,
+            onCancel: this.cancelHandler,
+            onChange: this.itemChange,
+            onSelectionchange: function selectionchange(e) {
+              return _this.selectionChangeHandler({
+                event: e,
+                dataItem: item.dataItem,
+                dataIndex: rowDataIndex,
+                columnIndex: index
+              });
+            },
+            columnIndex: index,
+            columnsCount: this._columns.filter(function (c) {
+              return !c.children.length;
+            }).length,
+            rowType: item.rowType,
+            level: item.level,
+            expanded: isExpanded,
+            dataIndex: item.dataIndex,
+            style: style
+          });
+          return inbuiltSlot;
+        }, this),
+        isInEdit: isInEdit,
+        isSelected: typeof selectedValue === 'boolean' && selectedValue
+      };
+    };
+
+    var hiddenRows = 0;
+
+    if (this.$props.scrollable === 'virtual' && this.totalGroupedRows(this.currentData) / 2 > this.$props.take) {
+      var topIndex = this.vs.topCacheCount + this.vs.attendedSkip - (this.$props.skip || 0);
+
+      for (var i = 0; i < topIndex; i++) {
+        var item = this.currentData.shift();
+
+        if (item) {
+          this.currentData.push(item);
+          hiddenRows++;
+
+          if (item.rowType === 'groupHeader') {
+            i--;
+          }
+        } else {
+          break;
+        }
+      }
+    }
+
+    var hidden = function hidden(index) {
+      return index >= _this.currentData.length - hiddenRows;
+    };
+
+    var detailRenderFunction = templateRendering.call(this, this.$props.detail, getListeners.call(this));
+    var absoluteDataIndex = this.vs.propsSkip || 0;
+    var rowIndexStart = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
+    var currentAriaRowIndex;
+    var dataIndex = -1;
+    var detailRowCount = 0; // @ts-ignore
+
+    var body = this.currentData.length && this.currentData.map(function (item, rowIndex) {
+      var _this2 = this;
+
+      var _this = this;
+
+      if (item.rowType === 'data') {
+        absoluteDataIndex++;
+      }
+
+      if (this.$props.alternatePerGroup && item.rowType === 'groupHeader') {
+        absoluteDataIndex = 0;
+      }
+
+      var isAlt = absoluteDataIndex % 2 === 0;
+      var dataItemKey = this.$props.dataItemKey && getter(this.$props.dataItemKey)(item.dataItem);
+      var absoluteIndex = rowIndex + (this.vs.propsSkip || 0);
+      var rowId = dataItemKey ? dataItemKey : 'ai' + absoluteIndex;
+      var detailRowId = rowId + '_1';
+      currentAriaRowIndex = absoluteIndex + rowIndexStart + detailRowCount;
+      leftWidth = 0;
+      var rowRenderFunction = templateRendering.call(this, this.$props.rowRender, getListeners.call(this));
+      var detailColspan;
+
+      if (this.$props.detail && item.rowType === 'data' && item.expanded) {
+        detailColspan = columnsWithColGroup.length - (this.$props.expandField ? 1 : 0) - (this.$props.group ? this.$props.group.length : 0) || 1;
+        detailRowCount++;
+        currentAriaRowIndex = absoluteIndex + rowIndexStart + detailRowCount;
+      }
+
+      return [// @ts-ignore function children
+      h(GridRow, {
+        key: rowId,
+        dataItem: item.dataItem,
+        attrs: this.v3 ? undefined : {
+          dataItem: item.dataItem,
+          isAltRow: isAlt,
+          isInEdit: dataRow.isInEdit,
+          rowType: item.rowType,
+          isHidden: hidden(rowIndex),
+          selectedField: this.$props.selectedField,
+          rowHeight: this.$props.rowHeight,
+          render: rowRenderFunction,
+          ariaRowIndex: currentAriaRowIndex,
+          dataIndex: dataIndex,
+          isSelected: dataRow.isSelected
+        },
+        isAltRow: isAlt,
+        isInEdit: dataRow.isInEdit,
+        rowType: item.rowType,
+        isHidden: hidden(rowIndex),
+        onRowclick: function onRowclick(e) {
+          return _this.rowClick(e, item);
+        },
+        on: this.v3 ? undefined : {
+          "rowclick": function onRowclick(e) {
+            return _this.rowClick(e, item);
+          },
+          "rowdblclick": function rowdblclick(e) {
+            return _this.rowDoubleClick(e, item);
+          }
+        },
+        onRowdblclick: function rowdblclick(e) {
+          return _this.rowDoubleClick(e, item);
+        },
+        selectedField: this.$props.selectedField,
+        rowHeight: this.$props.rowHeight,
+        render: rowRenderFunction,
+        ariaRowIndex: currentAriaRowIndex,
+        dataIndex: dataIndex,
+        isSelected: dataRow.isSelected
+      }, this.v3 ? function () {
+        return [dataRow.call(_this2, item, rowId, dataIndex).row];
+      } : [dataRow.call(_this2, item, rowId, dataIndex).row]), this.$props.detail && item.rowType === 'data' && item.expanded && h("tr", {
+        key: detailRowId,
+        "class": isAlt ? 'k-detail-row k-alt' : 'k-detail-row',
+        style: {
+          visibility: hidden(rowIndex) ? 'hidden' : ''
+        },
+        role: "row",
+        attrs: this.v3 ? undefined : {
+          role: "row",
+          "aria-rowindex": currentAriaRowIndex
+        },
+        "aria-rowindex": currentAriaRowIndex
+      }, [this.$props.group && this.$props.group.map(function (group, idx) {
+        // @ts-ignore
+        return h(GridGroupCell, {
+          id: '',
+          attrs: this.v3 ? undefined : {
+            id: '',
+            dataIndex: item.dataIndex,
+            field: group.field,
+            dataItem: item.dataItem
+          },
+          dataIndex: item.dataIndex,
+          field: group.field,
+          dataItem: item.dataItem,
+          key: idx
+        });
+      }, this), this.$props.expandField && // @ts-ignore function children
+      h(GridDetailHierarchyCell, {
+        id: navigationTools.generateNavigatableId("".concat(detailRowId, "-dhcell"), idPrefix),
+        attrs: this.v3 ? undefined : {
+          id: navigationTools.generateNavigatableId("".concat(detailRowId, "-dhcell"), idPrefix)
+        }
+      }), // @ts-ignore function children
+      h(GridDetailCell, {
+        dataItem: item.dataItem,
+        attrs: this.v3 ? undefined : {
+          dataItem: item.dataItem,
+          dataIndex: item.dataIndex,
+          colSpan: detailColspan,
+          ariaColIndex: 2 + (this.$props.group ? this.$props.group.length : 0),
+          detail: this.$props.detail ? detailRenderFunction : undefined,
+          id: navigationTools.generateNavigatableId("".concat(detailRowId, "-dcell"), idPrefix)
+        },
+        dataIndex: item.dataIndex,
+        colSpan: detailColspan,
+        ariaColIndex: 2 + (this.$props.group ? this.$props.group.length : 0),
+        detail: this.$props.detail ? detailRenderFunction : undefined,
+        id: navigationTools.generateNavigatableId("".concat(detailRowId, "-dcell"), idPrefix)
+      })])];
+    }, this) || h("tr", {
+      "class": "k-grid-norecords"
+    }, [h("td", {
+      colspan: this._columns.filter(function (c) {
+        return !c.children.length;
+      }).length,
+      attrs: this.v3 ? undefined : {
+        colspan: this._columns.filter(function (c) {
+          return !c.children.length;
+        }).length
+      }
+    }, [// @ts-ignore
+    noRecords.length ? noRecords : h(GridNoRecords)])]);
+    var pagerTemplate = templateRendering.call(this, this.$props.pager, getListeners.call(this)); // @ts-ignore
+
+    var defaultPagerRendering = this.$props.pageable && h(Pager, {
+      "class": 'k-grid-pager',
+      onPagesizechange: this.pageChangeHandler,
+      on: this.v3 ? undefined : {
+        "pagesizechange": this.pageChangeHandler,
+        "pagechange": this.pageChangeHandler
+      },
+      onPagechange: this.pageChangeHandler,
+      total: total,
+      attrs: this.v3 ? undefined : {
+        total: total,
+        skip: this.vs.propsSkip || 0,
+        pageSize: (this.$props.take !== undefined ? this.$props.take : this.$props.pageSize) || 10,
+        messagesMap: pagerMessagesMap,
+        settings: normalize(this.$props.pageable || {})
+      },
+      skip: this.vs.propsSkip || 0,
+      pageSize: (this.$props.take !== undefined ? this.$props.take : this.$props.pageSize) || 10,
+      messagesMap: pagerMessagesMap,
+      settings: normalize(this.$props.pageable || {})
+    });
+    var pager = getTemplate.call(this, {
+      h: h,
+      template: pagerTemplate,
+      defaultRendering: defaultPagerRendering,
+      additionalProps: __assign(__assign({}, this.$props), {
+        skip: this.vs.propsSkip || 0,
+        messagesMap: pagerMessagesMap
+      }),
+      additionalListeners: {
+        pagesizechange: this.pageChangeHandler,
+        pagechange: this.pageChangeHandler
+      }
+    });
+
+    var sorted = function sorted(field) {
+      return _this.$props.sort && _this.$props.sort.filter(function (descriptor) {
+        return descriptor.field === field;
+      }).length > 0;
+    };
+
+    var colGroups = h("colgroup", {
+      role: "presentation",
+      attrs: this.v3 ? undefined : {
+        role: "presentation"
+      },
+      ref: setRef(this, 'colGroup')
+    }, [columnsWithColGroup.map(function (column, index) {
+      return h("col", {
+        key: index.toString(),
+        "class": sorted(column.field) ? 'k-sorted' : undefined,
+        width: column.width !== undefined ? Math.floor(parseFloat(column.width.toString())) + 'px' : undefined,
+        attrs: this.v3 ? undefined : {
+          width: column.width !== undefined ? Math.floor(parseFloat(column.width.toString())) + 'px' : undefined
+        }
+      });
+    }, this)]);
+    var wrapperStyle = {
+      height: this.getCorrectHeight
+    };
+    var loaderTemplate = templateRendering.call(this, this.$props.loader, getListeners.call(this));
+    var defaultLoaderRendering = this.$props.loader && h("div", {
+      "class": "k-loader-container k-loader-container-md k-loader-top"
+    }, [h("div", {
+      "class": "k-loader-container-overlay k-overlay-light"
+    }), h("div", {
+      "class": "k-loader-container-inner"
+    }, [h(Loader, {
+      size: 'large',
+      attrs: this.v3 ? undefined : {
+        size: 'large',
+        type: 'infinite-spinner'
+      },
+      type: 'infinite-spinner'
+    })])]);
+    var loader = getTemplate.call(this, {
+      h: h,
+      template: loaderTemplate,
+      defaultRendering: defaultLoaderRendering
+    });
+
+    if (this.$props.scrollable === 'none') {
+      return (// @ts-ignore function children
+        h(TableKeyboardNavigationProvider, {
+          ref: 'navRef',
+          id: this._gridId,
+          attrs: this.v3 ? undefined : {
+            id: this._gridId,
+            navigatable: this.$props.navigatable
+          },
+          navigatable: this.$props.navigatable
+        }, this.v3 ? function () {
+          return [// @ts-ignore function children
+          h(GridNav, {
+            ref: _this3.v3 ? function (el) {
+              _this.gridNavRef = el;
+            } : 'gridNav',
+            currentData: _this3.currentData,
+            attrs: _this3.v3 ? undefined : {
+              currentData: _this3.currentData,
+              role: "grid"
+            },
+            style: wrapperStyle,
+            role: "grid",
+            "class": "k-widget k-grid"
+          }, _this3.v3 ? function () {
+            return [toolbar, groupingPanel, h("table", {
+              style: {
+                tableLayout: 'fixed'
+              }
+            }, [colGroups, header, h("tbody", {
+              "data-keyboardnavbody": true,
+              attrs: _this3.v3 ? undefined : {
+                "data-keyboardnavbody": true
+              }
+            }, [body, loader]), footer]), pager, clues];
+          } : [toolbar, groupingPanel, h("table", {
+            style: {
+              tableLayout: 'fixed'
+            }
+          }, [colGroups, header, h("tbody", {
+            "data-keyboardnavbody": true,
+            attrs: _this3.v3 ? undefined : {
+              "data-keyboardnavbody": true
+            }
+          }, [body, loader]), footer]), pager, clues])];
+        } : [h(GridNav, {
+          ref: _this3.v3 ? function (el) {
+            _this.gridNavRef = el;
+          } : 'gridNav',
+          currentData: _this3.currentData,
+          attrs: _this3.v3 ? undefined : {
+            currentData: _this3.currentData,
+            role: "grid"
+          },
+          style: wrapperStyle,
+          role: "grid",
+          "class": "k-widget k-grid"
+        }, _this3.v3 ? function () {
+          return [toolbar, groupingPanel, h("table", {
+            style: {
+              tableLayout: 'fixed'
+            }
+          }, [colGroups, header, h("tbody", {
+            "data-keyboardnavbody": true,
+            attrs: _this3.v3 ? undefined : {
+              "data-keyboardnavbody": true
+            }
+          }, [body, loader]), footer]), pager, clues];
+        } : [toolbar, groupingPanel, h("table", {
+          style: {
+            tableLayout: 'fixed'
+          }
+        }, [colGroups, header, h("tbody", {
+          "data-keyboardnavbody": true,
+          attrs: _this3.v3 ? undefined : {
+            "data-keyboardnavbody": true
+          }
+        }, [body, loader]), footer]), pager, clues])])
+      );
+    }
+
+    return (// @ts-ignore function children
+      h(TableKeyboardNavigationProvider, {
+        ref: 'navRef',
+        id: this._gridId,
+        attrs: this.v3 ? undefined : {
+          id: this._gridId,
+          navigatable: this.$props.navigatable
+        },
+        navigatable: this.$props.navigatable
+      }, this.v3 ? function () {
+        return [// @ts-ignore function children
+        h(GridNav, {
+          ref: _this3.v3 ? function (el) {
+            _this.gridNavRef = el;
+          } : 'gridNav',
+          currentData: _this3.currentData,
+          attrs: _this3.v3 ? undefined : {
+            currentData: _this3.currentData,
+            role: "grid"
+          },
+          style: wrapperStyle,
+          role: "grid",
+          "class": 'k-widget k-grid' + (_this3.$props.scrollable === 'virtual' ? ' k-grid-virtual' : '')
+        }, _this3.v3 ? function () {
+          return [toolbar, groupingPanel, header, h("div", {
+            "class": "k-grid-container",
+            role: "presentation",
+            attrs: _this3.v3 ? undefined : {
+              role: "presentation"
+            }
+          }, [h("div", {
+            role: "presentation",
+            attrs: _this3.v3 ? undefined : {
+              role: "presentation"
+            },
+            ref: setRef(_this3, 'scrollContainer'),
+            "class": "k-grid-content k-virtual-content",
+            onScroll: _this3.scrollHandler,
+            on: _this3.v3 ? undefined : {
+              "scroll": _this3.scrollHandler
+            }
+          }, [h("div", {
+            style: {
+              'position': 'relative'
+            }
+          }, [h("table", {
+            role: "presentation",
+            attrs: _this3.v3 ? undefined : {
+              role: "presentation",
+              tabindex: -1
+            },
+            tabindex: -1,
+            "class": 'k-grid-table',
+            ref: setRef(_this3, 'scrollTable')
+          }, [colGroups, h("tbody", {
+            role: "presentation",
+            attrs: _this3.v3 ? undefined : {
+              role: "presentation",
+              "data-keyboardnavbody": true
+            },
+            "data-keyboardnavbody": true,
+            ref: setRef(_this3, 'scrollTableBody')
+          }, [body])])]), h("div", {
+            "class": "k-height-container",
+            role: "presentation",
+            attrs: _this3.v3 ? undefined : {
+              role: "presentation"
+            }
+          }, [h("div", {
+            style: _this3.$props.scrollable === 'virtual' ? {
+              'height': _this3.vs.containerHeight + 'px'
+            } : {}
+          })])]), loader]), footer, pager, clues];
+        } : [toolbar, groupingPanel, header, h("div", {
+          "class": "k-grid-container",
+          role: "presentation",
+          attrs: _this3.v3 ? undefined : {
+            role: "presentation"
+          }
+        }, [h("div", {
+          role: "presentation",
+          attrs: _this3.v3 ? undefined : {
+            role: "presentation"
+          },
+          ref: setRef(_this3, 'scrollContainer'),
+          "class": "k-grid-content k-virtual-content",
+          onScroll: _this3.scrollHandler,
+          on: _this3.v3 ? undefined : {
+            "scroll": _this3.scrollHandler
+          }
+        }, [h("div", {
+          style: {
+            'position': 'relative'
+          }
+        }, [h("table", {
+          role: "presentation",
+          attrs: _this3.v3 ? undefined : {
+            role: "presentation",
+            tabindex: -1
+          },
+          tabindex: -1,
+          "class": 'k-grid-table',
+          ref: setRef(_this3, 'scrollTable')
+        }, [colGroups, h("tbody", {
+          role: "presentation",
+          attrs: _this3.v3 ? undefined : {
+            role: "presentation",
+            "data-keyboardnavbody": true
+          },
+          "data-keyboardnavbody": true,
+          ref: setRef(_this3, 'scrollTableBody')
+        }, [body])])]), h("div", {
+          "class": "k-height-container",
+          role: "presentation",
+          attrs: _this3.v3 ? undefined : {
+            role: "presentation"
+          }
+        }, [h("div", {
+          style: _this3.$props.scrollable === 'virtual' ? {
+            'height': _this3.vs.containerHeight + 'px'
+          } : {}
+        })])]), loader]), footer, pager, clues])];
+      } : [h(GridNav, {
+        ref: _this3.v3 ? function (el) {
+          _this.gridNavRef = el;
+        } : 'gridNav',
+        currentData: _this3.currentData,
+        attrs: _this3.v3 ? undefined : {
+          currentData: _this3.currentData,
+          role: "grid"
+        },
+        style: wrapperStyle,
+        role: "grid",
+        "class": 'k-widget k-grid' + (_this3.$props.scrollable === 'virtual' ? ' k-grid-virtual' : '')
+      }, _this3.v3 ? function () {
+        return [toolbar, groupingPanel, header, h("div", {
+          "class": "k-grid-container",
+          role: "presentation",
+          attrs: _this3.v3 ? undefined : {
+            role: "presentation"
+          }
+        }, [h("div", {
+          role: "presentation",
+          attrs: _this3.v3 ? undefined : {
+            role: "presentation"
+          },
+          ref: setRef(_this3, 'scrollContainer'),
+          "class": "k-grid-content k-virtual-content",
+          onScroll: _this3.scrollHandler,
+          on: _this3.v3 ? undefined : {
+            "scroll": _this3.scrollHandler
+          }
+        }, [h("div", {
+          style: {
+            'position': 'relative'
+          }
+        }, [h("table", {
+          role: "presentation",
+          attrs: _this3.v3 ? undefined : {
+            role: "presentation",
+            tabindex: -1
+          },
+          tabindex: -1,
+          "class": 'k-grid-table',
+          ref: setRef(_this3, 'scrollTable')
+        }, [colGroups, h("tbody", {
+          role: "presentation",
+          attrs: _this3.v3 ? undefined : {
+            role: "presentation",
+            "data-keyboardnavbody": true
+          },
+          "data-keyboardnavbody": true,
+          ref: setRef(_this3, 'scrollTableBody')
+        }, [body])])]), h("div", {
+          "class": "k-height-container",
+          role: "presentation",
+          attrs: _this3.v3 ? undefined : {
+            role: "presentation"
+          }
+        }, [h("div", {
+          style: _this3.$props.scrollable === 'virtual' ? {
+            'height': _this3.vs.containerHeight + 'px'
+          } : {}
+        })])]), loader]), footer, pager, clues];
+      } : [toolbar, groupingPanel, header, h("div", {
+        "class": "k-grid-container",
+        role: "presentation",
+        attrs: _this3.v3 ? undefined : {
+          role: "presentation"
+        }
+      }, [h("div", {
+        role: "presentation",
+        attrs: _this3.v3 ? undefined : {
+          role: "presentation"
+        },
+        ref: setRef(_this3, 'scrollContainer'),
+        "class": "k-grid-content k-virtual-content",
+        onScroll: _this3.scrollHandler,
+        on: _this3.v3 ? undefined : {
+          "scroll": _this3.scrollHandler
+        }
+      }, [h("div", {
+        style: {
+          'position': 'relative'
+        }
+      }, [h("table", {
+        role: "presentation",
+        attrs: _this3.v3 ? undefined : {
+          role: "presentation",
+          tabindex: -1
+        },
+        tabindex: -1,
+        "class": 'k-grid-table',
+        ref: setRef(_this3, 'scrollTable')
+      }, [colGroups, h("tbody", {
+        role: "presentation",
+        attrs: _this3.v3 ? undefined : {
+          role: "presentation",
+          "data-keyboardnavbody": true
+        },
+        "data-keyboardnavbody": true,
+        ref: setRef(_this3, 'scrollTableBody')
+      }, [body])])]), h("div", {
+        "class": "k-height-container",
+        role: "presentation",
+        attrs: _this3.v3 ? undefined : {
+          role: "presentation"
+        }
+      }, [h("div", {
+        style: _this3.$props.scrollable === 'virtual' ? {
+          'height': _this3.vs.containerHeight + 'px'
+        } : {}
+      })])]), loader]), footer, pager, clues])])
+    );
+  }
+};
+/**
+ * Represents the native Vue Grid component by Kendo UI.
+ *
+ * ```tsx-no-run
+ *   <div id="app">
+ *       <Grid
+ *           :data-items="products"
+ *           :columns="columns">
+ *        </Grid>
+ *   </div>
+ *   <script>
+ *       Vue.component('Grid', Grid);
+ *       new Vue({
+ *           el: '#app',
+ *           data: function () {
+ *               return {
+ *                  products: [
+ *                    { 'foo': 'A1', 'bar': 'B1' },
+ *                       { 'foo': 'A2', 'bar': 'B2' },
+ *                       { 'foo': 'A3', 'bar': 'B2' }
+ *                   ],
+ *                   columns: [
+ *                       { field: 'foo'},
+ *                       { field: 'bar'}
+ *                   ]
+ *               };
+ *           }
+ *       });
+ *   </script>
+ * ```
+ *
+ * ### props <span class='code'>[GridProps]({% slug api_grid_gridprops %})</span>
+ */
+
+var Grid = GridVue2;
+export { Grid, GridVue2 };