@progress/kendo-react-grid 5.11.0 → 5.11.1-dev.202302081554

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

@@ -212,6 +212,10 @@ export interface GridProps extends KendoReactComponentBaseProps {
      * Defines the row height and forces an equal height to all rows ([see example]({% slug scrollmodes_grid %})).
      */
     rowHeight?: number;
+    /**
+     * Defines the detail row height and forces an equal height to all detail rows.
+     */
+    detailRowHeight?: number;
     /**
      * Specifies a React element that will be cloned and rendered inside the detail rows of the currently expanded items ([see example]({% slug hierarchy_grid %})). An item will be rendered as expanded if the value of its `expandField` is `true`.
      */

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

@@ -0,0 +1,27 @@
+import { Page } from '../paging/Page';
+import { SyntheticEvent, RefObject } from 'react';
+import { RowHeightService } from '../VirtualScrollFixed';
+/**
+ * @hidden
+ */
+export interface VirtualScrollInterface {
+    get container(): HTMLDivElement | null;
+    askedSkip: number | undefined;
+    total: number;
+    reset: () => void;
+    table: HTMLTableElement | null;
+    tableBodyRef: RefObject<HTMLTableSectionElement>;
+    fixedScroll: boolean;
+    PageChange: ((event: Page, syntheticEvent: SyntheticEvent<any>) => void) | null;
+    realSkip: number;
+    pageSize: number;
+    scrollableVirtual: boolean;
+    propsSkip: number;
+    topCacheCount: number;
+    attendedSkip: number;
+    containerHeight: number;
+    containerRef: RefObject<HTMLDivElement>;
+    scrollHandler(e: SyntheticEvent<HTMLDivElement>): void;
+    rowHeightService?: RowHeightService;
+    tableTransform: string;
+}

package/dist/es/interfaces/VirtualScrollInterface.js

@@ -0,0 +1 @@
+export {};

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-grid',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1675429179,
+    publishDate: 1675870734,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/Grid.d.ts

@@ -93,6 +93,7 @@ export declare class Grid extends React.Component<GridProps, {}> {
         editField: PropTypes.Requireable<string>;
         scrollable: PropTypes.Requireable<string>;
         rowHeight: PropTypes.Requireable<number>;
+        detailRowHeight: PropTypes.Requireable<number>;
         detail: PropTypes.Requireable<any>;
         style: PropTypes.Requireable<object>;
         onDataStateChange: PropTypes.Requireable<(...args: any[]) => any>;
@@ -111,6 +112,7 @@ export declare class Grid extends React.Component<GridProps, {}> {
     private contextStateRef;
     private navigationStateRef;
     private _data;
+    private _slicedData;
     private wrapperScrollTop;
     /**
      * 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.
@@ -160,12 +162,15 @@ export declare class Grid extends React.Component<GridProps, {}> {
     private headerElementRef;
     private _element;
     private tableElement;
+    private containerRef;
+    private tableBodyRef;
     private vs;
     private columnResize;
     private _footer;
     private forceUpdateTimeout;
     private isRtl;
     private _gridId;
+    private _prevTotal;
     private get _header();
     constructor(props: GridProps);
     /**
@@ -202,6 +207,9 @@ export declare class Grid extends React.Component<GridProps, {}> {
      * @hidden
      */
     render(): JSX.Element;
+    private getVirtualScroll;
+    private isAllData;
+    private initializeVirtualization;
     private scrollHandler;
     private onKeyDown;
     private onFocus;
@@ -223,6 +231,8 @@ export declare class Grid extends React.Component<GridProps, {}> {
     private columnToGroup;
     private resetTableWidth;
     private onResize;
+    private flatData;
+    private rowHeightService;
     private childrenToArray;
     private readColumns;
     private mapColumns;

package/dist/npm/Grid.js

@@ -49,6 +49,7 @@ var FilterRow_1 = require("./header/FilterRow");
 var GroupPanel_1 = require("./header/GroupPanel");
 var Footer_1 = require("./footer/Footer");
 var VirtualScroll_1 = require("./VirtualScroll");
+var VirtualScrollFixed_1 = require("./VirtualScrollFixed");
 var ColumnResize_1 = require("./drag/ColumnResize");
 var CommonDragLogic_1 = require("./drag/CommonDragLogic");
 var index_1 = require("./utils/index");
@@ -106,15 +107,19 @@ var Grid = /** @class */ (function (_super) {
         _this.contextStateRef = { current: undefined };
         _this.navigationStateRef = { current: undefined };
         _this._data = [];
+        _this._slicedData = undefined;
         _this.wrapperScrollTop = 0;
         _this.headerRef = React.createRef();
         _this.headerElementRef = React.createRef();
         _this._element = null;
         _this.tableElement = null;
+        _this.containerRef = React.createRef();
+        _this.tableBodyRef = React.createRef();
         _this._footer = null;
         _this.forceUpdateTimeout = undefined;
         _this.isRtl = false;
         _this._gridId = (0, kendo_react_common_1.guid)();
+        _this._prevTotal = undefined;
         /**
          * Method to allow the scroll to be set to a specific row index.
          *
@@ -146,11 +151,77 @@ var Grid = /** @class */ (function (_super) {
         _this.fitColumns = function (columnIds) {
             _this.columnResize.dblClickHandler(null, columnIds);
         };
+        _this.getVirtualScroll = function (props) {
+            var rowHeight = props.rowHeight, detailRowHeight = props.detailRowHeight, detail = props.detail, expandField = props.expandField, groupable = props.groupable;
+            var hasAllData = _this.isAllData();
+            var hasRowHeight = rowHeight !== undefined && rowHeight > 0;
+            var hasDetailRowHeight = detailRowHeight !== undefined && detailRowHeight > 0;
+            var isGroupable = groupable === true || (typeof groupable === 'object' && groupable.enabled !== false);
+            var hasDetails = Boolean(detail && expandField);
+            if (!hasRowHeight ||
+                (isGroupable && !hasAllData) ||
+                (hasDetails && (!hasDetailRowHeight || !hasAllData))) {
+                return VirtualScroll_1.VirtualScroll;
+            }
+            return VirtualScrollFixed_1.VirtualScrollFixed;
+        };
+        _this.isAllData = function () {
+            var _a = _this.props, data = _a.data, total = _a.total;
+            if (Array.isArray(data)) {
+                return data.length === total;
+            }
+            else if (data) {
+                return total === data.total;
+            }
+            return false;
+        };
+        _this.initializeVirtualization = function (total, groupable) {
+            if (_this.props.total !== _this._prevTotal || (_this.props.scrollable === 'virtual') !== _this.vs.scrollableVirtual) {
+                _this.vs.reset();
+                var VS = _this.getVirtualScroll(_this.props);
+                _this.vs = new VS(groupable || _this.props.rowHeight === undefined || _this.props.rowHeight === 0);
+            }
+            _this.vs.fixedScroll = _this.props.fixedScroll || false;
+            _this.vs.PageChange = _this.pageChange;
+            _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.total = total;
+            _this.vs.propsSkip = (_this.props.skip || 0) + (_this.props.scrollable === 'virtual' ?
+                _this.vs.topCacheCount + (_this.vs.attendedSkip - (_this.props.skip || 0)) : 0);
+            if (_this.props.rowHeight !== undefined && _this.props.rowHeight > 0 && !groupable) {
+                var containerHeight = _this.props.rowHeight * total;
+                _this.vs.containerHeight = index_1.firefox ? Math.min(index_1.firefoxMaxHeight, containerHeight) : containerHeight;
+            }
+            else {
+                _this.vs.containerHeight = 1533915;
+            }
+            _this.vs.containerRef = _this.containerRef;
+            _this.vs.tableBodyRef = _this.tableBodyRef;
+            _this.vs.table = _this.tableElement;
+            _this._slicedData = undefined;
+            if (_this.vs instanceof VirtualScrollFixed_1.VirtualScrollFixed) {
+                var _a = _this.props, _b = _a.rowHeight, rowHeight = _b === void 0 ? 0 : _b, detail = _a.detail, expandField = _a.expandField;
+                var _c = _this.props.detailRowHeight, detailRowHeight = _c === void 0 ? 0 : _c;
+                detailRowHeight = Boolean(detail && expandField) ? detailRowHeight : rowHeight;
+                if (_this.isAllData()) {
+                    _this.vs.total = _this._data.length;
+                    _this._slicedData = _this._data.slice(_this.vs.realSkip, _this.vs.realSkip + _this.vs.pageSize);
+                    _this.vs.rowHeightService = _this.rowHeightService(_this.vs, _this._data.length, rowHeight, detailRowHeight, _this._data);
+                }
+                else {
+                    _this.vs.rowHeightService = new VirtualScrollFixed_1.RowHeightService(total, rowHeight, detailRowHeight);
+                }
+                var containerHeight = _this.vs.rowHeightService.totalHeight();
+                _this.vs.containerHeight = index_1.firefox ? Math.min(index_1.firefoxMaxHeight, containerHeight) : containerHeight;
+            }
+        };
         _this.scrollHandler = function (event) {
             if (event.target !== event.currentTarget) {
                 return;
             }
             clearTimeout(_this.forceUpdateTimeout);
+            _this.vs.table = _this.tableElement;
             var scrollLeft = event.currentTarget.scrollLeft;
             var scrollTop = event.currentTarget.scrollTop;
             if (_this.props.columnVirtualization && (!_this.vs.scrollableVirtual || scrollTop === _this.wrapperScrollTop)) {
@@ -265,6 +336,14 @@ var Grid = /** @class */ (function (_super) {
                 });
             }
         };
+        _this.flatData = (0, kendo_react_common_1.memoizeOne)(function (propsData, groupingFooter, skip, group, expandField, _filter, _sort) {
+            var flattedData = [];
+            var resolvedGroupsCount = (0, index_1.flatData)(flattedData, propsData, groupingFooter, { index: skip }, group !== undefined, expandField);
+            return { flattedData: flattedData, resolvedGroupsCount: resolvedGroupsCount };
+        });
+        _this.rowHeightService = (0, kendo_react_common_1.memoizeOne)(function (_vs, total, rowHeight, detailRowHeight, data) {
+            return new VirtualScrollFixed_1.RowHeightService(total, rowHeight, detailRowHeight, data);
+        });
         _this.childrenToArray = (0, kendo_react_common_1.memoizeOne)(function (children) {
             return React.Children.toArray(children);
         });
@@ -314,7 +393,7 @@ var Grid = /** @class */ (function (_super) {
             columns.slice(columnIndexOffset).forEach(function (c) { return c.parentIndex >= 0 && (c.parentIndex += columnIndexOffset); });
         });
         _this.getHeaderRow = (0, kendo_react_common_1.memoizeOne)(function (sort, sortable, group, groupable, filter, filterable, filterOperators, headerCellRender, columnMenu, columns, columnsMap) {
-            return (React.createElement(HeaderRow_1.HeaderRow, { sort: sort, sortable: sortable, sortChange: _this.sortChange, group: group || [], groupable: groupable, groupChange: _this.groupChange, filter: filter, filterable: filterable, filterOperators: filterOperators, filterChange: _this.filterChange, columnMenu: columnMenu, selectionChange: _this.onHeaderSelectionChange, columns: columns, columnResize: _this.columnResize, pressHandler: _this.dragLogic.pressHandler, dragHandler: _this.dragLogic.dragHandler, releaseHandler: _this.dragLogic.releaseHandler, columnsMap: columnsMap, cellRender: headerCellRender, isRtl: _this.isRtl, dragClue: _this.dragLogic.dragClueRef, headerRef: _this.headerElementRef, containerRef: _this.vs.containerRef }));
+            return (React.createElement(HeaderRow_1.HeaderRow, { sort: sort, sortable: sortable, sortChange: _this.sortChange, group: group || [], groupable: groupable, groupChange: _this.groupChange, filter: filter, filterable: filterable, filterOperators: filterOperators, filterChange: _this.filterChange, columnMenu: columnMenu, selectionChange: _this.onHeaderSelectionChange, columns: columns, columnResize: _this.columnResize, pressHandler: _this.dragLogic.pressHandler, dragHandler: _this.dragLogic.dragHandler, releaseHandler: _this.dragLogic.releaseHandler, columnsMap: columnsMap, cellRender: headerCellRender, isRtl: _this.isRtl, dragClue: _this.dragLogic.dragClueRef, headerRef: _this.headerElementRef, containerRef: _this.containerRef }));
         });
         _this.resolveTitle = function (field) {
             var column = _this._columns.find(function (c) { return c.field === field; });
@@ -327,7 +406,8 @@ var Grid = /** @class */ (function (_super) {
         (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
         var groupable = _this.props.groupable === true ||
             (typeof _this.props.groupable === 'object') && _this.props.groupable.enabled !== false;
-        _this.vs = new VirtualScroll_1.VirtualScroll(groupable || props.rowHeight === undefined || props.rowHeight === 0);
+        var VS = _this.getVirtualScroll(props);
+        _this.vs = new VS(groupable || props.rowHeight === undefined || props.rowHeight === 0);
         _this.dragLogic = new CommonDragLogic_1.CommonDragLogic(_this.columnReorder.bind(_this), _this.groupReorder.bind(_this), _this.columnToGroup.bind(_this));
         _this.columnResize = new ColumnResize_1.ColumnResize(_this.onResize);
         kendo_react_data_tools_1.tableKeyboardNavigation.onConstructor({
@@ -418,9 +498,11 @@ var Grid = /** @class */ (function (_super) {
      * @hidden
      */
     Grid.prototype.componentDidMount = function () {
+        this.resetTableWidth();
         (0, kendo_react_common_1.setScrollbarWidth)();
         var rtl = (0, kendo_react_data_tools_1.isRtl)(this.element);
         this.isRtl = rtl;
+        this._prevTotal = this.props.total;
         kendo_react_data_tools_1.tableKeyboardNavigation.onComponentDidMount({
             scope: this.element || undefined,
             contextStateRef: this.contextStateRef,
@@ -446,6 +528,11 @@ var Grid = /** @class */ (function (_super) {
      */
     Grid.prototype.componentDidUpdate = function () {
         (0, kendo_react_common_1.setScrollbarWidth)();
+        this._prevTotal = this.props.total;
+        if (this.vs.tableTransform && this.vs.table) {
+            this.vs.table.style.transform = this.vs.tableTransform;
+            this.vs.tableTransform = '';
+        }
         kendo_react_data_tools_1.tableKeyboardNavigation.onComponentDidUpdate({
             scope: this.element || undefined,
             contextStateRef: this.contextStateRef,
@@ -475,35 +562,16 @@ var Grid = /** @class */ (function (_super) {
             propsData = this.props.data.data;
             total = total || this.props.data.total;
         }
+        var groupingFooter = (typeof this.props.groupable === 'object') && this.props.groupable.footer || 'none';
+        var _d = this.flatData(propsData, groupingFooter, this.props.skip || 0, this.props.group, this.props.expandField, this.props.filter, this.props.sort), resolvedGroupsCount = _d.resolvedGroupsCount, flattedData = _d.flattedData;
+        this._data = flattedData;
         var groupable = this.props.groupable === true ||
             (typeof this.props.groupable === 'object') && this.props.groupable.enabled !== false;
         this.columnResize.resizable = this.props.resizable || false;
         this.dragLogic.reorderable = this.props.reorderable || false;
         this.dragLogic.groupable = groupable;
         var tableUserSelect = this.props.selectable && this.props.selectable.drag ? 'none' : undefined;
-        if (total !== this.vs.total || (this.props.scrollable === 'virtual') !== this.vs.scrollableVirtual) {
-            this.vs.reset();
-            this.vs = new VirtualScroll_1.VirtualScroll(groupable || this.props.rowHeight === undefined || this.props.rowHeight === 0);
-            this.vs.table = this.tableElement;
-        }
-        this.vs.fixedScroll = this.props.fixedScroll || false;
-        this.vs.PageChange = this.pageChange;
-        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.total = total;
-        this.vs.propsSkip = (this.props.skip || 0) + (this.props.scrollable === 'virtual' ?
-            this.vs.topCacheCount + (this.vs.attendedSkip - (this.props.skip || 0)) : 0);
-        if (this.props.rowHeight !== undefined && this.props.rowHeight > 0 && !groupable) {
-            var containerHeight = this.props.rowHeight * total;
-            this.vs.containerHeight = index_1.firefox ? Math.min(index_1.firefoxMaxHeight, containerHeight) : containerHeight;
-        }
-        else {
-            this.vs.containerHeight = 1533915;
-        }
-        var groupingFooter = (typeof this.props.groupable === 'object') && this.props.groupable.footer || 'none';
-        this._data = [];
-        var resolvedGroupsCount = (0, index_1.flatData)(this._data, propsData, groupingFooter, { index: this.props.skip || 0 }, this.props.group !== undefined, this.props.expandField);
+        this.initializeVirtualization(total, groupable);
         var children = this.childrenToArray(this.props.children);
         this.initColumns(children, resolvedGroupsCount);
         var toolbar = children.filter(function (child) { return child && child.type &&
@@ -512,17 +580,17 @@ var Grid = /** @class */ (function (_super) {
             child.type.displayName === 'KendoReactGridNoRecords'; });
         var leafColumns = this._columns.filter(function (c) { return c.children.length === 0; });
         var groupingPanel = groupable && (React.createElement(GroupPanel_1.GroupPanel, { group: this.props.group || [], groupChange: this.groupChange, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, refCallback: this.dragLogic.refGroupPanelDiv, resolveTitle: this.resolveTitle }));
-        var _d = this.props, sort = _d.sort, sortable = _d.sortable, group = _d.group, filter = _d.filter, filterable = _d.filterable, _e = _d.filterOperators, filterOperators = _e === void 0 ? filterCommon_1.operators : _e, headerCellRender = _d.headerCellRender, columnMenu = _d.columnMenu;
+        var _e = this.props, sort = _e.sort, sortable = _e.sortable, group = _e.group, filter = _e.filter, filterable = _e.filterable, _f = _e.filterOperators, filterOperators = _f === void 0 ? filterCommon_1.operators : _f, headerCellRender = _e.headerCellRender, columnMenu = _e.columnMenu;
         var header = (React.createElement(Header_1.Header, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', scrollableDataElement: function () { return _this.vs.container; }, draggable: this.props.reorderable || groupable, ref: this.headerRef, elemRef: this.headerElementRef, headerRow: this.getHeaderRow(sort, sortable, group, groupable, filter, filterable, filterOperators, headerCellRender, columnMenu, this._columns, this._columnsMap), filterRow: this.props.filterable && React.createElement(FilterRow_1.FilterRow, { size: this.props.size, columns: this._columns, filter: this.props.filter, filterOperators: this.props.filterOperators || filterCommon_1.operators, filterChange: this.filterChange, sort: this.props.sort, cellRender: this.props.filterCellRender, isRtl: this.isRtl, ariaRowIndex: this._columnsMap.length + 1 }) || undefined, cols: leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), width: column.width !== undefined ?
                     Math.floor(parseFloat(column.width.toString())) + 'px' : undefined })); }) }));
         var scrollLeft = this.vs && this.vs.container && this.vs.container.scrollLeft || 0;
         var tableWidth = parseFloat(((this.props.style || {}).width || '').toString());
-        var _f = (0, kendo_react_data_tools_1.tableColumnsVirtualization)({
+        var _g = (0, kendo_react_data_tools_1.tableColumnsVirtualization)({
             enabled: this.props.columnVirtualization,
             columns: leafColumns,
             tableViewPortWidth: tableWidth,
             scrollLeft: scrollLeft
-        }), colSpans = _f.colSpans, isColHidden = _f.hiddenColumns;
+        }), colSpans = _g.colSpans, isColHidden = _g.hiddenColumns;
         var dataRow = function (item, rowId, rowDataIndex) {
             var isInEdit = false;
             var selectedValue = _this.props.selectedField ? (0, index_1.getNestedValue)(_this.props.selectedField, item.dataItem) : undefined;
@@ -575,21 +643,21 @@ var Grid = /** @class */ (function (_super) {
         var hidden = function (index) {
             return (index >= _this._data.length - hiddenRows);
         };
-        var absoluteDataIndex = this.vs.propsSkip || 0;
+        var absoluteDataIndex = this.vs.realSkip || 0;
         var body = [];
         var rowIndexStart = this._columnsMap.length + (this.props.filterable ? 1 : 0) + 1;
         var currentAriaRowIndex = 0;
         if (this._data.length) {
             var dataIndex_1 = -1;
             var detailRowCount_1 = 0;
-            this._data.forEach(function (item, rowIndex) {
+            (this._slicedData || this._data).forEach(function (item, rowIndex) {
                 if (item.rowType === 'data') {
                     absoluteDataIndex++;
                     dataIndex_1++;
                 }
                 var isAlt = absoluteDataIndex % 2 === 0;
                 var dataItemKey = _this.props.dataItemKey && (0, kendo_react_common_1.getter)(_this.props.dataItemKey)(item.dataItem);
-                var absoluteIndex = rowIndex + (_this.vs.propsSkip || 0);
+                var absoluteIndex = rowIndex + (_this.vs.realSkip || 0);
                 var rowId = dataItemKey ? dataItemKey : 'ai' + absoluteIndex;
                 var detailRowId = rowId + '_1';
                 var gridRow = dataRow(item, rowId, dataIndex_1);
@@ -601,7 +669,7 @@ var Grid = /** @class */ (function (_super) {
                         - (_this.props.group ? _this.props.group.length : 0)) || 1;
                     detailRowCount_1++;
                     currentAriaRowIndex = absoluteIndex + rowIndexStart + detailRowCount_1;
-                    body.push((React.createElement("tr", { key: detailRowId, className: (0, kendo_react_common_1.classNames)('k-table-row', isAlt ? 'k-detail-row k-table-alt-row k-alt' : 'k-detail-row'), style: { visibility: hidden(rowIndex) ? 'hidden' : '' }, role: "row", "aria-rowindex": currentAriaRowIndex },
+                    body.push((React.createElement("tr", { key: detailRowId, className: (0, kendo_react_common_1.classNames)('k-table-row', isAlt ? 'k-detail-row k-table-alt-row k-alt' : 'k-detail-row'), style: { visibility: hidden(rowIndex) ? 'hidden' : '', height: _this.props.detailRowHeight }, role: "row", "aria-rowindex": currentAriaRowIndex },
                         _this.props.group && _this.props.group.map(function (gr, idx) {
                             var _a;
                             var columnStyle = (_a = gridRow === null || gridRow === void 0 ? void 0 : gridRow.row[idx]) === null || _a === void 0 ? void 0 : _a.props.style;
@@ -645,9 +713,7 @@ var Grid = /** @class */ (function (_super) {
                     toolbar,
                     groupingPanel,
                     React.createElement(kendo_react_data_tools_1.TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
-                            _this.vs.table = table;
                             _this.tableElement = table;
-                            _this.resetTableWidth();
                         } },
                         React.createElement("table", { style: { userSelect: tableUserSelect, display: tableDisplay } },
                             colGroups,
@@ -674,16 +740,14 @@ var Grid = /** @class */ (function (_super) {
                     _b['k-grid-virtual'] = this.props.scrollable === 'virtual',
                     _b), this.props.className), ref: function (el) {
                     _this._element = el;
-                    _this.resetTableWidth();
                 }, role: "grid", "aria-colcount": leafColumns.length, "aria-rowcount": total, "aria-label": this.props.ariaLabel, onKeyDown: this.onKeyDown, onFocus: this.onFocus }, kendo_react_data_tools_1.tableKeyboardNavigationScopeAttributes),
                 toolbar,
                 groupingPanel,
                 header,
                 React.createElement("div", { className: "k-grid-container", role: "presentation" },
-                    React.createElement("div", { ref: this.vs.containerRef, className: "k-grid-content k-virtual-content", onScroll: this.scrollHandler, role: "presentation" },
+                    React.createElement("div", { ref: this.containerRef, className: "k-grid-content k-virtual-content", onScroll: this.scrollHandler, role: "presentation" },
                         React.createElement("div", { className: 'k-grid-table-wrap', role: "presentation" },
                             React.createElement(kendo_react_data_tools_1.TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
-                                    _this.vs.table = table;
                                     _this.tableElement = table;
                                 } },
                                 React.createElement("table", { className: (0, kendo_react_common_1.classNames)('k-table k-grid-table', (_c = {
@@ -692,9 +756,7 @@ var Grid = /** @class */ (function (_super) {
                                         _c["k-table-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
                                         _c), this.props.className), role: "presentation", style: { userSelect: tableUserSelect, display: tableDisplay } },
                                     colGroups,
-                                    React.createElement("tbody", __assign({ className: 'k-table-tbody', ref: function (tableBody) {
-                                            _this.vs.tableBody = tableBody;
-                                        }, role: 'rowgroup' }, kendo_react_data_tools_1.tableKeyboardNavigationBodyAttributes), body)))),
+                                    React.createElement("tbody", __assign({ className: 'k-table-tbody', ref: this.tableBodyRef, role: 'rowgroup' }, kendo_react_data_tools_1.tableKeyboardNavigationBodyAttributes), body)))),
                         React.createElement("div", { className: "k-height-container", role: "presentation" },
                             React.createElement("div", { style: this.props.scrollable === 'virtual' ?
                                     { 'height': (this.vs.containerHeight) + 'px' } : {} })))),
@@ -786,8 +848,8 @@ var Grid = /** @class */ (function (_super) {
         if (this._footer) {
             this._footer.setWidth(totalWidth);
         }
-        if (this.vs.table) {
-            this.vs.table.style.width = totalWidth + 'px';
+        if (this.tableElement) {
+            this.tableElement.style.width = totalWidth + 'px';
         }
     };
     Grid.prototype.initColumns = function (children, groupCount) {
@@ -888,6 +950,7 @@ var Grid = /** @class */ (function (_super) {
         editField: PropTypes.string,
         scrollable: PropTypes.oneOf(['none', 'scrollable', 'virtual']),
         rowHeight: PropTypes.number,
+        detailRowHeight: PropTypes.number,
         detail: PropTypes.any,
         style: PropTypes.object,
         onDataStateChange: PropTypes.func,

package/dist/npm/VirtualScroll.d.ts

@@ -1,9 +1,11 @@
 import { Page } from './paging/Page';
 import * as React from 'react';
+import { VirtualScrollInterface } from './interfaces/VirtualScrollInterface';
+import { RowHeightService } from './VirtualScrollFixed';
 /**
  * @hidden
  */
-export declare class VirtualScroll {
+export declare class VirtualScroll implements VirtualScrollInterface {
     table: HTMLTableElement | null;
     containerHeight: number;
     topCacheCount: number;
@@ -14,16 +16,18 @@ export declare class VirtualScroll {
     realSkip: number;
     pageSize: number;
     PageChange: ((event: Page, syntheticEvent: React.SyntheticEvent<any>) => void) | null;
-    tableBody: HTMLTableSectionElement | null;
-    heightContainer: null;
+    tableBodyRef: React.RefObject<HTMLTableSectionElement>;
     fixedScroll: boolean;
     askedSkip: number | undefined;
     containerRef: React.RefObject<HTMLDivElement>;
+    tableTransform: string;
     get container(): HTMLDivElement | null;
     private prevScrollPos;
     private tableTranslate;
     private scrollSyncing;
+    private reactVersion;
     constructor(cached: boolean);
+    rowHeightService?: RowHeightService;
     /**
      * @return - The row heights in an array.
      */
@@ -32,7 +36,7 @@ export declare class VirtualScroll {
         acc: number;
     }>;
     changePage(skip: number, e: React.SyntheticEvent<HTMLDivElement>): void;
-    translate(dY: number): void;
+    translate(dY: number, forceSet?: boolean): void;
     reset(): void;
     localScrollUp(e: React.SyntheticEvent<HTMLDivElement>): void;
     localScrollDown(e: React.SyntheticEvent<HTMLDivElement>): void;

package/dist/npm/VirtualScroll.js

@@ -18,14 +18,15 @@ var VirtualScroll = /** @class */ (function () {
         this.realSkip = 0;
         this.pageSize = 0;
         this.PageChange = null;
-        this.tableBody = null;
-        this.heightContainer = null;
+        this.tableBodyRef = React.createRef();
         this.fixedScroll = false;
         this.askedSkip = undefined;
         this.containerRef = React.createRef();
+        this.tableTransform = '';
         this.prevScrollPos = 0;
         this.tableTranslate = 0;
         this.scrollSyncing = false;
+        this.reactVersion = Number.parseFloat(React.version);
         this.topItems = function (heights, skipTopBuffer) {
             if (!_this.container || skipTopBuffer) {
                 return { topItemsCount: 0, topItemsHeight: 0 };
@@ -68,7 +69,7 @@ var VirtualScroll = /** @class */ (function () {
          */
         get: function () {
             var result = [];
-            var allRows = this.tableBody && this.tableBody.children || [];
+            var allRows = this.tableBodyRef.current && this.tableBodyRef.current.children || [];
             var accumulate = 0;
             for (var i = 0; i < allRows.length; i++) {
                 if (allRows[i].className.indexOf('k-grouping-row') > -1) {
@@ -100,10 +101,15 @@ var VirtualScroll = /** @class */ (function () {
             }, e);
         }
     };
-    VirtualScroll.prototype.translate = function (dY) {
+    VirtualScroll.prototype.translate = function (dY, forceSet) {
         this.tableTranslate = dY;
         if (this.scrollableVirtual && this.table) {
-            this.table.style.transform = 'translateY(' + dY + 'px)';
+            if (this.reactVersion <= 17 || forceSet) {
+                this.table.style.transform = 'translateY(' + dY + 'px)';
+            }
+            else {
+                this.tableTransform = 'translateY(' + dY + 'px)';
+            }
         }
     };
     VirtualScroll.prototype.reset = function () {
@@ -114,7 +120,7 @@ var VirtualScroll = /** @class */ (function () {
         if (this.container) {
             this.container.scrollTop = 0;
         }
-        this.translate(0);
+        this.translate(0, true);
     };
     VirtualScroll.prototype.localScrollUp = function (e) {
         if (!this.container) {

package/dist/npm/VirtualScrollFixed.d.ts

@@ -0,0 +1,49 @@
+import { Page } from './paging/Page';
+import * as React from 'react';
+import { VirtualScrollInterface } from './interfaces/VirtualScrollInterface';
+import { DataItemWrapper } from './utils';
+/**
+ * @hidden
+ */
+export declare class RowHeightService {
+    private total;
+    private offsets;
+    private heights;
+    constructor(total: number, rowHeight: number, detailRowHeight: number, data?: DataItemWrapper[]);
+    height(rowIndex: number): number;
+    index(position: number): number | undefined;
+    offset(rowIndex: number): number;
+    totalHeight(): number;
+}
+/**
+ * @hidden
+ */
+export declare class VirtualScrollFixed implements VirtualScrollInterface {
+    table: HTMLTableElement | null;
+    containerHeight: number;
+    topCacheCount: number;
+    attendedSkip: number;
+    propsSkip: number;
+    total: number;
+    scrollableVirtual: boolean;
+    realSkip: number;
+    pageSize: number;
+    PageChange: ((event: Page, syntheticEvent: React.SyntheticEvent<any>) => void) | null;
+    tableBodyRef: React.RefObject<HTMLTableSectionElement>;
+    fixedScroll: boolean;
+    askedSkip: number | undefined;
+    containerRef: React.RefObject<HTMLDivElement>;
+    tableTransform: string;
+    rowHeightService?: RowHeightService;
+    private scrollSyncing;
+    private lastLoaded;
+    private firstLoaded;
+    private lastScrollTop;
+    private reactVersion;
+    get container(): HTMLDivElement | null;
+    constructor(_cached: boolean);
+    translate(dY: number, forceSet?: boolean): void;
+    changePage(skip: number, e: React.SyntheticEvent<HTMLDivElement>): void;
+    reset(): void;
+    scrollHandler(e: React.SyntheticEvent<HTMLDivElement>): void;
+}