search

SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
426 stars 94 forks source link

[Analytical table]: Column width and header with do not match #5938

Open abhianuj opened 2 weeks ago

abhianuj commented 2 weeks ago

Describe the bug

I am trying to implement the feature of hiding and showing relevant columns.

I referred to ‘How to hide columns’ section from this documentation.

Although the implementation is working as expected, it is having a side effect on column width (header width and column width gets mis aligned).

Please check the video attached and the stackblitz link in Isolated example section.

Isolated Example

https://stackblitz.com/edit/github-1yycgh?file=src%2FApp.tsx

Reproduction steps

  1. open the stackBlitz link shared.
  2. Click on 'View settings' Button.
  3. Select multiple columns to hide.
  4. Deselect the columns that were hidden in random fashion.
  5. You can see that the header and column width are mis aligned.

Expected Behaviour

Width of the header should be aligned with the column width.

Screenshots or Videos

https://github.com/SAP/ui5-webcomponents-react/assets/32203719/2f4ebe9d-7bbc-41f6-a98a-ef7e6f09a490

UI5 Web Components for React Version

1.23.2

UI5 Web Components Version

1.20.1

Browser

Chrome

Operating System

MacOs

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration