

Show HN: Smart-table-scroll – Browser-based tables with 1M rows - cpolis
https://github.com/cmpolis/smart-table-scroll

======
Gladdyu
What would be your use case? Apart from this being a nice feat of technology
and the possibility of loading the data asynchronously, in what scenario would
it be practical to present 1K+ rows of data to a user? It's infeasible or at
least very impractical to examine them by hand - some sorting/filtering
possibility is necessary for large datasets and if your filters still return
1K+ rows you could have filtered on something more specific.

~~~
tyingq
Online spreadsheets. The end users are conditioned already on how to navigate
with find, home, end, etc.

Edit: Seems like it might break on-page find though, right?

~~~
anewhnaccount
Most users don't use on-page find though. Facebook use this "lazy-load, eager-
unload" for their news feed. It's a bit annoying, but obviously the
alternative is your browser screeching to a halt.

------
bshimmin
This seems nice enough, and is certainly performant, but it strikes me that
the majority of the things you'd often want to do with a data table like this
(filtering and sorting, selecting rows, to name a few) would all be quite a
pain to handle with this implementation.

I've used Facebook's FixedDataTable too, which is also performant and
relatively minimal, and it was also moderately painful to achieve even quite
simple things.

------
ibbb
I have used similar techniques to achieve this in both dimensions, ie x+y.

The basic premise was ala google maps, a view port div, a massive div (map)
within the view port for the scrollbar support, the concept of a virtual
buffer area around the viewport and then a collection of tiles (tables) that
would have data rendered into them and then be appropriately positioned into
the buffer area around the viewport as one scrolls. Works well, have tested up
to 40mm rows and columns and works in ie8 up to 4mm rows. Also supports random
column and row sizes littered throughout the sheet. This solution does also
break native in browser search though as mentioned in other comments.

------
michaelmior
Something similar from Airbnb
[http://airbnb.io/infinity/](http://airbnb.io/infinity/)

------
mkoryak
One thing a lot of fixed header plugins dont do well is make sure that the
header cells properly line up with body cells. Things usually break down as
soon as you start resizing the window, adding your own custom styles, hiding
columns... etc.

How well does this plugin handle that? I noticed you didnt use a table, so
perhaps you dont really care about styling it like one either.

------
jwoah12
Here's another implementation of a table that can handle a large amount of
rows: [http://jarwol.com/aTable](http://jarwol.com/aTable). I created it a few
years ago as a need for another side project I was doing.

------
iljamaas
Have a look at: [https://github.com/iljamaas/vanilla-js-
smartscroll](https://github.com/iljamaas/vanilla-js-smartscroll)

No jQuery needed, with eventing and keyboard navigation

------
joshfraser
Really impressive work. Sounds like this would break in-browser search though.

------
stiGGG
Nice, reminds me on the table views in iOS.

~~~
kitsunesoba
Yep, table views, collection views, stack views, etc under both iOS and OS X
have been doing this for ages now. A bonus of this setup is that it forces you
to separate your data source from your view, doing sorts and filters and
whatnot independent of the table view. It keeps things neat and clean.

I’m not a web guy but most sorting table implementations on the web I’ve seen
do the opposite, instead treating the table contents as the data to be
manipulated. While this works it’ll cause you trouble in the long run and if
nothing else will negatively impact performance. With the cell reuse model,
you instead perform your transformations on the original data (free of markup
gunk) and ask the table view to update itself to match the data source. Under
iOS, this is done through UITableView’s reloadData method. You never directly
interact with the table view’s recycling functions.

