@vaadin/grid 24.2.0-dev.f254716fe → 24.2.0-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "24.2.0-dev.f254716fe",
+  "version": "24.2.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -46,18 +46,18 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-dev.f254716fe",
-    "@vaadin/checkbox": "24.2.0-dev.f254716fe",
-    "@vaadin/component-base": "24.2.0-dev.f254716fe",
-    "@vaadin/lit-renderer": "24.2.0-dev.f254716fe",
-    "@vaadin/text-field": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-material-styles": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-dev.f254716fe"
+    "@vaadin/a11y-base": "24.2.0-rc1",
+    "@vaadin/checkbox": "24.2.0-rc1",
+    "@vaadin/component-base": "24.2.0-rc1",
+    "@vaadin/lit-renderer": "24.2.0-rc1",
+    "@vaadin/text-field": "24.2.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-rc1",
+    "@vaadin/vaadin-material-styles": "24.2.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-rc1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.3",
+    "@vaadin/testing-helpers": "^0.5.0",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -65,5 +65,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "da54950b9f8c14c6451ede0d426e16a489c7fb9b"
+  "gitHead": "012bef350bbf29865748f4c78338dd17c6f61a74"
 }

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

@@ -7,6 +7,7 @@ import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nod
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { animationFrame } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ColumnBaseMixin } from './vaadin-grid-column.js';
 import { updateColumnOrders } from './vaadin-grid-helpers.js';
 
