---
title: Editable Table
---

{{#extend "layout-default"}}
  {{#content "css_vendor" mode="append"}}
    <link rel="stylesheet" href="{{global}}/vendor/editable-table/editable-table.css">
  {{/content}}


  {{#content "js_vendor" mode="append"}}
    <script src="{{global}}/vendor/editable-table/mindmup-editabletable.js"></script>
  {{/content}}

  {{#content "js" mode="append"}}
    <script src="{{global}}/js/Plugin/editable-table.js"></script>
  {{/content}}


  {{#content "scripts" mode="replace"}}
    <script src="{{assets}}/examples/js/tables/editable.js"></script>
  {{/content}}

  {{#content "body"}}

    <!-- Page -->
    <div class="page">
      <div class="page-header">
        <h1 class="page-title">Editable Table</h1>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{dest 'index.html'}}">Home</a></li>
          <li class="breadcrumb-item"><a href="javascript:void(0)">Tables</a></li>
          <li class="breadcrumb-item active">Editable</li>
        </ol>
        <div class="page-header-actions">
          <a class="btn btn-sm btn-primary btn-round" href="http://mindmup.github.io/editable-table/"
            target="_blank">
        <i class="icon md-link" aria-hidden="true"></i>
        <span class="hidden-sm-down">Official Website</span>
      </a>
        </div>
      </div>

      <div class="page-content">
        <!-- Panel -->
        <div class="panel">
          <div class="panel-body">
            <table class="editable-table table table-striped" id="editableTable">
              <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>
          </div>
        </div>
        <!-- End Panel -->
      </div>
    </div>
    <!-- End Page -->

  {{/content}}
{{/extend}}