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

package/dist/es/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/es/Grid.js

@@ -46,6 +46,7 @@ import { FilterRow } from './header/FilterRow';
 import { GroupPanel } from './header/GroupPanel';
 import { Footer } from './footer/Footer';
 import { VirtualScroll } from './VirtualScroll';
+import { RowHeightService, VirtualScrollFixed } from './VirtualScrollFixed';
 import { ColumnResize } from './drag/ColumnResize';
 import { CommonDragLogic } from './drag/CommonDragLogic';
 import { getNestedValue, flatData, readColumns, autoGenerateColumns, firefox, firefoxMaxHeight, sanitizeColumns } from './utils/index';
@@ -103,15 +104,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 = guid();
+        _this._prevTotal = undefined;
         /**
          * Method to allow the scroll to be set to a specific row index.
          *
@@ -143,11 +148,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;
+            }
+            return 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 = firefox ? Math.min(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) {
+                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 RowHeightService(total, rowHeight, detailRowHeight);
+                }
+                var containerHeight = _this.vs.rowHeightService.totalHeight();
+                _this.vs.containerHeight = firefox ? Math.min(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)) {
@@ -262,6 +333,14 @@ var Grid = /** @class */ (function (_super) {
                 });
             }
         };
+        _this.flatData = memoizeOne(function (propsData, groupingFooter, skip, group, expandField, _filter, _sort) {
+            var flattedData = [];
+            var resolvedGroupsCount = flatData(flattedData, propsData, groupingFooter, { index: skip }, group !== undefined, expandField);
+            return { flattedData: flattedData, resolvedGroupsCount: resolvedGroupsCount };
+        });
+        _this.rowHeightService = memoizeOne(function (_vs, total, rowHeight, detailRowHeight, data) {
+            return new RowHeightService(total, rowHeight, detailRowHeight, data);
+        });
         _this.childrenToArray = memoizeOne(function (children) {
             return React.Children.toArray(children);
         });
@@ -311,7 +390,7 @@ var Grid = /** @class */ (function (_super) {
             columns.slice(columnIndexOffset).forEach(function (c) { return c.parentIndex >= 0 && (c.parentIndex += columnIndexOffset); });
         });
         _this.getHeaderRow = memoizeOne(function (sort, sortable, group, groupable, filter, filterable, filterOperators, headerCellRender, columnMenu, columns, columnsMap) {
-            return (React.createElement(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, { 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; });
@@ -324,7 +403,8 @@ var Grid = /** @class */ (function (_super) {
         validatePackage(packageMetadata);
         var groupable = _this.props.groupable === true ||
             (typeof _this.props.groupable === 'object') && _this.props.groupable.enabled !== false;
-        _this.vs = new 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(_this.columnReorder.bind(_this), _this.groupReorder.bind(_this), _this.columnToGroup.bind(_this));
         _this.columnResize = new ColumnResize(_this.onResize);
         tableKeyboardNavigation.onConstructor({
@@ -415,9 +495,11 @@ var Grid = /** @class */ (function (_super) {
      * @hidden
      */
     Grid.prototype.componentDidMount = function () {
+        this.resetTableWidth();
         setScrollbarWidth();
         var rtl = isRtl(this.element);
         this.isRtl = rtl;
+        this._prevTotal = this.props.total;
         tableKeyboardNavigation.onComponentDidMount({
             scope: this.element || undefined,
             contextStateRef: this.contextStateRef,
@@ -443,6 +525,11 @@ var Grid = /** @class */ (function (_super) {
      */
     Grid.prototype.componentDidUpdate = function () {
         setScrollbarWidth();
+        this._prevTotal = this.props.total;
+        if (this.vs.tableTransform && this.vs.table) {
+            this.vs.table.style.transform = this.vs.tableTransform;
+            this.vs.tableTransform = '';
+        }
         tableKeyboardNavigation.onComponentDidUpdate({
             scope: this.element || undefined,
             contextStateRef: this.contextStateRef,
@@ -472,35 +559,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(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 = firefox ? Math.min(firefoxMaxHeight, containerHeight) : containerHeight;
-        }
-        else {
-            this.vs.containerHeight = 1533915;
-        }
-        var groupingFooter = (typeof this.props.groupable === 'object') && this.props.groupable.footer || 'none';
-        this._data = [];
-        var resolvedGroupsCount = 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 &&
@@ -509,17 +577,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, { 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 ? 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 ? operators : _f, headerCellRender = _e.headerCellRender, columnMenu = _e.columnMenu;
         var header = (React.createElement(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, { size: this.props.size, columns: this._columns, filter: this.props.filter, filterOperators: this.props.filterOperators || 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 = tableColumnsVirtualization({
+        var _g = 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 ? getNestedValue(_this.props.selectedField, item.dataItem) : undefined;
@@ -572,21 +640,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 && 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);
@@ -598,7 +666,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: 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: 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;
@@ -642,9 +710,7 @@ var Grid = /** @class */ (function (_super) {
                     toolbar,
                     groupingPanel,
                     React.createElement(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,
@@ -671,16 +737,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 }, 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(TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
-                                    _this.vs.table = table;
                                     _this.tableElement = table;
                                 } },
                                 React.createElement("table", { className: classNames('k-table k-grid-table', (_c = {
@@ -689,9 +753,7 @@ var Grid = /** @class */ (function (_super) {
                                         _c["k-table-".concat(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' }, tableKeyboardNavigationBodyAttributes), body)))),
+                                    React.createElement("tbody", __assign({ className: 'k-table-tbody', ref: this.tableBodyRef, role: 'rowgroup' }, tableKeyboardNavigationBodyAttributes), body)))),
                         React.createElement("div", { className: "k-height-container", role: "presentation" },
                             React.createElement("div", { style: this.props.scrollable === 'virtual' ?
                                     { 'height': (this.vs.containerHeight) + 'px' } : {} })))),
@@ -783,8 +845,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) {
@@ -885,6 +947,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/es/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/es/VirtualScroll.js

@@ -15,14 +15,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 };
@@ -65,7 +66,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) {
@@ -97,10 +98,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 () {
@@ -111,7 +117,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/es/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;
+}

package/dist/es/VirtualScrollFixed.js

@@ -0,0 +1,152 @@
+import * as React from 'react';
+/**
+ * @hidden
+ */
+var RowHeightService = /** @class */ (function () {
+    function RowHeightService(total, rowHeight, detailRowHeight, data) {
+        if (total === void 0) { total = 0; }
+        this.total = total;
+        this.offsets = [];
+        this.heights = [];
+        var agg = 0;
+        for (var idx = 0; idx < total; idx++) {
+            this.offsets.push(agg);
+            var currHeight = (data && data[idx].expanded && data[idx].rowType === 'data') ? detailRowHeight : rowHeight;
+            agg += currHeight;
+            this.heights.push(currHeight);
+        }
+    }
+    RowHeightService.prototype.height = function (rowIndex) {
+        return this.heights[rowIndex];
+    };
+    RowHeightService.prototype.index = function (position) {
+        if (position < 0) {
+            return undefined;
+        }
+        var result = this.offsets.reduce(function (prev, current, idx) {
+            if (prev !== undefined) {
+                return prev;
+            }
+            else if (current === position) {
+                return idx;
+            }
+            else if (current > position) {
+                return idx - 1;
+            }
+            return undefined;
+        }, undefined);
+        return result === undefined ? this.total - 1 : result;
+    };
+    RowHeightService.prototype.offset = function (rowIndex) {
+        return this.offsets[rowIndex];
+    };
+    RowHeightService.prototype.totalHeight = function () {
+        var lastOffset = this.offsets[this.offsets.length - 1];
+        var lastHeight = this.heights[this.heights.length - 1];
+        return lastOffset + lastHeight;
+        // return this.heights.reduce((prev, curr) => prev + curr, 0);
+    };
+    return RowHeightService;
+}());
+export { RowHeightService };
+/**
+ * @hidden
+ */
+var VirtualScrollFixed = /** @class */ (function () {
+    function VirtualScrollFixed(_cached) {
+        this.table = null;
+        this.containerHeight = 0;
+        this.topCacheCount = 0;
+        this.attendedSkip = 0;
+        this.propsSkip = 0;
+        this.total = 0;
+        this.scrollableVirtual = false;
+        this.realSkip = 0;
+        this.pageSize = 0;
+        this.PageChange = null;
+        this.tableBodyRef = React.createRef();
+        this.fixedScroll = false;
+        this.askedSkip = undefined;
+        this.containerRef = React.createRef();
+        this.tableTransform = '';
+        this.scrollSyncing = false;
+        this.lastLoaded = 0;
+        this.firstLoaded = 0;
+        this.lastScrollTop = 0;
+        this.reactVersion = Number.parseFloat(React.version);
+        this.firstLoaded = this.pageSize;
+        this.lastLoaded = this.realSkip + this.pageSize;
+        this.scrollHandler = this.scrollHandler.bind(this);
+    }
+    Object.defineProperty(VirtualScrollFixed.prototype, "container", {
+        get: function () {
+            return this.containerRef.current;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    VirtualScrollFixed.prototype.translate = function (dY, forceSet) {
+        if (this.scrollableVirtual && this.table) {
+            if (this.reactVersion <= 17 || forceSet) {
+                this.table.style.transform = 'translateY(' + dY + 'px)';
+            }
+            else {
+                this.tableTransform = 'translateY(' + dY + 'px)';
+            }
+        }
+    };
+    VirtualScrollFixed.prototype.changePage = function (skip, e) {
+        if (this.PageChange) {
+            this.PageChange({ skip: Math.max(0, skip), take: this.pageSize }, e);
+        }
+    };
+    VirtualScrollFixed.prototype.reset = function () {
+        this.scrollSyncing = true;
+        if (this.fixedScroll) {
+            return;
+        }
+        if (this.container) {
+            this.container.scrollTop = 0;
+        }
+        this.translate(0, true);
+    };
+    VirtualScrollFixed.prototype.scrollHandler = function (e) {
+        if (!this.scrollableVirtual || !this.container || !this.table ||
+            !this.rowHeightService || !this.containerRef.current) {
+            return;
+        }
+        if (this.scrollSyncing) {
+            this.scrollSyncing = false;
+            return;
+        }
+        var scrollTop = this.container.scrollTop;
+        var up = this.lastScrollTop >= scrollTop;
+        var down = !up;
+        this.lastScrollTop = scrollTop;
+        var firstItemIndex = this.rowHeightService.index(scrollTop);
+        var firstItemOffset = this.rowHeightService.offset(firstItemIndex);
+        var offsetHeight = this.containerRef.current.offsetHeight;
+        var lastItemIndex = this.rowHeightService.index(scrollTop + offsetHeight);
+        if (down && lastItemIndex >= this.lastLoaded && this.lastLoaded < this.total) {
+            var overflow = (firstItemIndex + this.pageSize) - this.total;
+            if (overflow > 0) {
+                firstItemIndex = firstItemIndex - overflow;
+                firstItemOffset = this.rowHeightService.offset(firstItemIndex);
+            }
+            this.firstLoaded = firstItemIndex;
+            this.translate(firstItemOffset);
+            var nextTake = this.firstLoaded + this.pageSize;
+            this.lastLoaded = Math.min(nextTake, this.total);
+            this.changePage(this.firstLoaded, e);
+        }
+        else if (up && firstItemIndex < this.firstLoaded) {
+            var nonVisibleBuffer = Math.floor(this.pageSize * 0.3);
+            this.firstLoaded = Math.max(firstItemIndex - nonVisibleBuffer, 0);
+            this.translate(this.rowHeightService.offset(this.firstLoaded));
+            this.lastLoaded = Math.min(this.firstLoaded + this.pageSize, this.total);
+            this.changePage(this.firstLoaded, e);
+        }
+    };
+    return VirtualScrollFixed;
+}());
+export { VirtualScrollFixed };