Performant Virtual Table Plugin For jQuery - lazyTable

File Size: 54.5 KB
Views Total: 3468
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">

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="" 
<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.

  data: myData

6. Possible options to customize the lazytable plugin.


  // 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) { 
    return $.Deferred().resolve().promise(); 
  prependFn: function(rows) { 
    return $.Deferred().resolve().promise(); 
  deleteFn: function(startIndex, endIndex) { 
    tableBody.children().slice(startIndex, endIndex).remove();
    return $.Deferred().resolve().promise();

7. Available Callback functions.


  // called after initialization has finished
  onInit: null,         

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




  • Rebuild


  • Fixed for IE 11


  • Fixed for IE 11


  • Code cleanups.

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