Editable Rows
Table Edits is a light (1.7k) jQuery plugin for making table rows editable. Built as minimally as possible so it's easy to extend.
Table Edits documentationHow to use
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins 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 .js-edit-icon', this).removeClass('tio-edit').addClass('tio-done');
$(this).find('td[data-field] input').addClass('form-control form-control-sm');
},
save: function (values) {
$('.js-edit .js-edit-icon', this).removeClass('tio-done').addClass('tio-edit');
},
cancel: function (values) {
$('.js-edit .js-edit-icon', this).removeClass('tio-done').addClass('tio-edit');
}
});
});
</script>
Example
Click Edit button in the table to see it in action.