Clusterize.js - Tiny plugin to display large data sets easily

Clusterize.js is a tiny plugin to display large data sets easily.

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

Source: github.com

1. INCLUDE JS AND CSS FILES

<link href="./clusterize.css" rel="stylesheet">
<script src="./clusterize.min.js"></script>

2.  HTML

<!--HTML-->
<div class="clusterize">
  <table>
    <thead>
      <tr>
        <th>Headers</th>
      </tr>
    </thead>
  </table>
  <div id="scrollArea" class="clusterize-scroll">
    <table>
      <tbody id="contentArea" class="clusterize-content">
        <tr class="clusterize-no-data">
          <td>Loading data…</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

3. JAVASCRIPT

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

4. OPTIONS

5. METHODS

6. CALLBACKS