Performant list view that re-uses cells to display large data sets
Switch branches/tags
Nothing to show
Clone or download
Latest commit 2534514 Nov 4, 2014

readme.md

ScrollListView

ScrollListView.js is a library that allows you to scroll over large data sets without a performance impact. It does this through a clever algorithm of re-using a fixed number of cells and as you scroll repaints them beneath the last item. Think iOS UITableView for the web.

Context

Take a look at the article I wrote about it if you'd like to know more about how it works.

Installation

npm install ScrollListView

Include the script in your website it can be placed anywhere or combined with other scripts.

Usage

This is a UMD package so if you just include the script in your page it'll attach to the window.

But if you prefer a module system this will work fine with commonjs or AMD modules just fine.

var ScrollListView = require('ScrollListView');

var scrollListView = new ScrollListView({
  element: document.querySelector('.list'),
  data: [... array of objects to render],
  cellHeight: 150,
  renderFn: render,
  renderCellFn: renderCellFn
});

API

element The element that the re-usable cells will live inside. You don't add children to this the `renderFn` takes care of that.
data The array of data the list will read from work scroll offset and heights
cellHeight The abslute height in px that the cell will be.
renderFn This function gets called on initialisation to render the initial list.
renderCellFn When a cell is determined to be far enough out of the viewport this will be called with the element you can safely overwrite with the new data and the index in your data array passed in earlier.

render methods

The only thing that ScrollListView expects is that you pass through an array that contains your list data. How you choose to render that data is up to you.

I'll take the example code and walk you through how I chose to render my ScrollListView.

function render(count) {
  var cellsFrag = document.createDocumentFragment();

  for(var i = 0; i < count; i++) {
    var cell = document.createElement('li'),
        tweet = this.data[i];

    cell.className = 'scrolllist__cell gpuarise';
    cell.innerHTML = tmpl('tweet_tpl', tweet);
    cell.style.order = i+1;
    cellsFrag.appendChild(cell);
  }

  listContainer.appendChild(cellsFrag);
  listContainer.style.minHeight = this.data.length * this.CELLHEIGHT + 'px';
}

The above is very simple the count argument is the length of cells that the list uses based on some calculations on window height and the cellHeight you would of configured on init.

All I'm doing is creating a document fragment and looping over the count grabbing the corresponding bits of data from the data passed into our constructor it then create a list item that I innerHTML my data using the very simple tpl.js template engine.

renderCell method

The renderCell method is even easier.

function renderCell(cell, index) {
  cell.innerHTML = tmpl('tweet_tpl', this.data[index]);
}

This method passes in the cell and the index of which bit of data I should render into this cell then all I do is apply the template to the cell.

Each of these methods our bound to the instance they're called from so this refers to your scrollListView instance.

License

Copyright 2014, Ryan Seddon This content is released under the MIT license http://ryanseddon.mit-license.org