@progress/kendo-react-grid 5.17.0-dev.202308101804 → 5.17.0-dev.202308141334

package/dist/es/Grid.d.ts

@@ -109,6 +109,8 @@ export declare class Grid extends React.Component<GridProps> {
     private _columns;
     private _columnsMap;
     private _columnsMutations;
+    private _resized;
+    private _shouldUpdateLeftRight;
     private contextStateRef;
     private navigationStateRef;
     private _data;

package/dist/es/Grid.js

@@ -36,7 +36,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, 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 { tableColumnsVirtualization, Pager, mapColumns, updateLeft, updateRight, 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';
 import { GridEditCell } from './cells/GridEditCell';
@@ -49,7 +49,7 @@ 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, resolveCells } from './utils/index';
+import { getNestedValue, flatData, readColumns, autoGenerateColumns, firefox, firefoxMaxHeight, sanitizeColumns, resolveCells, getColumnWidth } from './utils/index';
 import { GridCell } from './cells/GridCell';
 import { GridGroupCell } from './cells/GridGroupCell';
 import { GridRow } from './rows/GridRow';
@@ -101,6 +101,8 @@ var Grid = /** @class */ (function (_super) {
         _this._columns = [];
         _this._columnsMap = [[]];
         _this._columnsMutations = 0;
+        _this._resized = false;
+        _this._shouldUpdateLeftRight = true;
         _this.contextStateRef = { current: undefined };
         _this.navigationStateRef = { current: undefined };
         _this._data = [];
@@ -357,6 +359,8 @@ var Grid = /** @class */ (function (_super) {
         };
         _this.onResize = function (index, newWidth, oldWidth, nativeEvent, end, targetId) {
             _this.resetTableWidth();
+            _this._shouldUpdateLeftRight = true;
+            _this._resized = true;
             _this._columnsMutations++;
             if (_this.props.onColumnResize) {
                 _this.props.onColumnResize.call(undefined, {
@@ -432,8 +436,8 @@ 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, { cells: _this.props.cells, 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.getHeaderRow = memoizeOne(function (sort, sortable, group, groupable, filter, filterable, filterOperators, headerCellRender, columnMenu, columns, columnsMap, isHeaderRtl) {
+            return (React.createElement(HeaderRow, { cells: _this.props.cells, 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: isHeaderRtl, 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; });
@@ -597,6 +601,7 @@ var Grid = /** @class */ (function (_super) {
     Grid.prototype.render = function () {
         var _a, _b, _c, _d;
         var _this = this;
+        var _e;
         var total = this.props.total || 0;
         var idPrefix = navigationTools.getIdPrefix(this.navigationStateRef);
         var propsData = [];
@@ -609,7 +614,7 @@ var Grid = /** @class */ (function (_super) {
             total = total || this.props.data.total;
         }
         var groupingFooter = (typeof this.props.groupable === 'object') && this.props.groupable.footer || 'none';
-        var _e = this.flatData(propsData, groupingFooter, this.props.skip || 0, this.props.group, this.props.expandField, this.props.filter, this.props.sort), resolvedGroupsCount = _e.resolvedGroupsCount, flattedData = _e.flattedData;
+        var _f = this.flatData(propsData, groupingFooter, this.props.skip || 0, this.props.group, this.props.expandField, this.props.filter, this.props.sort), resolvedGroupsCount = _f.resolvedGroupsCount, flattedData = _f.flattedData;
         this._data = flattedData;
         var groupable = this.props.groupable === true ||
             (typeof this.props.groupable === 'object') && this.props.groupable.enabled !== false;
@@ -626,17 +631,16 @@ 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 _f = this.props, sort = _f.sort, sortable = _f.sortable, group = _f.group, filter = _f.filter, filterable = _f.filterable, _g = _f.filterOperators, filterOperators = _g === void 0 ? operators : _g, headerCellRender = _f.headerCellRender, columnMenu = _f.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, { cells: this.props.cells, 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 _g = this.props, sort = _g.sort, sortable = _g.sortable, group = _g.group, filter = _g.filter, filterable = _g.filterable, _h = _g.filterOperators, filterOperators = _h === void 0 ? operators : _h, headerCellRender = _g.headerCellRender, columnMenu = _g.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, this.isRtl), filterRow: this.props.filterable && React.createElement(FilterRow, { cells: this.props.cells, 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: getColumnWidth(column) })); }) }));
         var scrollLeft = this.vs && this.vs.container && this.vs.container.scrollLeft || 0;
         var tableWidth = parseFloat(((this.props.style || {}).width || '').toString());
-        var _h = tableColumnsVirtualization({
+        var _j = tableColumnsVirtualization({
             enabled: this.props.columnVirtualization,
             columns: leafColumns,
             tableViewPortWidth: tableWidth,
             scrollLeft: scrollLeft
-        }), colSpans = _h.colSpans, isColHidden = _h.hiddenColumns;
+        }), colSpans = _j.colSpans, isColHidden = _j.hiddenColumns;
         var dataRow = function (item, rowId, rowDataIndex) {
             var isInEdit = false;
             var selectedValue = _this.props.selectedField ? getNestedValue(_this.props.selectedField, item.dataItem) : undefined;
@@ -741,12 +745,15 @@ var Grid = /** @class */ (function (_super) {
         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, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', ref: function (f) { return _this._footer = f; }, row: React.createElement(FooterRow, { cells: this.props.cells, 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 footerCols = function (column, index) {
+            return (React.createElement("col", { key: index.toString(), width: getColumnWidth(column) }));
+        };
+        var footer = (Boolean((_e = this.props.cells) === null || _e === void 0 ? void 0 : _e.footerCell)
+            || this._columns.some(function (c) { var _a; return Boolean(c.footerCell || Boolean((_a = c.cells) === null || _a === void 0 ? void 0 : _a.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, { cells: this.props.cells, columns: this._columns, isRtl: this.isRtl, ariaRowIndex: currentAriaRowIndex + 1 }), cols: leafColumns.map(footerCols) })) : null;
         var colGroups = (React.createElement("colgroup", { ref: function (c) {
                 _this.columnResize.colGroupMain = c;
-            } }, leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), className: sorted(column.field) ? 'k-sorted' : undefined, width: column.width !== undefined ?
-                Math.floor(parseFloat(column.width.toString())) + 'px' : undefined })); })));
+            } }, leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), className: sorted(column.field) ? 'k-sorted' : undefined, width: getColumnWidth(column) })); })));
         var enableDragClues = this.dragLogic.reorderable || this.dragLogic.groupable;
         var tableDisplay = this.props.columnVirtualization ? 'block' : 'table';
         if (this.props.scrollable === 'none') {
@@ -846,6 +853,13 @@ var Grid = /** @class */ (function (_super) {
         (_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 shouldUpdateRL = this._columns[prev].locked && this._columns[next].locked;
+        updateLeft(this._columnsMap, this._columns, shouldUpdateRL || this._shouldUpdateLeftRight);
+        updateRight(this._columnsMap, this._columns, shouldUpdateRL || this._shouldUpdateLeftRight);
+        if (this._resized) {
+            this._shouldUpdateLeftRight = false;
+            this._resized = false;
+        }
         var eventColumnProps = this.columns;
         this.forceUpdate();
         if (this.props.onColumnReorder) {

package/dist/es/drag/ColumnResize.d.ts

@@ -29,4 +29,5 @@ export declare class ColumnResize {
     private fixateInitialWidths;
     private setWidths;
     private updateColElements;
+    private updateNextLockedCol;
 }

package/dist/es/drag/ColumnResize.js

@@ -1,13 +1,14 @@
 // offsetWidth() is slowly transition to reporting double instead of integet in all browsers
 // during this process (which is a bit back-and-forth) we need to make sure we are working across all browsers and versions
 var OFFSET_ROUND = 1;
+var LOCK_COLUMN_BUFFER = 20;
 /**
  * @hidden
  */
 var ColumnResize = /** @class */ (function () {
     function ColumnResize(triggerResize) {
         var _this = this;
-        // Typings. `col` and `colgroup` do not differ, both represnt a `HTMLTableColElement`.
+        // Typings. `col` and `colgroup` do not differ, both represent a `HTMLTableColElement`.
         // Implemented as `any`.
         this.columns = [];
         /**
@@ -25,11 +26,11 @@ var ColumnResize = /** @class */ (function () {
                 e.stopPropagation();
                 e.stopImmediatePropagation();
             }
-            var tdElement = dragCue.parentElement;
-            if (!tdElement || !tdElement.parentElement) {
+            var thElement = dragCue.closest('th');
+            if (!thElement || !thElement) {
                 return;
             }
-            var oldWidth = tdElement.clientWidth;
+            var oldWidth = thElement.clientWidth;
             var newWidth = oldWidth;
             if (_this.isRtl) {
                 newWidth += (dragCue.getBoundingClientRect().right - (dragCue.offsetWidth / 2)) - event.clientX;
@@ -40,7 +41,7 @@ var ColumnResize = /** @class */ (function () {
             if (!end && Math.abs(newWidth - oldWidth) < 1) {
                 return;
             }
-            _this.fixateInitialWidths(tdElement.parentElement.clientWidth);
+            _this.fixateInitialWidths(thElement.parentElement.clientWidth);
             _this.setWidths(column, Math.floor(newWidth) / oldWidth);
             var index = _this.columns.filter(function (c) { return !c.children.length; }).findIndex(function (c) { return c.id === column.id; });
             _this.onResize(index, oldWidth, newWidth, e, end, column.id);
@@ -114,15 +115,21 @@ var ColumnResize = /** @class */ (function () {
                 var currentWidth = currentColumnFloorWidth + Math.floor(difference);
                 difference -= Math.floor(difference);
                 if (_this.colGroupMain && _this.colGroupMain.children[colIndex]) {
+                    var mainWidth = parseInt(_this.colGroupMain.children[colIndex].width, 10);
                     _this.colGroupMain.children[colIndex].width = currentWidth + 'px';
+                    _this.updateNextLockedCol(_this.colGroupMain.parentElement, currentColumn, mainWidth - currentWidth);
                 }
                 if (_this.colGroupHeader && _this.colGroupHeader.children[colIndex]) {
+                    var headerWidth = parseInt(_this.colGroupHeader.children[colIndex].width, 10);
                     // static headers
                     _this.colGroupHeader.children[colIndex].width = currentWidth + 'px';
+                    _this.updateNextLockedCol(_this.colGroupHeader.parentElement, currentColumn, headerWidth - currentWidth);
                 }
                 if (_this.colGroupFooter && _this.colGroupFooter.children[colIndex]) {
+                    var footerWidth = parseInt(_this.colGroupFooter.children[colIndex].width, 10);
                     // static footers
                     _this.colGroupFooter.children[colIndex].width = currentWidth + 'px';
+                    _this.updateNextLockedCol(_this.colGroupFooter.parentElement, currentColumn, footerWidth - currentWidth);
                 }
             };
             for (var i = 0; i < affectedColumns.length; i++) {
@@ -188,6 +195,40 @@ var ColumnResize = /** @class */ (function () {
         this.updateColElements(toAdjust);
         return toAdjust;
     };
+    ColumnResize.prototype.updateNextLockedCol = function (element, current, deltaWidth) {
+        var _this = this;
+        var currentIndex = current.index;
+        var gridWrapperEl = this.colGroupMain.parentElement.closest('.k-grid');
+        var maxWidth = gridWrapperEl === null || gridWrapperEl === void 0 ? void 0 : gridWrapperEl.clientWidth;
+        var widthOfLocked = this.columns.filter(function (c) { return c.locked; }).map(function (e) { return parseInt(e.width + '', 10); }).reduce(function (a, b) { return a + b; }, 0);
+        if (!current.locked || maxWidth <= widthOfLocked + LOCK_COLUMN_BUFFER) {
+            return;
+        }
+        this.columns.forEach(function (nColumn) {
+            if ((nColumn === null || nColumn === void 0 ? void 0 : nColumn.locked) && deltaWidth) {
+                var allColumnEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('[aria-colindex="' + nColumn.ariaColumnIndex + '"]');
+                allColumnEls === null || allColumnEls === void 0 ? void 0 : allColumnEls.forEach(function (el) {
+                    var currentStyle = el.style;
+                    if (_this.isRtl) {
+                        if (nColumn.index > currentIndex && currentStyle && currentStyle.right) {
+                            currentStyle.right = parseInt(currentStyle.right, 10) - deltaWidth + 'px';
+                        }
+                        if (nColumn.index < currentIndex && currentStyle && currentStyle.left) {
+                            currentStyle.left = parseInt(currentStyle.left, 10) - deltaWidth + 'px';
+                        }
+                    }
+                    else {
+                        if (nColumn.index > currentIndex && currentStyle && currentStyle.left) {
+                            currentStyle.left = parseInt(currentStyle.left, 10) - deltaWidth + 'px';
+                        }
+                        if (nColumn.index < currentIndex && currentStyle && currentStyle.right) {
+                            currentStyle.right = parseInt(currentStyle.right, 10) - deltaWidth + 'px';
+                        }
+                    }
+                });
+            }
+        });
+    };
     return ColumnResize;
 }());
 export { ColumnResize };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-grid',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1691688722,
+    publishDate: 1692018616,
     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/es/utils/index.d.ts

@@ -32,7 +32,7 @@ import { GridCellsSettings } from '../interfaces/GridCellsSettings';
 /**
  * @hidden
  */
-export declare function readColumns(elements: (React.ReactNode | React.ReactChild | GridColumnProps)[], oldColumns: GridColumnProps[], idInfo: {
+export declare function readColumns(elements: (React.ReactNode | React.ReactChild | GridColumnProps)[], oldColumns: ExtendedColumnProps[], idInfo: {
     prevId: number;
     idPrefix: string;
 }, depth?: number): ExtendedColumnProps[];
@@ -47,6 +47,10 @@ export declare function autoGenerateColumns(data: any[] | DataResult | null | un
  * @hidden
  */
 export declare const footerColumns: (columns: ExtendedColumnProps[]) => ExtendedColumnProps[];
+/**
+ * @hidden
+ */
+export declare const getColumnWidth: (column: ExtendedColumnProps) => string | undefined;
 /**
  * @hidden
  */

package/dist/es/utils/index.js

@@ -130,7 +130,9 @@ export function readColumns(elements, oldColumns, idInfo, depth) {
             children: children,
             rowSpan: 0,
             colSpan: 0,
-            isAccessible: true
+            isAccessible: true,
+            left: oldColumn && Math.floor(oldColumn.left),
+            right: oldColumn && Math.floor(oldColumn.right)
         }));
     });
     var comparator = function (a, b) {
@@ -215,6 +217,14 @@ export var footerColumns = function (columns) {
         return Boolean(column.footerCell) || !(column.children && column.children.length > 0);
     });
 };
+/**
+ * @hidden
+ */
+export var getColumnWidth = function (column) {
+    return column.width !== undefined
+        ? Math.floor(parseFloat(column.width.toString())) + 'px'
+        : undefined;
+};
 /**
  * @hidden
  */

package/dist/npm/Grid.d.ts

@@ -109,6 +109,8 @@ export declare class Grid extends React.Component<GridProps> {
     private _columns;
     private _columnsMap;
     private _columnsMutations;
+    private _resized;
+    private _shouldUpdateLeftRight;
     private contextStateRef;
     private navigationStateRef;
     private _data;

package/dist/npm/Grid.js

@@ -104,6 +104,8 @@ var Grid = /** @class */ (function (_super) {
         _this._columns = [];
         _this._columnsMap = [[]];
         _this._columnsMutations = 0;
+        _this._resized = false;
+        _this._shouldUpdateLeftRight = true;
         _this.contextStateRef = { current: undefined };
         _this.navigationStateRef = { current: undefined };
         _this._data = [];
@@ -360,6 +362,8 @@ var Grid = /** @class */ (function (_super) {
         };
         _this.onResize = function (index, newWidth, oldWidth, nativeEvent, end, targetId) {
             _this.resetTableWidth();
+            _this._shouldUpdateLeftRight = true;
+            _this._resized = true;
             _this._columnsMutations++;
             if (_this.props.onColumnResize) {
                 _this.props.onColumnResize.call(undefined, {
@@ -435,8 +439,8 @@ 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, { cells: _this.props.cells, 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.getHeaderRow = (0, kendo_react_common_1.memoizeOne)(function (sort, sortable, group, groupable, filter, filterable, filterOperators, headerCellRender, columnMenu, columns, columnsMap, isHeaderRtl) {
+            return (React.createElement(HeaderRow_1.HeaderRow, { cells: _this.props.cells, 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: isHeaderRtl, 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; });
@@ -600,6 +604,7 @@ var Grid = /** @class */ (function (_super) {
     Grid.prototype.render = function () {
         var _a, _b, _c, _d;
         var _this = this;
+        var _e;
         var total = this.props.total || 0;
         var idPrefix = kendo_react_data_tools_1.tableKeyboardNavigationTools.getIdPrefix(this.navigationStateRef);
         var propsData = [];
@@ -612,7 +617,7 @@ var Grid = /** @class */ (function (_super) {
             total = total || this.props.data.total;
         }
         var groupingFooter = (typeof this.props.groupable === 'object') && this.props.groupable.footer || 'none';
-        var _e = this.flatData(propsData, groupingFooter, this.props.skip || 0, this.props.group, this.props.expandField, this.props.filter, this.props.sort), resolvedGroupsCount = _e.resolvedGroupsCount, flattedData = _e.flattedData;
+        var _f = this.flatData(propsData, groupingFooter, this.props.skip || 0, this.props.group, this.props.expandField, this.props.filter, this.props.sort), resolvedGroupsCount = _f.resolvedGroupsCount, flattedData = _f.flattedData;
         this._data = flattedData;
         var groupable = this.props.groupable === true ||
             (typeof this.props.groupable === 'object') && this.props.groupable.enabled !== false;
@@ -629,17 +634,16 @@ 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 _f = this.props, sort = _f.sort, sortable = _f.sortable, group = _f.group, filter = _f.filter, filterable = _f.filterable, _g = _f.filterOperators, filterOperators = _g === void 0 ? filterCommon_1.operators : _g, headerCellRender = _f.headerCellRender, columnMenu = _f.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, { cells: this.props.cells, 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 _g = this.props, sort = _g.sort, sortable = _g.sortable, group = _g.group, filter = _g.filter, filterable = _g.filterable, _h = _g.filterOperators, filterOperators = _h === void 0 ? filterCommon_1.operators : _h, headerCellRender = _g.headerCellRender, columnMenu = _g.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, this.isRtl), filterRow: this.props.filterable && React.createElement(FilterRow_1.FilterRow, { cells: this.props.cells, 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: (0, index_1.getColumnWidth)(column) })); }) }));
         var scrollLeft = this.vs && this.vs.container && this.vs.container.scrollLeft || 0;
         var tableWidth = parseFloat(((this.props.style || {}).width || '').toString());
-        var _h = (0, kendo_react_data_tools_1.tableColumnsVirtualization)({
+        var _j = (0, kendo_react_data_tools_1.tableColumnsVirtualization)({
             enabled: this.props.columnVirtualization,
             columns: leafColumns,
             tableViewPortWidth: tableWidth,
             scrollLeft: scrollLeft
-        }), colSpans = _h.colSpans, isColHidden = _h.hiddenColumns;
+        }), colSpans = _j.colSpans, isColHidden = _j.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;
@@ -744,12 +748,15 @@ var Grid = /** @class */ (function (_super) {
         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_1.Footer, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', ref: function (f) { return _this._footer = f; }, row: React.createElement(FooterRow_1.FooterRow, { cells: this.props.cells, 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 footerCols = function (column, index) {
+            return (React.createElement("col", { key: index.toString(), width: (0, index_1.getColumnWidth)(column) }));
+        };
+        var footer = (Boolean((_e = this.props.cells) === null || _e === void 0 ? void 0 : _e.footerCell)
+            || this._columns.some(function (c) { var _a; return Boolean(c.footerCell || Boolean((_a = c.cells) === null || _a === void 0 ? void 0 : _a.footerCell)); }))
+            ? (React.createElement(Footer_1.Footer, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', ref: function (f) { return _this._footer = f; }, row: React.createElement(FooterRow_1.FooterRow, { cells: this.props.cells, columns: this._columns, isRtl: this.isRtl, ariaRowIndex: currentAriaRowIndex + 1 }), cols: leafColumns.map(footerCols) })) : null;
         var colGroups = (React.createElement("colgroup", { ref: function (c) {
                 _this.columnResize.colGroupMain = c;
-            } }, leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), className: sorted(column.field) ? 'k-sorted' : undefined, width: column.width !== undefined ?
-                Math.floor(parseFloat(column.width.toString())) + 'px' : undefined })); })));
+            } }, leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), className: sorted(column.field) ? 'k-sorted' : undefined, width: (0, index_1.getColumnWidth)(column) })); })));
         var enableDragClues = this.dragLogic.reorderable || this.dragLogic.groupable;
         var tableDisplay = this.props.columnVirtualization ? 'block' : 'table';
         if (this.props.scrollable === 'none') {
@@ -849,6 +856,13 @@ var Grid = /** @class */ (function (_super) {
         (_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 shouldUpdateRL = this._columns[prev].locked && this._columns[next].locked;
+        (0, kendo_react_data_tools_1.updateLeft)(this._columnsMap, this._columns, shouldUpdateRL || this._shouldUpdateLeftRight);
+        (0, kendo_react_data_tools_1.updateRight)(this._columnsMap, this._columns, shouldUpdateRL || this._shouldUpdateLeftRight);
+        if (this._resized) {
+            this._shouldUpdateLeftRight = false;
+            this._resized = false;
+        }
         var eventColumnProps = this.columns;
         this.forceUpdate();
         if (this.props.onColumnReorder) {

package/dist/npm/drag/ColumnResize.d.ts

@@ -29,4 +29,5 @@ export declare class ColumnResize {
     private fixateInitialWidths;
     private setWidths;
     private updateColElements;
+    private updateNextLockedCol;
 }

package/dist/npm/drag/ColumnResize.js

@@ -4,13 +4,14 @@ exports.ColumnResize = void 0;
 // offsetWidth() is slowly transition to reporting double instead of integet in all browsers
 // during this process (which is a bit back-and-forth) we need to make sure we are working across all browsers and versions
 var OFFSET_ROUND = 1;
+var LOCK_COLUMN_BUFFER = 20;
 /**
  * @hidden
  */
 var ColumnResize = /** @class */ (function () {
     function ColumnResize(triggerResize) {
         var _this = this;
-        // Typings. `col` and `colgroup` do not differ, both represnt a `HTMLTableColElement`.
+        // Typings. `col` and `colgroup` do not differ, both represent a `HTMLTableColElement`.
         // Implemented as `any`.
         this.columns = [];
         /**
@@ -28,11 +29,11 @@ var ColumnResize = /** @class */ (function () {
                 e.stopPropagation();
                 e.stopImmediatePropagation();
             }
-            var tdElement = dragCue.parentElement;
-            if (!tdElement || !tdElement.parentElement) {
+            var thElement = dragCue.closest('th');
+            if (!thElement || !thElement) {
                 return;
             }
-            var oldWidth = tdElement.clientWidth;
+            var oldWidth = thElement.clientWidth;
             var newWidth = oldWidth;
             if (_this.isRtl) {
                 newWidth += (dragCue.getBoundingClientRect().right - (dragCue.offsetWidth / 2)) - event.clientX;
@@ -43,7 +44,7 @@ var ColumnResize = /** @class */ (function () {
             if (!end && Math.abs(newWidth - oldWidth) < 1) {
                 return;
             }
-            _this.fixateInitialWidths(tdElement.parentElement.clientWidth);
+            _this.fixateInitialWidths(thElement.parentElement.clientWidth);
             _this.setWidths(column, Math.floor(newWidth) / oldWidth);
             var index = _this.columns.filter(function (c) { return !c.children.length; }).findIndex(function (c) { return c.id === column.id; });
             _this.onResize(index, oldWidth, newWidth, e, end, column.id);
@@ -117,15 +118,21 @@ var ColumnResize = /** @class */ (function () {
                 var currentWidth = currentColumnFloorWidth + Math.floor(difference);
                 difference -= Math.floor(difference);
                 if (_this.colGroupMain && _this.colGroupMain.children[colIndex]) {
+                    var mainWidth = parseInt(_this.colGroupMain.children[colIndex].width, 10);
                     _this.colGroupMain.children[colIndex].width = currentWidth + 'px';
+                    _this.updateNextLockedCol(_this.colGroupMain.parentElement, currentColumn, mainWidth - currentWidth);
                 }
                 if (_this.colGroupHeader && _this.colGroupHeader.children[colIndex]) {
+                    var headerWidth = parseInt(_this.colGroupHeader.children[colIndex].width, 10);
                     // static headers
                     _this.colGroupHeader.children[colIndex].width = currentWidth + 'px';
+                    _this.updateNextLockedCol(_this.colGroupHeader.parentElement, currentColumn, headerWidth - currentWidth);
                 }
                 if (_this.colGroupFooter && _this.colGroupFooter.children[colIndex]) {
+                    var footerWidth = parseInt(_this.colGroupFooter.children[colIndex].width, 10);
                     // static footers
                     _this.colGroupFooter.children[colIndex].width = currentWidth + 'px';
+                    _this.updateNextLockedCol(_this.colGroupFooter.parentElement, currentColumn, footerWidth - currentWidth);
                 }
             };
             for (var i = 0; i < affectedColumns.length; i++) {
@@ -191,6 +198,40 @@ var ColumnResize = /** @class */ (function () {
         this.updateColElements(toAdjust);
         return toAdjust;
     };
+    ColumnResize.prototype.updateNextLockedCol = function (element, current, deltaWidth) {
+        var _this = this;
+        var currentIndex = current.index;
+        var gridWrapperEl = this.colGroupMain.parentElement.closest('.k-grid');
+        var maxWidth = gridWrapperEl === null || gridWrapperEl === void 0 ? void 0 : gridWrapperEl.clientWidth;
+        var widthOfLocked = this.columns.filter(function (c) { return c.locked; }).map(function (e) { return parseInt(e.width + '', 10); }).reduce(function (a, b) { return a + b; }, 0);
+        if (!current.locked || maxWidth <= widthOfLocked + LOCK_COLUMN_BUFFER) {
+            return;
+        }
+        this.columns.forEach(function (nColumn) {
+            if ((nColumn === null || nColumn === void 0 ? void 0 : nColumn.locked) && deltaWidth) {
+                var allColumnEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('[aria-colindex="' + nColumn.ariaColumnIndex + '"]');
+                allColumnEls === null || allColumnEls === void 0 ? void 0 : allColumnEls.forEach(function (el) {
+                    var currentStyle = el.style;
+                    if (_this.isRtl) {
+                        if (nColumn.index > currentIndex && currentStyle && currentStyle.right) {
+                            currentStyle.right = parseInt(currentStyle.right, 10) - deltaWidth + 'px';
+                        }
+                        if (nColumn.index < currentIndex && currentStyle && currentStyle.left) {
+                            currentStyle.left = parseInt(currentStyle.left, 10) - deltaWidth + 'px';
+                        }
+                    }
+                    else {
+                        if (nColumn.index > currentIndex && currentStyle && currentStyle.left) {
+                            currentStyle.left = parseInt(currentStyle.left, 10) - deltaWidth + 'px';
+                        }
+                        if (nColumn.index < currentIndex && currentStyle && currentStyle.right) {
+                            currentStyle.right = parseInt(currentStyle.right, 10) - deltaWidth + 'px';
+                        }
+                    }
+                });
+            }
+        });
+    };
     return ColumnResize;
 }());
 exports.ColumnResize = ColumnResize;

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-grid',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1691688722,
+    publishDate: 1692018616,
     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/utils/index.d.ts

@@ -32,7 +32,7 @@ import { GridCellsSettings } from '../interfaces/GridCellsSettings';
 /**
  * @hidden
  */
-export declare function readColumns(elements: (React.ReactNode | React.ReactChild | GridColumnProps)[], oldColumns: GridColumnProps[], idInfo: {
+export declare function readColumns(elements: (React.ReactNode | React.ReactChild | GridColumnProps)[], oldColumns: ExtendedColumnProps[], idInfo: {
     prevId: number;
     idPrefix: string;
 }, depth?: number): ExtendedColumnProps[];
@@ -47,6 +47,10 @@ export declare function autoGenerateColumns(data: any[] | DataResult | null | un
  * @hidden
  */
 export declare const footerColumns: (columns: ExtendedColumnProps[]) => ExtendedColumnProps[];
+/**
+ * @hidden
+ */
+export declare const getColumnWidth: (column: ExtendedColumnProps) => string | undefined;
 /**
  * @hidden
  */

package/dist/npm/utils/index.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveCells = exports.firefoxMaxHeight = exports.firefox = exports.sanitizeColumns = exports.footerColumns = exports.autoGenerateColumns = exports.readColumns = exports.checkPropCompatibility = exports.flatData = exports.getNestedValue = void 0;
+exports.resolveCells = exports.firefoxMaxHeight = exports.firefox = exports.sanitizeColumns = exports.getColumnWidth = exports.footerColumns = exports.autoGenerateColumns = exports.readColumns = exports.checkPropCompatibility = exports.flatData = exports.getNestedValue = void 0;
 /**
  * @hidden
  */
@@ -136,7 +136,9 @@ function readColumns(elements, oldColumns, idInfo, depth) {
             children: children,
             rowSpan: 0,
             colSpan: 0,
-            isAccessible: true
+            isAccessible: true,
+            left: oldColumn && Math.floor(oldColumn.left),
+            right: oldColumn && Math.floor(oldColumn.right)
         }));
     });
     var comparator = function (a, b) {
@@ -224,6 +226,15 @@ var footerColumns = function (columns) {
     });
 };
 exports.footerColumns = footerColumns;
+/**
+ * @hidden
+ */
+var getColumnWidth = function (column) {
+    return column.width !== undefined
+        ? Math.floor(parseFloat(column.width.toString())) + 'px'
+        : undefined;
+};
+exports.getColumnWidth = getColumnWidth;
 /**
  * @hidden
  */