Stylish Editable Table Plugin with jQuery and Bootstrap 2/3 - Editable Table

Stylish Editable Table Plugin with jQuery and Bootstrap 2/3 - Editable Table
File Size: 58.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Editable Table is a table manipulation plugin that turns a standard Html table into a responsive in-place editable spreadsheet with input validation based on jQuery and bootstrap 2/3.

How to use it:

1. Include the jQuery javascript library and jQuery Editable Table plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="mindmup-editabletable.js"></script>

2. Include the latest version of Twitter's Bootstrap 3 framework in the page.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

3. Include numeric-input-example.js script for validation and change events

<script src="numeric-input-example.js"></script>

4. Create a data table.

<table id="mainTable" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Cost</th>
<th>Profit</th>
<th>Fun</th>
</tr>
</thead>
<tbody>
<tr>
<td>Car</td>
<td>100</td>
<td>200</td>
<td>0</td>
</tr>
<tr>
<td>Bike</td>
<td>330</td>
<td>240</td>
<td>1</td>
</tr>
<tr>
<td>Plane</td>
<td>430</td>
<td>540</td>
<td>3</td>
</tr>
<tr>
<td>Yacht</td>
<td>100</td>
<td>200</td>
<td>0</td>
</tr>
<tr>
<td>Segway</td>
<td>330</td>
<td>240</td>
<td>1</td>
</tr>
</tbody>
<tfoot>
<tr>
<th><strong>TOTAL</strong></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>

5. Call the plugin on the <td> elements.

<script>
$('#mainTable').editableTableWidget().numericInputExample().find('td:first').focus();
</script>

6. Alternatively, you can use a text area instead of input field to input

<script>
$('#mainTable').editableTableWidget({editor: $('<textarea>')}).numericInputExample().find('td:first').focus();
</script>

Change log:

2014-04-03

  • fix for muliple tables while preserving $.fn.editableTableWidget.defaultOptions

2014-02-06

  • bind events to table rather than td elements where possible

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