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