@vaadin/grid 25.3.0-alpha6 → 25.3.0-dev.1fa5a51482

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

@@ -0,0 +1,265 @@
+/**
+ * @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 { 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 isEmptyCell(column, level, columnTree) {
+  const isColumnRow = level === columnTree.length - 1;
+  return !isColumnRow && column.localName !== 'vaadin-grid-column-group';
+}
+
+function isHeaderRowVisible(columns, level, columnTree) {
+  return columns.some((column) => {
+    if (column.hidden || isEmptyCell(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 || isEmptyCell(column, level, columnTree)) {
+      return false;
+    }
+
+    return column.footerRenderer;
+  });
+}
+
+/**
+ * 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 }) => {
+              // `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,
+              };
+
+              return cache(html`
+                <th
+                  role="columnheader"
+                  part="cell header-cell${partMap(cellParts)}"
+                  class="cell header-cell${classMap(cellParts)}"
+                  ?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}`)}
+                  ${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 }) => {
+              // `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,
+              };
+
+              return cache(html`
+                <td
+                  role="gridcell"
+                  part="cell footer-cell${partMap(cellParts)}"
+                  class="cell footer-cell${classMap(cellParts)}"
+                  ?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}`)}
+                </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),
+            };
+          }),
+          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-mixin.js

@@ -4,9 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { TabindexMixin } from '@vaadin/a11y-base/src/tabindex-mixin.js';
-import { microTask } from '@vaadin/component-base/src/async.js';
 import { isAndroid, isIOS, isSafari, isTouch } from '@vaadin/component-base/src/browser-utils.js';
-import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { setTouchAction } from '@vaadin/component-base/src/gestures.js';
 import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
@@ -22,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,
@@ -48,17 +47,21 @@ export const GridMixin = (superClass) =>
     ArrayDataProviderMixin(
       DataProviderMixin(
         DynamicColumnsMixin(
-          ActiveItemMixin(
-            ScrollMixin(
-              SelectionMixin(
-                SortMixin(
-                  RowDetailsMixin(
-                    KeyboardNavigationMixin(
-                      A11yMixin(
-                        FilterMixin(
-                          ColumnReorderingMixin(
-                            ColumnResizingMixin(
-                              EventContextMixin(DragAndDropMixin(StylingMixin(TabindexMixin(ResizeMixin(superClass))))),
+          HeaderFooterRenderingMixin(
+            ActiveItemMixin(
+              ScrollMixin(
+                SelectionMixin(
+                  SortMixin(
+                    RowDetailsMixin(
+                      KeyboardNavigationMixin(
+                        A11yMixin(
+                          FilterMixin(
+                            ColumnReorderingMixin(
+                              ColumnResizingMixin(
+                                EventContextMixin(
+                                  DragAndDropMixin(StylingMixin(TabindexMixin(ResizeMixin(superClass)))),
+                                ),
+                              ),
                             ),
                           ),
                         ),
@@ -351,7 +354,7 @@ export const GridMixin = (superClass) =>
         updatePart(row, 'row', true);
         updatePart(row, 'body-row', true);
         if (this._columnTree) {
-          this.__initRow(row, this._columnTree[this._columnTree.length - 1], 'body', false, true);
+          this.__initRow(row, this._columnTree[this._columnTree.length - 1], 'body', true);
         }
         rows.push(row);
       }
@@ -444,11 +447,10 @@ export const GridMixin = (superClass) =>
      * @param {!HTMLTableRowElement} row
      * @param {!Array<!GridColumn>} columns
      * @param {?string} section
-     * @param {boolean} isColumnRow
      * @param {boolean} noNotify
      * @private
      */
