jQuery Plugin To Convert JSON Data Into Html Tables - MounTable

File Size: 7.03 KB
Views Total: 19105
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Convert JSON Data Into Html Tables - MounTable

MounTable is a lighweight jQuery plugin which automatically converts user provided JSON objects into an editable Html table / spreadsheet for further use.

See also:

Basic Usage:

1. Load the Bootstrap's stylesheet in the header to beautify the table.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

2. Load the jQuery library and jQuery MounTable plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="mountable.min.js"></script>

3. Create an Html table to render the JSON data.

<table class="table">
      <th>First Name</th>
      <th>Last Name</th>
    <tr class="sample-table">
      <td><input type="text" name="first_name[]" class="form-control"></td>
      <td><input type="text" name="last_name[]" class="form-control"></td>
      <td><input type="text" name="email[]" class="form-control"></td>

3. Setting JSON data inline.

var sampleData =
      "first_name": "John",
      "last_name": "Appleseed",
      "email": "[email protected]"
    	"first_name": "João",
    	"last_name": "Canabrava",
    	"email": "[email protected]"
      "first_name": "Patrick",
      "last_name": "Grapeseed",
      "email": "[email protected]"
    	"first_name": "Xingling",
    	"last_name": "Ping Pong",
    	"email": "[email protected]"

4. Initialize the plugin.

// $('table').mounTable(DATA,OPTIONS);

  model: '.mountable-model'

Change logs:


  • fixed a bug where Buttons doesn't works with empty tables.


  • Make it work with type number fields


  • Minor fixes.


  • Minor fixes.

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