@vaadin/grid 25.3.0-alpha6 → 25.3.0-alpha8

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,7 +346,7 @@ export const ColumnBaseMixin = (superClass) =>
           return;
         }
 
-        this._allCells.forEach((cell) => {
+        this._cells?.forEach((cell) => {
           if (cell._content.parentNode) {
             cell._content.parentNode.removeChild(cell._content);
           }
@@ -368,7 +382,9 @@ export const ColumnBaseMixin = (superClass) =>
         this.parentElement._columnPropChanged('flexGrow');
       }
 
-      this._allCells.forEach((cell) => {
+      this._grid?.__scheduleRenderHeaderFooter?.();
+
+      this._cells?.forEach((cell) => {
         cell.style.flexGrow = flexGrow;
       });
     }
@@ -379,7 +395,9 @@ export const ColumnBaseMixin = (superClass) =>
         this.parentElement._columnPropChanged('width');
       }
 
-      this._allCells.forEach((cell) => {
+      this._grid?.__scheduleRenderHeaderFooter?.();
+
+      this._cells?.forEach((cell) => {
         cell.style.width = width;
       });
     }
@@ -485,27 +503,12 @@ export const ColumnBaseMixin = (superClass) =>
     }
 
     /** @private */
-    _resizableChanged(resizable, headerCell) {
-      if (resizable === undefined || headerCell === undefined) {
+    _resizableChanged(resizable) {
+      if (resizable === undefined || this._grid === 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 */
@@ -513,12 +516,10 @@ export const ColumnBaseMixin = (superClass) =>
       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"');
-        return;
-      }
 
-      this._allCells.forEach((cell) => {
+      this._grid.__scheduleRenderHeaderFooter?.();
+
+      this._cells?.forEach((cell) => {
         cell._content.style.textAlign = textAlign;
       });
     }
@@ -531,7 +532,7 @@ export const ColumnBaseMixin = (superClass) =>
 
       if (!!hidden !== !!this._previousHidden && this._grid) {
         if (hidden === true) {
-          this._allCells.forEach((cell) => {
+          this._cells?.forEach((cell) => {
             if (cell._content.parentNode) {
               cell._content.parentNode.removeChild(cell._content);
             }
@@ -632,9 +633,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 +643,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 +678,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

@@ -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-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.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
  */

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),
+        };
+      });
+    }
+  };