Javascript widget inspired by iPhone UITableView?

Question

Cocoa Touch\'s UITableView allows a user to scroll through large numbers of data rows with good performance because it recycles table rows. Rather than create a GUI element

Answer 1

Clusterize.js does exactly that.

It's small and works with any tag (table, lists, divs)

Answer 2

infinity.js works well. It will dynamically load 'pages' behind the scenes giving you the appearance that the list has been fully loaded.

More information can be found on their Github page - https://github.com/airbnb/infinity

Additionally, I've forked the project updating it to work with Zepto. I also set it up to use any scrollable div (set up with overflow: scoll) with the class 'scrollable' - https://github.com/elliotcw/infinity

I should add that I made these changes as this is great for large lists on mobile devices, which slow down when you have to many complex elements on the page.

Answer 3

Actually the algorithm is not difficult at all. If you know javascript you should be able to write this. The algorithm only needs the height of a cell and the height of the table.

I only know these two: Apple's Dashcode javascript Framework has an implementation of a Table. You could take a look and see if that is what you need. Or Cappuccino Framework which is basically Objective-J but behind the scenes is Javascript.

Answer 4

I was looking for this as well, and infinityjs [1] doesn't seem to quite mimic the same interface as UITableView. And it was a problem for my scenario that infinityjs required that the element containing the list items already be added to the DOM.

MegaList [2] came closest to what I wanted. Andrew (author) has done a great job of designing it for mobile first, with touch support etc. One caveat for me was that it appears to assume a strict selection list model and does a little bit more than I'd like a list component to do (e.g. binding to resize events and trying to handle that automatically).

So I started writing a barebones list component, also modeled after the iOS UITableView. It's a work in progress and I'm putting in just what I need. Sources are here https://github.com/shyam-habarakada/js-virtual-list-view. I'm putting in just what I need as I go, and contributors are needed :-)

[1] http://airbnb.github.io/infinity/

[3] https://github.com/triceam/MegaList