Cannot make Table Column Title text align to right

[TinaC]

Is your feature request related to a problem?

https://experience.sap.com/fiori-design-web/responsive-table/ In Fiori guide, it request if a table title is description a Date, it should align to the right:

But I could not set it as the style is in the shadow root: https://codesandbox.io/p/sandbox/nifty-chandrasekhar-2ldcpg

Describe the solution you'd like

Add a TextAlign property in TableColumn

Describe alternatives you've considered

No response

Additional Context

No response

Organization

DWS

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @TinaC

we moved to StackBlitz as our preferred web IDE/sandbox as it's not possible anymore to edit codeSandboxes with a free plan.

I think setting the horizontal alignment of the cells is already possible by leveraging the part pseudo element selector.

.dateColHeader::part(column) {
  text-align: end;
}

.dateColCell::part(cell) {
  display: flex;
  justify-content: flex-end;
}

https://stackblitz.com/edit/github-a14vpg?file=src%2FApp.tsx,src%2Findex.css

Since this implementation does change the display type of the content cells, I'm not sure if this can have side-effects though. Therefore I'm going to transfer this issue to the ui5-webcomponents repo, because the Table and all of its subcomponents are developed there.

Also, aligning cell content gets easier with the new Table that will be introduced in the 2.0 release of @ui5/webcomponents (nightly docs). V2 is currently in release candidate state, but will be released in July. We (@ui5/webcomponents-react) are also currently in the process of preparing our 2.0 release, but we can't tell exactly yet when it's going to be available.

[DonkeyCo]

Hi @TinaC,

as @Lukas742 mentioned, we are currently working on a new Table implementation, which includes the possibility to change the alignment of header cells and cells.

There is currently PR https://github.com/SAP/ui5-webcomponents/pull/9228, that will introduce this feature.

[kineticjs]

Hello @SAP/ui5-webcomponents-topic-core,

As you can see of the last comment of @Lukas742, he already proposed an app-side solution for this CSS layout issue, utilizing the part pseudo element selector. Would you as owners also have a look and comment is there are known side effects from changing the "display" property of the table cell from "contents" to "flex", as @Lukas742 suggested.

Thanks