@@ -39,6 +40,7 @@ import { updateColumnOrders } from './vaadin-grid-helpers.js';
  * column2.renderer = (root, column, model) => { ... };
  * ```
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ColumnBaseMixin
  */
@@ -396,6 +398,6 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
   }
 }
 
-customElements.define(GridColumnGroup.is, GridColumnGroup);
+defineCustomElement(GridColumnGroup);
 
 export { GridColumnGroup };

package/src/vaadin-grid-column.js

@@ -6,7 +6,9 @@
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { animationFrame } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { get } from '@vaadin/component-base/src/path-utils.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { updateCellState } from './vaadin-grid-helpers.js';
 
@@ -713,7 +715,7 @@ export const ColumnBaseMixin = (superClass) =>
         return;
       }
 
-      this.__setTextContent(root, this.get(this.path, item));
+      this.__setTextContent(root, get(this.path, item));
     }
 
     /**
@@ -783,6 +785,7 @@ export const ColumnBaseMixin = (superClass) =>
  * See [`<vaadin-grid>`](#/elements/vaadin-grid) documentation for instructions on how
  * to configure the `<vaadin-grid-column>`.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ColumnBaseMixin
  */
@@ -894,6 +897,6 @@ class GridColumn extends ColumnBaseMixin(DirMixin(PolymerElement)) {
   }
 }
 
-customElements.define(GridColumn.is, GridColumn);
+defineCustomElement(GridColumn);
 
 export { GridColumn };

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

@@ -33,6 +33,31 @@ export type GridDataProvider<TItem> = (
   callback: GridDataProviderCallback<TItem>,
 ) => void;
 
+export declare class ItemCache<TItem> {
+  grid: HTMLElement;
+  parentCache: ItemCache<TItem> | undefined;
+  parentItem: TItem | undefined;
+  itemCaches: object | null;
+  items: object | null;
+  effectiveSize: number;
+  size: number;
+  pendingRequests: object | null;
+
+  constructor(grid: HTMLElement, parentCache: ItemCache<TItem> | undefined, parentItem: TItem | undefined);
+
+  isLoading(): boolean;
+
+  getItemForIndex(index: number): TItem | undefined;
+
+  updateSize(): void;
+
+  ensureSubCacheForScaledIndex(scaledIndex: number): void;
+
+  getCacheAndIndex(index: number): { cache: ItemCache<TItem>; scaledIndex: number };
+
+  getFlatIndex(scaledIndex: number): number;
+}
+
 export declare function DataProviderMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<DataProviderMixinClass<TItem>> & T;

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

@@ -4,10 +4,116 @@
  * 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';
-import { DataProviderController } from '@vaadin/component-base/src/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';
 
+/**
+ * @private
+ */
+export const ItemCache = class ItemCache {
+  /**
+   * @param {!HTMLElement} grid
+   * @param {!ItemCache | undefined} parentCache
+   * @param {!GridItem | undefined} parentItem
+   */
+  constructor(grid, parentCache, parentItem) {
+    /** @type {!HTMLElement} */
+    this.grid = grid;
+    /** @type {!ItemCache | undefined} */
+    this.parentCache = parentCache;
+    /** @type {!GridItem | undefined} */
+    this.parentItem = parentItem;
+    /** @type {object} */
+    this.itemCaches = {};
+    /** @type {object[]} */
+    this.items = [];
+    /** @type {number} */
+    this.effectiveSize = 0;
+    /** @type {number} */
+    this.size = 0;
+    /** @type {object} */
+    this.pendingRequests = {};
+  }
+
+  /**
+   * @return {boolean}
+   */
+  isLoading() {
+    return Boolean(
+      Object.keys(this.pendingRequests).length ||
+        Object.keys(this.itemCaches).filter((index) => {
+          return this.itemCaches[index].isLoading();
+        })[0],
+    );
+  }
+
+  /**
+   * @param {number} index
+   * @return {!GridItem | undefined}
+   */
+  getItemForIndex(index) {
+    const { cache, scaledIndex } = this.getCacheAndIndex(index);
+    return cache.items[scaledIndex];
+  }
+
+  updateSize() {
+    this.effectiveSize =
+      !this.parentItem || this.grid._isExpanded(this.parentItem)
+        ? this.size +
+          Object.keys(this.itemCaches).reduce((prev, curr) => {
+            const subCache = this.itemCaches[curr];
+            subCache.updateSize();
+            return prev + subCache.effectiveSize;
+          }, 0)
+        : 0;
+  }
+
+  /**
+   * @param {number} scaledIndex
+   */
+  ensureSubCacheForScaledIndex(scaledIndex) {
+    if (!this.itemCaches[scaledIndex]) {
+      const subCache = new ItemCache(this.grid, this, this.items[scaledIndex]);
+      this.itemCaches[scaledIndex] = subCache;
+      this.grid._loadPage(0, subCache);
+    }
+  }
+
+  /**
+   * @param {number} index
+   * @return {{cache: !ItemCache, scaledIndex: number}}
+   */
+  getCacheAndIndex(index) {
+    let thisLevelIndex = index;
+    for (const [index, subCache] of Object.entries(this.itemCaches)) {
+      const numberIndex = Number(index);
+      if (thisLevelIndex <= numberIndex) {
+        return { cache: this, scaledIndex: thisLevelIndex };
+      } else if (thisLevelIndex <= numberIndex + subCache.effectiveSize) {
+        return subCache.getCacheAndIndex(thisLevelIndex - numberIndex - 1);
+      }
+      thisLevelIndex -= subCache.effectiveSize;
+    }
+    return { cache: this, scaledIndex: thisLevelIndex };
+  }
+
+  /**
+   * Gets the scaled index as flattened index on this cache level.
+   * In practice, this means that the effective size of any expanded
+   * subcaches preceding the index are added to the value.
+   * @param {number} scaledIndex
+   * @return {number} The flat index on this cache level.
+   */
+  getFlatIndex(scaledIndex) {
+    const clampedIndex = Math.max(0, Math.min(this.size - 1, scaledIndex));
+
+    return Object.entries(this.itemCaches).reduce((prev, [index, subCache]) => {
+      return clampedIndex > Number(index) ? prev + subCache.effectiveSize : prev;
+    }, clampedIndex);
+  }
+};
+
 /**
  * @polymerMixin
  */
@@ -75,6 +181,18 @@ export const DataProviderMixin = (superClass) =>
           reflectToAttribute: true,
         },
 
+        /**
+         * @type {!ItemCache}
+         * @protected
+         */
+        _cache: {
+          type: Object,
+          value() {
+            const cache = new ItemCache(this);
+            return cache;
+          },
+        },
+
         /**
          * @protected
          */
@@ -126,32 +244,12 @@ export const DataProviderMixin = (superClass) =>
       return ['_sizeChanged(size)', '_expandedItemsChanged(expandedItems.*)'];
     }
 
-    constructor() {
-      super();
-
-      /** @type {DataProviderController} */
-      this._dataProviderController = new DataProviderController(this, {
-        size: this.size,
-        pageSize: this.pageSize,
-        isExpanded: this._isExpanded.bind(this),
-        dataProvider: this.dataProvider ? this.dataProvider.bind(this) : null,
-        dataProviderParams: () => {
-          return {
-            sortOrders: this._mapSorters(),
-            filters: this._mapFilters(),
-          };
-        },
-      });
-
-      this._dataProviderController.addEventListener('page-requested', this._onDataProviderPageRequested.bind(this));
-      this._dataProviderController.addEventListener('page-received', this._onDataProviderPageReceived.bind(this));
-      this._dataProviderController.addEventListener('page-loaded', this._onDataProviderPageLoaded.bind(this));
-    }
-
     /** @private */
     _sizeChanged(size) {
-      this._dataProviderController.setSize(size);
-      this._effectiveSize = this._dataProviderController.effectiveSize;
+      const delta = size - this._cache.size;
+      this._cache.size += delta;
+      this._cache.effectiveSize += delta;
+      this._effectiveSize = this._cache.effectiveSize;
     }
 
     /** @private */
@@ -174,17 +272,17 @@ export const DataProviderMixin = (superClass) =>
       }
 
       el.index = index;
-
-      const { item } = this._dataProviderController.getFlatIndexInfo(index);
+      const { cache, scaledIndex } = this._cache.getCacheAndIndex(index);
+      const item = cache.items[scaledIndex];
       if (item) {
         this.__updateLoading(el, false);
         this._updateItem(el, item);
         if (this._isExpanded(item)) {
-          this._dataProviderController.ensureFlatIndexChildrenLoaded(index);
+          cache.ensureSubCacheForScaledIndex(scaledIndex);
         }
       } else {
         this.__updateLoading(el, true);
-        this._dataProviderController.ensureFlatIndexLoaded(index);
+        this._loadPage(this._getPageForIndex(scaledIndex), cache);
       }
     }
 
@@ -210,7 +308,7 @@ export const DataProviderMixin = (superClass) =>
      * @return {!GridItem | !unknown}
      */
     getItemId(item) {
-      return this.itemIdPath ? this.get(this.itemIdPath, item) : item;
+      return this.itemIdPath ? get(this.itemIdPath, item) : item;
     }
 
     /**
@@ -224,8 +322,8 @@ export const DataProviderMixin = (superClass) =>
 
     /** @private */
     _expandedItemsChanged() {
-      this._dataProviderController.recalculateEffectiveSize();
-      this._effectiveSize = this._dataProviderController.effectiveSize;
+      this._cache.updateSize();
+      this._effectiveSize = this._cache.effectiveSize;
       this.__updateVisibleRows();
     }
 
@@ -265,68 +363,121 @@ export const DataProviderMixin = (superClass) =>
      * @return {number}
      * @protected
      */
-    _getIndexLevel(index = 0) {
-      const { level } = this._dataProviderController.getFlatIndexInfo(index);
+    _getIndexLevel(index) {
+      let { cache } = this._cache.getCacheAndIndex(index);
+      let level = 0;
+      while (cache.parentCache) {
+        cache = cache.parentCache;
+        level += 1;
+      }
       return level;
     }
 
-    /** @protected */
-    _onDataProviderPageRequested() {
-      this._setLoading(true);
-    }
-
-    /** @protected */
-    _onDataProviderPageReceived() {
-      // With the new items added, update the cache size and the grid's effective size
-      this._effectiveSize = this._dataProviderController.effectiveSize;
+    /**
+     * @param {number} page
+     * @param {ItemCache} cache
+     * @protected
+     */
+    _loadPage(page, cache) {
+      // Make sure same page isn't requested multiple times.
+      if (!cache.pendingRequests[page] && this.dataProvider) {
+        this._setLoading(true);
+        cache.pendingRequests[page] = true;
+        const params = {
+          page,
+          pageSize: this.pageSize,
+          sortOrders: this._mapSorters(),
+          filters: this._mapFilters(),
+          parentItem: cache.parentItem,
+        };
+
+        this.dataProvider(params, (items, size) => {
+          if (size !== undefined) {
+            cache.size = size;
+          } else if (params.parentItem) {
+            cache.size = items.length;
+          }
 
-      // After updating the cache, check if some of the expanded items should have sub-caches loaded
-      this._getRenderedRows().forEach((row) => {
-        this._dataProviderController.ensureFlatIndexChildrenLoaded(row.index);
-      });
+          // Populate the cache with new items
+          items.forEach((item, itemsIndex) => {
+            const itemIndex = page * this.pageSize + itemsIndex;
+            cache.items[itemIndex] = item;
+          });
+
+          // With the new items added, update the cache size and the grid's effective size
+          this._cache.updateSize();
+          this._effectiveSize = this._cache.effectiveSize;
+
+          // After updating the cache, check if some of the expanded items should have sub-caches loaded
+          this._getRenderedRows().forEach((row) => {
+            const { cache, scaledIndex } = this._cache.getCacheAndIndex(row.index);
+            const item = cache.items[scaledIndex];
+            if (item && this._isExpanded(item)) {
+              cache.ensureSubCacheForScaledIndex(scaledIndex);
+            }
+          });
+
+          this._hasData = true;
+
+          // Remove the pending request
+          delete cache.pendingRequests[page];
+
+          // Schedule a debouncer to update the visible rows
+          this._debouncerApplyCachedData = Debouncer.debounce(this._debouncerApplyCachedData, timeOut.after(0), () => {
+            this._setLoading(false);
+
+            this._getRenderedRows().forEach((row) => {
+              const cachedItem = this._cache.getItemForIndex(row.index);
+              if (cachedItem) {
+                this._getItem(row.index, row);
+              }
+            });
+
+            this.__scrollToPendingIndexes();
+          });
+
+          // If the grid is not loading anything, flush the debouncer immediately
+          if (!this._cache.isLoading()) {
+            this._debouncerApplyCachedData.flush();
+          }
 
-      this._hasData = true;
+          // Notify that new data has been received
+          this._onDataProviderPageLoaded();
+        });
+      }
     }
 
     /** @protected */
-    _onDataProviderPageLoaded() {
-      // Schedule a debouncer to update the visible rows
-      this._debouncerApplyCachedData = Debouncer.debounce(this._debouncerApplyCachedData, timeOut.after(0), () => {
-        this._setLoading(false);
-
-        this._getRenderedRows().forEach((row) => {
-          const { item } = this._dataProviderController.getFlatIndexInfo(row.index);
-          if (item) {
-            this._getItem(row.index, row);
-          }
-        });
-
-        this.__scrollToPendingIndexes();
-      });
+    _onDataProviderPageLoaded() {}
 
-      // If the grid is not loading anything, flush the debouncer immediately
-      if (!this._dataProviderController.isLoading()) {
-        this._debouncerApplyCachedData.flush();
-      }
+    /**
+     * @param {number} index
+     * @return {number}
+     * @private
+     */
+    _getPageForIndex(index) {
+      return Math.floor(index / this.pageSize);
     }
 
     /**
      * Clears the cached pages and reloads data from dataprovider when needed.
      */
     clearCache() {
-      this._dataProviderController.clearCache();
+      this._cache = new ItemCache(this);
+      this._cache.size = this.size || 0;
+      this._cache.updateSize();
       this._hasData = false;
       this.__updateVisibleRows();
-      this._ensureFirstPageLoaded();
+
+      if (!this._effectiveSize) {
+        this._loadPage(0, this._cache);
+      }
     }
 
     /** @private */
     _pageSizeChanged(pageSize, oldPageSize) {
-      this._dataProviderController.setPageSize(pageSize);
       if (oldPageSize !== undefined && pageSize !== oldPageSize) {
-        this._hasData = false;
-        this.__updateVisibleRows();
-        this._ensureFirstPageLoaded();
+        this.clearCache();
       }
     }
 
@@ -344,11 +495,8 @@ export const DataProviderMixin = (superClass) =>
 
     /** @private */
     _dataProviderChanged(dataProvider, oldDataProvider) {
-      this._dataProviderController.setDataProvider(dataProvider ? dataProvider.bind(this) : null);
-
       if (oldDataProvider !== undefined) {
-        this._hasData = false;
-        this.__updateVisibleRows();
+        this.clearCache();
       }
 
       this._ensureFirstPageLoaded();
@@ -365,7 +513,7 @@ export const DataProviderMixin = (superClass) =>
       if (!this._hasData) {
         // Load data before adding rows to make sure they have content when
         // rendered for the first time.
-        this._dataProviderController.ensureFirstPageLoaded();
+        this._loadPage(0, this._cache);
       }
     }
 
@@ -415,15 +563,39 @@ export const DataProviderMixin = (superClass) =>
       // ending up in a loading state. Try scrolling to the index until the target
       // index stabilizes.
       let targetIndex;
-      while (targetIndex !== (targetIndex = this._dataProviderController.getFlatIndexByPath(indexes))) {
+      while (targetIndex !== (targetIndex = this.__getGlobalFlatIndex(indexes))) {
         this._scrollToFlatIndex(targetIndex);
       }
 
-      if (this._dataProviderController.isLoading() || !this.clientHeight) {
+      if (this._cache.isLoading() || !this.clientHeight) {
         this.__pendingScrollToIndexes = indexes;
       }
     }
 
+    /**
+     * Recursively returns the globally flat index of the item the given indexes point to.
+     * Each index in the array points to a sub-item of the previous index.
+     * Using `Infinity` as an index will point to the last item on the level.
+     *
+     * @param {!Array<number>} indexes
+     * @param {!ItemCache} cache
+     * @param {number} flatIndex
+     * @return {number}
+     * @private
+     */
+    __getGlobalFlatIndex([levelIndex, ...subIndexes], cache = this._cache, flatIndex = 0) {
+      if (levelIndex === Infinity) {
+        // Treat Infinity as the last index on the level
+        levelIndex = cache.size - 1;
+      }
+      const flatIndexOnLevel = cache.getFlatIndex(levelIndex);
+      const subCache = cache.itemCaches[levelIndex];
+      if (subCache && subCache.effectiveSize && subIndexes.length) {
+        return this.__getGlobalFlatIndex(subIndexes, subCache, flatIndex + flatIndexOnLevel + 1);
+      }
+      return flatIndex + flatIndexOnLevel;
+    }
+
     /** @private */
     __scrollToPendingIndexes() {
       if (this.__pendingScrollToIndexes && this.$.items.children.length) {

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

@@ -112,7 +112,7 @@ export const DynamicColumnsMixin = (superClass) =>
         if (hasColumnElements(info.addedNodes) || hasColumnElements(info.removedNodes)) {
           const allRemovedCells = info.removedNodes.flatMap((c) => c._allCells);
           const filterNotConnected = (element) =>
-            allRemovedCells.filter((cell) => cell._content.contains(element)).length;
+            allRemovedCells.filter((cell) => cell && cell._content.contains(element)).length;
 
           this.__removeSorters(this._sorters.filter(filterNotConnected));
           this.__removeFilters(this._filters.filter(filterNotConnected));

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-filter.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { GridColumn } from './vaadin-grid-column.js';
 
 /**
@@ -18,6 +19,9 @@ import { GridColumn } from './vaadin-grid-column.js';
  *  <vaadin-grid-column>
  *    ...
  * ```
