search

SAP / fundamental-ngx

Fundamental Library for Angular is SAP Design System Angular component library
https://sap.github.io/fundamental-ngx
Apache License 2.0
268 stars 130 forks source link

[fdp-table] Misaligned headers and popover when sorting columns with non-default alignment. #11230

Closed julia-siegl closed 1 month ago

julia-siegl commented 9 months ago

Is this a bug, enhancement, or feature request?

bug

Describe your proposal.

It is possible to align columns ( including the header) with align property in fdp-column. When sorting the header jumps to the left side ( independent on the initial column alignment). The proposal is to change the column header style, such that the alignment is preserved and not overwritten. Additionally, the popover that is open for sorting should be also aligned according to the column alignment and not always to the left.

Before sorting: ( two columns are aligned to the end) image When clicking end aligned column: (popover is aligned to the left/start) image When sorting (header jumps to the start) image

Can you handle that on the application side

Yes for the header styles but not for the popover style. For the header styles it also relies on a fixed html structure because the respective class needs to be addressed indirectly over child class.

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)

"@angular/core": "^15.0.0",
"@fundamental-ngx/platform": "^0.43.0",

If this is a bug, please provide steps for reproducing it; the exact components you are using;

  1. Create an fdp-table with columns that are aligned to the end.
  2. Activate sorting in these columns. Expected: column header alignments stays at the end. The header alignment does not change when sorting the column. Actual: column header alignment changes ( jumps to the start)

Please provide relevant source code (if applicable).

https://github.com/SAP/fundamental-ngx/blob/c9d7bedac8d4b1052a00f6986ca25b67a1bb6b4f/libs/platform/table/components/table-header-cell-content/table-header-cell-content.component.ts https://github.com/SAP/fundamental-ngx/tree/c9d7bedac8d4b1052a00f6986ca25b67a1bb6b4f/libs/platform/table/components/table-cell-header-popover

Did you check the documentation and the API?

yes

Did you search for similar issues?

yes

Is there anything else we should know?

no

droshev commented 5 months ago

@julia-siegl Can you try with the latest version

julia-siegl commented 3 months ago

Hi @droshev, sorry for the late reply! Which version should include a fix for this? I just tested on version "0.50.0", and the issue is still present in this version. Kind regards Julia

droshev commented 3 months ago

@julia-siegl no needed. Do you think you can create a quick stackblitz example with the issue? This will speed up the processing of the issue.

julia-siegl commented 3 months ago

Hi @droshev, Sure, we can reuse the existing stackblitz example from https://sap.github.io/fundamental-ngx/#/platform/table/basic#initial-state.

In the html file we add [align]="'end'" to the "Price" and the "Status" columns.

Find altered stackblick here: https://stackblitz.com/edit/mc3pgz?file=src%2Fapp%2Fplatform-table-initial-state-example.component.html ( I added comment <!-- Changed here added [align]="'end'" --> at the respective places)

The result is this: image

We see that the Price header column is not correctly aligned as it should be because sorting is enabled.

I hope this makes sense! Thank you!