Hit enter after type your search item

The JSON to HTML table conversion plug-in

The json-to-table is a light-weight and simple plug-in for converting data from JSON to HTML table. The jQuery based plug-in presents the data in HTML table which is not a data table, basically.

It has a few options for styling the table like borders, font, background color etc. See the demos below to learn more about it.

Demo1 Demo2
Developer page Download plug-in

How to set up this plug-in on your web site?

First, download the plug-in from above given links. You will see the compressed and development version of the plug-in files. Include the compressed version (JSON-to-Table.min.1.0.0) on the web page you intend to use JSON data and present it in HTML table. For example:

<script src=”js/json-to-table/JSON-to-Table.min.1.0.0.js”></script>

Make sure including this file after the jQuery library.

In the script section, call the createTable method as used in the demos below.

A Demo of loading and presenting JSON data from external file

In this example, an external JSON file that contains some data is used. The location of the JSON file can be as per your project directory.

Set the path of .json file in getJSON method and initiate the plug-in along with different options for styling as shown in the demo page.

jQuery json table

See online demo and code

The script for this demo:


 

You can see, a lot of options are used for specifying the table presentation that includes border style, color, and font. Besides, the style of the header is also set by using a number of options like thBg, thColor, thFontFamily and so on.

See the code panel on the demo page for full options. Mostly, these are self-descriptive.

The simple markup used in the demo:

Using data from JSON object variable demo

In this example of showing the JSON to table plug-in, the data is set in a variable. The JSON object variable is used where that data is assigned which is finally displayed in an HTML table.

jQuery json table object

See online demo and code

The sample data specified as using the variable for JSON:


 

See the complete demo data in the example page’s code panel. After setting all data, just refer this as initiating the plug-in:


Where json-table-2 is the ID of div that displays the table for JSON data.

For more on this simple plug-in, visit the developer’s page.

This div height required for enabling the sticky sidebar