diff --git a/packages/main/cypress/specs/Table.cy.tsx b/packages/main/cypress/specs/Table.cy.tsx index eccdae39193c..03c4885e1644 100644 --- a/packages/main/cypress/specs/Table.cy.tsx +++ b/packages/main/cypress/specs/Table.cy.tsx @@ -445,8 +445,9 @@ describe("Table - Horizontal alignment of cells", () => { .should("have.css", "justify-content", alignment) .and($el => { const style = $el.attr("style"); + const headerCellId = $el.attr("id"); const variable = style?.match(/justify-content: ([^;]+)/)?.[1] ?? ""; - expect(variable).to.equal(`var(--horizontal-align-default-${index})`); + expect(variable).to.equal(`var(--horizontal-align-${headerCellId})`); }); cy.get("ui5-table-row") diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts index 547189a037fb..a2ef288d41b2 100644 --- a/packages/main/src/Table.ts +++ b/packages/main/src/Table.ts @@ -587,7 +587,7 @@ class Table extends UI5Element { const virtualizer = this._getVirtualizer(); const headerStyleMap = this.headerRow?.[0]?.cells?.reduce((headerStyles, headerCell) => { if (headerCell.horizontalAlign !== undefined && !headerCell._popin) { - headerStyles[`--horizontal-align-${headerCell._individualSlot}`] = headerCell.horizontalAlign; + headerStyles[`--horizontal-align-${headerCell._id}`] = headerCell.horizontalAlign; } return headerStyles; }, {} as { [key: string]: string }); diff --git a/packages/main/src/TableCell.ts b/packages/main/src/TableCell.ts index fc511406a707..a4d6ff12c48a 100644 --- a/packages/main/src/TableCell.ts +++ b/packages/main/src/TableCell.ts @@ -34,7 +34,7 @@ class TableCell extends TableCellBase { if (this.horizontalAlign) { this.style.justifyContent = this.horizontalAlign; } else if (this._individualSlot) { - this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`; + this.style.justifyContent = `var(--horizontal-align-${this._headerCell._id})`; } } diff --git a/packages/main/src/TableHeaderCell.ts b/packages/main/src/TableHeaderCell.ts index 886e9b078453..06e8b1ae6f2e 100644 --- a/packages/main/src/TableHeaderCell.ts +++ b/packages/main/src/TableHeaderCell.ts @@ -131,7 +131,7 @@ class TableHeaderCell extends TableCellBase { super.onBeforeRendering(); if (this._individualSlot) { // overwrite setting of TableCellBase so that the TableHeaderCell always uses the slot variable - this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`; + this.style.justifyContent = `var(--horizontal-align-${this._id})`; } toggleAttribute(this, "aria-sort", this.sortIndicator !== SortOrder.None, this.sortIndicator.toLowerCase()); }