Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table virtualization #966

Merged
merged 26 commits into from
Jan 27, 2023
Merged

Table virtualization #966

merged 26 commits into from
Jan 27, 2023

Conversation

msmithNI
Copy link
Contributor

@msmithNI msmithNI commented Jan 14, 2023

Pull Request

🤨 Rationale

Related Issue:

👩‍💻 Implementation

Uses TanStack Virtualizer as mentioned in the spec, and as done in the prototype branch.
Major differences from the prototype:

  • Prototype and TanStack Virtual examples set the virtualizer's "total size" (height of all rows) on the row container, and added translate transforms on each individual row. We noticed some flashing during scrolling with that approach in Firefox. Instead, this version sets the height of all rows on a sibling div, and applies a single translate transform on the row container. This is more similar to what Perspective/regular-table do, and it got rid of the flashing in Firefox.
  • Prototype used a ResizeObserver in the Nimble table code. TanStack Virtualizer is already using a ResizeObserver internally (due to us using its provided observeElementOffset and observeElementRect functions as inputs in our VirtualizerOptions object), so I concluded we didn't need a separate resize observer.

🧪 Testing

  • Added a couple of autotests dealing with virtualization (that the # of rows rendered is less than the total; that we can scroll the element to view the end rows; that the # of rendered rows increases when the element height increases)
  • Updated table Storybook to add a 2nd option for table data, a data set of 10,000 rows

✅ Checklist

  • I have updated the project documentation to reflect my changes or determined no changes are needed.

@msmithNI msmithNI marked this pull request as ready for review January 18, 2023 02:10
@msmithNI msmithNI added this to the Table Milestone 2 milestone Jan 18, 2023
Copy link
Contributor

@jattasNI jattasNI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

First round of feedback is mostly based on testing the demo page in a browser; I haven't looked at the implementation yet but wanted to get my initial feedback sent.

@nate-ni nate-ni mentioned this pull request Jan 23, 2023
Copy link
Contributor

@jattasNI jattasNI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Performance feels great in Firefox and Safari on macOS 🚀

@mollykreis
Copy link
Contributor

Because there are conflicts with main, I'm going to wait to re-review until you've updated & resolved.

@msmithNI msmithNI merged commit c334239 into main Jan 27, 2023
@msmithNI msmithNI deleted the table-virtualization branch January 27, 2023 20:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants