JSON Data To HTML Table Converter - jQuery htmlson.js

Yet another jQuery based JSON to Table converter that helps you render a dynamic, easy-to-style data table from JSON data.

Alternatives:

• jQuery JSON To Table Plugin
• jQuery Plugin To Render Tables From JSON or JS Objects - Table Renderer
• jQuery Plugin To Convert JSON Data Into Html Tables - MounTable
• jQuery Plugin To Convert JSON Data Into Data Grid - Columns
• jQuery Plugin For Converting JSON Data To A Table - jsonTable

Table To JSON Converters:

• jQuery Plugin To Export table To Other Document Types - tableExport
• Convert HTML table Into json With jQuery - table2json
• jQuery Plugin For Converting table Into json Data - table to json

How to use it:

1. Insert jQuery JavaScript library and the jQuery htmlson.js plugin into the html document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="htmlson.js"></script>
<!-- Or from CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/htmlson.js"></script>

2. Create an empty table element on the page.

<table class="example"></table>

3. Define your own JSON data as these:

var data=[
    {
    "name": "Kitty",
    "species" : "cat",
    "foods": {
      "likes": ["fresh food"],
      "dislikes": ["stale food"]
    }
    },
    {
    "name": "Pupster",
    "species" : "dog",
    "foods": {
      "likes": ["tomatoes", "peas"],
      "dislikes": ["bread"]
    }
    },
    {
    "name": "Tux",
    "species" : "cat",
    "foods": "hahah"
    }
];

4. Convert the JSON data into an HTML table.

var myTable = $('.example').htmlson({
    data: data
});

5. Customize the table header.

var myTable = $('.example').htmlson({
    data: data,
    headers: {
      // 1 = column 2
      1: 'custom header'
    }
});

6. Enable/disable the debug mode.

var myTable = $('.example').htmlson({
    data: data,
    headers: {
      // 1 = column 2
      1: 'custom header'
    },
    debug: true
});

7. Add more data to the table.

myTable.addRow({
  "name": "New Kitty",
  "species" : "cat",
  "foods": {
    "likes": ["old food"],
    "dislikes": ["new food"]
  }
});

8. Remove a record from the table.

// 0 = first row
myTable.removeRow(0);

About Author:

Authors: Adalen Vladi and Redjan Ymeraj

Website: https://adalenv.github.io/htmlson.js/

---

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