PF4: Virtualized Table/Virtualized Extension

[priley86]

This issue builds on to #402 for adding the virtualized feature to PF4 React tables.

Relevant design/core issues:
None as of now (may not be needed)

We would like to release this feature as a "pf4 extensions" package right now. This functionality could be distributed and labeled as @patternfly/react-virtualized-extension for the time being so that product teams can consume now and revisit later when design review is completed. The utilities developed in this package could be useful for tables, lists, and other scrolling components.

Example from Reactabular:
https://reactabular.js.org/#/features/virtualization

[ohadlevy]

may I ask what was the reason for infinite scrolling? AFAIR we moved away from it in other projects due to bad usability with filtering/searching and performance?

…

On Tue, Jan 22, 2019 at 5:50 PM Patrick Riley ***@***.***> wrote: This issue builds on to #402 <#402> for adding the infinite scroll feature to PF4 React tables. Relevant design/core issues: None as of now (may not be needed) We would like to release this feature as a "pf4 extensions" package right now. This functionality could be distributed and labeled as @patternfly/react-virtualized-extension for the time being so that product teams can consume now and revisit later when design review is completed. The utilities developed in this package could be useful for tables, lists, and other infinitely scrolling components. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1229>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABOx8zro4N0sfuplAUPs0uAdoFsE4ubks5vFzNZgaJpZM4aM9fR> .

[priley86]

@ohadlevy - thanks for speaking up - it's a good time to consider this 😸. Maybe you can elaborate?

I believe PF design direction and direction from OpenShift yesterday was to continue supporting virtualized list. The intention is to improve performance by reusing existing dom elements as the user scrolls the long list. To accomplish this w/ Reactabular, utility methods could be extracted from the react-virtualized project currently in use or the reactabular-virtualized project provided by Reactabular (still researching this).

[priley86]

I think with this issue it is important to distinguish infinite scroll separately (could be tackled in another issue). This issue would be focused on providing utility methods for reusing the dom and calculating row heights (virtualizing). A separate issue for providing a loading indicator/asynchronous paging of contents could be implemented alongside or as a separate pattern.

https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1

[serenamarie125]

may I ask what was the reason for infinite scrolling? AFAIR we moved away from it in other projects due to bad usability with filtering/searching and performance?

@ohadlevy curious what the usability issues were that you encountered ( other than performance )?

I think that PF suggests using pagination if there are constraints in the back end which present performance issues.

Historically we have seen pagination present a number of usability issues, including issues with selection across multiple pages, filter and/or sort not properly working across the entire data set, and find/filter quickly by name not being able to work across pages. These problems are not an issue with this pattern.

[priley86]

I've posted a few links in the "patternfly-a11y" channel pertaining to this topic. Part of me thinks we can support all of the same use cases w/ client side pagination in OpenShift (sort of backtracking on this now). You would sill be able to deep link pages/filters/sorts into the URL with a client paginated table, and sort or filter across the entire data set (assuming it remains client paginated and not server paginated).

The ability to deep link position in the infinitely scrolled table is not there today, but could be added. It becomes quite trivial w/ a paginated table though.

The deeper concern after iterating in #1250 I have is more w/ keyboard accessibility of the pages in the table.

More on that in these articles I've referenced:
https://www.digitala11y.com/infinite-scroll-accessibility-is-it-any-good/
https://www.w3.org/TR/wai-aria-practices-1.1/examples/feed/feed.html

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.