Get new jQuery plugins just once a week

×

Clusterize-js

FavoriteLoadingAdd to favorites

May 10, 2015

Clusterize-js | Tiny vanilla JS plugin to display large data sets easily

Clusterize-js is a tiny vanilla JS plugin to display large data sets easily specially can be used for large tables or lists.
The main idea is not to pollute DOM with all used tags. Instead of that – it splits the list to clusters, then shows elements for current scroll position and adds extra rows to top and bottom of the list to emulate full height of table so that browser shows scrollbar as for full list.

This plugin has got the following options:

Name Required Description
data Required Array of tags in String. Example: [‘<tr><td>First</td></tr>’, ‘<tr><td>Second</td></tr>’];
scrollId or scrollElem Required Id or DOM node of parent tag which used as scroll area. Example: scrollId: ‘scrollArea’ or scrollElem: document.getElementById(‘scrollArea’)
contentId or contentElem Required Id or DOM node of tag where content will be placed. Example: contentId: ‘contentArea’ or contentElem: document.getElementById(‘contentArea’)
tag Optional Tag name for supporting elements: spacing extra rows, empty-data row. It will be determined by itself once data provided, so it’s optional. But if your data is not provided during initialization – it is better to specify this option because otherwise plugin will be unable to correctly render empty-data row. Default: null

Important note: Due to ie9 table restrictions currently this option is required if you need ie9 support and use tables. Example: ‘tr’
rows_in_block Optional Amount of rows in block. Increase means browser will be more loaded, decrease means browser will have to update clusters more often. This example would help to understand this property easier. Good practice will be to keep rows_in_block as amount of visible rows in your list. Default: 50
blocks_in_cluster Optional Amount of blocks in cluster. When scroll reaches last block – content replaces with next cluster. Default: 4
show_no_data_row Optional Specifies whether to display an “empty” placeholder row if there is no data provided. Default: true
no_data_text Optional Text for placeholder element if there is no data provided. Default: ‘No data’
no_data_class Optional Class for placeholder element if there is no data provided. Default: ‘clusterize-no-data’
keep_parity Optional Add extra tag to keep parity of rows. Useful when used :nth-child(even/odd). Default: true
verify_change Optional Verify data changes before add to DOM. May be useful in case of frequent “falsy” updates with unchanged data.Default: false

 

Example Code:

// JavaScript
var data = ['<tr>…</tr>', '<tr>…</tr>',];
var clusterize = new Clusterize({
  rows: data,
  scrollId: 'scrollArea',
  contentId: 'contentArea'
});

Created by Denis

Download
Home
Example

Clusterize-js

large datasets

Clusterize.js

Clusterize.js on NPM Clusterize.js on Bower Package Quality Join the chat at https://gitter.im/NeXTs/Clusterize.js

Tiny vanilla JS plugin to display large data sets easily

Demo, usage, etc…

example

Clusterize-js

Related posts:

Meteor
HashTabber
jquery.enhsplitter

To install using Bower
bower install clusterize

Clusterize-js

http://jquer.in/wp-content/uploads/2015/05/Clusterize-js.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever