https://github.com/developit/scroll-list
:scroll: An infinitely scrollable list/datagrid. Handles millions of rows.
https://github.com/developit/scroll-list
datagrid javascript
Last synced: 8 months ago
JSON representation
:scroll: An infinitely scrollable list/datagrid. Handles millions of rows.
- Host: GitHub
- URL: https://github.com/developit/scroll-list
- Owner: developit
- License: bsd-3-clause
- Created: 2015-03-24T02:26:47.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-03-24T02:41:15.000Z (almost 11 years ago)
- Last Synced: 2025-04-10T11:16:11.750Z (9 months ago)
- Topics: datagrid, javascript
- Language: JavaScript
- Homepage: http://jsfiddle.net/developit/j8swt8zb/
- Size: 145 KB
- Stars: 48
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ScrollList
==========
> An infinitely scrollable list/datagrid.
> Throw millions of rows at it, it won't even affect performance.
> [JSFiddle Demo](http://jsfiddle.net/developit/j8swt8zb/)
Usage
-----
```js
var list = new ScrollList({
// use `transform:translateY()` instead of `top` to offset contents?
useTransforms : false,
// debounce scroll events using requestAnimationFrame()?
bufferedScrolling : true,
// provide a DOM node to clone, used as a template for each row
template : document.getElementById('row-template').content.firstElementChild
});
// insert the list into an element:
list.insertInto(document.body);
// generate and display 1,000,000 rows
var mil = [];
for (var i=1e6; i--; ) {
mil[i] = {a:i+'a', b:i+'b', c:i+'c'};
}
list.setData(mil);
// later on, select a row:
list.data[5].selected = true;
list.update();
```