@vaadin/grid 25.0.0-alpha1 → 25.0.0-alpha11

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

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/styles/style-props.js';
+import { css } from 'lit';
+
+export const gridTreeToggleStyles = css`
+  :host {
+    display: flex;
+    max-width: 100%;
+    pointer-events: none;
+  }
+
+  /* Don't expand/collapse when clicking #level-spacer */
+  [part] {
+    pointer-events: auto;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host(:not([leaf])) {
+    cursor: var(--vaadin-clickable-cursor);
+  }
+
+  #level-spacer,
+  [part='toggle'] {
+    flex: none;
+  }
+
+  #level-spacer {
+    width: calc(var(--_level, 0) * var(--vaadin-grid-tree-toggle-level-offset, 16px));
+  }
+
+  [part='toggle'] {
+    margin-inline-end: var(--vaadin-gap-container-inline);
+  }
+
+  [part='toggle']::before {
+    content: '';
+    display: block;
+    width: var(--vaadin-icon-size, 1lh);
+    height: var(--vaadin-icon-size, 1lh);
+    background: currentColor;
+    mask-image: var(--_vaadin-icon-chevron-down);
+  }
+
+  :host(:not([expanded])) [part='toggle']::before {
+    rotate: -90deg;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    [part='toggle']::before {
+      transition: rotate 120ms;
+    }
+  }
+
+  :host([leaf]) [part='toggle'] {
+    visibility: hidden;
+  }
+
+  slot {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  @media (forced-colors: active) {
+    [part='toggle']::before {
+      background: CanvasText;
+    }
+  }
+`;

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

@@ -22,7 +22,7 @@ export const A11yMixin = (superClass) =>
       };
     }
     static get observers() {
-      return ['_a11yUpdateGridSize(size, _columnTree)'];
+      return ['_a11yUpdateGridSize(size, _columnTree, __emptyState)'];
     }
 
     /** @private */
@@ -34,21 +34,27 @@ export const A11yMixin = (superClass) =>
 
     /** @private */
     _a11yGetFooterRowCount(_columnTree) {
-      return _columnTree.filter((level) => level.some((col) => col.headerRenderer)).length;
+      return _columnTree.filter((level) => level.some((col) => col.footerRenderer)).length;
     }
 
     /** @private */
-    _a11yUpdateGridSize(size, _columnTree) {
+    _a11yUpdateGridSize(size, _columnTree, emptyState) {
       if (size === undefined || _columnTree === undefined) {
         return;
       }
 
+      const headerRowsCount = this._a11yGetHeaderRowCount(_columnTree);
+      const footerRowsCount = this._a11yGetFooterRowCount(_columnTree);
+      const bodyRowsCount = emptyState ? 1 : size;
+      const rowsCount = bodyRowsCount + headerRowsCount + footerRowsCount;
+
+      this.$.table.setAttribute('aria-rowcount', rowsCount);
+
       const bodyColumns = _columnTree[_columnTree.length - 1];
-      this.$.table.setAttribute(
-        'aria-rowcount',
-        size + this._a11yGetHeaderRowCount(_columnTree) + this._a11yGetFooterRowCount(_columnTree),
-      );
-      this.$.table.setAttribute('aria-colcount', (bodyColumns && bodyColumns.length) || 0);
+      // If no header and footer rows while the empty state is active, count as one column
+      // Otherwise, use the number of body columns, if present
+      const columnsCount = emptyState ? 1 : (rowsCount && bodyColumns && bodyColumns.length) || 0;
+      this.$.table.setAttribute('aria-colcount', columnsCount);
 
       this._a11yUpdateHeaderRows();
       this._a11yUpdateFooterRows();

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

@@ -59,9 +59,15 @@ export const ColumnAutoWidthMixin = (superClass) =>
     }
 
     /** @private */
-    __flatSizeChangedAutoWidth() {
+    __flatSizeChangedAutoWidth(flatSize) {
       // Flat size changed, recalculate column widths if pending (asynchronously, to allow grid to render row elements first)
-      requestAnimationFrame(() => this.__tryToRecalculateColumnWidthsIfPending());
+      requestAnimationFrame(() => {
+        if (!!flatSize && !this.__hasHadRenderedRowsForColumnWidthCalculation) {
+          this.recalculateColumnWidths();
+        } else {
+          this.__tryToRecalculateColumnWidthsIfPending();
+        }
+      });
     }
 
     /**

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

@@ -7,7 +7,6 @@ import { microTask, timeOut } from '@vaadin/component-base/src/async.js';
 import { DataProviderController } from '@vaadin/component-base/src/data-provider-controller/data-provider-controller.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { get } from '@vaadin/component-base/src/path-utils.js';
-import { getBodyRowCells, updateCellsPart, updateState } from './vaadin-grid-helpers.js';
 
 /**
  * @polymerMixin
@@ -166,24 +165,6 @@ export const DataProviderMixin = (superClass) =>
       this._dataProviderController.addEventListener('page-loaded', this._onDataProviderPageLoaded.bind(this));
     }
 
-    /**
-     * @protected
-     * @deprecated since 24.3 and will be removed in Vaadin 25.
-     */
-    get _cache() {
-      console.warn('<vaadin-grid> The `_cache` property is deprecated and will be removed in Vaadin 25.');
-      return this._dataProviderController.rootCache;
-    }
-
-    /**
-     * @protected
-     * @deprecated since 24.3 and will be removed in Vaadin 25.
-     */
-    get _effectiveSize() {
-      console.warn('<vaadin-grid> The `_effectiveSize` property is deprecated and will be removed in Vaadin 25.');
-      return this._flatSize;
-    }
-
     /** @private */
     _sizeChanged(size) {
       this._dataProviderController.rootCache.size = size;
@@ -200,46 +181,20 @@ export const DataProviderMixin = (superClass) =>
       this.requestContentUpdate();
     }
 
-    /**
-     * @param {number} index
-     * @param {HTMLElement} el
-     * @protected
-     */
-    _getItem(index, el) {
-      el.index = index;
-
-      const { item } = this._dataProviderController.getFlatIndexContext(index);
-      if (item) {
-        this.__updateLoading(el, false);
-        this._updateItem(el, item);
-        if (this._isExpanded(item)) {
-          this._dataProviderController.ensureFlatIndexHierarchy(index);
-        }
-      } else {
-        this.__updateLoading(el, true);
-        this._dataProviderController.ensureFlatIndexLoaded(index);
-      }
+    /** @private */
+    __getRowItem(row) {
+      const { item } = this._dataProviderController.getFlatIndexContext(row.index);
+      return item;
     }
 
-    /**
-     * @param {!HTMLElement} row
-     * @param {boolean} loading
-     * @private
-     */
-    __updateLoading(row, loading) {
-      const cells = getBodyRowCells(row);
-
-      // Row state attribute
-      updateState(row, 'loading', loading);
-
-      // Cells part attribute
-      updateCellsPart(cells, 'loading-row-cell', loading);
+    /** @private */
+    __ensureRowItem(row) {
+      this._dataProviderController.ensureFlatIndexLoaded(row.index);
+    }
 
-      if (loading) {
-        // Run style generators for the loading row to have custom names cleared
-        this._generateCellClassNames(row);
-        this._generateCellPartNames(row);
-      }
+    /** @private */
+    __ensureRowHierarchy(row) {
+      this._dataProviderController.ensureFlatIndexHierarchy(row.index);
     }
 
     /**
@@ -309,17 +264,6 @@ export const DataProviderMixin = (superClass) =>
       return level;
     }
 
-    /**
-     * @param {number} page
-     * @param {ItemCache} cache
-     * @protected
-     * @deprecated since 24.3 and will be removed in Vaadin 25.
-     */
-    _loadPage(page, cache) {
-      console.warn('<vaadin-grid> The `_loadPage` method is deprecated and will be removed in Vaadin 25.');
-      this._dataProviderController.__loadCachePage(cache, page);
-    }
-
     /** @protected */
     _onDataProviderPageRequested() {
       this._setLoading(true);
@@ -331,7 +275,7 @@ export const DataProviderMixin = (superClass) =>
       if (this._flatSize !== this._dataProviderController.flatSize) {
         // Schedule an update of all rendered rows by _debouncerApplyCachedData,
         // to ensure that all pages associated with the rendered rows are loaded.
-        this._shouldUpdateAllRenderedRowsAfterPageLoad = true;
+        this._shouldLoadAllRenderedRowsAfterPageLoad = true;
 
         // TODO: Updating the flat size property can still result in a synchonous virtualizer update
         // if the size change requires the virtualizer to increase the amount of physical elements
@@ -341,9 +285,7 @@ export const DataProviderMixin = (superClass) =>
       }
 
       // After updating the cache, check if some of the expanded items should have sub-caches loaded
-      this._getRenderedRows().forEach((row) => {
-        this._dataProviderController.ensureFlatIndexHierarchy(row.index);
-      });
+      this._getRenderedRows().forEach((row) => this.__ensureRowHierarchy(row));
 
       this._hasData = true;
     }
@@ -354,13 +296,14 @@ export const DataProviderMixin = (superClass) =>
       this._debouncerApplyCachedData = Debouncer.debounce(this._debouncerApplyCachedData, timeOut.after(0), () => {
         this._setLoading(false);
 
-        const shouldUpdateAllRenderedRowsAfterPageLoad = this._shouldUpdateAllRenderedRowsAfterPageLoad;
-        this._shouldUpdateAllRenderedRowsAfterPageLoad = false;
+        const shouldLoadAllRenderedRowsAfterPageLoad = this._shouldLoadAllRenderedRowsAfterPageLoad;
+        this._shouldLoadAllRenderedRowsAfterPageLoad = false;
 
         this._getRenderedRows().forEach((row) => {
-          const { item } = this._dataProviderController.getFlatIndexContext(row.index);
-          if (item || shouldUpdateAllRenderedRowsAfterPageLoad) {
-            this._getItem(row.index, row);
+          this.__updateRow(row);
+
+          if (shouldLoadAllRenderedRowsAfterPageLoad) {
+            this.__ensureRowItem(row);
           }
         });
 

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

@@ -247,6 +247,9 @@ export const DragAndDropMixin = (superClass) =>
 
         let row = e.composedPath().find((node) => node.localName === 'tr');
 
+        // Update the horizontal scroll position property of the row being dragged over
+        this.__updateRowScrollPositionProperty(row);
+
         if (!this._flatSize || this.dropMode === DropMode.ON_GRID) {
           // The grid is empty or "on-grid" drop mode was used, always default to "empty"
           this._dropLocation = DropLocation.EMPTY;

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

@@ -6,23 +6,6 @@
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin';
-
-registerStyles(
-  'vaadin-grid-filter',
-  css`
-    :host {
-      display: inline-flex;
-      max-width: 100%;
-    }
-
-    ::slotted(*) {
-      width: 100%;
-      box-sizing: border-box;
-    }
-  `,
-  { moduleId: 'vaadin-grid-filter-styles' },
-);
 
 /**
  * @polymerMixin

package/src/vaadin-grid-filter.js

@@ -8,6 +8,8 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { gridFilterStyles } from './styles/vaadin-grid-filter-base-styles.js';
 import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
 
 /**
@@ -39,11 +41,15 @@ import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
  * @extends HTMLElement
  * @mixes GridFilterElementMixin
  */
-class GridFilter extends GridFilterElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
+class GridFilter extends GridFilterElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))) {
   static get is() {
     return 'vaadin-grid-filter';
   }
 
+  static get styles() {
+    return gridFilterStyles;
+  }
+
   /** @protected */
   render() {
     return html`<slot></slot>`;

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

@@ -280,7 +280,7 @@ export const KeyboardNavigationMixin = (superClass) =>
       if (!targetRowInDom) {
         this._scrollToFlatIndex(index);
       } else {
-        this.__scrollIntoViewport(index);
+        this.__scrollIntoViewport(targetRowInDom);
       }
     }
 

package/src/vaadin-grid-mixin.js

@@ -5,15 +5,7 @@
  */
 import { TabindexMixin } from '@vaadin/a11y-base/src/tabindex-mixin.js';
 import { animationFrame, microTask } from '@vaadin/component-base/src/async.js';
-import {
-  isAndroid,
-  isChrome,
-  isFirefox,
-  isIOS,
-  isSafari,
-  isTouch,
-  supportsAdoptingStyleSheets,
-} from '@vaadin/component-base/src/browser-utils.js';
+import { isAndroid, isChrome, isFirefox, isIOS, isSafari, isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { getClosestElement } from '@vaadin/component-base/src/dom-utils.js';
 import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
@@ -36,6 +28,7 @@ import {
   iterateRowCells,
   updateBooleanRowStates,
   updateCellsPart,
+  updateState,
 } from './vaadin-grid-helpers.js';
 import { KeyboardNavigationMixin } from './vaadin-grid-keyboard-navigation-mixin.js';
 import { RowDetailsMixin } from './vaadin-grid-row-details-mixin.js';
@@ -353,7 +346,7 @@ export const GridMixin = (superClass) =>
         row.setAttribute('role', 'row');
         row.setAttribute('tabindex', '-1');
         if (this._columnTree) {
-          this._updateRow(row, this._columnTree[this._columnTree.length - 1], 'body', false, true);
+          this.__initRow(row, this._columnTree[this._columnTree.length - 1], 'body', false, true);
         }
         rows.push(row);
       }
@@ -465,9 +458,9 @@ export const GridMixin = (superClass) =>
      * @param {?string} section
      * @param {boolean} isColumnRow
      * @param {boolean} noNotify
-     * @protected
+     * @private
      */
-    _updateRow(row, columns, section = 'body', isColumnRow = false, noNotify = false) {
+    __initRow(row, columns, section = 'body', isColumnRow = false, noNotify = false) {
       const contentsFragment = document.createDocumentFragment();
 
       iterateRowCells(row, (cell) => {
@@ -637,6 +630,7 @@ export const GridMixin = (superClass) =>
 
       // Make sure the section has a tabbable element
       this._resetKeyboardNavigation();
+      this._a11yUpdateGridSize(this.size, this._columnTree, this.__emptyState);
     }
 
     /** @private */
@@ -647,10 +641,15 @@ export const GridMixin = (superClass) =>
         return;
       }
 
+      row.index = index;
+
       this._updateRowOrderParts(row, index);
 
       this._a11yUpdateRowRowindex(row, index);
-      this._getItem(index, row);
+
+      this.__ensureRowItem(row);
+      this.__ensureRowHierarchy(row);
+      this.__updateRow(row);
     }
 
     /** @private */
@@ -691,7 +690,7 @@ export const GridMixin = (superClass) =>
      */
     _renderColumnTree(columnTree) {
       iterateChildren(this.$.items, (row) => {
-        this._updateRow(row, columnTree[columnTree.length - 1], 'body', false, true);
+        this.__initRow(row, columnTree[columnTree.length - 1], 'body', false, true);
 
         const model = this.__getRowModel(row);
         this._updateRowOrderParts(row);
@@ -718,7 +717,7 @@ export const GridMixin = (superClass) =>
       }
 
       iterateChildren(this.$.header, (headerRow, index, rows) => {
-        this._updateRow(headerRow, columnTree[index], 'header', index === columnTree.length - 1);
+        this.__initRow(headerRow, columnTree[index], 'header', index === columnTree.length - 1);
 
         const cells = getBodyRowCells(headerRow);
         updateCellsPart(cells, 'first-header-row-cell', index === 0);
@@ -726,7 +725,7 @@ export const GridMixin = (superClass) =>
       });
 
       iterateChildren(this.$.footer, (footerRow, index, rows) => {
-        this._updateRow(footerRow, columnTree[columnTree.length - 1 - index], 'footer', index === 0);
+        this.__initRow(footerRow, columnTree[columnTree.length - 1 - index], 'footer', index === 0);
 
         const cells = getBodyRowCells(footerRow);
         updateCellsPart(cells, 'first-footer-row-cell', index === 0);
@@ -734,7 +733,7 @@ export const GridMixin = (superClass) =>
       });
 
       // Sizer rows
-      this._updateRow(this.$.sizer, columnTree[columnTree.length - 1]);
+      this.__initRow(this.$.sizer, columnTree[columnTree.length - 1]);
 
       this._resizeHandler();
       this._frozenCellsChanged();
@@ -749,10 +748,38 @@ export const GridMixin = (superClass) =>
 
     /**
      * @param {!HTMLElement} row
-     * @param {GridItem} item
-     * @protected
+     * @param {boolean} loading
+     * @private
      */
-    _updateItem(row, item) {
+    __updateRowLoading(row, loading) {
+      const cells = getBodyRowCells(row);
+
+      // Row state attribute
+      updateState(row, 'loading', loading);
+
+      // Cells part attribute
+      updateCellsPart(cells, 'loading-row-cell', loading);
+
+      if (loading) {
+        // Run style generators for the loading row to have custom names cleared
+        this._generateCellClassNames(row);
+        this._generateCellPartNames(row);
+      }
+    }
+
+    /**
+     * @param {!HTMLElement} row
+     * @private
+     */
+    __updateRow(row) {
+      const item = this.__getRowItem(row);
+      if (item) {
+        this.__updateRowLoading(row, false);
+      } else {
+        this.__updateRowLoading(row, true);
+        return;
+      }
+
       row._item = item;
       const model = this.__getRowModel(row);
 
@@ -929,15 +956,11 @@ export const GridMixin = (superClass) =>
 
       // The style is set to host instead of the scroller so that the value can be overridden by the user with "grid { min-height: 0 }"
       // Prefer setting style in adopted style sheet to avoid the need to add a confusing inline style on the host element
-      // If adopted style sheets are not supported, the style is set inline
-      if (!this.__minHeightStyleSheet && supportsAdoptingStyleSheets) {
+      if (!this.__minHeightStyleSheet) {
         this.__minHeightStyleSheet = new CSSStyleSheet();
-        this.shadowRoot.adoptedStyleSheets = [...this.shadowRoot.adoptedStyleSheets, this.__minHeightStyleSheet];
-      }
-      if (this.__minHeightStyleSheet) {
-        this.__minHeightStyleSheet.replaceSync(`:host { --_grid-min-height: ${minHeight}px; }`);
-      } else {
-        this.style.setProperty('--_grid-min-height', `${minHeight}px`);
+        this.shadowRoot.adoptedStyleSheets.push(this.__minHeightStyleSheet);
       }
+
+      this.__minHeightStyleSheet.replaceSync(`:host { --_grid-min-height: ${minHeight}px; }`);
     }
   };

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

@@ -85,7 +85,7 @@ export const RowDetailsMixin = (superClass) =>
         // Only update the rows if the column tree has already been initialized
         iterateChildren(this.$.items, (row) => {
           if (!row.querySelector('[part~=details-cell]')) {
-            this._updateRow(row, this._columnTree[this._columnTree.length - 1]);
+            this.__initRow(row, this._columnTree[this._columnTree.length - 1]);
             const isDetailsOpened = this._isDetailsOpened(row._item);
             this._toggleDetailsCell(row, isDetailsOpened);
           }
@@ -98,13 +98,13 @@ export const RowDetailsMixin = (superClass) =>
       iterateChildren(this.$.items, (row) => {
         // Re-renders the row to possibly close the previously opened details.
         if (row.hasAttribute('details-opened')) {
-          this._updateItem(row, row._item);
+          this.__updateRow(row);
           return;
         }
 
         // Re-renders the row to open the details when a row details renderer is provided.
         if (rowDetailsRenderer && this._isDetailsOpened(row._item)) {
-          this._updateItem(row, row._item);
+          this.__updateRow(row);
         }
       });
     }
@@ -140,7 +140,7 @@ export const RowDetailsMixin = (superClass) =>
       }
 
       // Assigns a renderer when the details cell is opened.
-      // The details cell content is rendered later in the `_updateItem` method.
+      // The details cell content is rendered later in the `__updateRow` method.
       if (this.rowDetailsRenderer) {
         cell._renderer = this.rowDetailsRenderer;
       }

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

@@ -122,10 +122,23 @@ export const ScrollMixin = (superClass) =>
         const row = composedPath[composedPath.indexOf(this.$.items) - 1];
 
         if (row) {
-          // Make sure the row with the focused element is fully inside the visible viewport
-          // Don't change scroll position if the user is interacting with the mouse
+          // Don't change scroll position if the user is interacting with the mouse.
           if (!this._isMousedown) {
-            this.__scrollIntoViewport(row.index);
+            // Make sure the focused element (row, cell, or focusable element inside a cell)
+            // is inside the viewport. If the whole row fits into the viewport, then scroll
+            // the row into view. This ensures that labels, helper texts and other related
+            // elements of focusable elements within cells also become visible. When the row
+            // is larger than the viewport, scroll the focus event target into the viewport.
+            // This works better when focusing elements within cells, which could otherwise
+            // still be outside the viewport when scrolling to the top or bottom of the row.
+            const tableHeight = this.$.table.clientHeight;
+            const headerHeight = this.$.header.clientHeight;
+            const footerHeight = this.$.footer.clientHeight;
+            const viewportHeight = tableHeight - headerHeight - footerHeight;
+            const isRowLargerThanViewport = row.clientHeight > viewportHeight;
+            const scrollTarget = isRowLargerThanViewport ? e.target : row;
+
+            this.__scrollIntoViewport(scrollTarget);
           }
 
           if (!this.$.table.contains(e.relatedTarget)) {
@@ -171,25 +184,27 @@ export const ScrollMixin = (superClass) =>
     _scrollToFlatIndex(index) {
       index = Math.min(this._flatSize - 1, Math.max(0, index));
       this.__virtualizer.scrollToIndex(index);
-      this.__scrollIntoViewport(index);
+      const rowElement = [...this.$.items.children].find((child) => child.index === index);
+      this.__scrollIntoViewport(rowElement);
     }
 
     /**
-     * Makes sure the row with the given index (if found in the DOM) is fully
-     * inside the visible viewport, taking header/footer into account.
+     * Makes sure the given element is fully inside the visible viewport,
+     * taking header/footer into account.
      * @private
      */
-    __scrollIntoViewport(index) {
-      const rowElement = [...this.$.items.children].find((child) => child.index === index);
-      if (rowElement) {
-        const dstRect = rowElement.getBoundingClientRect();
-        const footerTop = this.$.footer.getBoundingClientRect().top;
-        const headerBottom = this.$.header.getBoundingClientRect().bottom;
-        if (dstRect.bottom > footerTop) {
-          this.$.table.scrollTop += dstRect.bottom - footerTop;
-        } else if (dstRect.top < headerBottom) {
-          this.$.table.scrollTop -= headerBottom - dstRect.top;
-        }
+    __scrollIntoViewport(element) {
+      if (!element) {
+        return;
+      }
+
+      const dstRect = element.getBoundingClientRect();
+      const footerTop = this.$.footer.getBoundingClientRect().top;
+      const headerBottom = this.$.header.getBoundingClientRect().bottom;
+      if (dstRect.bottom > footerTop) {
+        this.$.table.scrollTop += dstRect.bottom - footerTop;
+      } else if (dstRect.top < headerBottom) {
+        this.$.table.scrollTop -= headerBottom - dstRect.top;
       }
     }
 
@@ -476,6 +491,7 @@ export const ScrollMixin = (superClass) =>
 
       // Position frozen cells
       const x = this.__isRTL ? normalizedScrollLeft + clientWidth - scrollWidth : scrollLeft;
+      this.__horizontalScrollPosition = x;
       const transformFrozen = `translate(${x}px, 0)`;
       this._frozenCells.forEach((cell) => {
         cell.style.transform = transformFrozen;
@@ -511,10 +527,25 @@ export const ScrollMixin = (superClass) =>
         }
       });
 
-      // Only update the --_grid-horizontal-scroll-position custom property when navigating
-      // on row focus mode to avoid performance issues.
-      if (this.hasAttribute('navigating') && this.__rowFocusMode) {
-        this.$.table.style.setProperty('--_grid-horizontal-scroll-position', `${-x}px`);
+      const focusedRow = this.shadowRoot.querySelector("[part~='row']:focus");
+      if (focusedRow) {
+        // Update the horizontal scroll position property of the focused row
+        this.__updateRowScrollPositionProperty(focusedRow);
+      }
+    }
+
+    /**
+     * Synchronizes the internal `--_grid-horizontal-scroll-position` CSS property
+     * of the given row with the current horizontal scroll position of the grid.
+     * @private
+     */
+    __updateRowScrollPositionProperty(row) {
+      if (row instanceof HTMLTableRowElement === false) {
+        return;
+      }
+      const newValue = `${this.__horizontalScrollPosition}px`;
+      if (row.style.getPropertyValue('--_grid-horizontal-scroll-position') !== newValue) {
+        row.style.setProperty('--_grid-horizontal-scroll-position', newValue);
       }
     }