@vaadin/grid 25.3.0-alpha7 → 25.3.0-alpha9

package/src/vaadin-grid-header-footer-rendering-mixin.js

@@ -0,0 +1,296 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, nothing, render } from 'lit';
+import { cache } from 'lit/directives/cache.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { microTask } from '@vaadin/component-base/src/async.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { partMap } from '@vaadin/component-base/src/directives/part-map.js';
+import { cellContent } from './directives/cell-content-directive.js';
+
+function isContentCell(column, level, columnTree) {
+  const isLastRow = level === columnTree.length - 1;
+  return isLastRow || column.localName === 'vaadin-grid-column-group';
+}
+
+function isHeaderRowVisible(columns, level, columnTree) {
+  return columns.some((column) => {
+    if (column.hidden || !isContentCell(column, level, columnTree)) {
+      return false;
+    }
+
+    if (column.headerRenderer) {
+      // The column has a header renderer -> row should be visible
+      return true;
+    }
+
+    if (column.header === null) {
+      // The column header is explicitly set to null -> doesn't block hiding the row
+      return false;
+    }
+
+    return column.path || column.header !== undefined;
+  });
+}
+
+function isFooterRowVisible(columns, level, columnTree) {
+  return columns.some((column) => {
+    if (column.hidden || !isContentCell(column, level, columnTree)) {
+      return false;
+    }
+
+    return column.footerRenderer;
+  });
+}
+
+/**
+ * Converts a whitespace separated list of custom part names
+ * into an object accepted by the `partMap` directive.
+ */
+function getCustomParts(partName) {
+  return Object.fromEntries(
+    (partName ?? '')
+      .split(' ')
+      .filter((name) => name !== '')
+      .map((name) => [name, true]),
+  );
+}
+
+/**
+ * A mixin providing rendering of header and footer rows based on the column tree.
+ */
+export const HeaderFooterRenderingMixin = (superClass) =>
+  class HeaderFooterRenderingMixin extends superClass {
+    /** @private */
+    __scheduleRenderHeaderFooter() {
+      this.__renderHeaderFooterDebouncer = Debouncer.debounce(this.__renderHeaderFooterDebouncer, microTask, () => {
+        this.__renderHeaderFooter();
+      });
+    }
+
+    /** @private */
+    __renderHeaderFooter() {
+      this.__renderHeaderFooterDebouncer?.cancel();
+
+      const sortedColumnTree = (this._columnTree ?? []).map((columns) => {
+        return columns.toSorted((a, b) => a._order - b._order);
+      });
+
+      sortedColumnTree.flat().forEach((column) => {
+        column._emptyCells = [];
+      });
+
+      this.#renderHeader(sortedColumnTree);
+      this.#renderFooter(sortedColumnTree);
+
+      this._resetKeyboardNavigation();
+      this.__a11yUpdateGridSize(this.size, this._columnTree, this.__emptyState);
+    }
+
+    #renderHeader(columnTree) {
+      const rows = this.#getRows(columnTree, 'header');
+      render(rows.map(this.#renderHeaderRow), this.$.header, { host: this });
+
+      this.$.table.toggleAttribute('has-header', !!this.$.header.querySelector('tr:not([hidden])'));
+
+      this.$.header.querySelectorAll('.header-cell').forEach((cell) => {
+        const column = cell._column;
+        const isColumnRow = cell.parentElement === this.$.header.lastElementChild;
+        if (isColumnRow || column.localName === 'vaadin-grid-column-group') {
+          column._headerCell = cell;
+        } else {
+          column._emptyCells.push(cell);
+        }
+      });
+    }
+
+    #renderHeaderRow = ({ level, cells, isLastRow, isFirstRow, isRowVisible }) => {
+      const rowParts = {
+        'first-header-row': isFirstRow,
+        'last-header-row': isLastRow,
+      };
+
+      return html`
+        <tr
+          role="row"
+          part="row header-row${partMap(rowParts)}"
+          class="row header-row${classMap(rowParts)}"
+          tabindex="-1"
+          ?hidden=${!isRowVisible}
+        >
+          ${repeat(
+            cells,
+            ({ column }) => column._id,
+            ({ column, isFirstCell, isLastCell, isContentCell }) => {
+              // `cache` keeps the cell and its rendered content when the
+              // column gets hidden, so it can be restored as-is when the
+              // column is shown again.
+              if (column.hidden) {
+                return cache(nothing);
+              }
+
+              const cellParts = {
+                'first-header-row-cell': isFirstRow,
+                'last-header-row-cell': isLastRow,
+                'first-column-cell': isFirstCell,
+                'last-column-cell': isLastCell,
+              };
+
+              const customCellParts = isContentCell ? getCustomParts(column.headerPartName) : {};
+
+              return cache(html`
+                <th
+                  role="columnheader"
+                  part="cell header-cell${partMap({ ...cellParts, ...customCellParts })}"
+                  class="cell header-cell${classMap(cellParts)}"
+                  style="${styleMap({
+                    width: column.width,
+                    'flex-grow': column.flexGrow,
+                  })}"
+                  ?first-column="${isFirstCell}"
+                  ?last-column="${isLastCell}"
+                  @keydown="${this.__onCellKeyDown}"
+                  @mousedown=${this.__onCellMouseDown}
+                  @mouseenter=${this.__onCellMouseEnter}
+                  @mouseleave=${this.__onCellMouseLeave}
+                  colspan="${ifDefined(column._colSpan)}"
+                  aria-colspan="${ifDefined(column._colSpan)}"
+                  tabindex="-1"
+                  ._column=${column}
+                >
+                  ${cellContent(this, `vaadin-grid-header-cell-content-${level}-${column._id}`, {
+                    textAlign: column.textAlign,
+                  })}
+                  ${column.resizable ? html`<div part="resize-handle" class="resize-handle"></div>` : nothing}
+                </th>
+              `);
+            },
+          )}
+        </tr>
+      `;
+    };
+
+    #renderFooter(columnTree) {
+      const rows = this.#getRows(columnTree, 'footer');
+      render(rows.map(this.#renderFooterRow), this.$.footer, { host: this });
+
+      this.$.table.toggleAttribute('has-footer', !!this.$.footer.querySelector('tr:not([hidden])'));
+
+      this.$.footer.querySelectorAll('.footer-cell').forEach((cell) => {
+        const column = cell._column;
+        const isColumnRow = cell.parentElement === this.$.footer.firstElementChild;
+        if (isColumnRow || column.localName === 'vaadin-grid-column-group') {
+          column._footerCell = cell;
+        } else {
+          column._emptyCells.push(cell);
+        }
+      });
+    }
+
+    #renderFooterRow = ({ level, cells, isLastRow, isFirstRow, isRowVisible }) => {
+      const rowParts = {
+        'first-footer-row': isFirstRow,
+        'last-footer-row': isLastRow,
+      };
+
+      return html`
+        <tr
+          role="row"
+          part="row footer-row${partMap(rowParts)}"
+          class="row footer-row${classMap(rowParts)}"
+          tabindex="-1"
+          ?hidden=${!isRowVisible}
+        >
+          ${repeat(
+            cells,
+            ({ column }) => column._id,
+            ({ column, isFirstCell, isLastCell, isContentCell }) => {
+              // `cache` keeps the cell and its rendered content when the
+              // column gets hidden, so it can be restored as-is when the
+              // column is shown again.
+              if (column.hidden) {
+                return cache(nothing);
+              }
+
+              const cellParts = {
+                'first-footer-row-cell': isFirstRow,
+                'last-footer-row-cell': isLastRow,
+                'first-column-cell': isFirstCell,
+                'last-column-cell': isLastCell,
+              };
+
+              const customCellParts = isContentCell ? getCustomParts(column.footerPartName) : {};
+
+              return cache(html`
+                <td
+                  role="gridcell"
+                  part="cell footer-cell${partMap({ ...cellParts, ...customCellParts })}"
+                  class="cell footer-cell${classMap(cellParts)}"
+                  style="${styleMap({
+                    width: column.width,
+                    'flex-grow': column.flexGrow,
+                  })}"
+                  ?first-column="${isFirstCell}"
+                  ?last-column="${isLastCell}"
+                  @keydown="${this.__onCellKeyDown}"
+                  @mousedown=${this.__onCellMouseDown}
+                  @mouseenter=${this.__onCellMouseEnter}
+                  @mouseleave=${this.__onCellMouseLeave}
+                  colspan="${ifDefined(column._colSpan)}"
+                  aria-colspan="${ifDefined(column._colSpan)}"
+                  tabindex="-1"
+                  ._column=${column}
+                >
+                  ${cellContent(this, `vaadin-grid-footer-cell-content-${level}-${column._id}`, {
+                    textAlign: column.textAlign,
+                  })}
+                </td>
+              `);
+            },
+          )}
+        </tr>
+      `;
+    };
+
+    #getRows(columnTree, section) {
+      let rows = columnTree.map((columns, level) => {
+        const visibleColumns = columns.filter((column) => !column.hidden);
+
+        return {
+          level,
+          cells: columns.map((column) => {
+            return {
+              column,
+              isFirstCell: column === visibleColumns.at(0),
+              isLastCell: column === visibleColumns.at(-1),
+              isContentCell: isContentCell(column, level, columnTree),
+            };
+          }),
+          isRowVisible:
+            section === 'header'
+              ? isHeaderRowVisible(columns, level, columnTree)
+              : isFooterRowVisible(columns, level, columnTree),
+        };
+      });
+
+      if (section === 'footer') {
+        rows = rows.toReversed();
+      }
+
+      const visibleRows = rows.filter((row) => row.isRowVisible);
+
+      return rows.map((row) => {
+        return {
+          ...row,
+          isFirstRow: row === visibleRows.at(0),
+          isLastRow: row === visibleRows.at(-1),
+        };
+      });
+    }
+  };

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

