Editable Table

Introduction

A tiny editable jQuery Bootstrap spreadsheet. Just start typing to edit, or move around with arrow keys or mouse clicks!

How to Setup

HTML Structure

<table id="edit_datable_1" class="table table-bordered table-striped mb-0">
<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>

Dependency

JS

<!-- Editable Table JavaScript -->
<script src="vendors/editable-table/mindmup-editabletable.js"></script>
<script src="vendors/editable-table/numeric-input-example.js"></script>
<script src="dist/js/editable-table-data.js"></script>

Initialize Editable Table JS

/*Editabletable Init*/
$('#edit_datable_1').editableTableWidget().numericInputExample().find('td:first').focus();

‚Äč