Convert JSON Data To Table - jQuery JSON To Table Plugin

A lightweight jQuery JSON to Table plugin which lets you generate a highly customizable html table from local JSON objects or external JSON data files.

How to use it:

1. Import the latest version of JQuery library and the jQuery JSON To Table plugin's script into the document.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="JSON-to-Table.min.1.0.0.js"></script>

2. Create an empty container to place the generated html table.

<div id="table"></div>

3. The example JSON data.

var data = [{
    "id": 1,
    "first_name": "Alli",
    "last_name": "Cassey",
    "email": "[email protected]",
    "gender": "Female",
    "ip_address": "129.82.128.62"
}, {
    "id": 2,
    "first_name": "Clyde",
    "last_name": "Bromage",
    "email": "[email protected]",
    "gender": "Male",
    "ip_address": "232.45.125.179"
}, {
    "id": 3,
    "first_name": "Janeczka",
    "last_name": "Trett",
    "email": "[email protected]",
    "gender": "Female",
    "ip_address": "149.4.116.82"
}];

4. Convert the JSON data into an html table.

$('#demo').createTable(data);

5. Customize the styles of the html table in the JavaScript.

$('#demo').createTable(data,{
  borderWidth: '1px',
  borderStyle: 'solid',
  borderColor: '#DDDDDD',
  fontFamily: 'Verdana, Helvetica, Arial, FreeSans, sans-serif',

  thBg: '#F3F3F3',
  thColor: '#0E0E0E',
  thHeight: '30px',
  thFontFamily: 'Verdana, Helvetica, Arial, FreeSans, sans-serif',
  thFontSize: '14px',
  thTextTransform: 'capitalize',

  trBg: '#FFFFFF',
  trColor: '#0E0E0E',
  trHeight: '25px',
  trFontFamily: 'Verdana, Helvetica, Arial, FreeSans, sans-serif',
  trFontSize: '13px',

  tdPaddingLeft: '10px',
  tdPaddingRight: '10px'
});

---

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