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
442 stars 99 forks source link

[AnalyticalTable]: [VisibleRowCountMode: Interactive - Does not provide any control/event handler on resizing paginated tables] #5201

Closed knandan15 closed 1 year ago

knandan15 commented 1 year ago

Describe the bug

Need any event handler for table resizer in AnalyticalTable to load next page's entries when the visibleRows exceed the page size.

Isolated Example

Video attached

Reproduction steps

In the screen recording attached: We have an AnalyticalTable whose data is paginated with page size =10. I have set the visibleRows={8} and visibleRowCountMode='Interactive'. So at first time when the table is loaded, we can see 8 rows (and 10 rows of data is loaded in total, so there is an overflow and we can the scroll bar). When we scroll down then onLoadMore is called and next page's 10 entries are called. Till now things work fine.

But when during the first time table is loaded with 10 entries and we drag and increase the size of the table beyond 10 entries. Now the scroll bar is gone.

Expected Behaviour

Page size =10 and visibleRows during first render is 8. When the table is resized and dragged down to increase the size, when 10 entries are loaded, it should fire a call just like onLoadMore to load the next set of entries.

If such a scenario is possible then please suggest ways to implement that else please let know if this can be taken as a feature request.

Screenshots or Videos

https://github.com/SAP/ui5-webcomponents-react/assets/48648230/4ffdfd71-0470-47f4-aee2-f43ec68abcc0

UI5 Web Components for React Version

0.27.0

UI5 Web Components Version

0.27.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Declaration

Lukas742 commented 1 year ago

Hi @knandan15

when would you expect that the onLoadMore event is triggered when resizing the table?

  1. Fire the event after resizing and the currently rendered rows are equal or less than the internally set visibleRows. (ignore infiniteScrollThreshold). E.g.:

    • initial rows: 13
    • initial visibleRowCount: 10
    • infiniteScrollThreshold: 3
    • A user resizes to show 11 rows: onLoadMore is not fired, the user can still use the scrollbar to fire the event
    • A user resizes to show all 13 rows: onLoadMore is fired
  2. Fire the event after resizing and the currently rendered rows minus the infiniteScrollThreshold are equal or less than the internally set visibleRows. E.g.:

    • initial rows: 13
    • initial visibleRowCount: 10
    • infiniteScrollThreshold: 3
    • A user resizes to show 11 rows: onLoadMore is fired as the infiniteScrollThreshold is set to 3
knandan15 commented 1 year ago

Hi @Lukas742 , Both the approaches are fine for this scenario. Whichever is more feasible, works. Main intention was to have the onLoadMore called when the table is is resized to show all the entries on the current page to load next set of entries.

In general mostly the scroll bar is used but as mentioned about the bug when the table is resized to show the entire entries then the scrollbar was disappearing. So I suppose the first approach would be a good go.