@vaadin/grid 24.4.0-dev.223e39f050 → 24.4.0-dev.4b20a0c55.3

package/README.md

@@ -5,7 +5,6 @@ A web component for showing tabular data.
 [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/grid)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/grid)](https://www.npmjs.com/package/@vaadin/grid)
-[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
 <vaadin-grid theme="row-dividers" column-reordering-allowed multi-sort>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "24.4.0-dev.223e39f050",
+  "version": "24.4.0-dev.4b20a0c55.3",
   "publishConfig": {
     "access": "public"
   },
@@ -46,14 +46,14 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.4.0-dev.223e39f050",
-    "@vaadin/checkbox": "24.4.0-dev.223e39f050",
-    "@vaadin/component-base": "24.4.0-dev.223e39f050",
-    "@vaadin/lit-renderer": "24.4.0-dev.223e39f050",
-    "@vaadin/text-field": "24.4.0-dev.223e39f050",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.223e39f050",
-    "@vaadin/vaadin-material-styles": "24.4.0-dev.223e39f050",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.223e39f050",
+    "@vaadin/a11y-base": "24.4.0-dev.4b20a0c55.3",
+    "@vaadin/checkbox": "24.4.0-dev.4b20a0c55.3",
+    "@vaadin/component-base": "24.4.0-dev.4b20a0c55.3",
+    "@vaadin/lit-renderer": "24.4.0-dev.4b20a0c55.3",
+    "@vaadin/text-field": "24.4.0-dev.4b20a0c55.3",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.4b20a0c55.3",
+    "@vaadin/vaadin-material-styles": "24.4.0-dev.4b20a0c55.3",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.4b20a0c55.3",
     "lit": "^3.0.0"
   },
   "devDependencies": {
@@ -65,5 +65,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "5e2e3bfc811c95aed9354235fab93fdbf43eb354"
+  "gitHead": "41cf17453d7506fb635c088a0425e20b6e82b89b"
 }

package/src/all-imports.js

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

package/src/lit/column-renderer-directives.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 /* eslint-disable max-classes-per-file */

package/src/lit/column-renderer-directives.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 /* eslint-disable max-classes-per-file */

package/src/lit/renderer-directives.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { DirectiveResult } from 'lit/directive';

package/src/lit/renderer-directives.js

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

package/src/lit-all-imports.js

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

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

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

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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-active-item-mixin.js

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

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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-array-data-provider-mixin.js

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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-column-group.js

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

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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-column-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { animationFrame } from '@vaadin/component-base/src/async.js';
@@ -598,8 +598,14 @@ export const ColumnBaseMixin = (superClass) =>
 
     /** @protected */
     _runRenderer(renderer, cell, model) {
+      const isVisibleBodyCell = model && model.item && !cell.parentElement.hidden;
+      const shouldRender = isVisibleBodyCell || renderer === this._headerRenderer || renderer === this._footerRenderer;
+      if (!shouldRender) {
+        return;
+      }
+
       const args = [cell._content, this];
-      if (model && model.item) {
+      if (isVisibleBodyCell) {
         args.push(model);
       }
 
@@ -634,9 +640,7 @@ export const ColumnBaseMixin = (superClass) =>
 
         cell._renderer = renderer;
 
-        if (model.item || renderer === this._headerRenderer || renderer === this._footerRenderer) {
-          this._runRenderer(renderer, cell, model);
-        }
+        this._runRenderer(renderer, cell, model);
       });
     }
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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-column-reordering-mixin.js

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

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

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

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

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

package/src/vaadin-grid-column.js

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

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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-data-provider-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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';
@@ -206,10 +206,6 @@ export const DataProviderMixin = (superClass) =>
      * @protected
      */
     _getItem(index, el) {
-      if (index >= this._flatSize) {
-        return;
-      }
-
       el.index = index;
 
       const { item } = this._dataProviderController.getFlatIndexContext(index);
@@ -374,7 +370,7 @@ export const DataProviderMixin = (superClass) =>
       this._hasData = false;
       this.__updateVisibleRows();
 
-      if (!this.__virtualizer.size) {
+      if (!this.__virtualizer || !this.__virtualizer.size) {
         this._dataProviderController.loadFirstPage();
       }
     }

package/src/vaadin-grid-drag-and-drop-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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-drag-and-drop-mixin.js

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

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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';
@@ -109,6 +109,11 @@ export const KeyboardNavigationMixin = (superClass) =>
       });
     }
 
