@vaadin/grid 25.3.0-dev.3a3c2d7d2a → 25.3.0-rc1

package/src/directives/cell-content-directive.js

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html } from 'lit';
+import { AsyncDirective, directive } from 'lit/async-directive.js';
+
+/**
+ * A directive that manages the `<vaadin-grid-cell-content>` element for a cell.
+ */
+class CellContentDirective extends AsyncDirective {
+  #cell;
+
+  update(part, [grid, slotName, { textAlign } = {}]) {
+    this.#cell = part.parentNode;
+    this.#cell._content ??= document.createElement('vaadin-grid-cell-content');
+    this.#cell._content.slot = slotName;
+    this.#cell._content.style.textAlign = textAlign ?? '';
+
+    if (!grid.contains(this.#cell._content)) {
+      grid.appendChild(this.#cell._content);
+    }
+
+    return html`<slot name="${slotName}"></slot>`;
+  }
+
+  disconnected() {
+    this.#cell._content?.remove();
+  }
+}
+
+export const cellContent = directive(CellContentDirective);

package/src/styles/vaadin-grid-base-styles.js

@@ -597,6 +597,13 @@ export const gridStyles = css`
     outline-offset: calc(var(--vaadin-grid-border-width, 1px) * -1);
   }
 
+  /* Styles applied to draggable cell content; see _filterDragAndDrop in vaadin-grid-drag-and-drop-mixin.js. */
+  ::slotted(vaadin-grid-cell-content[draggable-source]) {
+    -webkit-user-drag: element;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
   .row[dragover] {
     z-index: 100 !important;
   }

package/src/vaadin-grid-a11y-mixin.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { findTreeToggleCell, getClosestCell, iterateChildren, iterateRowCells } from './vaadin-grid-helpers.js';
 
 export const A11yMixin = (superClass) =>
@@ -19,7 +20,7 @@ export const A11yMixin = (superClass) =>
       };
     }
     static get observers() {
-      return ['__a11yUpdateGridSize(size, _columnTree, __emptyState)', '__a11yI18nChanged(__effectiveI18n)'];
+      return ['__a11yUpdateGridSize(_flatSize, _columnTree, __emptyState)', '__a11yI18nChanged(__effectiveI18n)'];
     }
 
     /** @private */
@@ -43,14 +44,14 @@ export const A11yMixin = (superClass) =>
     }
 
     /** @private */
-    __a11yUpdateGridSize(size, _columnTree, emptyState) {
-      if (size === undefined || _columnTree === undefined) {
+    __a11yUpdateGridSize(flatSize, _columnTree, emptyState) {
+      if (flatSize === undefined || _columnTree === undefined) {
         return;
       }
 
       const headerRowsCount = this.__a11yGetHeaderRowCount(_columnTree);
       const footerRowsCount = this.__a11yGetFooterRowCount(_columnTree);
-      const bodyRowsCount = emptyState ? 1 : size;
+      const bodyRowsCount = emptyState ? 1 : flatSize;
       const rowsCount = bodyRowsCount + headerRowsCount + footerRowsCount;
 
       this.$.table.setAttribute('aria-rowcount', rowsCount);
@@ -75,8 +76,12 @@ export const A11yMixin = (superClass) =>
 
     /** @private */
     __a11yUpdateFooterRows() {
+      const bodyRowCount = this._flatSize || 0;
       iterateChildren(this.$.footer, (footerRow, index) => {
-        footerRow.setAttribute('aria-rowindex', this.__a11yGetHeaderRowCount(this._columnTree) + this.size + index + 1);
+        footerRow.setAttribute(
+          'aria-rowindex',
+          this.__a11yGetHeaderRowCount(this._columnTree) + bodyRowCount + index + 1,
+        );
       });
     }
 
@@ -110,19 +115,13 @@ export const A11yMixin = (superClass) =>
       const toggleCell = findTreeToggleCell(row);
       if (this.__isRowExpandable(row)) {
         row.setAttribute('aria-expanded', 'false');
-        if (toggleCell) {
-          toggleCell.setAttribute('aria-expanded', 'false');
-        }
+        toggleCell?.setAttribute('aria-expanded', 'false');
       } else if (this.__isRowCollapsible(row)) {
         row.setAttribute('aria-expanded', 'true');
-        if (toggleCell) {
-          toggleCell.setAttribute('aria-expanded', 'true');
-        }
+        toggleCell?.setAttribute('aria-expanded', 'true');
       } else {
         row.removeAttribute('aria-expanded');
-        if (toggleCell) {
-          toggleCell.removeAttribute('aria-expanded');
-        }
+        toggleCell?.removeAttribute('aria-expanded');
       }
     }
 
@@ -133,11 +132,8 @@ export const A11yMixin = (superClass) =>
      */
     __a11yUpdateRowLevel(row, level) {
       // Set level for the expandable rows itself, and all the nested rows.
-      if (level > 0 || this.__isRowCollapsible(row) || this.__isRowExpandable(row)) {
-        row.setAttribute('aria-level', level + 1);
-      } else {
-        row.removeAttribute('aria-level');
-      }
+      const hasLevel = level > 0 || this.__isRowCollapsible(row) || this.__isRowExpandable(row);
+      setOrRemoveAttribute(row, 'aria-level', hasLevel && level + 1);
     }
 
     /**
@@ -153,15 +149,6 @@ export const A11yMixin = (superClass) =>
       });
     }
 
-    /**
-     * @param {!HTMLElement} cell
-     * @param {number} colspan
-     * @private
-     */
-    __a11yUpdateCellColspan(cell, colspan) {
-      cell.setAttribute('aria-colspan', Number(colspan));
-    }
-
     /** @private */
     __a11yUpdateSorters() {
       Array.from(this.querySelectorAll('vaadin-grid-sorter')).forEach((sorter) => {

package/src/vaadin-grid-active-item-mixin.js

@@ -76,7 +76,7 @@ export const ActiveItemMixin = (superClass) =>
         // Cell is the empty state cell
         cell === this.$.emptystatecell ||
         // Cell content is focused
-        cell._content.contains(this.getRootNode().activeElement) ||
+        cell._content.matches(':focus-within') ||
         // Clicked on a focusable element
         this._isFocusable(e.target) ||
         // Clicked on a label element

package/src/vaadin-grid-column-auto-width-mixin.js

@@ -137,11 +137,7 @@ export const ColumnAutoWidthMixin = (superClass) =>
     _recalculateColumnWidths() {
       // Flush to make sure DOM is up-to-date when measuring the column widths
       this.__virtualizer.flush();
-      [...this.$.header.children, ...this.$.footer.children].forEach((row) => {
-        if (row.__debounceUpdateHeaderFooterRowVisibility) {
-          row.__debounceUpdateHeaderFooterRowVisibility.flush();
-        }
-      });
+      this.__renderHeaderFooterDebouncer?.flush();
 
       this.__hasHadRenderedRowsForColumnWidthCalculation ||= this._getRenderedRows().length > 0;
 
@@ -218,11 +214,7 @@ export const ColumnAutoWidthMixin = (superClass) =>
           }
         });
 
-      if (autoWidth) {
-        this.$.scroller.setAttribute('measuring-auto-width', '');
-      } else {
-        this.$.scroller.removeAttribute('measuring-auto-width');
-      }
+      this.$.scroller.toggleAttribute('measuring-auto-width', autoWidth);
     }
 
     /**
@@ -315,10 +307,9 @@ export const ColumnAutoWidthMixin = (superClass) =>
       // of the virtualizer update loop, ensuring the grid eventually reaches a stable state.
       const hasRowsWithUndefinedIndex = [...this.$.items.children].some((row) => row.index === undefined);
 
-      const debouncingHiddenChanged = this._debouncerHiddenChanged && this._debouncerHiddenChanged.isActive();
+      const debouncingHiddenChanged = this._debouncerHiddenChanged?.isActive();
 
-      const debouncingUpdateFrozenColumn =
-        this.__debounceUpdateFrozenColumn && this.__debounceUpdateFrozenColumn.isActive();
+      const debouncingUpdateFrozenColumn = this.__debounceUpdateFrozenColumn?.isActive();
 
       // When using a percentage-based height, the grid's effective height may
       // be 0 until the resize observer in grid-mixin calculates a min-height.

package/src/vaadin-grid-column-group-mixin.js

@@ -57,7 +57,7 @@ export const GridColumnGroupMixin = (superClass) =>
         '_groupFrozenChanged(frozen, _rootColumns)',
         '_groupFrozenToEndChanged(frozenToEnd, _rootColumns)',
         '_groupHiddenChanged(hidden)',
-        '_colSpanChanged(_colSpan, _headerCell, _footerCell)',
+        '_colSpanChanged(_colSpan)',
         '_groupOrderChanged(_order, _rootColumns)',
         '_groupReorderStatusChanged(_reorderStatus, _rootColumns)',
         '_groupResizableChanged(resizable, _rootColumns)',
@@ -74,9 +74,7 @@ export const GridColumnGroupMixin = (superClass) =>
     /** @protected */
     disconnectedCallback() {
       super.disconnectedCallback();
-      if (this._observer) {
-        this._observer.disconnect();
-      }
+      this._observer?.disconnect();
     }
 
     /**
@@ -307,19 +305,8 @@ export const GridColumnGroupMixin = (superClass) =>
     }
 
     /** @private */
-    _colSpanChanged(colSpan, headerCell, footerCell) {
-      if (headerCell) {
-        headerCell.setAttribute('colspan', colSpan);
-        if (this._grid) {
-          this._grid.__a11yUpdateCellColspan(headerCell, colSpan);
-        }
-      }
-      if (footerCell) {
-        footerCell.setAttribute('colspan', colSpan);
-        if (this._grid) {
-          this._grid.__a11yUpdateCellColspan(footerCell, colSpan);
-        }
-      }
+    _colSpanChanged() {
+      this._grid?.__scheduleRenderHeaderFooter?.();
     }
 
     /**
@@ -344,9 +331,7 @@ export const GridColumnGroupMixin = (superClass) =>
         this._preventHiddenSynchronization = false;
 
         // Update the column tree
-        if (this._grid && this._grid._debounceUpdateColumnTree) {
-          this._grid._debounceUpdateColumnTree();
-        }
+        this._grid?._debounceUpdateColumnTree?.();
       });
       this._observer.flush();
     }

package/src/vaadin-grid-column-mixin.d.ts

@@ -12,7 +12,7 @@ export type GridBodyRenderer<TItem, Column extends GridColumnMixin<TItem, Column
   model: GridItemModel<TItem>,
 ) => void;
 
-export type GridColumnTextAlign = 'center' | 'end' | 'start' | null;
+export type GridColumnTextAlign = 'center' | 'end' | 'left' | 'right' | 'start' | null;
 
 export type GridHeaderFooterRenderer<TItem, Column extends ColumnBaseMixinClass<TItem, Column>> = (
   root: HTMLElement,
@@ -71,8 +71,8 @@ export declare class ColumnBaseMixinClass<TItem, Column extends ColumnBaseMixinC
 
   /**
    * Aligns the columns cell content horizontally.
-   * Supported values: "start", "center" and "end".
-   * @attr {start|center|end} text-align
+   *
+   * @attr {start|center|end|left|right} text-align
    */
   textAlign: GridColumnTextAlign | null | undefined;
 

package/src/vaadin-grid-column-mixin.js

@@ -7,7 +7,8 @@ import { animationFrame } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { get } from '@vaadin/component-base/src/path-utils.js';
-import { updateCellState, updatePart } from './vaadin-grid-helpers.js';
+import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
+import { updateCellState } from './vaadin-grid-helpers.js';
 
 export const ColumnBaseMixin = (superClass) =>
   class ColumnBaseMixin extends superClass {
@@ -92,8 +93,8 @@ export const ColumnBaseMixin = (superClass) =>
 
         /**
          * Aligns the columns cell content horizontally.
-         * Supported values: "start", "center" and "end".
-         * @attr {start|center|end} text-align
+         *
+         * @attr {start|center|end|left|right} text-align
          */
         textAlign: {
           type: String,
@@ -244,37 +245,26 @@ export const ColumnBaseMixin = (superClass) =>
           type: Function,
           computed: '_computeFooterRenderer(footerRenderer, __initialized)',
         },
-
-        /**
-         * An internal property that is mainly used by `vaadin-template-renderer`
-         * to identify grid column elements.
-         *
-         * @private
-         */
-        __gridColumnElement: {
-          type: Boolean,
-          value: true,
-        },
       };
     }
 
     static get observers() {
       return [
-        '_widthChanged(width, _headerCell, _footerCell, _cells)',
+        '_widthChanged(width, _cells)',
         '_frozenChanged(frozen, _headerCell, _footerCell, _cells)',
         '_frozenToEndChanged(frozenToEnd, _headerCell, _footerCell, _cells)',
-        '_flexGrowChanged(flexGrow, _headerCell, _footerCell, _cells)',
-        '_textAlignChanged(textAlign, _cells, _headerCell, _footerCell)',
+        '_flexGrowChanged(flexGrow, _cells)',
+        '_textAlignChanged(textAlign, _cells)',
         '_lastFrozenChanged(_lastFrozen)',
         '_firstFrozenToEndChanged(_firstFrozenToEnd)',
         '_onRendererOrBindingChanged(_renderer, _cells, _bodyContentHidden, path)',
         '_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header)',
         '_onFooterRendererOrBindingChanged(_footerRenderer, _footerCell)',
-        '_resizableChanged(resizable, _headerCell)',
+        '_resizableChanged(resizable)',
         '_reorderStatusChanged(_reorderStatus, _headerCell, _footerCell, _cells)',
         '_hiddenChanged(hidden, _headerCell, _footerCell, _cells)',
         '_rowHeaderChanged(rowHeader, _cells)',
-        '__headerFooterPartNameChanged(_headerCell, _footerCell, headerPartName, footerPartName)',
+        '__headerFooterPartNameChanged(headerPartName, footerPartName)',
       ];
     }
 
@@ -302,6 +292,19 @@ export const ColumnBaseMixin = (superClass) =>
         .filter((cell) => cell);
     }
 
+    constructor() {
+      super();
+
+      /**
+       * A stable unique id assigned once per column instance. Used to build
+       * cell content slot names that stay stable across re-renders, so lit
+       * can reuse the cell content elements when the column tree changes.
+       *
+       * @protected
+       */
+      this._id = generateUniqueId();
+    }
+
     /** @protected */
     connectedCallback() {
       super.connectedCallback();
@@ -313,7 +316,7 @@ export const ColumnBaseMixin = (superClass) =>
           return;
         }
 
-        this._allCells.forEach((cell) => {
+        this._cells?.forEach((cell) => {
           if (!cell._content.parentNode) {
             this._grid.appendChild(cell._content);
           }
@@ -332,10 +335,8 @@ export const ColumnBaseMixin = (superClass) =>
           return;
         }
 
-        this._allCells.forEach((cell) => {
-          if (cell._content.parentNode) {
-            cell._content.parentNode.removeChild(cell._content);
-          }
+        this._cells?.forEach((cell) => {
+          cell._content.parentNode?.removeChild(cell._content);
         });
       });
 
@@ -364,46 +365,40 @@ export const ColumnBaseMixin = (superClass) =>
 
     /** @private */
     _flexGrowChanged(flexGrow) {
-      if (this.parentElement && this.parentElement._columnPropChanged) {
-        this.parentElement._columnPropChanged('flexGrow');
-      }
+      this.parentElement?._columnPropChanged?.('flexGrow');
 
-      this._allCells.forEach((cell) => {
+      this._grid?.__scheduleRenderHeaderFooter?.();
+
+      this._cells?.forEach((cell) => {
         cell.style.flexGrow = flexGrow;
       });
     }
 
     /** @private */
     _widthChanged(width) {
-      if (this.parentElement && this.parentElement._columnPropChanged) {
-        this.parentElement._columnPropChanged('width');
-      }
+      this.parentElement?._columnPropChanged?.('width');
 
-      this._allCells.forEach((cell) => {
+      this._grid?.__scheduleRenderHeaderFooter?.();
+
+      this._cells?.forEach((cell) => {
         cell.style.width = width;
       });
     }
 
     /** @private */
     _frozenChanged(frozen) {
-      if (this.parentElement && this.parentElement._columnPropChanged) {
-        this.parentElement._columnPropChanged('frozen', frozen);
-      }
+      this.parentElement?._columnPropChanged?.('frozen', frozen);
 
       this._allCells.forEach((cell) => {
         updateCellState(cell, 'frozen', frozen);
       });
 
-      if (this._grid && this._grid._frozenCellsChanged) {
-        this._grid._frozenCellsChanged();
-      }
+      this._grid?._frozenCellsChanged?.();
     }
 
     /** @private */
     _frozenToEndChanged(frozenToEnd) {
-      if (this.parentElement && this.parentElement._columnPropChanged) {
-        this.parentElement._columnPropChanged('frozenToEnd', frozenToEnd);
-      }
+      this.parentElement?._columnPropChanged?.('frozenToEnd', frozenToEnd);
 
       this._allCells.forEach((cell) => {
         // Skip sizer cells to keep correct scrollWidth.
@@ -414,9 +409,7 @@ export const ColumnBaseMixin = (superClass) =>
         updateCellState(cell, 'frozen-to-end', frozenToEnd);
       });
 
-      if (this._grid && this._grid._frozenCellsChanged) {
-        this._grid._frozenCellsChanged();
-      }
+      this._grid?._frozenCellsChanged?.();
     }
 
     /** @private */
@@ -448,11 +441,7 @@ export const ColumnBaseMixin = (superClass) =>
 
     /** @private */
     _rowHeaderChanged(rowHeader, cells) {
-      if (!cells) {
-        return;
-      }
-
-      cells.forEach((cell) => {
+      cells?.forEach((cell) => {
         cell.setAttribute('role', rowHeader ? 'rowheader' : 'gridcell');
       });
     }
@@ -485,75 +474,47 @@ export const ColumnBaseMixin = (superClass) =>
     }
 
     /** @private */
-    _resizableChanged(resizable, headerCell) {
-      if (resizable === undefined || headerCell === undefined) {
+    _resizableChanged(resizable) {
+      if (resizable === undefined) {
         return;
       }
 
-      if (headerCell) {
-        [headerCell].concat(this._emptyCells).forEach((cell) => {
-          if (cell) {
-            const existingHandle = cell.querySelector('[part~="resize-handle"]');
-            if (existingHandle) {
-              cell.removeChild(existingHandle);
-            }
-
-            if (resizable) {
-              const handle = document.createElement('div');
-              updatePart(handle, 'resize-handle', true);
-              cell.appendChild(handle);
-            }
-          }
-        });
-      }
+      this._grid?.__scheduleRenderHeaderFooter?.();
     }
 
     /** @private */
     _textAlignChanged(textAlign) {
-      if (textAlign === undefined || this._grid === undefined) {
-        return;
-      }
-      if (['start', 'end', 'center'].indexOf(textAlign) === -1) {
-        console.warn('textAlign can only be set as "start", "end" or "center"');
+      if (textAlign === undefined) {
         return;
       }
 
-      this._allCells.forEach((cell) => {
+      this._grid?.__scheduleRenderHeaderFooter?.();
+
+      this._cells?.forEach((cell) => {
         cell._content.style.textAlign = textAlign;
       });
     }
 
     /** @private */
     _hiddenChanged(hidden) {
-      if (this.parentElement && this.parentElement._columnPropChanged) {
-        this.parentElement._columnPropChanged('hidden', hidden);
-      }
+      this.parentElement?._columnPropChanged?.('hidden', hidden);
 
       if (!!hidden !== !!this._previousHidden && this._grid) {
         if (hidden === true) {
-          this._allCells.forEach((cell) => {
-            if (cell._content.parentNode) {
-              cell._content.parentNode.removeChild(cell._content);
-            }
+          this._cells?.forEach((cell) => {
+            cell._content.parentNode?.removeChild(cell._content);
           });
         }
         this._grid._debouncerHiddenChanged = Debouncer.debounce(
           this._grid._debouncerHiddenChanged,
           animationFrame,
           () => {
-            if (this._grid && this._grid._renderColumnTree) {
-              this._grid._renderColumnTree(this._grid._columnTree);
-            }
+            this._grid?._renderColumnTree?.(this._grid._columnTree);
           },
         );
 
-        if (this._grid._debounceUpdateFrozenColumn) {
-          this._grid._debounceUpdateFrozenColumn();
-        }
-
-        if (this._grid._resetKeyboardNavigation) {
-          this._grid._resetKeyboardNavigation();
-        }
+        this._grid._debounceUpdateFrozenColumn?.();
+        this._grid._resetKeyboardNavigation?.();
       }
       this._previousHidden = hidden;
     }
@@ -632,9 +593,8 @@ export const ColumnBaseMixin = (superClass) =>
       }
 
       this.__renderCellsContent(headerRenderer, [headerCell]);
-      if (this._grid && headerCell.parentElement) {
-        this._grid.__debounceUpdateHeaderFooterRowVisibility(headerCell.parentElement);
-      }
+
+      this._grid?.__scheduleRenderHeaderFooter?.();
     }
 
     /** @protected */
@@ -643,19 +603,8 @@ export const ColumnBaseMixin = (superClass) =>
     }
 
     /** @private */
-    __headerFooterPartNameChanged(headerCell, footerCell, headerPartName, footerPartName) {
-      [
-        { cell: headerCell, partName: headerPartName },
-        { cell: footerCell, partName: footerPartName },
-      ].forEach(({ cell, partName }) => {
-        if (cell) {
-          const customParts = cell.__customParts || [];
-          cell.part.remove(...customParts);
-
-          cell.__customParts = partName ? partName.trim().split(' ') : [];
-          cell.part.add(...cell.__customParts);
-        }
-      });
+    __headerFooterPartNameChanged() {
+      this._grid?.__scheduleRenderHeaderFooter?.();
     }
 
     /**
@@ -689,9 +638,8 @@ export const ColumnBaseMixin = (superClass) =>
       }
 
       this.__renderCellsContent(footerRenderer, [footerCell]);
-      if (this._grid && footerCell.parentElement) {
-        this._grid.__debounceUpdateHeaderFooterRowVisibility(footerCell.parentElement);
-      }
+
+      this._grid?.__scheduleRenderHeaderFooter?.();
     }
 
     /** @protected */

package/src/vaadin-grid-column-reordering-mixin.js

@@ -116,7 +116,7 @@ export const ColumnReorderingMixin = (superClass) =>
           return;
         }
 
-        if (headerCell._content.contains(this.getRootNode().activeElement)) {
+        if (headerCell._content.matches(':focus-within')) {
           // Something was focused inside the cell
           return;
         }
@@ -203,6 +203,8 @@ export const ColumnReorderingMixin = (superClass) =>
         for (let i = startIndex; i !== endIndex; i += direction) {
           this._swapColumnOrders(this._draggedColumn, levelColumnsInOrder[i + direction]);
         }
+
+        this.__renderHeaderFooter();
       }
 
       this._updateGhostPosition(e.detail.x, this._touchDevice ? e.detail.y - 50 : e.detail.y);
@@ -434,7 +436,7 @@ export const ColumnReorderingMixin = (superClass) =>
     }
 
     /**
-     * Swaps column orders and physically reorders cells in all rows.
+     * Swaps column orders and reorders cells in all rows.
      * @param {!GridColumn} column1
      * @param {!GridColumn} column2
      * @protected
@@ -444,8 +446,7 @@ export const ColumnReorderingMixin = (superClass) =>
       [column1._order, column2._order] = [column2._order, column1._order];
       const [firstColumn, secondColumn] = column1._order < column2._order ? [column1, column2] : [column2, column1];
 
-      // Reorder cells in all rows (header, footer, body, sizer)
-      [...this.$.header.children, ...this.$.footer.children, ...this.$.items.children, this.$.sizer].forEach((row) => {
+      [...this.$.items.children, this.$.sizer].forEach((row) => {
         const cells = getBodyRowCells(row);
         const firstColumnCells = cells.filter((cell) => firstColumn.contains(cell._column));
         const secondColumnFirstCell = cells.find((cell) => secondColumn.contains(cell._column));
@@ -456,8 +457,12 @@ export const ColumnReorderingMixin = (superClass) =>
         }
       });
 
+      [...this.$.items.children, this.$.sizer].forEach((row) => {
+        this._updateFirstAndLastColumnForRow(row);
+      });
+
+      this.__scheduleRenderHeaderFooter();
       this._debounceUpdateFrozenColumn();
-      this._updateFirstAndLastColumn();
     }
 
     /**

package/src/vaadin-grid-column-resizing-mixin.js

@@ -98,6 +98,10 @@ export const ColumnResizingMixin = (superClass) =>
           cell._column.flexGrow = 0;
         });
 
+        // Flush the scheduled header/footer render to apply the new widths
+        // to the cells before measuring the layout below
+        this.__renderHeaderFooterDebouncer?.flush();
+
         const cellFrozenToEnd = this._frozenToEndCells[0];
 
         // When handle moves below the cell frozen to end, scroll into view.

package/src/vaadin-grid-data-provider-mixin.js

@@ -214,7 +214,7 @@ export const DataProviderMixin = (superClass) =>
      * @protected
      */
     _isExpanded(item) {
-      return this.__expandedKeys && this.__expandedKeys.has(this.getItemId(item));
+      return this.__expandedKeys?.has(this.getItemId(item));
     }
 
     /**
@@ -429,7 +429,7 @@ export const DataProviderMixin = (superClass) =>
 
     /** @private */
     __scrollToPendingIndexes() {
-      if (this.__pendingScrollToIndexes && this.$.items.children.length) {
+      if (this.__pendingScrollToIndexes) {
         const indexes = this.__pendingScrollToIndexes;
         delete this.__pendingScrollToIndexes;
         this.scrollToIndex(...indexes);