+ *
+ * @customElement
+ * @extends GridColumn
  */
 class GridFilterColumn extends GridColumn {
   static get is() {
@@ -114,6 +118,6 @@ class GridFilterColumn extends GridColumn {
   }
 }
 
-customElements.define(GridFilterColumn.is, GridFilterColumn);
+defineCustomElement(GridFilterColumn);
 
 export { GridFilterColumn };

package/src/vaadin-grid-filter.js

@@ -8,6 +8,7 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
@@ -35,6 +36,7 @@ import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
  *
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  *
+ * @customElement
  * @extends HTMLElement
  */
 class GridFilter extends ControllerMixin(PolymerElement) {
@@ -125,6 +127,6 @@ class GridFilter extends ControllerMixin(PolymerElement) {
   }
 }
 
-customElements.define(GridFilter.is, GridFilter);
+defineCustomElement(GridFilter);
 
 export { GridFilter };

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

@@ -5,6 +5,7 @@
  */
 import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
+import { get } from '@vaadin/component-base/src/path-utils.js';
 
 /**
  * @polymerMixin
@@ -266,7 +267,7 @@ export const KeyboardNavigationMixin = (superClass) =>
     __isRowExpandable(row) {
       if (this.itemHasChildrenPath) {
         const item = row._item;
-        return item && this.get(this.itemHasChildrenPath, item) && !this._isExpanded(item);
+        return item && get(this.itemHasChildrenPath, item) && !this._isExpanded(item);
       }
     }
 
@@ -475,7 +476,7 @@ export const KeyboardNavigationMixin = (superClass) =>
         // Row details navigation logic
         if (activeRowGroup === this.$.items) {
           const item = activeRow._item;
-          const { item: dstItem } = this._dataProviderController.getFlatIndexInfo(dstRowIndex);
+          const dstItem = this._cache.getItemForIndex(dstRowIndex);
           // Should we navigate to row details?
           if (isRowDetails) {
             dstIsRowDetails = dy === 0;
@@ -681,7 +682,26 @@ export const KeyboardNavigationMixin = (superClass) =>
         }
       }
 
-      return tabOrder[index];
+      let focusStepTarget = tabOrder[index];
+
+      // If the target focusable is tied to a column that is not visible,
+      // find the first visible column and update the target in order to
+      // prevent scrolling to the start of the row.
+      if (focusStepTarget && focusStepTarget._column && !this.__isColumnInViewport(focusStepTarget._column)) {
+        const firstVisibleColumn = this._getColumnsInOrder().find((column) => this.__isColumnInViewport(column));
+        if (firstVisibleColumn) {
+          if (focusStepTarget === this._headerFocusable) {
+            focusStepTarget = firstVisibleColumn._headerCell;
+          } else if (focusStepTarget === this._itemsFocusable) {
+            const rowIndex = focusStepTarget._column._cells.indexOf(focusStepTarget);
+            focusStepTarget = firstVisibleColumn._cells[rowIndex];
+          } else if (focusStepTarget === this._footerFocusable) {
+            focusStepTarget = firstVisibleColumn._footerCell;
+          }
+        }
+      }
+
+      return focusStepTarget;
     }
 
     /** @private */