@progress/kendo-react-grid 5.10.0-dev.202301031638 → 5.10.0-dev.202301091032

package/dist/es/Grid.d.ts

@@ -100,12 +100,14 @@ export declare class Grid extends React.Component<GridProps, {}> {
         onColumnReorder: PropTypes.Requireable<(...args: any[]) => any>;
         dataItemKey: PropTypes.Requireable<string>;
         navigatable: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<string>;
     };
     /** @hidden */
     static contextType: React.Context<TableKeyboardNavigationContextType | undefined>;
     protected dragLogic: CommonDragLogic;
     private _columns;
     private _columnsMap;
+    private _columnsMutations;
     private contextStateRef;
     private navigationStateRef;
     private _data;
@@ -221,7 +223,11 @@ export declare class Grid extends React.Component<GridProps, {}> {
     private columnToGroup;
     private resetTableWidth;
     private onResize;
+    private childrenToArray;
+    private readColumns;
+    private mapColumns;
     private initColumns;
+    private getHeaderRow;
     private resolveTitle;
     private getDataState;
     private getArguments;

package/dist/es/Grid.js

@@ -35,7 +35,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { dispatchEvent, classNames, getter, guid, setScrollbarWidth, canUseDOM } from '@progress/kendo-react-common';
+import { dispatchEvent, classNames, getter, guid, setScrollbarWidth, canUseDOM, memoizeOne, kendoThemeMaps } from '@progress/kendo-react-common';
 import { tableColumnsVirtualization, Pager, mapColumns, isRtl, tableKeyboardNavigation, TableKeyboardNavigationContext, tableKeyboardNavigationScopeAttributes, tableKeyboardNavigationTools as navigationTools, tableKeyboardNavigationBodyAttributes, getSelectionOptions, TableSelection, DropClue, DragClue } from '@progress/kendo-react-data-tools';
 import { GridSelectionCell } from './cells/GridSelectionCell';
 import { GridHierarchyCell } from './cells/GridHierarchyCell';
@@ -48,7 +48,7 @@ import { Footer } from './footer/Footer';
 import { VirtualScroll } from './VirtualScroll';
 import { ColumnResize } from './drag/ColumnResize';
 import { CommonDragLogic } from './drag/CommonDragLogic';
-import { getNestedValue, flatData, readColumns, autoGenerateColumns, sanitizeColumns } from './utils/index';
+import { getNestedValue, flatData, readColumns, autoGenerateColumns, firefox, firefoxMaxHeight, sanitizeColumns } from './utils/index';
 import { GridCell } from './cells/GridCell';
 import { GridGroupCell } from './cells/GridGroupCell';
 import { GridRow } from './rows/GridRow';
@@ -99,6 +99,7 @@ var Grid = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this._columns = [];
         _this._columnsMap = [[]];
+        _this._columnsMutations = 0;
         _this.contextStateRef = { current: undefined };
         _this.navigationStateRef = { current: undefined };
         _this._data = [];
@@ -158,7 +159,7 @@ var Grid = /** @class */ (function (_super) {
             if (_this._footer) {
                 _this._footer.setScrollLeft(scrollLeft);
             }
-            if (_this.vs) {
+            if (_this.vs && scrollTop !== _this.wrapperScrollTop) {
                 _this.vs.scrollHandler(event);
             }
             dispatchEvent(_this.props.onScroll, event, _this, undefined);
@@ -247,6 +248,7 @@ var Grid = /** @class */ (function (_super) {
         };
         _this.onResize = function (index, newWidth, oldWidth, nativeEvent, end, targetId) {
             _this.resetTableWidth();
+            _this._columnsMutations++;
             if (_this.props.onColumnResize) {
                 _this.props.onColumnResize.call(undefined, {
                     columns: _this.columns,
@@ -260,6 +262,19 @@ var Grid = /** @class */ (function (_super) {
                 });
             }
         };
+        _this.childrenToArray = memoizeOne(function (children) {
+            return React.Children.toArray(children);
+        });
+        _this.readColumns = memoizeOne(function (children, idPrefix, _mutationsCount) {
+            var columnElements = children.filter(function (child) { return child && child.type && child.type.displayName === 'KendoReactGridColumn'; });
+            return readColumns(columnElements, _this.columns, { prevId: 0, idPrefix: idPrefix });
+        });
+        _this.mapColumns = memoizeOne(function (columns) {
+            return mapColumns(columns);
+        });
+        _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 }));
+        });
         _this.resolveTitle = function (field) {
             var column = _this._columns.find(function (c) { return c.field === field; });
             var title = column && (column.title || column.field);
@@ -406,6 +421,7 @@ var Grid = /** @class */ (function (_super) {
      * @hidden
      */
     Grid.prototype.render = function () {
+        var _a, _b, _c;
         var _this = this;
         var total = this.props.total || 0;
         var idPrefix = navigationTools.getIdPrefix(this.navigationStateRef);
@@ -424,7 +440,7 @@ var Grid = /** @class */ (function (_super) {
         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) {
+        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;
@@ -438,7 +454,8 @@ var Grid = /** @class */ (function (_super) {
         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) {
-            this.vs.containerHeight = Math.min(1533915, this.props.rowHeight * (total || 0));
+            var containerHeight = this.props.rowHeight * total;
+            this.vs.containerHeight = firefox ? Math.min(firefoxMaxHeight, containerHeight) : containerHeight;
         }
         else {
             this.vs.containerHeight = 1533915;
@@ -446,25 +463,25 @@ var Grid = /** @class */ (function (_super) {
         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);
-        var children = React.Children.toArray(this.props.children);
-        this.initColumns(children.filter(function (child) { return child && child.type &&
-            child.type.displayName === 'KendoReactGridColumn'; }), resolvedGroupsCount);
+        var children = this.childrenToArray(this.props.children);
+        this.initColumns(children, resolvedGroupsCount);
         var toolbar = children.filter(function (child) { return child && child.type &&
             child.type.displayName === 'KendoReactGridToolbar'; });
         var noRecords = children.filter(function (child) { return child && child.type &&
             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 header = (React.createElement(Header, { 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: React.createElement(HeaderRow, { sort: this.props.sort, sortable: this.props.sortable, sortChange: this.sortChange, group: this.props.group || [], groupable: groupable, groupChange: this.groupChange, filter: this.props.filter, filterable: this.props.filterable, filterOperators: this.props.filterOperators || operators, filterChange: this.filterChange, columnMenu: this.props.columnMenu, selectionChange: this.onHeaderSelectionChange, columns: this._columns, columnResize: this.columnResize, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, columnsMap: this._columnsMap, cellRender: this.props.headerCellRender, isRtl: this.isRtl, dragClue: this.dragLogic.dragClueRef, headerRef: this.headerElementRef, containerRef: this.vs.containerRef }), filterRow: this.props.filterable && React.createElement(FilterRow, { 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 ?
+        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 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 _a = tableColumnsVirtualization({
+        var _f = tableColumnsVirtualization({
             enabled: this.props.columnVirtualization,
             columns: leafColumns,
             tableViewPortWidth: tableWidth,
             scrollLeft: scrollLeft
-        }), colSpans = _a.colSpans, isColHidden = _a.hiddenColumns;
+        }), colSpans = _f.colSpans, isColHidden = _f.hiddenColumns;
         var dataRow = function (item, rowId, rowDataIndex) {
             var isInEdit = false;
             var selectedValue = _this.props.selectedField ? getNestedValue(_this.props.selectedField, item.dataItem) : undefined;
@@ -481,29 +498,6 @@ var Grid = /** @class */ (function (_super) {
                             ? { left: column.left, right: column.right }
                             : { left: column.right, right: column.left }
                         : {};
-                    var cellProps = {
-                        id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(columnIndex)), idPrefix),
-                        colSpan: colSpans[columnIndex],
-                        dataItem: item.dataItem,
-                        field: column.field,
-                        editor: column.editor,
-                        format: column.format,
-                        className: className,
-                        render: _this.props.cellRender,
-                        onChange: _this.itemChange,
-                        selectionChange: (_this.props.onSelectionChange) ?
-                            (function (e) { _this.selectionChange({ event: e, dataItem: item.dataItem, dataIndex: rowDataIndex, columnIndex: columnIndex }); }) :
-                            undefined,
-                        columnIndex: columnIndex,
-                        columnsCount: leafColumns.length,
-                        rowType: item.rowType,
-                        level: item.level,
-                        expanded: item.expanded,
-                        dataIndex: item.dataIndex,
-                        style: style,
-                        ariaColumnIndex: column.ariaColumnIndex,
-                        isSelected: Array.isArray(selectedValue) && selectedValue.indexOf(columnIndex) > -1
-                    };
                     var currentColumnIsInEdit = false;
                     if (column.editable && _this.props.editField) {
                         var inEdit = getNestedValue(_this.props.editField, item.dataItem);
@@ -512,12 +506,10 @@ var Grid = /** @class */ (function (_super) {
                             currentColumnIsInEdit = true;
                         }
                     }
-                    if (column.cell) {
-                        return React.createElement(column.cell, __assign({ key: columnKey }, cellProps, { locked: _this.props.lockGroups }));
-                    }
-                    return currentColumnIsInEdit
-                        ? React.createElement(GridEditCell, __assign({ key: columnKey }, cellProps))
-                        : React.createElement(GridCell, __assign({ key: columnKey }, cellProps));
+                    var Cell = column.cell || (currentColumnIsInEdit && GridEditCell) || GridCell;
+                    return (React.createElement(Cell, { key: columnKey, locked: _this.props.lockGroups, id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(columnIndex)), idPrefix), colSpan: colSpans[columnIndex], dataItem: item.dataItem, field: column.field, editor: column.editor, format: column.format, className: className, render: _this.props.cellRender, onChange: _this.itemChange, selectionChange: (_this.props.onSelectionChange) ?
+                            (function (e) { _this.selectionChange({ event: e, dataItem: item.dataItem, dataIndex: rowDataIndex, columnIndex: columnIndex }); }) :
+                            undefined, columnIndex: columnIndex, columnsCount: leafColumns.length, rowType: item.rowType, level: item.level, expanded: item.expanded, dataIndex: item.dataIndex, style: style, ariaColumnIndex: column.ariaColumnIndex, isSelected: Array.isArray(selectedValue) && selectedValue.indexOf(columnIndex) > -1 }));
                 }),
                 isInEdit: isInEdit,
                 isSelected: typeof selectedValue === 'boolean' && selectedValue
@@ -568,9 +560,9 @@ 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: isAlt ? 'k-detail-row k-alt' : 'k-detail-row', style: { visibility: hidden(rowIndex) ? 'hidden' : '' }, role: "row", "aria-rowindex": currentAriaRowIndex },
-                        _this.props.group && _this.props.group.map(function (group, idx) {
-                            return (React.createElement(GridGroupCell, { id: '', dataIndex: item.dataIndex, field: group.field, dataItem: item.dataItem, key: idx, style: {}, ariaColumnIndex: 1 + idx, isSelected: false, locked: _this.props.lockGroups }));
+                    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 },
+                        _this.props.group && _this.props.group.map(function (gr, idx) {
+                            return (React.createElement(GridGroupCell, { id: '', dataIndex: item.dataIndex, field: gr.field, dataItem: item.dataItem, key: idx, style: {}, ariaColumnIndex: 1 + idx, isSelected: false, locked: _this.props.lockGroups }));
                         }),
                         _this.props.expandField &&
                             React.createElement(GridDetailHierarchyCell, { id: navigationTools.generateNavigatableId("".concat(detailRowId, "-dhcell"), idPrefix) }),
@@ -579,15 +571,15 @@ var Grid = /** @class */ (function (_super) {
             });
         }
         else {
-            body.push((React.createElement("tr", { key: "no-records", className: "k-grid-norecords", "aria-rowindex": rowIndexStart },
-                React.createElement("td", { colSpan: leafColumns.length }, noRecords.length ? noRecords : React.createElement(GridNoRecords, null)))));
+            body.push((React.createElement("tr", { key: "no-records", className: "k-table-row k-grid-norecords", role: 'row', "aria-rowindex": rowIndexStart },
+                React.createElement("td", { className: 'k-table-td', colSpan: leafColumns.length, role: 'gridcell' }, noRecords.length ? noRecords : React.createElement(GridNoRecords, null)))));
         }
-        var pagerProps = __assign({ className: 'k-grid-pager', onPageChange: this.pagerPageChange, total: total, skip: this.vs.propsSkip || 0, take: (this.props.take !== undefined ? this.props.take : this.props.pageSize) || 10, messagesMap: pagerMessagesMap }, (normalize(this.props.pageable || {})));
-        var pager = this.props.pager ? React.createElement(this.props.pager, __assign({}, pagerProps)) : React.createElement(Pager, __assign({}, pagerProps));
+        var pagerProps = __assign({ size: this.props.size, onPageChange: this.pagerPageChange, total: total, skip: this.vs.propsSkip || 0, take: (this.props.take !== undefined ? this.props.take : this.props.pageSize) || 10, messagesMap: pagerMessagesMap }, (normalize(this.props.pageable || {})));
+        var pager = this.props.pager ? React.createElement(this.props.pager, __assign({}, pagerProps)) : React.createElement(Pager, __assign({ className: "k-grid-pager" }, pagerProps));
         var sorted = function (field) {
             return _this.props.sort && _this.props.sort.filter(function (descriptor) { return descriptor.field === field; }).length > 0;
         };
-        var footer = this._columns.some(function (c) { return Boolean(c.footerCell); }) ? (React.createElement(Footer, { columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', ref: function (f) { return _this._footer = f; }, row: React.createElement(FooterRow, { columns: this._columns, isRtl: this.isRtl, ariaRowIndex: currentAriaRowIndex + 1 }), cols: leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), width: column.width !== undefined ?
+        var footer = this._columns.some(function (c) { return Boolean(c.footerCell); }) ? (React.createElement(Footer, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', ref: function (f) { return _this._footer = f; }, row: React.createElement(FooterRow, { columns: this._columns, isRtl: this.isRtl, ariaRowIndex: currentAriaRowIndex + 1 }), 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 })); }) })) : null;
         var colGroups = (React.createElement("colgroup", { ref: function (c) {
                 _this.columnResize.colGroupMain = c;
@@ -597,7 +589,11 @@ var Grid = /** @class */ (function (_super) {
         var tableDisplay = this.props.columnVirtualization ? 'block' : 'table';
         if (this.props.scrollable === 'none') {
             return (React.createElement(TableKeyboardNavigationContext.Provider, { value: this.contextStateRef.current },
-                React.createElement("div", __assign({ id: this.props.id, style: this.props.style, className: classNames('k-widget k-grid', this.props.className), ref: function (el) { _this._element = el; }, "aria-label": this.props.ariaLabel, onKeyDown: this.onKeyDown, onFocus: this.onFocus }, tableKeyboardNavigationScopeAttributes),
+                React.createElement("div", __assign({ id: this.props.id, style: this.props.style, className: classNames('k-grid', (_a = {
+                            'k-grid-md': !this.props.size
+                        },
+                        _a["k-grid-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                        _a), this.props.className), ref: function (el) { _this._element = el; }, "aria-label": this.props.ariaLabel, onKeyDown: this.onKeyDown, onFocus: this.onFocus }, tableKeyboardNavigationScopeAttributes),
                     toolbar,
                     groupingPanel,
                     React.createElement(TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
@@ -608,7 +604,7 @@ var Grid = /** @class */ (function (_super) {
                         React.createElement("table", { style: { userSelect: tableUserSelect, display: tableDisplay } },
                             colGroups,
                             header,
-                            React.createElement("tbody", __assign({}, tableKeyboardNavigationBodyAttributes), body),
+                            React.createElement("tbody", __assign({ role: 'rowgroup', className: 'k-table-tbody' }, tableKeyboardNavigationBodyAttributes), body),
                             footer)),
                     this.props.pageable && pager,
                     enableDragClues && (React.createElement(React.Fragment, null,
@@ -623,9 +619,12 @@ var Grid = /** @class */ (function (_super) {
             }
         }
         return (React.createElement(TableKeyboardNavigationContext.Provider, { value: this.contextStateRef.current },
-            React.createElement("div", __assign({ id: this.props.id, style: wrapperStyle, className: classNames('k-widget k-grid', {
-                    'k-grid-virtual': this.props.scrollable === 'virtual'
-                }, this.props.className), ref: function (el) {
+            React.createElement("div", __assign({ id: this.props.id, style: wrapperStyle, className: classNames('k-grid', (_b = {
+                        'k-grid-md': !this.props.size
+                    },
+                    _b["k-grid-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                    _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),
@@ -634,16 +633,19 @@ var Grid = /** @class */ (function (_super) {
                 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", { style: { 'position': 'relative' }, 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: 'k-grid-table', role: "presentation", style: { userSelect: tableUserSelect, display: tableDisplay } },
-                                    colGroups,
-                                    React.createElement("tbody", __assign({ ref: function (tableBody) {
-                                            _this.vs.tableBody = tableBody;
-                                        }, role: "presentation" }, tableKeyboardNavigationBodyAttributes), body)))),
+                        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 = {
+                                        'k-grid-md': !this.props.size
+                                    },
+                                    _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("div", { className: "k-height-container", role: "presentation" },
                             React.createElement("div", { style: this.props.scrollable === 'virtual' ?
                                     { 'height': (this.vs.containerHeight) + 'px' } : {} })))),
@@ -684,6 +686,7 @@ var Grid = /** @class */ (function (_super) {
         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; });
+        this._columnsMutations++;
         var eventColumnProps = this.columns;
         this.forceUpdate();
         if (this.props.onColumnReorder) {
@@ -735,10 +738,10 @@ var Grid = /** @class */ (function (_super) {
             this.vs.table.style.width = totalWidth + 'px';
         }
     };
-    Grid.prototype.initColumns = function (columnElements, groupCount) {
+    Grid.prototype.initColumns = function (children, groupCount) {
         var _this = this;
         var idPrefix = navigationTools.getIdPrefix(this.navigationStateRef);
-        this._columns = readColumns(columnElements, this.columns, { prevId: 0, idPrefix: idPrefix });
+        this._columns = this.readColumns(children, idPrefix, this._columnsMutations);
         if (this._columns.length === 0) {
             this._columns = autoGenerateColumns(this.props.data, this.props.group, this.props.expandField, { prevId: 0, idPrefix: idPrefix });
         }
@@ -778,7 +781,7 @@ var Grid = /** @class */ (function (_super) {
             columnIndexOffset++;
         }
         this._columns.slice(columnIndexOffset).forEach(function (c) { return c.parentIndex >= 0 && (c.parentIndex += columnIndexOffset); });
-        this._columnsMap = mapColumns(this._columns);
+        this._columnsMap = this.mapColumns(this._columns);
         this.columnResize.columns = this._columns;
         this.dragLogic.columns = this._columns;
     };
@@ -875,7 +878,8 @@ var Grid = /** @class */ (function (_super) {
         onColumnResize: PropTypes.func,
         onColumnReorder: PropTypes.func,
         dataItemKey: PropTypes.string,
-        navigatable: PropTypes.bool
+        navigatable: PropTypes.bool,
+        size: PropTypes.oneOf(['small', 'medium'])
     };
     /** @hidden */
     Grid.contextType = TableKeyboardNavigationContext;

package/dist/es/GridToolbar.js

@@ -14,6 +14,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import * as React from 'react';
+import { classNames, kendoThemeMaps } from '@progress/kendo-react-common';
 /**
  * Represents the GridToolbar component.
  *
@@ -61,7 +62,10 @@ var GridToolbar = /** @class */ (function (_super) {
      * @hidden
      */
     GridToolbar.prototype.render = function () {
-        return (React.createElement("div", { className: "k-toolbar k-grid-toolbar" }, this.props.children));
+        var _a;
+        return (React.createElement("div", { className: classNames('k-toolbar k-grid-toolbar', (_a = {},
+                _a["k-toolbar-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                _a), this.props.className) }, this.props.children));
     };
     /**
      * @hidden

package/dist/es/VirtualScroll.d.ts

@@ -21,7 +21,6 @@ export declare class VirtualScroll {
     containerRef: React.RefObject<HTMLDivElement>;
     get container(): HTMLDivElement | null;
     private prevScrollPos;
-    private syncTimeout;
     private tableTranslate;
     private scrollSyncing;
     constructor(cached: boolean);
@@ -34,10 +33,11 @@ export declare class VirtualScroll {
     }>;
     changePage(skip: number, e: React.SyntheticEvent<HTMLDivElement>): void;
     translate(dY: number): void;
-    syncScroll(): void;
     reset(): void;
     localScrollUp(e: React.SyntheticEvent<HTMLDivElement>): void;
     localScrollDown(e: React.SyntheticEvent<HTMLDivElement>): void;
     scrollNonStrict(e: React.SyntheticEvent<HTMLDivElement>): void;
     scrollHandler(e: React.SyntheticEvent<HTMLDivElement>): void;
+    private topItems;
+    private horizontalScrollbarHeight;
 }

package/dist/es/VirtualScroll.js

@@ -4,6 +4,7 @@ import * as React from 'react';
  */
 var VirtualScroll = /** @class */ (function () {
     function VirtualScroll(cached) {
+        var _this = this;
         this.table = null;
         this.containerHeight = 0;
         this.topCacheCount = 0; // 4;
@@ -22,6 +23,25 @@ var VirtualScroll = /** @class */ (function () {
         this.prevScrollPos = 0;
         this.tableTranslate = 0;
         this.scrollSyncing = false;
+        this.topItems = function (heights, skipTopBuffer) {
+            if (!_this.container || skipTopBuffer) {
+                return { topItemsCount: 0, topItemsHeight: 0 };
+            }
+            var screenHeight = _this.container.clientHeight;
+            var itemsOnScreen = Math.ceil(screenHeight / heights[0].line);
+            var topItemsCount = Math.ceil((heights.length - itemsOnScreen) / 2);
+            var topItemsHeight = 0;
+            for (var i = 0; i < topItemsCount; i++) {
+                topItemsHeight += heights[i].line + heights[i].acc;
+            }
+            return { topItemsCount: topItemsCount, topItemsHeight: topItemsHeight };
+        };
+        this.horizontalScrollbarHeight = function () {
+            if (!_this.container) {
+                return 0;
+            }
+            return _this.container.offsetHeight - _this.container.clientHeight;
+        };
         if (cached) {
             this.topCacheCount = 4;
             this.attendedSkip = -this.topCacheCount;
@@ -79,22 +99,6 @@ var VirtualScroll = /** @class */ (function () {
             this.table.style.transform = 'translateY(' + dY + 'px)';
         }
     };
-    VirtualScroll.prototype.syncScroll = function () {
-        if (!this.scrollableVirtual || !this.container) {
-            return;
-        }
-        this.syncTimeout = null;
-        var scrollTop = this.container.scrollTop;
-        var containerHeight = this.containerHeight; // = this.container.scrollHeight;
-        var rowHeights = this.rowHeights;
-        var percentage = (scrollTop - this.tableTranslate) / rowHeights[0].line;
-        var targetFloorScrollPosition = Math.floor((containerHeight) * (this.propsSkip + percentage) / this.total);
-        if (this.container.scrollTop !== (this.prevScrollPos = targetFloorScrollPosition)) {
-            this.scrollSyncing = true;
-            this.container.scrollTop = (this.prevScrollPos = targetFloorScrollPosition);
-        }
-        this.translate(this.tableTranslate + targetFloorScrollPosition - scrollTop);
-    };
     VirtualScroll.prototype.reset = function () {
         this.scrollSyncing = true;
         if (this.fixedScroll) {
@@ -113,11 +117,12 @@ var VirtualScroll = /** @class */ (function () {
         var scrollTop = this.container.scrollTop;
         var targetTranslate = this.tableTranslate;
         var rowsCount = 0;
+        var _a = this.topItems(heights, Boolean(this.topCacheCount)), topItemsCount = _a.topItemsCount, topItemsHeight = _a.topItemsHeight;
         var additionalOnTop = scrollTop - targetTranslate;
-        if (additionalOnTop > 0) {
+        if (additionalOnTop > topItemsHeight) {
             return;
         }
-        while ((rowsCount < this.topCacheCount + this.attendedSkip - this.realSkip)
+        while ((rowsCount < this.topCacheCount + this.attendedSkip - this.realSkip + topItemsCount)
             && this.propsSkip - rowsCount > 0 &&
             !(targetTranslate + (heights[heights.length - 1 - rowsCount].line + heights[heights.length - 1 - rowsCount].acc) + additionalOnTop <= scrollTop)) {
             targetTranslate -= heights[heights.length - 1 - rowsCount].line +
@@ -143,8 +148,9 @@ var VirtualScroll = /** @class */ (function () {
             //    floor the translate to beginning of the item in absolute value
         }
         if (targetTranslate !== this.tableTranslate) {
-            this.translate(targetTranslate);
-            this.changePage(this.propsSkip - rowsCount, e);
+            this.translate(Math.max(0, targetTranslate - topItemsHeight));
+            var nextSkip = Math.max(0, this.propsSkip - rowsCount - topItemsCount);
+            this.changePage(nextSkip, e);
         }
     };
     VirtualScroll.prototype.localScrollDown = function (e) {
@@ -155,18 +161,22 @@ var VirtualScroll = /** @class */ (function () {
         var scrollTop = this.container.scrollTop;
         var targetTranslate = this.tableTranslate;
         var rowsCount = 0;
+        var _a = this.topItems(heights, Boolean(this.topCacheCount)), topItemsCount = _a.topItemsCount, topItemsHeight = _a.topItemsHeight;
         while (rowsCount < heights.length - this.topCacheCount &&
             !(targetTranslate + heights[rowsCount].line + heights[rowsCount].acc > scrollTop)) {
             targetTranslate += heights[rowsCount].line + heights[rowsCount].acc;
             rowsCount++;
         }
+        if (topItemsCount > this.propsSkip + rowsCount) {
+            return;
+        }
         if (rowsCount >= heights.length - this.topCacheCount && this.propsSkip + rowsCount >= this.total) {
-            this.translate(targetTranslate);
-            this.changePage(this.total - 1, e);
+            this.translate(targetTranslate - topItemsHeight);
+            this.changePage(this.total - 1 - topItemsCount, e);
         }
-        else if (targetTranslate !== this.tableTranslate) {
-            this.translate(targetTranslate);
-            this.changePage(this.propsSkip + rowsCount, e);
+        else if (targetTranslate !== this.tableTranslate && this.propsSkip + rowsCount - topItemsCount !== this.propsSkip) {
+            this.translate(targetTranslate - topItemsHeight);
+            this.changePage(this.propsSkip + rowsCount - topItemsCount, e);
         }
     };
     VirtualScroll.prototype.scrollNonStrict = function (e) {
@@ -185,8 +195,9 @@ var VirtualScroll = /** @class */ (function () {
         else if (rowIndexOffset === -1) {
             microAdjust = -((heights[heights.length - 1].line + heights[heights.length - 1].acc) * rowpercentage);
         }
-        this.translate(microAdjust + this.containerHeight * floatRowIndex / this.total);
-        this.changePage(rowIndex, e);
+        var _a = this.topItems(heights, Boolean(this.topCacheCount)), topItemsCount = _a.topItemsCount, topItemsHeight = _a.topItemsHeight;
+        this.translate(Math.max(0, microAdjust - topItemsHeight - this.horizontalScrollbarHeight() + this.containerHeight * floatRowIndex / this.total));
+        this.changePage(rowIndex - topItemsCount, e);
     };
     VirtualScroll.prototype.scrollHandler = function (e) {
         if (!this.scrollableVirtual) {
@@ -196,9 +207,6 @@ var VirtualScroll = /** @class */ (function () {
             this.scrollSyncing = false;
             return;
         }
-        var grid = this;
-        clearTimeout(this.syncTimeout);
-        this.syncTimeout = window.setTimeout(function () { grid.syncScroll(); }, 200);
         var scrollTop = this.container.scrollTop;
         var prev = this.prevScrollPos;
         this.prevScrollPos = scrollTop;

package/dist/es/cells/GridCell.js

@@ -31,7 +31,7 @@ export var GridCell = function (props) {
                 intl.format(props.format, data) :
                 data.toString();
         }
-        var className = classNames(props.className, { 'k-selected': props.isSelected });
+        var className = classNames('k-table-td', props.className, { 'k-selected': props.isSelected });
         defaultRendering = (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: className, role: 'gridcell', "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_a = {}, _a[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _a), navigationAttributes), dataAsString));
     }
     return props.render ?

package/dist/es/cells/GridDetailCell.js

@@ -15,6 +15,6 @@ import * as React from 'react';
 export var GridDetailCell = function (props) {
     var colSpan = props.colSpan, ariaColIndex = props.ariaColIndex, dataItem = props.dataItem, dataIndex = props.dataIndex, id = props.id;
     var navigationAttributes = useTableKeyboardNavigation(id);
-    return (React.createElement("td", __assign({ className: "k-detail-cell", colSpan: colSpan, "aria-colindex": ariaColIndex, role: 'gridcell' }, navigationAttributes),
+    return (React.createElement("td", __assign({ className: "k-table-td k-detail-cell", colSpan: colSpan, "aria-colindex": ariaColIndex, role: 'gridcell' }, navigationAttributes),
         React.createElement(props.detail, { dataItem: dataItem, dataIndex: dataIndex })));
 };

package/dist/es/cells/GridDetailHierarchyCell.js

@@ -14,5 +14,5 @@ import * as React from 'react';
 /** @hidden */
 export var GridDetailHierarchyCell = function (props) {
     var navigationAttributes = useTableKeyboardNavigation(props.id);
-    return (React.createElement("td", __assign({ className: "k-hierarchy-cell" }, navigationAttributes)));
+    return (React.createElement("td", __assign({ className: "k-table-td k-hierarchy-cell" }, navigationAttributes, { role: 'gridcell' })));
 };

package/dist/es/cells/GridEditCell.js

@@ -23,7 +23,7 @@ export var GridEditCell = function (props) {
     var _a, _b, _c, _d, _e;
     var data = getNestedValue(props.field, props.dataItem);
     var defaultRendering = null;
-    var editCellClasses = classNames('k-grid-edit-cell', (_a = {},
+    var editCellClasses = classNames('k-table-td', 'k-grid-edit-cell', (_a = {},
         _a['k-selected'] = props.isSelected,
         _a), props.className);
     var inputId = React.useMemo(function () { return guid(); }, []);

package/dist/es/cells/GridFilterCell.js

@@ -16,7 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 import * as React from 'react';
 import { Button } from '@progress/kendo-react-buttons';
 import { DropDownList } from '@progress/kendo-react-dropdowns';
-import { NumericTextBox, Input } from '@progress/kendo-react-inputs';
+import { NumericTextBox, TextBox } from '@progress/kendo-react-inputs';
 import { DatePicker } from '@progress/kendo-react-dateinputs';
 import { messages, filterClearButton, filterChooseOperator } from '../messages';
 import { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
@@ -31,7 +31,7 @@ var GridFilterCell = /** @class */ (function (_super) {
                 return;
             }
             var value = _this.props.operators.find(function (item) { return item.operator === _this.props.operator; }) || null;
-            return (React.createElement(DropDownList, { value: value, onChange: _this.operatorChange, className: "k-dropdown-operator", iconClassName: "k-i-filter k-icon", data: _this.props.operators, textField: "text", title: localization.toLanguageString(filterChooseOperator, messages[filterChooseOperator]), popupSettings: {
+            return (React.createElement(DropDownList, { size: _this.props.size, value: value, onChange: _this.operatorChange, className: "k-dropdown-operator", iconClassName: "k-i-filter k-icon", data: _this.props.operators, textField: "text", title: localization.toLanguageString(filterChooseOperator, messages[filterChooseOperator]), popupSettings: {
                     width: ''
                 } }));
         };
@@ -48,12 +48,12 @@ var GridFilterCell = /** @class */ (function (_super) {
         var _a;
         var localizationService = provideLocalizationService(this);
         var defaultRendering = (React.createElement("div", { className: "k-filtercell" },
-            React.createElement("span", null,
+            React.createElement("div", { className: "k-filtercell-wrapper" },
                 this.filterComponent(this.props.filterType, this.props.value, this.props.booleanValues),
                 React.createElement("div", { className: "k-filtercell-operator" },
                     this.renderOperatorEditor(localizationService),
                     "\u00A0",
-                    React.createElement(Button, { icon: 'filter-clear', className: classNames((_a = {},
+                    React.createElement(Button, { size: this.props.size, icon: 'filter-clear', className: classNames((_a = {},
                             _a['k-clear-button-visible'] = Boolean(!(this.props.value === null || this.props.value === '') || this.props.operator),
                             _a)), title: localizationService.toLanguageString(filterClearButton, messages[filterClearButton]), type: "button", onClick: this.clear, disabled: !(!(this.props.value === null || this.props.value === '') || this.props.operator) })))));
         if (this.props.render) {
@@ -78,13 +78,13 @@ var GridFilterCell = /** @class */ (function (_super) {
         var _this = this;
         switch (filterType) {
             case 'numeric':
-                return (React.createElement(NumericTextBox, { value: value, onChange: function (e) { _this.inputChange(e.value, e.syntheticEvent); }, title: this.props.title, ariaLabel: this.props.ariaLabel }));
+                return (React.createElement(NumericTextBox, { size: this.props.size, value: value, onChange: function (e) { _this.inputChange(e.value, e.syntheticEvent); }, title: this.props.title, ariaLabel: this.props.ariaLabel }));
             case 'date':
-                return (React.createElement(DatePicker, { value: value, onChange: function (e) { _this.inputChange(e.value, e.syntheticEvent); }, title: this.props.title, ariaLabel: this.props.ariaLabel }));
+                return (React.createElement(DatePicker, { size: this.props.size, value: value, onChange: function (e) { _this.inputChange(e.value, e.syntheticEvent); }, title: this.props.title, ariaLabel: this.props.ariaLabel }));
             case 'boolean':
                 var noFilterSet_1 = function (filter) { return filter === null || filter === undefined; };
-                return (React.createElement(DropDownList, { onChange: this.boolDropdownChange, value: booleanValues.find(function (item) { return item.operator === (noFilterSet_1(value) ? '' : value); }), data: booleanValues, textField: "text", title: this.props.title, ariaLabel: this.props.ariaLabel }));
-            default: return (React.createElement(Input, { value: value || '', onChange: function (e) { _this.inputChange(e.target.value, e.syntheticEvent); }, title: this.props.title, "aria-label": this.props.ariaLabel }));
+                return (React.createElement(DropDownList, { size: this.props.size, onChange: this.boolDropdownChange, value: booleanValues.find(function (item) { return item.operator === (noFilterSet_1(value) ? '' : value); }), data: booleanValues, textField: "text", title: this.props.title, ariaLabel: this.props.ariaLabel }));
+            default: return (React.createElement(TextBox, { size: this.props.size, value: value || '', onChange: function (e) { _this.inputChange(e.target.value, e.syntheticEvent); }, title: this.props.title, "aria-label": this.props.ariaLabel }));
         }
     };
     return GridFilterCell;