This is a prototype of/an experiment in building an HTML component for displaying
the contents of a DataView
with scroll support. The DataView
might contain a
lot of data, so we cannot create HTML elements for the entirety of its contents,
but we can display just the visible part and size the container so that it displays
a scrollbar corresponding to how tall it would be if we did create elements for
the entirety of the DataView
content.
This is also known as list virtualization more generically. With that, we can query
the scrollbar position and extract the corresponding portion of the DataView
of
the length given by the visible area. This keeps the number of elements needed constant
with respect to the visible area.
Change layout to be columns side by side to allow automatic widths and global styling of all column cells
Add a sticky header with cell indices
Instead of updating all rows all the time the line index per scroll changes
If enabled, the first line will be scrolled in accordance to the scrollbar position, not stuck on top of the container reflecting the minute changes in scroll instead of just flickering with new values
Maybe even private ones if supported well
So it doesn't leak out
Host using GitHub Pages so there's a direct URL to the JS file with the right MIME. Add installation instructions to the readme.