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-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>
            
          

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>
                  
                

Methods

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