Editabel Rows

How to use?

Copy-paste the following <script> near the end of your pages under JS Nova to enable it.

<script src="../../assets/vendor/table-edits/build/table-edits.min.js"></script>
Copy

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of editable table
    $('.js-editable-table tbody tr').editable({
        keyboard: true,
        dblclick: true,
        button: true,
        buttonSelector: '.js-edit',
        maintainWidth: true,
        edit: function (values) {
          $('.js-edit i', this).removeClass('nova-pencil').addClass('nova-check');
          $(this).find('td[data-field] input').addClass('form-control form-control-sm');
        },
        save: function (values) {
          $('.js-edit i', this).removeClass('nova-check').addClass('nova-pencil');
        },
        cancel: function (values) {
          $('.js-edit i', this).removeClass('nova-check').addClass('nova-pencil');
        }
    });
  });
</script>
Copy

Basic example

# Bitcoin Address Bank User Progress Actions
1 19TLq3QwdaJRtk4aJn87uaV8jLuZAv4B19 JP Morgan Chase George Washington
2 1AAcEgf8HcrEfgvwHjRU5HPzVRiTKq9VTU Deutsche Bank Thomas Jefferson
3 1BeU1LuFXSMeXAcR2nQQHph24PwAx6uPgZ Barclays Alexander The Great
4 1AP6q7dDBSo6yX4CwWNq4Cc14nseaUA8RR Citigroup Martin Luther King Jr.
5 1FVziYSb24aZYSvyp4gNEHQeBVdqfCfmj1 Mitsubishi UFJ FG James Madison 
<div class="table-responsive-xl">
  <table class="js-editable-table table text-nowrap mb-0">
    <thead>
      <tr class="small">
        <th class="font-weight-semi-bold border-top-0 border-left-0 border-right-0 py-2">#</th>
        <th class="font-weight-semi-bold border-top-0 border-left-0 border-right-0 py-2">Bitcoin Address</th>
        <th class="font-weight-semi-bold border-top-0 border-left-0 border-right-0 py-2">Bank</th>
        <th class="font-weight-semi-bold border-top-0 border-left-0 border-right-0 py-2">User</th>
        <th class="font-weight-semi-bold border-top-0 border-left-0 border-right-0 py-2">Progress</th>
        <th class="font-weight-semi-bold text-center border-top-0 border-left-0 border-right-0 py-2">Actions
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="align-middle py-3">1</td>
        <td class="align-middle py-3"data-field="bitcoin-address">19TLq3QwdaJRtk4aJn87uaV8jLuZAv4B19</td>
        <td class="align-middle py-3"data-field="bank">JP Morgan Chase</td>
        <td class="align-middle py-3"data-field="user">George Washington</td>
        <td class="align-middle py-3">
          <div class="progress">
            <div class="progress-bar bg-success rounded" role="progressbar" style="width: 70%;"
                 aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </td>
        <td class="align-middle py-3">
          <div class="d-flex align-items-center justify-content-center">
            <a class="js-edit d-flex link-dark" href="#">
              <i class="nova-pencil icon-text"></i>
            </a>
          </div>
        </td>
      </tr>
      <tr>
        <td class="align-middle py-3">2</td>
        <td class="align-middle py-3"data-field="bitcoin-address">1AAcEgf8HcrEfgvwHjRU5HPzVRiTKq9VTU</td>
        <td class="align-middle py-3"data-field="bank">Deutsche Bank</td>
        <td class="align-middle py-3"data-field="user">Thomas Jefferson</td>
        <td class="align-middle py-3">
          <div class="progress">
            <div class="progress-bar bg-success rounded" role="progressbar" style="width: 70%;"
                 aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </td>
        <td class="align-middle py-3">
          <div class="d-flex align-items-center justify-content-center">
            <a class="js-edit d-flex link-dark" href="#">
              <i class="nova-pencil icon-text"></i>
            </a>
          </div>
        </td>
      </tr>
      <tr>
        <td class="align-middle py-3">3</td>
        <td class="align-middle py-3"data-field="bitcoin-address">1BeU1LuFXSMeXAcR2nQQHph24PwAx6uPgZ</td>
        <td class="align-middle py-3"data-field="bank">Barclays</td>
        <td class="align-middle py-3"data-field="user">Alexander The Great</td>
        <td class="align-middle py-3">
          <div class="progress">
            <div class="progress-bar bg-success rounded" role="progressbar" style="width: 70%;"
                 aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </td>
        <td class="align-middle py-3">
          <div class="d-flex align-items-center justify-content-center">
            <a class="js-edit d-flex link-dark" href="#">
              <i class="nova-pencil icon-text"></i>
            </a>
          </div>
        </td>
      </tr>
      <tr>
        <td class="align-middle py-3">4</td>
        <td class="align-middle py-3"data-field="bitcoin-address">1AP6q7dDBSo6yX4CwWNq4Cc14nseaUA8RR</td>
        <td class="align-middle py-3"data-field="bank">Citigroup</td>
        <td class="align-middle py-3"data-field="user">Martin Luther King Jr.</td>
        <td class="align-middle py-3">
          <div class="progress">
            <div class="progress-bar bg-success rounded" role="progressbar" style="width: 70%;"
                 aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </td>
        <td class="align-middle py-3">
          <div class="d-flex align-items-center justify-content-center">
            <a class="js-edit d-flex link-dark" href="#">
              <i class="nova-pencil icon-text"></i>
            </a>
          </div>
        </td>
      </tr>
      <tr>
        <td class="align-middle border-bottom py-3">5</td>
        <td class="align-middle border-bottom py-3"data-field="bitcoin-address">1FVziYSb24aZYSvyp4gNEHQeBVdqfCfmj1</td>
        <td class="align-middle border-bottom py-3"data-field="bank">Mitsubishi UFJ FG</td>
        <td class="align-middle border-bottom py-3"data-field="user">James Madison</td>
        <td class="align-middle border-bottom py-3">
          <div class="progress">
            <div class="progress-bar bg-success rounded" role="progressbar" style="width: 70%;"
                 aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </td>
        <td class="align-middle border-bottom py-3">
          <div class="d-flex align-items-center justify-content-center">
            <a class="js-edit d-flex link-dark" href="#">
              <i class="nova-pencil icon-text"></i>
            </a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
Copy

Methods

Param Default
keyboard false
dblclick false
button false
buttonSelector none
maintainWidth false
edit function() event
save function() event