diff --git a/packages/grid/src/vaadin-grid-column-reordering-mixin.js b/packages/grid/src/vaadin-grid-column-reordering-mixin.js
index 43d7082762d..cea4c1772b7 100644
--- a/packages/grid/src/vaadin-grid-column-reordering-mixin.js
+++ b/packages/grid/src/vaadin-grid-column-reordering-mixin.js
@@ -457,9 +457,12 @@ export const ColumnReorderingMixin = (superClass) =>
}
});
+ [...this.$.items.children, this.$.sizer].forEach((row) => {
+ this._updateFirstAndLastColumnForRow(row);
+ });
+
this.__scheduleRenderHeaderFooter();
this._debounceUpdateFrozenColumn();
- this._updateFirstAndLastColumn();
}
/**
diff --git a/packages/grid/src/vaadin-grid-dynamic-columns-mixin.js b/packages/grid/src/vaadin-grid-dynamic-columns-mixin.js
index 1e10ac91bdf..6068047a4e5 100644
--- a/packages/grid/src/vaadin-grid-dynamic-columns-mixin.js
+++ b/packages/grid/src/vaadin-grid-dynamic-columns-mixin.js
@@ -143,14 +143,6 @@ export const DynamicColumnsMixin = (superClass) =>
});
}
- /** @protected */
- _updateFirstAndLastColumn() {
- // The sizer is a element, so it isn't matched by the selector
- [...this.shadowRoot.querySelectorAll('tr'), this.$.sizer].forEach((row) => {
- this._updateFirstAndLastColumnForRow(row);
- });
- }
-
/**
* @param {!HTMLElement} row
* @protected
diff --git a/packages/grid/src/vaadin-grid-header-footer-rendering-mixin.js b/packages/grid/src/vaadin-grid-header-footer-rendering-mixin.js
index 6cdc79f45b1..900d54c0b30 100644
--- a/packages/grid/src/vaadin-grid-header-footer-rendering-mixin.js
+++ b/packages/grid/src/vaadin-grid-header-footer-rendering-mixin.js
@@ -5,10 +5,12 @@
*/
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) {
@@ -78,10 +80,10 @@ export const HeaderFooterRenderingMixin = (superClass) =>
}
#renderHeader(columnTree) {
- render(columnTree.map(this.#renderHeaderRow), this.$.header, { host: this });
+ 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.__updateHeaderFooterRowParts('header');
this.$.header.querySelectorAll('.header-cell').forEach((cell) => {
const column = cell._column;
@@ -94,19 +96,24 @@ export const HeaderFooterRenderingMixin = (superClass) =>
});
}
- #renderHeaderRow = (columns, level, columnTree) => {
+ #renderHeaderRow = ({ level, cells, isLastRow, isFirstRow, isRowVisible }) => {
+ const rowParts = {
+ 'first-header-row': isFirstRow,
+ 'last-header-row': isLastRow,
+ };
+
return html`
`;
};
+
+ #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),
+ };
+ });
+ }
};
diff --git a/packages/grid/src/vaadin-grid-mixin.js b/packages/grid/src/vaadin-grid-mixin.js
index 7d27fd0dffc..3d22ac80cb3 100644
--- a/packages/grid/src/vaadin-grid-mixin.js
+++ b/packages/grid/src/vaadin-grid-mixin.js
@@ -597,7 +597,6 @@ export const GridMixin = (superClass) =>
this._resizeHandler();
this._frozenCellsChanged();
- this._updateFirstAndLastColumn();
this._resetKeyboardNavigation();
this.__a11yUpdateHeaderRows();
this.__a11yUpdateFooterRows();
@@ -605,22 +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));
- });
-
- this._updateFirstAndLastColumnForRow(row);
- });
- }
-
/**
* @param {!HTMLElement} row
* @param {boolean} loading
diff --git a/packages/grid/test/dom/__snapshots__/grid.test.snap.js b/packages/grid/test/dom/__snapshots__/grid.test.snap.js
index 31d29da748d..b2e7252eec5 100644
--- a/packages/grid/test/dom/__snapshots__/grid.test.snap.js
+++ b/packages/grid/test/dom/__snapshots__/grid.test.snap.js
@@ -92,7 +92,7 @@ snapshots["vaadin-grid basic shadow default"] =