-    __initRow(row, columns, section = 'body', isColumnRow = false, noNotify = false) {
+    __initRow(row, columns, section = 'body', noNotify = false) {
       const contentsFragment = document.createDocumentFragment();
 
       iterateRowCells(row, (cell) => {
@@ -516,30 +518,6 @@ export const GridMixin = (superClass) =>
             if (!noNotify) {
               column._cells = [...column._cells];
             }
-          } else {
-            // Header & footer
-            const tagName = section === 'header' ? 'th' : 'td';
-            if (isColumnRow || column.localName === 'vaadin-grid-column-group') {
-              cell = column[`_${section}Cell`];
-              if (!cell) {
-                cell = this._createCell(tagName);
-              }
-              cell._column = column;
-              row.appendChild(cell);
-              column[`_${section}Cell`] = cell;
-            } else {
-              if (!column._emptyCells) {
-                column._emptyCells = [];
-              }
-              cell = column._emptyCells.find((cell) => cell._vacant) || this._createCell(tagName);
-              cell._column = column;
-              row.appendChild(cell);
-              if (column._emptyCells.indexOf(cell) === -1) {
-                column._emptyCells.push(cell);
-              }
-            }
-            updatePart(cell, 'cell', true);
-            updatePart(cell, `${section}-cell`, true);
           }
 
           if (!cell._content.parentElement) {
@@ -549,10 +527,6 @@ export const GridMixin = (superClass) =>
           cell._column = column;
         });
 
-      if (section !== 'body') {
-        this.__debounceUpdateHeaderFooterRowVisibility(row);
-      }
-
       // Might be empty if only cache was used
       this.appendChild(contentsFragment);
 
@@ -560,75 +534,6 @@ export const GridMixin = (superClass) =>
       this._updateFirstAndLastColumnForRow(row);
     }
 
-    /**
-     * @param {HTMLTableRowElement} row
-     * @protected
-     */
-    __debounceUpdateHeaderFooterRowVisibility(row) {
-      row.__debounceUpdateHeaderFooterRowVisibility = Debouncer.debounce(
-        row.__debounceUpdateHeaderFooterRowVisibility,
-        microTask,
-        () => this.__updateHeaderFooterRowVisibility(row),
-      );
-    }
-
-    /**
-     * @param {HTMLTableRowElement} row
-     * @protected
-     */
-    __updateHeaderFooterRowVisibility(row) {
-      if (!row) {
-        return;
-      }
-
-      const visibleRowCells = Array.from(row.children).filter((cell) => {
-        const column = cell._column;
-        if (column._emptyCells && column._emptyCells.indexOf(cell) > -1) {
-          // The cell is an "empty cell"  -> doesn't block hiding the row
-          return false;
-        }
-        if (row.parentElement === this.$.header) {
-          if (column.headerRenderer) {
-            // The cell is the header cell of a column that has a header renderer
-            // -> row should be visible
-            return true;
-          }
-          if (column.header === null) {
-            // The column header is explicilty set to null -> doesn't block hiding the row
-            return false;
-          }
-          if (column.path || column.header !== undefined) {
-            // The column has an explicit non-null header or a path that generates a header
-            // -> row should be visible
-            return true;
-          }
-        } else if (column.footerRenderer) {
-          // The cell is the footer cell of a column that has a footer renderer
-          // -> row should be visible
-          return true;
-        }
-        return false;
-      });
-
-      if (row.hidden !== !visibleRowCells.length) {
-        row.hidden = !visibleRowCells.length;
-      }
-
-      if (row.parentElement === this.$.header) {
-        this.$.table.toggleAttribute('has-header', this.$.header.querySelector('tr:not([hidden])'));
-        this.__updateHeaderFooterRowParts('header');
-      }
-
-      if (row.parentElement === this.$.footer) {
-        this.$.table.toggleAttribute('has-footer', this.$.footer.querySelector('tr:not([hidden])'));
-        this.__updateHeaderFooterRowParts('footer');
-      }
-
-      // Make sure the section has a tabbable element
-      this._resetKeyboardNavigation();
-      this.__a11yUpdateGridSize(this.size, this._columnTree, this.__emptyState);
-    }
-
     /** @private */
     __updateVirtualizerElement(row, index) {
       this._preventScrollerRotatingCellFocus(row, index);
@@ -681,46 +586,17 @@ export const GridMixin = (superClass) =>
      */
     _renderColumnTree(columnTree) {
       iterateChildren(this.$.items, (row) => {
-        this.__initRow(row, columnTree[columnTree.length - 1], 'body', false, true);
+        this.__initRow(row, columnTree[columnTree.length - 1], 'body', true);
         this.__updateRow(row);
       });
 
-      while (this.$.header.children.length < columnTree.length) {
-        const headerRow = document.createElement('tr');
-        headerRow.setAttribute('role', 'row');
-        headerRow.setAttribute('tabindex', '-1');
-        updatePart(headerRow, 'row', true);
-        updatePart(headerRow, 'header-row', true);
-        this.$.header.appendChild(headerRow);
-
-        const footerRow = document.createElement('tr');
-        footerRow.setAttribute('role', 'row');
-        footerRow.setAttribute('tabindex', '-1');
-        updatePart(footerRow, 'row', true);
-        updatePart(footerRow, 'footer-row', true);
-        this.$.footer.appendChild(footerRow);
-      }
-      while (this.$.header.children.length > columnTree.length) {
-        this.$.header.removeChild(this.$.header.firstElementChild);
-        this.$.footer.removeChild(this.$.footer.firstElementChild);
-      }
-
-      iterateChildren(this.$.header, (headerRow, index) => {
-        this.__initRow(headerRow, columnTree[index], 'header', index === columnTree.length - 1);
-      });
-
-      iterateChildren(this.$.footer, (footerRow, index) => {
-        this.__initRow(footerRow, columnTree[columnTree.length - 1 - index], 'footer', index === 0);
-      });
+      this.__renderHeaderFooter();
 
       // Sizer rows
       this.__initRow(this.$.sizer, columnTree[columnTree.length - 1]);
 
-      this.__updateHeaderFooterRowParts('header');
-      this.__updateHeaderFooterRowParts('footer');
       this._resizeHandler();
       this._frozenCellsChanged();
-      this._updateFirstAndLastColumn();
       this._resetKeyboardNavigation();
       this.__a11yUpdateHeaderRows();
       this.__a11yUpdateFooterRows();
@@ -728,20 +604,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));
-        });
-      });
-    }
-
     /**
      * @param {!HTMLElement} row
      * @param {boolean} loading

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

@@ -46,16 +46,25 @@ export const GridSortColumnMixin = (superClass) =>
      */
     _defaultHeaderRenderer(root, _column) {
       let sorter = root.firstElementChild;
-      if (!sorter) {
+      const isNewSorter = !sorter;
+      if (isNewSorter) {
         sorter = document.createElement('vaadin-grid-sorter');
         sorter.addEventListener('direction-changed', this.__boundOnDirectionChanged);
-        root.appendChild(sorter);
       }
 
       sorter.path = this.path;
       sorter.__rendererDirection = this.direction;
       sorter.direction = this.direction;
       sorter.textContent = this.__getHeader(this.header, this.path);
+
+      // Append the sorter only after its direction has been set. If the cell
+      // content is already connected (as with the declarative header rendering),
+      // appending an unconfigured sorter makes it notify its default `null`
+      // direction before `__rendererDirection` is set, which would reset the
+      // column's direction. See __onDirectionChanged.
+      if (isNewSorter) {
+        root.appendChild(sorter);
+      }
     }
 
     /**

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