@vaadin/grid 24.7.0-alpha1 → 24.7.0-alpha10

package/src/vaadin-grid-drag-and-drop-mixin.js

@@ -1,8 +1,9 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { isChrome, isSafari } from '@vaadin/component-base/src/browser-utils.js';
 import {
   iterateChildren,
   iterateRowCells,
@@ -24,9 +25,6 @@ const DropLocation = {
   EMPTY: 'empty',
 };
 
-// Detects if the browser doesn't support HTML5 Drag & Drop API (and falls back to the @vaadin/vaadin-mobile-drag-drop polyfill)
-const usesDnDPolyfill = !('draggable' in document.createElement('div'));
-
 /**
  * @polymerMixin
  */
@@ -139,10 +137,6 @@ export const DragAndDropMixin = (superClass) =>
     /** @protected */
     connectedCallback() {
       super.connectedCallback();
-      // Chromium based browsers cannot properly generate drag images for elements
-      // that have children with massive heights. This workaround prevents crashes
-      // and performance issues by excluding the items from the drag image.
-      // https://github.com/vaadin/web-components/issues/7985
       document.addEventListener('dragstart', this.__onDocumentDragStart, { capture: true });
     }
 
@@ -181,13 +175,8 @@ export const DragAndDropMixin = (superClass) =>
 
         const rowRect = row.getBoundingClientRect();
 
-        if (usesDnDPolyfill) {
-          // The polyfill drag image is automatically centered so there is no need to adjust the position
-          e.dataTransfer.setDragImage(row);
-        } else {
-          // The native drag image needs to be shifted manually to compensate for the touch position offset
-          e.dataTransfer.setDragImage(row, e.clientX - rowRect.left, e.clientY - rowRect.top);
-        }
+        // The native drag image needs to be shifted manually to compensate for the touch position offset
+        e.dataTransfer.setDragImage(row, e.clientX - rowRect.left, e.clientY - rowRect.top);
 
         let rows = [row];
         if (this._isSelected(row._item)) {
@@ -238,6 +227,9 @@ export const DragAndDropMixin = (superClass) =>
 
     /** @private */
     _onDragLeave(e) {
+      if (!this.dropMode) {
+        return;
+      }
       e.stopPropagation();
       this._clearDragStyles();
     }
@@ -312,25 +304,50 @@ export const DragAndDropMixin = (superClass) =>
       }
     }
 
-    /** @private */
+    /**
+     * Webkit-based browsers have issues with generating drag images
+     * for elements that have children with massive heights. Chromium
+     * browsers crash, while Safari experiences significant performance
+     * issues. To mitigate these issues, we hide the scroller element
+     * when drag starts to remove it from the drag image.
+     *
+     * Grids with fewer rows also have issues on Chromium and Safari
+     * where the drag image is not properly clipped and may include
+     * content outside the grid. Temporary inline styles are applied
+     * to mitigate this issue.
+     *
+     * Related issues:
+     * - https://github.com/vaadin/web-components/issues/7985
+     * - https://issues.chromium.org/issues/383356871
+     * - https://github.com/vaadin/web-components/issues/8386
+     *
+     * @private
+     */
     __onDocumentDragStart(e) {
-      // The dragged element can be the element itself or a parent of the element
-      if (!e.target.contains(this)) {
-        return;
-      }
-      // The threshold value 20000 provides a buffer to both
-      //   - avoid the crash and the performance issues
-      //   - unnecessarily avoid excluding items from the drag image
-      if (this.$.items.offsetHeight > 20000) {
-        const initialItemsMaxHeight = this.$.items.style.maxHeight;
-        const initialTableOverflow = this.$.table.style.overflow;
-        // Momentarily hides the items until the browser starts generating the
-        // drag image.
-        this.$.items.style.maxHeight = '0';
-        this.$.table.style.overflow = 'hidden';
+      if (e.target.contains(this)) {
+        // Record the original inline styles to restore them later
+        const elements = [e.target, this.$.items, this.$.scroller];
+        const originalInlineStyles = elements.map((element) => element.style.cssText);
+
+        // With a large number of rows, hide the scroller
+        if (this.$.table.scrollHeight > 20000) {
+          this.$.scroller.style.display = 'none';
+        }
+
+        // Workaround content outside the grid ending up in the drag image on Chromium
+        if (isChrome) {
+          e.target.style.willChange = 'transform';
+        }
+
+        // Workaround text content outside the grid ending up in the drag image on Safari
+        if (isSafari) {
+          this.$.items.style.flexShrink = 1;
+        }
+
         requestAnimationFrame(() => {
-          this.$.items.style.maxHeight = initialItemsMaxHeight;
-          this.$.table.style.overflow = initialTableOverflow;
+          elements.forEach((element, index) => {
+            element.style.cssText = originalInlineStyles[index];
+          });
         });
       }
     }

package/src/vaadin-grid-dynamic-columns-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { microTask, timeOut } from '@vaadin/component-base/src/async.js';
@@ -36,7 +36,10 @@ export const DynamicColumnsMixin = (superClass) =>
         /**
          * @protected
          */
-        _columnTree: Object,
+        _columnTree: {
+          type: Object,
+          sync: true,
+        },
       };
     }
 
@@ -100,15 +103,6 @@ export const DynamicColumnsMixin = (superClass) =>
       const columnTree = this._getColumnTree();
 
       if (!arrayEquals(columnTree, this._columnTree)) {
-        // Request a synchronoys update for each column
-        columnTree.forEach((columnArray) => {
-          columnArray.forEach((column) => {
-            if (column.performUpdate) {
-              column.performUpdate();
-            }
-          });
-        });
-
         this._columnTree = columnTree;
       }
     }

package/src/vaadin-grid-event-context-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-grid-event-context-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { GridDefaultItem } from './vaadin-grid.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-filter.js';

package/src/vaadin-grid-filter-element-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-grid-filter-element-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { timeOut } from '@vaadin/component-base/src/async.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/vaadin-grid-filter.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/vaadin-grid-filter.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/text-field/src/vaadin-text-field.js';

package/src/vaadin-grid-helpers.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { microTask } from '@vaadin/component-base/src/async.js';

package/src/vaadin-grid-keyboard-navigation-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
@@ -9,6 +9,7 @@ import type { A11yMixinClass } from './vaadin-grid-a11y-mixin.js';
 import type { ActiveItemMixinClass } from './vaadin-grid-active-item-mixin.js';
 import type { ArrayDataProviderMixinClass } from './vaadin-grid-array-data-provider-mixin.js';
 import type { GridBodyRenderer, GridColumn, GridHeaderFooterRenderer } from './vaadin-grid-column.js';
