@vaadin/grid 25.2.7 → 25.3.0-alpha10

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

@@ -87,10 +87,6 @@ export const gridStyles = css`
     z-index: 0;
   }
 
-  [no-scrollbars]:is([safari], [firefox]) #table {
-    overflow: hidden;
-  }
-
   #header,
   #footer {
     display: block;

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

@@ -3,7 +3,8 @@
  * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { findTreeToggleCell, iterateChildren, iterateRowCells } from './vaadin-grid-helpers.js';
+import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
+import { findTreeToggleCell, getClosestCell, iterateChildren, iterateRowCells } from './vaadin-grid-helpers.js';
 
 export const A11yMixin = (superClass) =>
   class A11yMixin extends superClass {
@@ -19,7 +20,15 @@ export const A11yMixin = (superClass) =>
       };
     }
     static get observers() {
-      return ['__a11yUpdateGridSize(size, _columnTree, __emptyState)'];
+      return ['__a11yUpdateGridSize(size, _columnTree, __emptyState)', '__a11yI18nChanged(__effectiveI18n)'];
+    }
+
+    /** @private */
+    __a11yI18nChanged() {
+      // Update selection column checkboxes accessible name.
+      this.requestContentUpdate();
+      // Update sorters accessible name.
+      this.__a11yUpdateSorters();
     }
 
     /** @private */
@@ -102,19 +111,13 @@ export const A11yMixin = (superClass) =>
       const toggleCell = findTreeToggleCell(row);
       if (this.__isRowExpandable(row)) {
         row.setAttribute('aria-expanded', 'false');
-        if (toggleCell) {
-          toggleCell.setAttribute('aria-expanded', 'false');
-        }
+        toggleCell?.setAttribute('aria-expanded', 'false');
       } else if (this.__isRowCollapsible(row)) {
         row.setAttribute('aria-expanded', 'true');
-        if (toggleCell) {
-          toggleCell.setAttribute('aria-expanded', 'true');
-        }
+        toggleCell?.setAttribute('aria-expanded', 'true');
       } else {
         row.removeAttribute('aria-expanded');
-        if (toggleCell) {
-          toggleCell.removeAttribute('aria-expanded');
-        }
+        toggleCell?.removeAttribute('aria-expanded');
       }
     }
 
@@ -125,11 +128,8 @@ export const A11yMixin = (superClass) =>
      */
     __a11yUpdateRowLevel(row, level) {
       // Set level for the expandable rows itself, and all the nested rows.
-      if (level > 0 || this.__isRowCollapsible(row) || this.__isRowExpandable(row)) {
-        row.setAttribute('aria-level', level + 1);
-      } else {
-        row.removeAttribute('aria-level');
-      }
+      const hasLevel = level > 0 || this.__isRowCollapsible(row) || this.__isRowExpandable(row);
+      setOrRemoveAttribute(row, 'aria-level', hasLevel && level + 1);
     }
 
     /**
@@ -145,24 +145,13 @@ export const A11yMixin = (superClass) =>
       });
     }
 
-    /**
-     * @param {!HTMLElement} cell
-     * @param {number} colspan
-     * @private
-     */
-    __a11yUpdateCellColspan(cell, colspan) {
-      cell.setAttribute('aria-colspan', Number(colspan));
-    }
-
     /** @private */
     __a11yUpdateSorters() {
       Array.from(this.querySelectorAll('vaadin-grid-sorter')).forEach((sorter) => {
-        let cellContent = sorter.parentNode;
-        while (cellContent && cellContent.localName !== 'vaadin-grid-cell-content') {
-          cellContent = cellContent.parentNode;
-        }
-        if (cellContent?.assignedSlot) {
-          const cell = cellContent.assignedSlot.parentNode;
+        sorter.__updateAccessibleName?.();
+
+        const cell = getClosestCell(sorter);
+        if (cell) {
           cell.setAttribute(
             'aria-sort',
             {

package/src/vaadin-grid-active-item-mixin.js

@@ -76,7 +76,7 @@ export const ActiveItemMixin = (superClass) =>
         // Cell is the empty state cell
         cell === this.$.emptystatecell ||
         // Cell content is focused
-        cell._content.contains(this.getRootNode().activeElement) ||
+        cell._content.matches(':focus-within') ||
         // Clicked on a focusable element
         this._isFocusable(e.target) ||
         // Clicked on a label element

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

@@ -137,11 +137,7 @@ export const ColumnAutoWidthMixin = (superClass) =>
     _recalculateColumnWidths() {
       // 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();
-        }
-      });
+      this.__renderHeaderFooterDebouncer?.flush();
 
       this.__hasHadRenderedRowsForColumnWidthCalculation ||= this._getRenderedRows().length > 0;
 
@@ -218,11 +214,7 @@ export const ColumnAutoWidthMixin = (superClass) =>
           }
         });
 
-      if (autoWidth) {
-        this.$.scroller.setAttribute('measuring-auto-width', '');
-      } else {
-        this.$.scroller.removeAttribute('measuring-auto-width');
-      }
+      this.$.scroller.toggleAttribute('measuring-auto-width', autoWidth);
     }
 
     /**
@@ -315,10 +307,9 @@ export const ColumnAutoWidthMixin = (superClass) =>
       // of the virtualizer update loop, ensuring the grid eventually reaches a stable state.
       const hasRowsWithUndefinedIndex = [...this.$.items.children].some((row) => row.index === undefined);
 
-      const debouncingHiddenChanged = this._debouncerHiddenChanged && this._debouncerHiddenChanged.isActive();
+      const debouncingHiddenChanged = this._debouncerHiddenChanged?.isActive();
 
-      const debouncingUpdateFrozenColumn =
-        this.__debounceUpdateFrozenColumn && this.__debounceUpdateFrozenColumn.isActive();
+      const debouncingUpdateFrozenColumn = this.__debounceUpdateFrozenColumn?.isActive();
 
       // When using a percentage-based height, the grid's effective height may
       // be 0 until the resize observer in grid-mixin calculates a min-height.

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

@@ -57,7 +57,7 @@ export const GridColumnGroupMixin = (superClass) =>
         '_groupFrozenChanged(frozen, _rootColumns)',
         '_groupFrozenToEndChanged(frozenToEnd, _rootColumns)',
         '_groupHiddenChanged(hidden)',
-        '_colSpanChanged(_colSpan, _headerCell, _footerCell)',
+        '_colSpanChanged(_colSpan)',
         '_groupOrderChanged(_order, _rootColumns)',
         '_groupReorderStatusChanged(_reorderStatus, _rootColumns)',
         '_groupResizableChanged(resizable, _rootColumns)',
@@ -74,9 +74,7 @@ export const GridColumnGroupMixin = (superClass) =>
     /** @protected */
     disconnectedCallback() {
       super.disconnectedCallback();
-      if (this._observer) {
-        this._observer.disconnect();
-      }
+      this._observer?.disconnect();
     }
 
     /**
@@ -307,19 +305,8 @@ export const GridColumnGroupMixin = (superClass) =>
     }
 
     /** @private */
-    _colSpanChanged(colSpan, headerCell, footerCell) {
-      if (headerCell) {
-        headerCell.setAttribute('colspan', colSpan);
-        if (this._grid) {
-          this._grid.__a11yUpdateCellColspan(headerCell, colSpan);
-        }
-      }
-      if (footerCell) {
-        footerCell.setAttribute('colspan', colSpan);
-        if (this._grid) {
-          this._grid.__a11yUpdateCellColspan(footerCell, colSpan);
-        }
-      }
+    _colSpanChanged() {
+      this._grid?.__scheduleRenderHeaderFooter?.();
     }
 
     /**
@@ -344,9 +331,7 @@ export const GridColumnGroupMixin = (superClass) =>
         this._preventHiddenSynchronization = false;
 
         // Update the column tree
-        if (this._grid && this._grid._debounceUpdateColumnTree) {
-          this._grid._debounceUpdateColumnTree();
-        }
+        this._grid?._debounceUpdateColumnTree?.();
       });
       this._observer.flush();
     }

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

@@ -12,7 +12,7 @@ export type GridBodyRenderer<TItem, Column extends GridColumnMixin<TItem, Column
   model: GridItemModel<TItem>,
 ) => void;
 
-export type GridColumnTextAlign = 'center' | 'end' | 'start' | null;
+export type GridColumnTextAlign = 'center' | 'end' | 'left' | 'right' | 'start' | null;
 
 export type GridHeaderFooterRenderer<TItem, Column extends ColumnBaseMixinClass<TItem, Column>> = (
   root: HTMLElement,
@@ -71,8 +71,8 @@ export declare class ColumnBaseMixinClass<TItem, Column extends ColumnBaseMixinC
 
   /**
    * Aligns the columns cell content horizontally.
-   * Supported values: "start", "center" and "end".
-   * @attr {start|center|end} text-align
+   *
+   * @attr {start|center|end|left|right} text-align
    */
   textAlign: GridColumnTextAlign | null | undefined;
 

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

@@ -7,7 +7,8 @@ import { animationFrame } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { get } from '@vaadin/component-base/src/path-utils.js';
-import { updateCellState, updatePart } from './vaadin-grid-helpers.js';
+import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
+import { updateCellState } from './vaadin-grid-helpers.js';
 
 export const ColumnBaseMixin = (superClass) =>
   class ColumnBaseMixin extends superClass {
@@ -92,8 +93,8 @@ export const ColumnBaseMixin = (superClass) =>
 
         /**
          * Aligns the columns cell content horizontally.
-         * Supported values: "start", "center" and "end".
-         * @attr {start|center|end} text-align
+         *
+         * @attr {start|center|end|left|right} text-align
          */
         textAlign: {
           type: String,
@@ -260,21 +261,21 @@ export const ColumnBaseMixin = (superClass) =>
 
     static get observers() {
       return [
-        '_widthChanged(width, _headerCell, _footerCell, _cells)',
+        '_widthChanged(width, _cells)',
         '_frozenChanged(frozen, _headerCell, _footerCell, _cells)',
         '_frozenToEndChanged(frozenToEnd, _headerCell, _footerCell, _cells)',
-        '_flexGrowChanged(flexGrow, _headerCell, _footerCell, _cells)',
-        '_textAlignChanged(textAlign, _cells, _headerCell, _footerCell)',
+        '_flexGrowChanged(flexGrow, _cells)',
+        '_textAlignChanged(textAlign, _cells)',
         '_lastFrozenChanged(_lastFrozen)',
         '_firstFrozenToEndChanged(_firstFrozenToEnd)',
         '_onRendererOrBindingChanged(_renderer, _cells, _bodyContentHidden, path)',
         '_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header)',
         '_onFooterRendererOrBindingChanged(_footerRenderer, _footerCell)',
-        '_resizableChanged(resizable, _headerCell)',
+        '_resizableChanged(resizable)',
         '_reorderStatusChanged(_reorderStatus, _headerCell, _footerCell, _cells)',
         '_hiddenChanged(hidden, _headerCell, _footerCell, _cells)',
         '_rowHeaderChanged(rowHeader, _cells)',
-        '__headerFooterPartNameChanged(_headerCell, _footerCell, headerPartName, footerPartName)',
+        '__headerFooterPartNameChanged(headerPartName, footerPartName)',
       ];
     }
 
@@ -302,6 +303,19 @@ export const ColumnBaseMixin = (superClass) =>
         .filter((cell) => cell);
     }
 
+    constructor() {
+      super();
+
+      /**
+       * A stable unique id assigned once per column instance. Used to build
+       * cell content slot names that stay stable across re-renders, so lit
+       * can reuse the cell content elements when the column tree changes.
+       *
+       * @protected
+       */
+      this._id = generateUniqueId();
+    }
+
     /** @protected */
     connectedCallback() {
       super.connectedCallback();
@@ -313,7 +327,7 @@ export const ColumnBaseMixin = (superClass) =>
           return;
         }
 
-        this._allCells.forEach((cell) => {
+        this._cells?.forEach((cell) => {
           if (!cell._content.parentNode) {
             this._grid.appendChild(cell._content);
           }
@@ -332,10 +346,8 @@ export const ColumnBaseMixin = (superClass) =>
           return;
         }
 
-        this._allCells.forEach((cell) => {
-          if (cell._content.parentNode) {
-            cell._content.parentNode.removeChild(cell._content);
-          }
+        this._cells?.forEach((cell) => {
+          cell._content.parentNode?.removeChild(cell._content);
         });
       });
 
@@ -364,46 +376,40 @@ export const ColumnBaseMixin = (superClass) =>
 
     /** @private */
     _flexGrowChanged(flexGrow) {
-      if (this.parentElement && this.parentElement._columnPropChanged) {
-        this.parentElement._columnPropChanged('flexGrow');
-      }
+      this.parentElement?._columnPropChanged?.('flexGrow');
 
-      this._allCells.forEach((cell) => {
+      this._grid?.__scheduleRenderHeaderFooter?.();
+
+      this._cells?.forEach((cell) => {
         cell.style.flexGrow = flexGrow;
       });
     }
 
     /** @private */
     _widthChanged(width) {
-      if (this.parentElement && this.parentElement._columnPropChanged) {
-        this.parentElement._columnPropChanged('width');
-      }
+      this.parentElement?._columnPropChanged?.('width');
 
-      this._allCells.forEach((cell) => {
+      this._grid?.__scheduleRenderHeaderFooter?.();
+
+      this._cells?.forEach((cell) => {
         cell.style.width = width;
       });
     }
 
     /** @private */
     _frozenChanged(frozen) {
-      if (this.parentElement && this.parentElement._columnPropChanged) {
-        this.parentElement._columnPropChanged('frozen', frozen);
-      }
+      this.parentElement?._columnPropChanged?.('frozen', frozen);
 
       this._allCells.forEach((cell) => {
         updateCellState(cell, 'frozen', frozen);
       });
 
-      if (this._grid && this._grid._frozenCellsChanged) {
-        this._grid._frozenCellsChanged();
-      }
+      this._grid?._frozenCellsChanged?.();
     }
 
     /** @private */
     _frozenToEndChanged(frozenToEnd) {
-      if (this.parentElement && this.parentElement._columnPropChanged) {
-        this.parentElement._columnPropChanged('frozenToEnd', frozenToEnd);
-      }
+      this.parentElement?._columnPropChanged?.('frozenToEnd', frozenToEnd);
 
       this._allCells.forEach((cell) => {
         // Skip sizer cells to keep correct scrollWidth.
@@ -414,9 +420,7 @@ export const ColumnBaseMixin = (superClass) =>
         updateCellState(cell, 'frozen-to-end', frozenToEnd);
       });
 
-      if (this._grid && this._grid._frozenCellsChanged) {
-        this._grid._frozenCellsChanged();
-      }
+      this._grid?._frozenCellsChanged?.();
     }
 
     /** @private */
@@ -448,11 +452,7 @@ export const ColumnBaseMixin = (superClass) =>
 
     /** @private */
     _rowHeaderChanged(rowHeader, cells) {
-      if (!cells) {
-        return;
-      }
-
-      cells.forEach((cell) => {
+      cells?.forEach((cell) => {
         cell.setAttribute('role', rowHeader ? 'rowheader' : 'gridcell');
       });
     }
@@ -485,75 +485,47 @@ export const ColumnBaseMixin = (superClass) =>
     }
 
     /** @private */
-    _resizableChanged(resizable, headerCell) {
-      if (resizable === undefined || headerCell === undefined) {
+    _resizableChanged(resizable) {
+      if (resizable === undefined) {
         return;
       }
 
-      if (headerCell) {
-        [headerCell].concat(this._emptyCells).forEach((cell) => {
-          if (cell) {
-            const existingHandle = cell.querySelector('[part~="resize-handle"]');
-            if (existingHandle) {
-              cell.removeChild(existingHandle);
-            }
-
-            if (resizable) {
-              const handle = document.createElement('div');
-              updatePart(handle, 'resize-handle', true);
-              cell.appendChild(handle);
-            }
-          }
-        });
-      }
+      this._grid?.__scheduleRenderHeaderFooter?.();
     }
 
     /** @private */
     _textAlignChanged(textAlign) {
-      if (textAlign === undefined || this._grid === undefined) {
-        return;
-      }
-      if (['start', 'end', 'center'].indexOf(textAlign) === -1) {
-        console.warn('textAlign can only be set as "start", "end" or "center"');
+      if (textAlign === undefined) {
         return;
       }
 
-      this._allCells.forEach((cell) => {
+      this._grid?.__scheduleRenderHeaderFooter?.();
+
+      this._cells?.forEach((cell) => {
         cell._content.style.textAlign = textAlign;
       });
     }
 
     /** @private */
     _hiddenChanged(hidden) {
-      if (this.parentElement && this.parentElement._columnPropChanged) {
-        this.parentElement._columnPropChanged('hidden', hidden);
-      }
+      this.parentElement?._columnPropChanged?.('hidden', hidden);
 
       if (!!hidden !== !!this._previousHidden && this._grid) {
         if (hidden === true) {
-          this._allCells.forEach((cell) => {
-            if (cell._content.parentNode) {
-              cell._content.parentNode.removeChild(cell._content);
-            }
+          this._cells?.forEach((cell) => {
+            cell._content.parentNode?.removeChild(cell._content);
           });
         }
         this._grid._debouncerHiddenChanged = Debouncer.debounce(
           this._grid._debouncerHiddenChanged,
           animationFrame,
           () => {
-            if (this._grid && this._grid._renderColumnTree) {
-              this._grid._renderColumnTree(this._grid._columnTree);
-            }
+            this._grid?._renderColumnTree?.(this._grid._columnTree);
           },
         );
 
-        if (this._grid._debounceUpdateFrozenColumn) {
-          this._grid._debounceUpdateFrozenColumn();
-        }
-
-        if (this._grid._resetKeyboardNavigation) {
-          this._grid._resetKeyboardNavigation();
-        }
+        this._grid._debounceUpdateFrozenColumn?.();
+        this._grid._resetKeyboardNavigation?.();
       }
       this._previousHidden = hidden;
     }
@@ -632,9 +604,8 @@ export const ColumnBaseMixin = (superClass) =>
       }
 
       this.__renderCellsContent(headerRenderer, [headerCell]);
-      if (this._grid && headerCell.parentElement) {
-        this._grid.__debounceUpdateHeaderFooterRowVisibility(headerCell.parentElement);
-      }
+
+      this._grid?.__scheduleRenderHeaderFooter?.();
     }
 
     /** @protected */
@@ -643,19 +614,8 @@ export const ColumnBaseMixin = (superClass) =>
     }
 
     /** @private */
-    __headerFooterPartNameChanged(headerCell, footerCell, headerPartName, footerPartName) {
-      [
-        { cell: headerCell, partName: headerPartName },
-        { cell: footerCell, partName: footerPartName },
-      ].forEach(({ cell, partName }) => {
-        if (cell) {
-          const customParts = cell.__customParts || [];
-          cell.part.remove(...customParts);
-
-          cell.__customParts = partName ? partName.trim().split(' ') : [];
-          cell.part.add(...cell.__customParts);
-        }
-      });
+    __headerFooterPartNameChanged() {
+      this._grid?.__scheduleRenderHeaderFooter?.();
     }
 
     /**
@@ -689,9 +649,8 @@ export const ColumnBaseMixin = (superClass) =>
       }
 
       this.__renderCellsContent(footerRenderer, [footerCell]);
-      if (this._grid && footerCell.parentElement) {
-        this._grid.__debounceUpdateHeaderFooterRowVisibility(footerCell.parentElement);
-      }
+
+      this._grid?.__scheduleRenderHeaderFooter?.();
     }
 
     /** @protected */

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

@@ -116,7 +116,7 @@ export const ColumnReorderingMixin = (superClass) =>
           return;
         }
 
-        if (headerCell._content.contains(this.getRootNode().activeElement)) {
+        if (headerCell._content.matches(':focus-within')) {
           // Something was focused inside the cell
           return;
         }
@@ -203,6 +203,8 @@ export const ColumnReorderingMixin = (superClass) =>
         for (let i = startIndex; i !== endIndex; i += direction) {
           this._swapColumnOrders(this._draggedColumn, levelColumnsInOrder[i + direction]);
         }
+
+        this.__renderHeaderFooter();
       }
 
       this._updateGhostPosition(e.detail.x, this._touchDevice ? e.detail.y - 50 : e.detail.y);
@@ -434,7 +436,7 @@ export const ColumnReorderingMixin = (superClass) =>
     }
 
     /**
-     * Swaps column orders and physically reorders cells in all rows.
+     * Swaps column orders and reorders cells in all rows.
      * @param {!GridColumn} column1
      * @param {!GridColumn} column2
      * @protected
@@ -444,8 +446,7 @@ export const ColumnReorderingMixin = (superClass) =>
       [column1._order, column2._order] = [column2._order, column1._order];
       const [firstColumn, secondColumn] = column1._order < column2._order ? [column1, column2] : [column2, column1];
 
-      // Reorder cells in all rows (header, footer, body, sizer)
-      [...this.$.header.children, ...this.$.footer.children, ...this.$.items.children, this.$.sizer].forEach((row) => {
+      [...this.$.items.children, this.$.sizer].forEach((row) => {
         const cells = getBodyRowCells(row);
         const firstColumnCells = cells.filter((cell) => firstColumn.contains(cell._column));
         const secondColumnFirstCell = cells.find((cell) => secondColumn.contains(cell._column));
@@ -456,8 +457,12 @@ export const ColumnReorderingMixin = (superClass) =>
         }
       });
 
+      [...this.$.items.children, this.$.sizer].forEach((row) => {
+        this._updateFirstAndLastColumnForRow(row);
+      });
+
+      this.__scheduleRenderHeaderFooter();
       this._debounceUpdateFrozenColumn();
-      this._updateFirstAndLastColumn();
     }
 
     /**

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

@@ -98,6 +98,10 @@ export const ColumnResizingMixin = (superClass) =>
           cell._column.flexGrow = 0;
         });
 
+        // Flush the scheduled header/footer render to apply the new widths
+        // to the cells before measuring the layout below
+        this.__renderHeaderFooterDebouncer?.flush();
+
         const cellFrozenToEnd = this._frozenToEndCells[0];
 
         // When handle moves below the cell frozen to end, scroll into view.

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

@@ -214,7 +214,7 @@ export const DataProviderMixin = (superClass) =>
      * @protected
      */
     _isExpanded(item) {
-      return this.__expandedKeys && this.__expandedKeys.has(this.getItemId(item));
+      return this.__expandedKeys?.has(this.getItemId(item));
     }
 
     /**

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

@@ -4,6 +4,7 @@
  * 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 { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import {
   getBodyRowCells,
   iterateChildren,
@@ -494,11 +495,7 @@ export const DragAndDropMixin = (superClass) =>
       const draggableAttribute = isChrome ? 'draggable-source' : 'draggable';
 
       iterateRowCells(row, (cell) => {
-        if (dragDisabled) {
-          cell._content.removeAttribute(draggableAttribute);
-        } else {
-          cell._content.setAttribute(draggableAttribute, true);
-        }
+        setOrRemoveAttribute(cell._content, draggableAttribute, !dragDisabled);
       });
 
       updateBooleanRowStates(row, {

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

@@ -143,11 +143,6 @@ export const DynamicColumnsMixin = (superClass) =>
       });
     }
 
-    /** @protected */
-    _updateFirstAndLastColumn() {
-      Array.from(this.shadowRoot.querySelectorAll('tr')).forEach((row) => this._updateFirstAndLastColumnForRow(row));
-    }
-
     /**
      * @param {!HTMLElement} row
      * @protected

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

@@ -37,7 +37,7 @@ export const GridFilterColumnMixin = (superClass) =>
      */
     _defaultHeaderRenderer(root, _column) {
       let filter = root.firstElementChild;
-      let textField = filter ? filter.firstElementChild : undefined;
+      let textField = filter?.firstElementChild;
 
       if (!filter) {
         filter = document.createElement('vaadin-grid-filter');

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

@@ -71,8 +71,6 @@ export const GridFilterElementMixin = (superClass) =>
     }
 
     focus() {
-      if (this._textField) {
-        this._textField.focus();
-      }
+      this._textField?.focus();
     }
   };

package/src/vaadin-grid-filter.js

@@ -37,6 +37,7 @@ import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
  *
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-grid-filter
  * @extends HTMLElement
  */