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 );