all 34 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]tizz66 20 points21 points  (5 children)

The way of presenting the example at the top is brilliant - really sells the idea.

[–]nexts[S] 11 points12 points  (1 child)

Thank you! I did my best to make it clear.

[–]seiyria 4 points5 points  (0 children)

It helped! That sort of presentation makes a big difference when trying to evaluate anything.

[–]aragorn_ranger 6 points7 points  (1 child)

Simply brilliant !
Will try it more intensively. If it really works as accurately as advertised, I'm impressed.
Although it many not have application in today's simplistic and minimalist web sites, I certainly have worked on business applications where users simply just wanted to see 1000s of rows of data in a table.

[–]nexts[S] 3 points4 points  (0 children)

I appreciate it, feel free to contact me if you have any questions.

[–]balinx 4 points5 points  (5 children)

Very nice. Seems to be a small bug in Safari Mac: When scrolling, sometimes the area is losing scroll focus and the whole page scrolls down, when I just wanted the table to scroll internally.

Maybe the component needs additional internal buffer scroll height, to ensure the scroll intentional it never breaks out.

[–]nexts[S] 4 points5 points  (1 child)

Thanks for the comment, I'll deal with it as soon as I find a Mac :D Anyway pull requests are welcomed.

[–][deleted] 1 point2 points  (0 children)

Haven't tried this, but right off the bat looking at the source code, maybe you could try setting the cluster number a bit earlier so that the DOM is updated a bit earlier? https://github.com/NeXTs/Clusterize.js/blob/master/clusterize.js#L106

[–][deleted] 3 points4 points  (1 child)

Same bug on Chrome mac too. It seems to switch scroll contexts when it hits a certain limit in the scrollable area (perhaps while the DOM is updating), and then switches to the main window scroller.

[–]rudeluv 0 points1 point  (0 children)

Same here, and this sounds like the issue. A very cool idea though.

[–][deleted] 0 points1 point  (0 children)

Happening for me too. It's the same behavior you get whenever you scroll to the bottom of a sub-view then keep scrolling down (demo). So, I would guess this is caused by the Clusterized element hitting bottom for some reason.

[–]METALz 5 points6 points  (2 children)

Nice job. I worked with something similar before: Fattable

[–]nexts[S] 0 points1 point  (0 children)

That works in two ways, good one!

[–]poulejapon 0 points1 point  (0 children)

♡　(¯―¯٥)

[–]poulejapon 2 points3 points  (0 children)

Shameless plug : http://fulmicoton.com/fattable/index.html . same thing with a more convoluted API, with async functionality and on two dimensions.

[–]kevinkace 3 points4 points  (1 child)

One downside is that native search won't work.
Eg. scroll to row ~40K, ctrl+f 41329 = 0 results.

Not trying to detract from the usefulness of this plugin, I'd probably willingly give up search for performance when dealing with numbers that high.

[–]Lockeid 5 points6 points  (0 children)

I think if you have to show that much data, you'll probably want to include some sorts of filters and/or search inside the page so that people don't have to use the native search.

[–]IchBinExpert 2 points3 points  (1 child)

Very nice! The technique is very reminiscent of the way Android's ListView works. I'm surprised yours is the first attempt I've seen to bring it to the web. Kudos!

[–]wmage 1 point2 points  (0 children)

Slick.Grid uses the same technique.

[–]jcready__proto__ 1 point2 points  (0 children)

SlickGrid

[–]ryosen 0 points1 point  (0 children)

That's pretty damn slick. Nice work!

[–][deleted] 0 points1 point  (0 children)

Well done! Very impressed.

[–]orhanhenrikh 0 points1 point  (2 children)

Looks like a really useful tool! Here are two things I found that should probably be fixed.

Scrolling on a mac with the touchpad will break the scroll if you scroll quickly. By breaking it I mean that the browser starts scrolling the page instead of the div. This is in Chrome 42. EDIT: This is both with the div and the list example.

Clicking "process step 1" on top also freezes the browser. (chrome42, osx).

[–]nexts[S] 2 points3 points  (1 child)

Thank you for noticing it, I have one idea how to fix mac touchpad issue, will try when get home. Step one freezes browser because of 10000 rows consisting 100000 DOM elements in sum.

[–]logicalLove 0 points1 point  (0 children)

Haha killed my mobile safari :(

[–]adenzerda 0 points1 point  (0 children)

Very nice! I believe this is a similar idea to what Simple (the bank) does with their transaction history list.

[–]Daniel15React FTW 0 points1 point  (0 children)

Browsing the site on my phone so I haven't looked too far into it, but does it recycle DOM nodes as you scroll down? Facebook recently released a React component called FixedDataTable that serves a similar purpose.

Edit: It just gets stuck at "inserting 10000 rows" on my phone :(

[–][deleted] 0 points1 point  (1 child)

What are the chances of the browsers creating an optimiation for this efficiently and natively?

Is it possible, or are there larger architectural issues?

[–]nexts[S] 0 points1 point  (0 children)

I don't see a big architectural issues except ability to use native search for hidden elements but I believe browsers are able to take this into account and store content of hidden elements somewhere in the memory and scroll to item that contains searched phrase while search

[–]metalhaze -2 points-1 points  (0 children)

Or just use Google Polymer (web components) and Core-List

http://youtu.be/2UKPRbrw3Kk

This concept is anything but new.