JavaScript Table Library: Build HTML table programmatically from object data

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 142 All time: 346 This week: 4Up
Version License JavaScript version Categories
table-builder 1.0BSD License1.0HTML
Description 

Author

This object can build HTML table programmatically from object data.

It can take an array of objects with the data to display inside a table and generates the whole HTML of the table.

The display names of the header columns are configurable. They should match the names of the entries of data objects.

The HTML templates to define the table, row and cell start and end tags and cell contents are also configurable.

Innovation Award
JavaScript Programming Innovation award winner
October 2015
Winner


Prize: One book of choice by Packt
HTML tables are often used to display the property values of multiple records of information.

This object can take an array of objects with the same properties and generates a HTML table to display the object values in a Web page.

Manuel Lemos
Picture of Martin Barker
  Performance   Level  
Name: Martin Barker <contact>
Classes: 10 packages by
Country: United Kingdom
Age: 35
All time rank: 201 in United Kingdom
Week rank: 6 Up1 in United Kingdom Equal
Innovation award
Innovation award
Nominee: 6x

Winner: 4x

Example

var data = [{ "id":1, "name":"Martin Barker Javascript", "description":"a Javascript Innovator", "published":"05/10/2015", "source_type":"website", "url":"http://www.jsclasses.org/browse/author/1854.html" },{ "id":2, "name":"Martin Barker php", "description":"a php developer", "published":"05/10/2015", "source_type":"website", "url":"www.phpclasses.org/browse/author/597587.html" }]; // create a new table builder object var table = new TableBuilder(); // add the data to the table builder table.addDataSet(data); // tell it we want to flag the name column for display table.addColumnToDisplay("name"); // tell it we want it to change the display from 'name' to 'Name' table.addCustomHeader("name", "Name"); // tell it we want to flag the description column for display table.addColumnToDisplay("description"); // tell it we want to flag the published column for display table.addColumnToDisplay("published"); // tell it we want it to change the display from 'published' to 'Recorded' table.addCustomHeader("published", "Recorded"); // tell it we want to flag the source_type column for display table.addColumnToDisplay("source_type"); // tell it we want it to change the display from 'source_type' to 'Source' table.addCustomHeader("source_type", "Source"); // tell it we want to wrap the value of source_type with // "<a href='%url%' target='_blank'>" before value where %url% will be evaluated to data[col].url // "</a>" after value table.setUpWrapper("source_type", "<a href='%url%' target='_blank'>", "</a>"); // some other options that can be specified table.setMode("table"); // has support as standard for using HTML Table tag, UL/LI tags set, or OL/LI tags set so you can CSS theme them better // you can also create modes var table_my_mode = { "open":"<table class='tableBuilder custom_table table'>\r\n", "rowOpen":"<tr class='tableBuilder custom_table_row row'>\r\n", "headingOpen":"<th class='tableBuilder custom_table_row_heading row heading'>\r\n", "headingClose":"</th>\r\n", "columnOpen":"<td class='tableBuilder col custom_table_column'>\r\n", "columnClose":"</td>\r\n", "rowClose":"</tr>\r\n", "close":"</table>\r\n" } // so you can save it for later use if you use this method call setMode with your new name table.createMode("my_table_mode", table_my_mode); // or you can use and this will automatically set it to use table.useCustomMode(table_my_mode) // get the returned HTML Code and save it in variable 'html' var html = table.GenerateCode();

  Files folder image Files (2)  
File Role Description
Accessible without login Plain text file example_manual_setup.js Example Simple Use Example
Plain text file TableBuilder.js Class Main Class

 Version Control Unique User Downloads Download Rankings  
 0%
Total:142
This week:0
All time:346
This week:4Up