fix: check if sizer cells are assigned for lazy column rendering (#7292…

…) (#7309)

Co-authored-by: Ugur Saglam <[email protected]>

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

@@ -235,17 +235,11 @@ export const ScrollMixin = (superClass) =>
 
     /** @private */
     __updateColumnsBodyContentHidden() {
-      if (!this._columnTree) {
+      if (!this._columnTree || !this._areSizerCellsAssigned()) {
         return;
       }
 
       const columnsInOrder = this._getColumnsInOrder();
-
-      // Return if sizer cells are not yet assigned to columns
-      if (!columnsInOrder[0] || !columnsInOrder[0]._sizerCell) {
-        return;
-      }
-
       let bodyContentHiddenChanged = false;
 
       // Remove the column cells from the DOM if the column is outside the viewport.
@@ -485,7 +479,7 @@ export const ScrollMixin = (superClass) =>
 
       let transformFrozenToEndBody = transformFrozenToEnd;
 
-      if (this._lazyColumns) {
+      if (this._lazyColumns && this._areSizerCellsAssigned()) {
         // Lazy column rendering is used, calculate the offset to apply to the frozen to end cells
         const columnsInOrder = this._getColumnsInOrder();
 
@@ -515,4 +509,9 @@ export const ScrollMixin = (superClass) =>
         this.$.table.style.setProperty('--_grid-horizontal-scroll-position', `${-x}px`);
       }
     }
+
+    /** @private */
+    _areSizerCellsAssigned() {
+      return this._getColumnsInOrder().every((column) => column._sizerCell);
+    }
   };

packages/grid/test/column-rendering.common.js

@@ -215,6 +215,23 @@ import { flushGrid, getCellContent, getHeaderCellContent, onceResized } from './
       expect(secondRect.top).to.equal(firstRect.bottom + detailsHeight);
     });
 
+    it('should render new appended column', async () => {
+      grid = fixtureSync(`
+        <vaadin-grid item-id-path="name" column-rendering="lazy">
+          <vaadin-grid-column path="name"></vaadin-grid-column>
+        </vaadin-grid>
+      `);
+      grid.items = [{ name: `Item 1` }];
+      await onceResized(grid);
+      flushGrid(grid);
+
+      const newColumn = document.createElement('vaadin-grid-column');
+      grid.appendChild(newColumn);
+      await nextFrame();
+
+      expect(isColumnInViewport(newColumn)).to.be.true;
+    });
+
     describe(`scroll horizontally - ${dir}`, () => {
       /**
        * Expect the cells DOM order to match the column order