+    /** @private */
+    get _visibleItemsCount() {
+      return this._lastVisibleIndex - this._firstVisibleIndex - 1;
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -304,8 +309,9 @@ export const KeyboardNavigationMixin = (superClass) =>
     _onNavigationKeyDown(e, key) {
       e.preventDefault();
 
-      const visibleItemsCount = this._lastVisibleIndex - this._firstVisibleIndex - 1;
       const isRTL = this.__isRTL;
+      const activeRow = e.composedPath().find((el) => this.__isRow(el));
+      const activeCell = e.composedPath().find((el) => this.__isCell(el));
 
       // Handle keyboard interaction as defined in:
       // https://w3c.github.io/aria-practices/#keyboard-interaction-24
@@ -350,18 +356,22 @@ export const KeyboardNavigationMixin = (superClass) =>
           dy = -1;
           break;
         case 'PageDown':
-          dy = visibleItemsCount;
+          // Check if the active group is body
+          if (this.$.items.contains(activeRow)) {
+            const currentRowIndex = this.__getIndexInGroup(activeRow, this._focusedItemIndex);
+            // Scroll the current row to the top...
+            this._scrollToFlatIndex(currentRowIndex);
+          }
+          // ...only then measure the visible items count
+          dy = this._visibleItemsCount;
           break;
         case 'PageUp':
-          dy = -visibleItemsCount;
+          dy = -this._visibleItemsCount;
           break;
         default:
           break;
       }
 
-      const activeRow = e.composedPath().find((el) => this.__isRow(el));
-      const activeCell = e.composedPath().find((el) => this.__isCell(el));
-
       if ((this.__rowFocusMode && !activeRow) || (!this.__rowFocusMode && !activeCell)) {
         // When using a screen reader, it's possible that neither a cell nor a row is focused.
         return;

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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';
@@ -316,11 +316,6 @@ export const GridMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __hasRowsWithClientHeight() {
-      return !!Array.from(this.$.items.children).filter((row) => row.clientHeight).length;
-    }
-
     /** @private */
     __getIntrinsicWidth(col) {
       if (!this.__intrinsicWidthCache.has(col)) {
@@ -432,6 +427,12 @@ export const GridMixin = (superClass) =>
             cell.style.position = '';
           }
         });
+
+      if (autoWidth) {
+        this.$.scroller.setAttribute('measuring-auto-width', '');
+      } else {
+        this.$.scroller.removeAttribute('measuring-auto-width');
+      }
     }
 
     /**
@@ -478,17 +479,40 @@ export const GridMixin = (superClass) =>
         return;
       }
       const cols = this._getColumns().filter((col) => !col.hidden && col.autoWidth);
-      this._recalculateColumnWidths(cols);
+
+      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() &&
-        this.__hasRowsWithClientHeight()
-      ) {
+      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();
       }
@@ -565,6 +589,10 @@ export const GridMixin = (superClass) =>
         });
       }
 
+      if (column && column._onCellKeyDown) {
+        cell.addEventListener('keydown', column._onCellKeyDown.bind(column));
+      }
+
       const slot = document.createElement('slot');
       slot.setAttribute('name', slotName);
 
@@ -659,11 +687,13 @@ export const GridMixin = (superClass) =>
             cell.__parentRow = row;
             // Cache the cell reference
             row.__cells.push(cell);
-            if (!column._bodyContentHidden) {
+
+            const isSizerRow = row === this.$.sizer;
+            if (!column._bodyContentHidden || isSizerRow) {
               row.appendChild(cell);
             }
 
-            if (row === this.$.sizer) {
+            if (isSizerRow) {
               column._sizerCell = cell;
             }
 
@@ -694,7 +724,7 @@ export const GridMixin = (superClass) =>
             // Header & footer
             const tagName = section === 'header' ? 'th' : 'td';
             if (isColumnRow || column.localName === 'vaadin-grid-column-group') {
-              cell = column[`_${section}Cell`] || this._createCell(tagName);
+              cell = column[`_${section}Cell`] || this._createCell(tagName, column);
               cell._column = column;
               row.appendChild(cell);
               column[`_${section}Cell`] = cell;

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * Copyright (c) 2016 - 2024 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';