@@ -154,9 +154,7 @@ export const KeyboardNavigationMixin = (superClass) =>
 
     /** @private */
     _focusableChanged(focusable, oldFocusable) {
-      if (oldFocusable) {
-        oldFocusable.setAttribute('tabindex', '-1');
-      }
+      oldFocusable?.setAttribute('tabindex', '-1');
       if (focusable) {
         this._updateGridSectionFocusTarget(focusable);
       }
@@ -415,9 +413,7 @@ export const KeyboardNavigationMixin = (superClass) =>
     _onRowNavigation(activeRow, dy) {
       const { dstRow } = this.__navigateRows(dy, activeRow);
 
-      if (dstRow) {
-        dstRow.focus();
-      }
+      dstRow?.focus();
     }
 
     /** @private */
@@ -765,7 +761,7 @@ export const KeyboardNavigationMixin = (superClass) =>
       // When clicking a cell with only text nodes, skip activating the cell
       // on click, since that is already handled on keydown.
       const cell = e.composedPath()[0];
-      const target = (cell._content && cell._content.firstElementChild) || cell;
+      const target = cell._content?.firstElementChild || cell;
       const wasNavigating = this.hasAttribute('navigating');
       const clickEvent = new MouseEvent('click', {
         shiftKey: e.shiftKey,

package/src/vaadin-grid-mixin.js

@@ -13,7 +13,6 @@ import { A11yMixin } from './vaadin-grid-a11y-mixin.js';
 import { ActiveItemMixin } from './vaadin-grid-active-item-mixin.js';
 import { ArrayDataProviderMixin } from './vaadin-grid-array-data-provider-mixin.js';
 import { ColumnAutoWidthMixin } from './vaadin-grid-column-auto-width-mixin.js';
-import { ColumnRenderingMixin } from './vaadin-grid-column-rendering-mixin.js';
 import { ColumnReorderingMixin } from './vaadin-grid-column-reordering-mixin.js';
 import { ColumnResizingMixin } from './vaadin-grid-column-resizing-mixin.js';
 import { DataProviderMixin } from './vaadin-grid-data-provider-mixin.js';
@@ -21,6 +20,7 @@ import { DragAndDropMixin } from './vaadin-grid-drag-and-drop-mixin.js';
 import { DynamicColumnsMixin } from './vaadin-grid-dynamic-columns-mixin.js';
 import { EventContextMixin } from './vaadin-grid-event-context-mixin.js';
 import { FilterMixin } from './vaadin-grid-filter-mixin.js';
+import { HeaderFooterRenderingMixin } from './vaadin-grid-header-footer-rendering-mixin.js';
 import {
   getBodyRowCells,
   getClosestCell,
@@ -47,7 +47,7 @@ export const GridMixin = (superClass) =>
     ArrayDataProviderMixin(
       DataProviderMixin(
         DynamicColumnsMixin(
-          ColumnRenderingMixin(
+          HeaderFooterRenderingMixin(
             ActiveItemMixin(
               ScrollMixin(
                 SelectionMixin(
@@ -152,13 +152,13 @@ export const GridMixin = (superClass) =>
     /** @private */
     get _firstVisibleIndex() {
       const firstVisibleItem = this.__getFirstVisibleItem();
-      return firstVisibleItem ? firstVisibleItem.index : undefined;
+      return firstVisibleItem?.index;
     }
 
     /** @private */
     get _lastVisibleIndex() {
       const lastVisibleItem = this.__getLastVisibleItem();
-      return lastVisibleItem ? lastVisibleItem.index : undefined;
+      return lastVisibleItem?.index;
     }
 
     constructor() {
@@ -247,13 +247,6 @@ export const GridMixin = (superClass) =>
         // otherwise be triggered by this logic because it reads the row height
         // right after updating the rows' content.
         __disableHeightPlaceholder: true,
-        // The virtualizer amortizes scroller height updates to avoid reflows while
-        // scrolling. In `allRowsVisible` mode the grid has no scrolling and its
-        // height must track the content exactly, so tell the virtualizer to always
-        // apply the scroller height. Otherwise the items container can be left at a
-        // stale, too-small height and clip rows when the grid grows (e.g. when
-        // expanding a tree grid from a small size).
-        __alwaysUpdateScrollerSize: () => this.allRowsVisible,
       });
 
       this._tooltipController = new TooltipController(this);
@@ -305,9 +298,7 @@ export const GridMixin = (superClass) =>
     __focusBodyCell({ item, column }) {
       const row = this._getRenderedRows().find((row) => row._item === item);
       const cell = row && [...row.children].find((cell) => cell._column === column);
-      if (cell) {
-        cell.focus();
-      }
+      cell?.focus();
     }
 
     /** @protected */
@@ -597,7 +588,6 @@ export const GridMixin = (superClass) =>
 
       this._resizeHandler();
       this._frozenCellsChanged();
-      this._updateFirstAndLastColumn();
       this._resetKeyboardNavigation();
       this.__a11yUpdateHeaderRows();
       this.__a11yUpdateFooterRows();
@@ -605,22 +595,6 @@ export const GridMixin = (superClass) =>
       this.__updateHeaderAndFooter();
     }
 
-    /** @private */
-    __updateHeaderFooterRowParts(section) {
-      const visibleRows = [...this.$[section].querySelectorAll('tr:not([hidden])')];
-      [...this.$[section].children].forEach((row) => {
-        updatePart(row, `first-${section}-row`, row === visibleRows.at(0));
-        updatePart(row, `last-${section}-row`, row === visibleRows.at(-1));
-
-        getBodyRowCells(row).forEach((cell) => {
-          updatePart(cell, `first-${section}-row-cell`, row === visibleRows.at(0));
-          updatePart(cell, `last-${section}-row-cell`, row === visibleRows.at(-1));
-        });
-
-        this._updateFirstAndLastColumnForRow(row);
-      });
-    }
-
     /**
      * @param {!HTMLElement} row
      * @param {boolean} loading

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

@@ -180,7 +180,7 @@ export const RowDetailsMixin = (superClass) =>
      * @protected
      */
     _isDetailsOpened(item) {
-      return this.__detailsOpenedKeys && this.__detailsOpenedKeys.has(this.getItemId(item));
+      return this.__detailsOpenedKeys?.has(this.getItemId(item));
     }
 
     /** @private */

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

@@ -6,6 +6,7 @@
 import { microTask, timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { getNormalizedScrollLeft } from '@vaadin/component-base/src/dir-utils.js';
+import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { OverflowController } from '@vaadin/component-base/src/overflow-controller.js';
 
 const timeouts = {
@@ -377,11 +378,7 @@ export const ScrollMixin = (superClass) =>
 
     /** @private */
     __columnRenderingChanged(_columnTree, columnRendering) {
-      if (columnRendering === 'eager') {
-        this.$.scroller.removeAttribute('column-rendering');
-      } else {
-        this.$.scroller.setAttribute('column-rendering', columnRendering);
-      }
+      setOrRemoveAttribute(this.$.scroller, 'column-rendering', columnRendering !== 'eager' && columnRendering);
 
       this.__updateColumnsBodyContentHidden();
     }

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

@@ -174,8 +174,8 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
           this._headerCell.appendChild(label);
         }
         label.textContent = selectAllUnavailable;
-      } else if (label) {
-        label.remove();
+      } else {
+        label?.remove();
       }
     }
 
@@ -383,7 +383,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
 
       // Get the index of the row being hovered over or the first/last
       // visible row if hovering outside the grid
-      let hoveredIndex = hoveredRow ? hoveredRow.index : undefined;
+      let hoveredIndex = hoveredRow?.index;
       const scrollableArea = this.__getScrollableArea();
       if (this.__dragCurrentY < scrollableArea.top) {
         hoveredIndex = this._grid._firstVisibleIndex;

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { getClosestCell } from './vaadin-grid-helpers.js';
 
 /**
@@ -97,11 +98,7 @@ export const GridSorterMixin = (superClass) =>
       }
 
       const ariaLabel = grid.__effectiveI18n.sorter?.replace('{column}', this.textContent.trim());
-      if (ariaLabel) {
-        this.setAttribute('aria-label', ariaLabel);
-      } else {
-        this.removeAttribute('aria-label');
-      }
+      setOrRemoveAttribute(this, 'aria-label', ariaLabel);
     }
 
     /** @private */

package/src/vaadin-grid-sorter.js

@@ -51,6 +51,7 @@ import { GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
  * @fires {CustomEvent} direction-changed - Fired when the `direction` property changes.
  * @fires {CustomEvent} sorter-changed - Fired when the `path` or `direction` property changes.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-grid-sorter
  * @extends HTMLElement
  */

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

@@ -59,6 +59,7 @@ import { GridTreeToggleMixin } from './vaadin-grid-tree-toggle-mixin.js';
  *
  * @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-grid-tree-toggle
  * @extends HTMLElement
  */

package/src/vaadin-grid.js

@@ -274,6 +274,7 @@ const DEFAULT_I18N = {
  * @fires {CustomEvent} size-changed - Fired when the `size` property changes.
  * @fires {CustomEvent} item-toggle - Fired when the user selects or deselects an item through the selection column.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-grid
  * @extends HTMLElement
  */