<!DOCTYPE html> <html lang="en"> <head> @@include("partials/title-meta.html", {"title": "Editable Tables"}) @@include("partials/head-css.html") </head> <body> <!-- Begin page --> <div id="wrapper"> @@include('./partials/topbar.html', {"pagetitle": "Editable Tables"}) @@include('./partials/left-sidebar.html') <!-- ============================================================== --> <!-- Start Page Content here --> <!-- ============================================================== --> <div class="content-page"> <div class="content"> <!-- Start Content--> <div class="container-fluid"> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-body"> <h4 class="mt-0 header-title">Inline edit</h4> <p class="sub-header">Inline edit like a spreadsheet on two columns only and without identifier column.</p> <div class="table-responsive"> <table class="table table-centered mb-0" id="inline-editable"> <thead> <tr> <th>#</th> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>2</td> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>3</td> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>4</td> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> <tr> <td>5</td> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> </tr> <tr> <td>6</td> <td>Brielle Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> </tr> <tr> <td>7</td> <td>Herrod Chandler</td> <td>Sales Assistant</td> <td>San Francisco</td> <td>59</td> <td>2012/08/06</td> <td>$137,500</td> </tr> <tr> <td>8</td> <td>Rhona Davidson</td> <td>Integration Specialist</td> <td>Tokyo</td> <td>55</td> <td>2010/10/14</td> <td>$327,900</td> </tr> <tr> <td>9</td> <td>Colleen Hurst</td> <td>Javascript Developer</td> <td>San Francisco</td> <td>39</td> <td>2009/09/15</td> <td>$205,500</td> </tr> <tr> <td>10</td> <td>Sonya Frost</td> <td>Software Engineer</td> <td>Edinburgh</td> <td>23</td> <td>2008/12/13</td> <td>$103,600</td> </tr> </tbody> </table> </div> <!-- end .table-responsive--> </div> <!-- end card-body --> </div> <!-- end card --> </div> <!-- end col --> </div> <!-- end row --> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-body"> <h4 class="mt-0 header-title">Inline edit with Button</h4> <p class="sub-header">Inline edit like a spreadsheet, toolbar column with edit button only and without focus on first input.</p> <div class="table-responsive"> <table class="table table-centered mb-0" id="btn-editable"> <thead> <tr> <th>#</th> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>2</td> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>3</td> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>4</td> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> <tr> <td>5</td> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> </tr> <tr> <td>6</td> <td>Brielle Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> </tr> <tr> <td>7</td> <td>Herrod Chandler</td> <td>Sales Assistant</td> <td>San Francisco</td> <td>59</td> <td>2012/08/06</td> <td>$137,500</td> </tr> <tr> <td>8</td> <td>Rhona Davidson</td> <td>Integration Specialist</td> <td>Tokyo</td> <td>55</td> <td>2010/10/14</td> <td>$327,900</td> </tr> <tr> <td>9</td> <td>Colleen Hurst</td> <td>Javascript Developer</td> <td>San Francisco</td> <td>39</td> <td>2009/09/15</td> <td>$205,500</td> </tr> <tr> <td>10</td> <td>Sonya Frost</td> <td>Software Engineer</td> <td>Edinburgh</td> <td>23</td> <td>2008/12/13</td> <td>$103,600</td> </tr> </tbody> </table> </div> <!-- end .table-responsive--> </div> <!-- end card-body --> </div> <!-- end card --> </div> <!-- end col --> </div> <!-- end row --> </div> <!-- container-fluid --> </div> <!-- content --> @@include('./partials/footer.html') </div> <!-- ============================================================== --> <!-- End Page content --> <!-- ============================================================== --> </div> <!-- END wrapper --> @@include('./partials/right-sidebar.html') <!-- Vendor js --> <script src="assets/js/vendor.min.js"></script> <!-- Table Editable plugin--> <script src="assets/libs/jquery-tabledit/jquery.tabledit.min.js"></script> <!-- Table editable init--> <script src="assets/js/pages/tabledit.init.js"></script> <!-- App js --> <script src="assets/js/app.min.js"></script> </body> </html>