[AnalyticalTable]: Scrollbar disappears when page is zoomed out even if more entries have to be loaded. (Paginated API calls populating the table)

[knandan15]

Is your feature request related to a problem?

The following is a very simple example of the scenario: https://codesandbox.io/s/dynamicpage-flexiblecolumn-forked-7r2lp3?file=/src/App.js

Here, we load first page (with 20 entries) when the table is loaded (let's call it Page-1). When we scroll down, we load next 15 entries (Page-2).

Problem: When the page is loaded for the first time, 20 entries are loaded (Page-1). And when we zoom out to some extent, once all 20 entries are visible in the viewport, the scroll bar disappears. So because of this we cannot "scroll down" to load the next 15 entries (Page-2).

Please Note: visibleRowCountMode={"Auto"}

Describe the solution you'd like

From the API responses when Page-1 is loaded, we are aware of the total count (here, 35). Page size is set here as 20.

Expectation:

• There should be some mechanism/event handler which checks the quantity 35 and no. of loaded rows which will always keep the scrollbar enabled/visible regardless of how much we zoom out.
• In Standard Fiori Apps, it is observed that when the page is zoomed out then automatically the next page's API call is fired to populate the table in order to fill the empty area in the viewport. If the table can automatically adjust and call next page's API call, that would help.

Describe alternatives you've considered

Two issues to be mentioned violating the Product Standards: 1. Usability. 2. Performance

1. Usability:

• As per our customer requirement, they want the table to be responsive as per the zoom in/out resolution of the browser window so that if we zoom out, more table entries are shown and the table readjusts and covers the empty part of the zoomed out browser automatically. (basic work of visibleRowCountMode={"Auto"} )
• We cannot fix the height of the table because of this customer requirement as it leaves blank space in zoomed out window.

2. Performance:

• We tried to keep the pageSize=100 so that always in a readable resolution sufficient no. of entries are loaded in a page so that regardless of the resolution, the browser window will always have an overflow in the table and scroll bar would be visible.
• But this is causing performance overhead. In our application we use pageSize=20 (standard), so loading 100-100 entries hampers the performance of the page thereby, not abiding by the product standards.

Additional Context

No response

Declaration

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

[knandan15]

Hi @Lukas742
Is there be any possible update for this?

[ej612]

We're having the same issue over at #5327.

[Lukas742]

Hi everyone,
we discussed this use-case and it makes sense in our opinion. The difference between this and #5327 is that it's not easily possible to determine the size of the table container and therefore the number of rows when "Auto" or "AutoWithEmptyRows" is used, while with a fixed height it is.

The linked PR will add the additionalEmptyRowsCount prop. With the help of this prop, you can then render empty rows at the bottom of the table, making it scrollable. The prop will only be applied if the table wouldn't be scrollable otherwise, meaning that if you load more data and the table would be scrollable even without empty row(s), the prop has no effect.

We recommend to only use this prop when visibleRowCountMode "Auto" or "AutoWithEmptyRows" is applied, but it works for all other modes as well, since we didn't restrict its usage, but only mention it in the description. So, it should work for you @ej612 as well.

[ej612]

Hi @Lukas742, perfect, thank you very much!

[ui5-webcomponents-react-bot]

🎉 This issue has been resolved in version v1.25.0 🎉

The release is available on v1.25.0

Your semantic-release bot 📦🚀