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:

• jQuery Plugin To Convert JSON Data Into Data Grid - Columns

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">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <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>
    </tr>
  </tbody>
</table>

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);

$('table').mounTable(sampleData,{
  model: '.mountable-model'
});

Change logs:

2015-03-25

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

2015-03-23

• Make it work with type number fields

2014-11-14

• Minor fixes.

2014-11-13

• Minor fixes.

---

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