You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[AnalyticalTable]: Scrollbar disappears when page is zoomed out even if more entries have to be loaded. (Paginated API calls populating the table)
#5278
Closed
1 task done
knandan15 opened this issue
Nov 24, 2023
· 5 comments
· Fixed by #5412
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
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.
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.
The text was updated successfully, but these errors were encountered:
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.
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:
Describe alternatives you've considered
Two issues to be mentioned violating the Product Standards: 1. Usability. 2. Performance
Additional Context
No response
Declaration
The text was updated successfully, but these errors were encountered: