React-Virtualized PF4 tables #2011

priley86 · 2019-05-15T13:45:43Z

What:
Refactors #1250
Fixes #1229 #1628

Q&A 🍿 🍰

What's wrong with reactabular-virtualized?
As noted in #1250 - dynamic row heights cause a problem when scrolling really long lists. In order to correctly calculate scroll offset, we need to measure all rows. We can't do this when the user drag scrolls an extremely long list. If using fixed heights though, this solution works perfectly fine.

Why bring in react-virtualized Grid source?
By default, Grid renders div's instead of tbody and tr's here. This negates all PF4 table styling for table body's and table row's.

Why am I not using @patternfly/react-table TableBody?
React-Virtualized uses absolute row positions to resolve dynamic row height issue mentioned above. This breaks the default layout for PF4 table rows. However, we can still emulate PF4 styling by assigning tr's with display: table; table-layout: fixed. As such, I am defining a new API surface for table body and table row which works with react-virtualized, but suggests the common use of Table/TableHeader for defining table headers.

Why am I going through this trouble?
OpenShift currently has very specific requests about emulating this virtualization behavior as well as retaining the existing mobile behavior. However, integrating @patternfly/react-table now will open the door for using our React tables out-of-the-box when virtualization is not needed. It should also work w/ vanilla PF4 if we were to choose pagination or infinite scroll for some other visualizations (rather than virtual scroll) giving us a more common API surface.

Running Demo:
https://2011-pr-patternfly-react-patternfly.surge.sh/patternfly-4/virtual%20scroll/virtualized/

A11Y notes:
The DOM structure allowed by react-virtualized does not fit conventional grid DOM hierarchy b/c it relies on having a nested rowgroup element that is scrollable. To resolve this issue, I am using the following fix for fixing incorrect DOM structures with roles/aria. I've tested it with VoiceOver on Mac and it seems to work quite well now. It also passes aXe audits in Chrome.
https://www.html5accessibility.com/tests/aria-table-fix.html

Additional A11y articles on this by Steve Faulkner:
https://developer.paciellogroup.com/blog/2014/10/notes-on-fixing-incorrect-table-structure-using-aria/
https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role

remaining todos:

tests
convert flow js to typescript where necessary
ensure aria-label can be passed as null if role === 'presentation'. Presentational table elements do not get the same aria attributes.
~~prototype expand/collapse. Expanded rows will be rendered as separate tr's~~ Determined this is not needed downstream at the moment. Can be added in a future PR.

cc: @rhamilto @suomiy

Additional issues:

patternfly-build · 2019-05-15T13:54:24Z

PatternFly-React preview: https://2011-pr-patternfly-react-patternfly.surge.sh

codecov-io · 2019-05-15T13:57:39Z

Codecov Report

❗ No coverage uploaded for pull request base (master@5121800). Click here to learn what that means.
The diff coverage is 77.16%.

@@            Coverage Diff            @@
##             master    #2011   +/-   ##
=========================================
  Coverage          ?   80.65%           
=========================================
  Files             ?      660           
  Lines             ?     8322           
  Branches          ?      628           
=========================================
  Hits              ?     6712           
  Misses            ?     1310           
  Partials          ?      300

Flag	Coverage Δ
#patternfly3	`85.22% <ø> (?)`
#patternfly4	`76.15% <77.16%> (?)`
#patternflymisc	`95.68% <ø> (?)`

Impacted Files	Coverage Δ
...rnfly-4/react-table/src/components/Table/Header.js	`100% <ø> (ø)`
...ble/src/components/Table/base/columns-are-equal.js	`0% <0%> (ø)`
...-4/react-table/src/components/Table/BodyWrapper.js	`100% <100%> (ø)`
...-4/react-table/src/components/Table/base/header.js	`100% <100%> (ø)`
...act-table/src/components/Table/base/merge-props.js	`100% <100%> (ø)`
...e/src/components/Table/base/evaluate-formatters.js	`100% <100%> (ø)`
...ernfly-4/react-table/src/components/Table/Table.js	`86.36% <100%> (ø)`
...ly-4/react-table/src/components/Table/base/body.js	`52.94% <52.94%> (ø)`
.../react-table/src/components/Table/base/body-row.js	`57.89% <57.89%> (ø)`
...e/src/components/Table/base/evaluate-transforms.js	`66.66% <66.66%> (ø)`
... and 5 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5121800...dd3c41c. Read the comment docs.

dlabaj · 2019-05-17T18:00:09Z

@karelhala Can you review this one.

priley86 · 2019-05-17T18:31:48Z

packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.js

+        childrenToDisplay
+      );
+    }
+    return React.createElement(scrollContainerComponent, scrollContainerProps, [


I'll open an upstream PR to react-virtualized for this piece... the consumer should be able to override the default scroll elements rendered.

this would also add support for the implementation of a virtual scrolling Data List in the future...

i've opened #1377 upstream in react-virtualized. This would simplify the API consumption there quite a bit if merged.

jeff-phillips-18 · 2019-05-20T11:15:46Z

Set a very long string in one of the columns:

Seems the height of the row is not growing correctly and it's over writing the next two rows.

Also, notice the column headers (like Workspaces) do not horizontally align with the row fields.

jeff-phillips-18 · 2019-05-20T15:37:57Z

The row height issue is not relevant as the height is computed based on the data. I changed the value via the inspector which does not cause a recompute. Sorry for any confusion.

karelhala

Foo, this one is really big! Everything looks good, does this mean that we can change react tabular to fit our needs?

priley86 · 2019-05-22T21:46:02Z

thanks @karelhala - i still have a couple todo's here. Will try to update the PR again soon.

redallen

Looks great, thanks!! 👍

priley86 · 2019-06-06T20:40:53Z

thanks @dlabaj and @redallen !

I would like to begin integration testing this downstream and open this as a prerelease for testing to others. I've filed #2179 for future follow up... let me know if anything else is needed before merge.

priley86 · 2019-06-06T20:41:00Z

cc: @dgutride

priley86 added enhancement 🚀 PF4 React issues for the PF4 core effort labels May 15, 2019

priley86 requested a review from jeff-phillips-18 May 15, 2019 13:46

priley86 mentioned this pull request May 15, 2019

patternfly react-tables openshift/console#1465

Merged

89 tasks

priley86 mentioned this pull request May 15, 2019

W.I.P. React virtualized extension #1250

Closed

9 tasks

dlabaj requested a review from karelhala May 17, 2019 17:59

priley86 force-pushed the virtualized branch from c04138c to fa83e87 Compare May 17, 2019 18:25

priley86 commented May 17, 2019

View reviewed changes

priley86 force-pushed the virtualized branch from fa83e87 to b0f2de1 Compare May 17, 2019 18:47

priley86 mentioned this pull request May 20, 2019

allow override of inner scroll elements bvaughn/react-virtualized#1377

Closed

6 tasks

karelhala previously approved these changes May 21, 2019

View reviewed changes

priley86 dismissed karelhala’s stale review via 13f5211 May 24, 2019 16:14

priley86 force-pushed the virtualized branch from 34b6745 to ed51760 Compare June 4, 2019 00:04

dlabaj previously approved these changes Jun 5, 2019

View reviewed changes

dlabaj self-assigned this Jun 5, 2019

priley86 dismissed dlabaj’s stale review via 709c3e7 June 5, 2019 18:50

priley86 force-pushed the virtualized branch 2 times, most recently from 709c3e7 to bf970e4 Compare June 5, 2019 21:02

feat(virtualized): add virtualized table extensions

9156534

priley86 force-pushed the virtualized branch from bf970e4 to 9156534 Compare June 5, 2019 21:07

priley86 and others added 3 commits June 5, 2019 17:55

fix eslint

367189c

snaps

ad62053

clean a little

d56a7f0

redallen previously approved these changes Jun 6, 2019

View reviewed changes

priley86 mentioned this pull request Jun 6, 2019

PF4: React Virtualized table follow up issue #2179

Closed

4 tasks

fix window scroller scrollbar

dd3c41c

priley86 dismissed redallen’s stale review via dd3c41c June 7, 2019 02:14

dlabaj approved these changes Jun 7, 2019

View reviewed changes

dgutride approved these changes Jun 7, 2019

View reviewed changes

dgutride merged commit 84122a1 into patternfly:master Jun 7, 2019

priley86 mentioned this pull request Jun 7, 2019

fix(react-docs): react-virtualized live edit #2187

Merged

priley86 mentioned this pull request Jun 17, 2019

PF4 Bring Reactabular in-house #1628

Closed

This was referenced Jun 15, 2020

Table: Rendering issues of virtualized table causing performance and display issues in OpenShift #4311

Closed

Spike: Investigate effort to pull the Virtual table into component library #4322

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React-Virtualized PF4 tables #2011

React-Virtualized PF4 tables #2011

priley86 commented May 15, 2019 •

edited

Loading

patternfly-build commented May 15, 2019

codecov-io commented May 15, 2019 •

edited

Loading

dlabaj commented May 17, 2019

priley86 May 17, 2019

priley86 May 17, 2019

priley86 May 20, 2019

jeff-phillips-18 commented May 20, 2019 •

edited

Loading

jeff-phillips-18 commented May 20, 2019

karelhala left a comment

priley86 commented May 22, 2019

redallen left a comment

priley86 commented Jun 6, 2019

priley86 commented Jun 6, 2019

React-Virtualized PF4 tables #2011

React-Virtualized PF4 tables #2011

Conversation

priley86 commented May 15, 2019 • edited Loading

patternfly-build commented May 15, 2019

codecov-io commented May 15, 2019 • edited Loading

Codecov Report

dlabaj commented May 17, 2019

priley86 May 17, 2019

Choose a reason for hiding this comment

priley86 May 17, 2019

Choose a reason for hiding this comment

priley86 May 20, 2019

Choose a reason for hiding this comment

jeff-phillips-18 commented May 20, 2019 • edited Loading

jeff-phillips-18 commented May 20, 2019

karelhala left a comment

Choose a reason for hiding this comment

priley86 commented May 22, 2019

redallen left a comment

Choose a reason for hiding this comment

priley86 commented Jun 6, 2019

priley86 commented Jun 6, 2019

priley86 commented May 15, 2019 •

edited

Loading

codecov-io commented May 15, 2019 •

edited

Loading

jeff-phillips-18 commented May 20, 2019 •

edited

Loading