+import type { ColumnAutoWidthMixinClass } from './vaadin-grid-column-auto-width-mixin.js';
 import type { ColumnReorderingMixinClass } from './vaadin-grid-column-reordering-mixin.js';
 import type {
   DataProviderMixinClass,
@@ -172,6 +173,7 @@ export declare function GridMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<A11yMixinClass> &
   Constructor<ActiveItemMixinClass<TItem>> &
+  Constructor<ColumnAutoWidthMixinClass> &
   Constructor<ArrayDataProviderMixinClass<TItem>> &
   Constructor<ColumnReorderingMixinClass> &
   Constructor<DataProviderMixinClass<TItem>> &
@@ -191,6 +193,7 @@ export interface GridMixinClass<TItem>
     A11yMixinClass,
     ActiveItemMixinClass<TItem>,
     ArrayDataProviderMixinClass<TItem>,
+    ColumnAutoWidthMixinClass,
     DataProviderMixinClass<TItem>,
     RowDetailsMixinClass<TItem>,
     ScrollMixinClass,
@@ -209,11 +212,6 @@ export interface GridMixinClass<TItem>
    */
   allRowsVisible: boolean;
 
-  /**
-   * Updates the `width` of all columns which have `autoWidth` set to `true`.
-   */
-  recalculateColumnWidths(): void;
-
   /**
    * Requests an update for the content of cells.
    *

package/src/vaadin-grid-mixin.js

@@ -1,9 +1,8 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils.js';
 import { TabindexMixin } from '@vaadin/a11y-base/src/tabindex-mixin.js';
 import { animationFrame, microTask } from '@vaadin/component-base/src/async.js';
 import {
@@ -24,6 +23,7 @@ import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
 import { A11yMixin } from './vaadin-grid-a11y-mixin.js';
 import { ActiveItemMixin } from './vaadin-grid-active-item-mixin.js';
 import { ArrayDataProviderMixin } from './vaadin-grid-array-data-provider-mixin.js';
+import { ColumnAutoWidthMixin } from './vaadin-grid-column-auto-width-mixin.js';
 import { ColumnReorderingMixin } from './vaadin-grid-column-reordering-mixin.js';
 import { ColumnResizingMixin } from './vaadin-grid-column-resizing-mixin.js';
 import { DataProviderMixin } from './vaadin-grid-data-provider-mixin.js';
@@ -67,20 +67,22 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
  * @mixes DragAndDropMixin
  */
 export const GridMixin = (superClass) =>
-  class extends ArrayDataProviderMixin(
-    DataProviderMixin(
-      DynamicColumnsMixin(
-        ActiveItemMixin(
-          ScrollMixin(
-            SelectionMixin(
-              SortMixin(
-                RowDetailsMixin(
-                  KeyboardNavigationMixin(
-                    A11yMixin(
-                      FilterMixin(
-                        ColumnReorderingMixin(
-                          ColumnResizingMixin(
-                            EventContextMixin(DragAndDropMixin(StylingMixin(TabindexMixin(superClass)))),
+  class extends ColumnAutoWidthMixin(
+    ArrayDataProviderMixin(
+      DataProviderMixin(
+        DynamicColumnsMixin(
+          ActiveItemMixin(
+            ScrollMixin(
+              SelectionMixin(
+                SortMixin(
+                  RowDetailsMixin(
+                    KeyboardNavigationMixin(
+                      A11yMixin(
+                        FilterMixin(
+                          ColumnReorderingMixin(
+                            ColumnResizingMixin(
+                              EventContextMixin(DragAndDropMixin(StylingMixin(TabindexMixin(superClass)))),
+                            ),
                           ),
                         ),
                       ),
@@ -144,12 +146,6 @@ export const GridMixin = (superClass) =>
           reflectToAttribute: true,
         },
 
-        /** @private */
-        __pendingRecalculateColumnWidths: {
-          type: Boolean,
-          value: true,
-        },
-
         /** @private */
         isAttached: {
           value: false,
@@ -201,7 +197,6 @@ export const GridMixin = (superClass) =>
     connectedCallback() {
       super.connectedCallback();
       this.isAttached = true;
-      this.recalculateColumnWidths();
     }
 
     /** @protected */
@@ -273,7 +268,6 @@ export const GridMixin = (superClass) =>
       new ResizeObserver(() =>
         setTimeout(() => {
           this.__updateColumnsBodyContentHidden();
-          this.__tryToRecalculateColumnWidthsIfPending();
         }),
       ).observe(this.$.table);
 
@@ -352,217 +346,6 @@ export const GridMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __getIntrinsicWidth(col) {
-      if (!this.__intrinsicWidthCache.has(col)) {
-        this.__calculateAndCacheIntrinsicWidths([col]);
-      }
-      return this.__intrinsicWidthCache.get(col);
-    }
-
-    /** @private */
-    __getDistributedWidth(col, innerColumn) {
-      if (col == null || col === this) {
-        return 0;
-      }
-
-      const columnWidth = Math.max(
-        this.__getIntrinsicWidth(col),
-        this.__getDistributedWidth((col.assignedSlot || col).parentElement, col),
-      );
-
-      // We're processing a regular grid-column and not a grid-column-group
-      if (!innerColumn) {
-        return columnWidth;
-      }
-
-      // At the end, the width of each vaadin-grid-column-group is determined by the sum of the width of its children.
-      // Here we determine how much space the vaadin-grid-column-group actually needs to render properly and then we distribute that space
-      // to its children, so when we actually do the summation it will be rendered properly.
-      // Check out vaadin-grid-column-group:_updateFlexAndWidth
-      const columnGroup = col;
-      const columnGroupWidth = columnWidth;
-      const sumOfWidthOfAllChildColumns = columnGroup._visibleChildColumns
-        .map((col) => this.__getIntrinsicWidth(col))
-        .reduce((sum, curr) => sum + curr, 0);
-
-      const extraNecessarySpaceForGridColumnGroup = Math.max(0, columnGroupWidth - sumOfWidthOfAllChildColumns);
-
-      // The distribution of the extra necessary space is done according to the intrinsic width of each child column.
-      // Lets say we need 100 pixels of extra space for the grid-column-group to render properly
-      // it has two grid-column children, |100px|300px| in total 400px
-      // the first column gets 25px of the additional space (100/400)*100 = 25
-      // the second column gets the 75px of the additional space (300/400)*100 = 75
-      const proportionOfExtraSpace = this.__getIntrinsicWidth(innerColumn) / sumOfWidthOfAllChildColumns;
-      const shareOfInnerColumnFromNecessaryExtraSpace = proportionOfExtraSpace * extraNecessarySpaceForGridColumnGroup;
-
-      return this.__getIntrinsicWidth(innerColumn) + shareOfInnerColumnFromNecessaryExtraSpace;
-    }
-
-    /**
-     * @param {!Array<!GridColumn>} cols the columns to auto size based on their content width
-     * @private
-     */
-    _recalculateColumnWidths(cols) {
-      // 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();
-        }
-      });
-
-      // Flush to account for any changes to the visibility of the columns
-      if (this._debouncerHiddenChanged) {
-        this._debouncerHiddenChanged.flush();
-      }
-
-      this.__intrinsicWidthCache = new Map();
-      // Cache the viewport rows to avoid unnecessary reflows while measuring the column widths
-      const fvi = this._firstVisibleIndex;
-      const lvi = this._lastVisibleIndex;
-      this.__viewportRowsCache = this._getRenderedRows().filter((row) => row.index >= fvi && row.index <= lvi);
-
-      // Pre-cache the intrinsic width of each column
-      this.__calculateAndCacheIntrinsicWidths(cols);
-
-      cols.forEach((col) => {
-        col.width = `${this.__getDistributedWidth(col)}px`;
-      });
-    }
-
-    /**
-     * Toggles the cell content for the given column to use or not use auto width.
-     *
-     * While content for all the column cells uses auto width (instead of the default 100%),
-     * their offsetWidth can be used to calculate the collective intrinsic width of the column.
-     *
-     * @private
-     */
-    __setVisibleCellContentAutoWidth(col, autoWidth) {
-      col._allCells
-        .filter((cell) => {
-          if (this.$.items.contains(cell)) {
-            return this.__viewportRowsCache.includes(cell.parentElement);
-          }
-          return true;
-        })
-        .forEach((cell) => {
-          cell.__measuringAutoWidth = autoWidth;
-
-          if (cell.__measuringAutoWidth) {
-            // Store the original inline width of the cell to restore it later
-            cell.__originalWidth = cell.style.width;
-            // Prepare the cell for having its intrinsic width measured
-            cell.style.width = 'auto';
-            cell.style.position = 'absolute';
-          } else {
-            // Restore the original width
-            cell.style.width = cell.__originalWidth;
-            delete cell.__originalWidth;
-            cell.style.position = '';
-          }
-        });
-
-      if (autoWidth) {
-        this.$.scroller.setAttribute('measuring-auto-width', '');
-      } else {
-        this.$.scroller.removeAttribute('measuring-auto-width');
-      }
-    }
-
-    /**
-     * Returns the maximum intrinsic width of the cell content in the given column.
-     * Only cells which are marked for measuring auto width are considered.
-     *
-     * @private
-     */
-    __getAutoWidthCellsMaxWidth(col) {
-      // Note: _allCells only contains cells which are currently rendered in DOM
-      return col._allCells.reduce((width, cell) => {
-        // Add 1px buffer to the offset width to avoid too narrow columns (sub-pixel rendering)
-        return cell.__measuringAutoWidth ? Math.max(width, cell.offsetWidth + 1) : width;
-      }, 0);
-    }
-
-    /**
-     * Calculates and caches the intrinsic width of each given column.
-     *
-     * @private
-     */
-    __calculateAndCacheIntrinsicWidths(cols) {
-      // Make all the columns use auto width at once before measuring to
-      // avoid reflows in between the measurements
-      cols.forEach((col) => this.__setVisibleCellContentAutoWidth(col, true));
-      // Measure and cache
-      cols.forEach((col) => {
-        const width = this.__getAutoWidthCellsMaxWidth(col);
-        this.__intrinsicWidthCache.set(col, width);
-      });
-      // Reset the columns to use 100% width
-      cols.forEach((col) => this.__setVisibleCellContentAutoWidth(col, false));
-    }
-
-    /**
-     * Updates the `width` of all columns which have `autoWidth` set to `true`.
-     */
-    recalculateColumnWidths() {
-      if (!this._columnTree) {
-        return; // No columns
-      }
-      if (isElementHidden(this) || this._dataProviderController.isLoading()) {
-        this.__pendingRecalculateColumnWidths = true;
-        return;
-      }
-      const cols = this._getColumns().filter((col) => !col.hidden && col.autoWidth);
-
-      const undefinedCols = cols.filter((col) => !customElements.get(col.localName));
-      if (undefinedCols.length) {
-        // Some of the columns are not defined yet, wait for them to be defined before measuring
-        Promise.all(undefinedCols.map((col) => customElements.whenDefined(col.localName))).then(() => {
-          this._recalculateColumnWidths(cols);
-        });
-      } else {
-        this._recalculateColumnWidths(cols);
-      }
-    }
-
-    /** @private */
-    __tryToRecalculateColumnWidthsIfPending() {
-      if (!this.__pendingRecalculateColumnWidths || isElementHidden(this) || this._dataProviderController.isLoading()) {
-        return;
-      }
-
-      // Delay recalculation if any rows are missing an index.
-      // This can happen during the grid's initialization if the recalculation is triggered
-      // as a result of the data provider responding synchronously to a page request created
-      // in the middle of the virtualizer update loop. In this case, rows after the one that
-      // triggered the page request may not have an index property yet. The lack of index
-      // prevents _onDataProviderPageReceived from requesting children for these rows,
-      // resulting in loading state being set to false and the recalculation beginning
-      // before all the data is loaded. Note, rows without index get updated in later iterations
-      // of the virtualizer update loop, ensuring the grid eventually reaches a stable state.
-      const hasRowsWithUndefinedIndex = [...this.$.items.children].some((row) => row.index === undefined);
-      if (hasRowsWithUndefinedIndex) {
-        return;
-      }
-
-      const hasRowsWithClientHeight = [...this.$.items.children].some((row) => row.clientHeight > 0);
-      if (hasRowsWithClientHeight) {
-        this.__pendingRecalculateColumnWidths = false;
-        this.recalculateColumnWidths();
-      }
-    }
-
-    /**
-     * @protected
-     * @override
-     */
-    _onDataProviderPageLoaded() {
-      super._onDataProviderPageLoaded();
-      this.__tryToRecalculateColumnWidthsIfPending();
-    }
-
     /** @private */
     _createScrollerRows(count) {
       const rows = [];
@@ -590,7 +373,6 @@ export const GridMixin = (superClass) =>
         animationFrame,
         () => {
           this._afterScroll();
-          this.__tryToRecalculateColumnWidthsIfPending();
         },
       );
       return rows;
@@ -876,7 +658,6 @@ export const GridMixin = (superClass) =>
     /** @private */
     _columnTreeChanged(columnTree) {
       this._renderColumnTree(columnTree);
-      this.recalculateColumnWidths();
       this.__updateColumnsBodyContentHidden();
     }
 
@@ -1015,7 +796,6 @@ export const GridMixin = (superClass) =>
       // ShadyCSS applies scoping suffixes to animation names
       if (e.animationName.indexOf('vaadin-grid-appear') === 0) {
         e.stopPropagation();
-        this.__tryToRecalculateColumnWidthsIfPending();
 
         // Ensure header and footer have tabbable elements
         this._resetKeyboardNavigation();

package/src/vaadin-grid-row-details-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-grid-row-details-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { iterateChildren } from './vaadin-grid-helpers.js';