Show HN: A work in progress large table virtualization component
Hello Humans and Huwomans of HN

Main demo link

-----------------

https://i5ik.github.io/_____/infinite/

Background

-------------

I'm creating this large table virtualization component. It's not easy.

The challenge is motivated by creating a basic spreadsheet component, as part of running the 7GUIs 'UI benchmark' against my fledgling web component framework, and discovering I really liked the idea of having a reusable spreadsheet / grid data component.

I went looking and saw some, but it looked like a good challenge and I wanted one with the following qualities (which I didn't see anywhere else):

1. uses semantic HTML markup (so table, thead, tr, th, td, colgroup, col elements) not divs to build a table

2. could handle JavaScript scripting of cells (rather than an Excel-like DSL)

3. could drag resize columns and rows

4. could handle very large data

5. ideally, but not absolutely, uses web components, or vanilla JS instead of another framework

6. provides effortless natural scrolling (not synthetic, aka Google Sheets) on desktop and mobile

7. includes the CSS Scroll Snap API

8. make the row and column headers work by using CSS sticky positioning

I built a reasonably good table component[bt] to take care of 1-3 and 5-8, but requirement 4 still eluded me. The table took ages to load (order of seconds for A-Z x 1-99) and drag resizing rows and columns was awful UX (very slow, and janky even on high spec phones).

Large performant tables were not a problem unique only to me, even Palantir has had issues with it in their Blueprint UI kit[bp].

It was then that I decided I needed to create an "infinite" table (table capable of showing a portal (with a moveable window) into a arbitrary-sized grid of data. I knew this would be a challenge so procrastinated for a bit.

The best thing I saw was this Sproutcore demo of a "Big Data List"[sc]. I loved how it kept a pool of unused rows, moved the rows around using absolute positioning, and printed the correct data inside them based on the current scroll position. This was my template for addressing the problem in 2 dimensions.

The closest thing to what I was trying to achieve was "Fattable"[ft]. I loved how you could just keep scrolling, but disliked how it uses divs instead of table markup, uses 'transform: translate' to move the cells around (versus absolute positioning, although transform probably has the advantage of being 'GPU-able' perhaps), and how the scrolling was synthetic (ie, there was not a giant element behind the portal that you're actually scrolling over, it was just calculated by the number of 'scroll triggering' events).

Basically, I wanted something that pushed as much of the cross-cutting logic (like scrolling) onto the browser, and utilized HTML/JavaScript/CSS APIs in as "natural" a way as possible (rather than trying to recreate already provided functionalities, or hack them to do something unintended). This is my general approach to UI challenges, "use the qualities of the existing materials"--it's a kind of aesthetic, but it guides how I do my work.

I also loved the canvas data grid type tables [ct]. I really love the idea of trying to build a GUI in the browser using canvas (such as like C# Blazor does), but I don't want to do that right now.

Other notable data grid and table implementations are include in [other] below.