Performant Virtual Table Plugin For jQuery - lazyTable

lazytable is a dynamic, high-performance jQuery virtual table plugin which allows you to display a huge amount of rows in your scrollable HTML table, while delaying the loading of table rows until they are visible in the viewport.

How to use it:

1. Insert an empty HTML table into a container element.

<div class="tableWrapper">
  <table>
    <tbody></tbody>
  </table>
</div>

2. The container must have a fixed height to make the HTML table scrollable.

.tableWrapper { 
  height: 200px; 
  overflow-y: scroll; 
}

3. Insert jQuery library and the minified version of the jQuery lazytable plugin into the page.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="jquery.lazytable.min.js"></script>

4. Define your tabular data to be presented in the table.

const myData = [
      ['a1', 'a2', 'a3', 'a4'],
      ['b1', 'b2', 'b3', 'b4'], 
      ['c1', 'c2', 'c3', 'c4'],
      ...
];

5. The JavaScript to render the data into your table.

$('.tableWrapper').LazyTable({
  data: myData
});

6. Possible options to customize the lazytable plugin.

$('.tableWrapper').LazyTable({

  // output console logs
  debug: false,         

  // height of a single row
  // set to 0 for automatic determination
  trHeight: 0,          
  
  // function to turn array into html code for table row
  generator: function(row) { return '<tr><td>' + row.join('</td><td>') + '</td></tr>'; }, 

  // initially centered element
  startIndex: 0,        

  // if true, rows will not be deleted when getting out of visible area 
  keepExisting: true,   

  // number of rows by which to extend visible area
  prefetch: 0,          

  // milliseconds
  animationCalcTime: 3, 

  // functions
  appendFn: function(rows) { 
    tableBody.append(rows.join()); 
    return $.Deferred().resolve().promise(); 
  },
  prependFn: function(rows) { 
    tableBody.prepend(rows.join()); 
    return $.Deferred().resolve().promise(); 
  },
  deleteFn: function(startIndex, endIndex) { 
    tableBody.children().slice(startIndex, endIndex).remove();
    return $.Deferred().resolve().promise();
  }
  
});

7. Available Callback functions.

$('.tableWrapper').LazyTable({

  // called after initialization has finished
  onInit: null,         

  // called after rows have been added or removed
  onRedraw: null        

});

Changelog:

2021-01-14

• Rebuild

2018-08-23

• Fixed for IE 11

2018-04-05

• Fixed for IE 11

2018-03-29

• Code cleanups.

---

This awesome jQuery plugin is developed by lbrunau. For more Advanced Usages, please check the demo page or visit the official website.