-
React Virtual Scroll
Modern React Virtual Scroll Grid 8 : Unlimited Power!
I started on this journey when I couldn’t find an existing grid control that supports millions of rows and columns. Now I’m finally ready to integrate SlickGrid’s paged scrolling system. SlickGrid supports a virtually unlimited number of rows (but not columns).
-
React Virtual Scroll
Modern React Virtual Scroll Grid 7 : Grid
So far I’ve written six articles in this “Modern React Virtual Scroll Grid” series, with a four article detour into unit testing my work, all without attempting to make a grid. That changes today.
-
React Virtual Scroll
Modern React Virtual Scroll Grid 6 : ScrollTo
Now that we’ve got unit testing set up and achieved good coverage with our initial tests, it’s time to go back to the plan and implement the next feature on the list. This time we’re looking at providing
ScrollToandScrollToItemmethods for our virtual list control. -
Front End
Vitest Mocking Time
Last time we achieved a significant increase in code coverage by unit testing the effect of scroll events. As a reminder, here’s what our coverage looked like when we finished up.
-
Front End
Vitest with User Events
Last time we got Vitest’s code coverage tools up and running. Now I’m going to use the code coverage results to drive improvements to my unit test suite. As we go through this process, I’ll need to lean on additional Vitest and React Testing Library features.
-
Front End
Vitest Code Coverage
We’ve got Vitest up and running and have written a few simple tests to check that everything’s working. Today I’m going to look at Vitest’s code coverage story. Code coverage tools provide a useful set of metrics for determining how much of your source code is actually being tested by your test suite.
-
Front End
Bootstrapping Vitest
Last time I reached a level of complexity in my project building a modern react scalable virtual scrolling grid control that I could no longer put off implementing unit tests.
-
React Virtual Scroll
Modern React Virtual Scroll Grid 5 : Is Scrolling
Next up on my list of features to implement is a
useIsScrollingcustom hook. It should be a good test of hook composition as I want to use it in conjunction with theuseVirtualScrollhook I’ve already implemented. -
React Virtual Scroll
Modern React Virtual Scroll Grid 4 : JSX
Last time I implemented a scalable binding interface and demonstrated an implementation for variable sized items. I was seemingly poised to complete the basic functionality for my list control and move onto grids. Then I got distracted.
-
React Virtual Scroll
Modern React Virtual Scroll Grid 3 : Item Offset Mapping
Last time, we created the basic structure for our scalable virtual scrolling controls built with modern React and TypeScript. The next job is to put a scalable data binding interface in place. We want the rendering costs for our controls to be proportional to the number of visible items, rather than the total number of items being scrolled over. We can’t control how the data and metadata being displayed is retrieved and managed, but we can make sure that the interface we provide is as efficient as possible.