Editabel Rows
Official documentation
For more detailed information and examples, see the official documentation: Table Edits.
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>