TableRender is a jQuery based plugin.

How can I render a table with too much data?

TableRender is a jQuery-based plugin that parses and creates more than 100.000 table rows just in time.

Given a JSON object, TableRender parses, renders, filters and sorts all data.

Methods:

• addRow, addRows
• removeRow, removeRows
• replaceRow, replaceRows
• search
• filter
• sort

Supported browsers:

• Internet Explorer 6 (not tested)
• Internet Explorer 7
• Internet Explorer 8
• Internet Explorer 9
• Firefox
• Google Chrome
• Safari
• Opera

Requirements:

• jQuery 1.4.2 or later
• IntroSort script (used while sorting)

Example

$('#example').table({
  columns: [
    {
      key: 'title',
      label: 'Title'
    },{
      key: 'name',
      label: 'Name'
    },{
      key: 'surname',
      label: 'Surname'
    }
  ],
  rowHeight: 20,
  headHeight: 20,
  borderHeight: 0,
  sortable: false,
  selection: true,
  multiselection: true,
  canBeSorted: function(column){
    return column != 3
  }
});

var jsonData = [];
for ( var i=0; i < 100000; i++ ) {
  jsonData.push({
    title: 'Title ' + i,
    name: 'Name ' + i,
    surname: 'Surname ' + i
  });
}

$('#example').table().data( jsonData );