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
444 stars 100 forks source link

[AnalyticalTable]: Extra space on the right side of the table when set maxWidth of several columns #4971

Open Mipaprika opened 1 year ago

Mipaprika commented 1 year ago

Describe the bug

When I set maxWidth to several columns, and resize the browser(In the example posted below, resize the browser width to make the table's width between around 1260px ~ 1340px), there will be extra space on the right side of the table. When I remove the maxWidth, everything is ok.

Isolated Example

https://codesandbox.io/p/sandbox/heuristic-panini-zxnf9n?file=/src/App.tsx:106,20

Reproduction steps

  1. Add several maxWidth to some columns
  2. Adjust the browser width, and then you'll notice that when the width is within a certain range, there will be an extra space on the right side of the table.

Expected Behaviour

No extra space.

Screenshots or Videos

The extra space on the right side when adjusting the width to a certain range:

image

The expected behavior:

image

UI5 Web Components for React Version

~1.18.0

UI5 Web Components Version

~1.16.0

Browser

Chrome, Firefox, Safari

Operating System

No response

Additional Context

No response

Relevant log output

No response

Declaration

gitgdako commented 6 months ago

We are having the same issue but without resizing the browser We are using scaleWidthMode={AnalyticalTableScaleWidthMode.Smart} The behaviour does not depend on setting width, only the maxWidth of the last column We cannot use AnalyticalTableScaleWidthMode.Grow because we want to have a single column to grow to max out the rows width but this results in a horizontal scrollbar being created