Javascript Library to Make HTML Table Editable With Bootstrap

How to make use of it:

1. Load the necessary jQuery, Bootstrap 4, and Font Awesome from CDN.

<!-- Bootstrap core CSS-->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

<!-- Font Awesome -->
<link rel="stylesheet" href="/path/to/cdn/fontawesome/all.css" />

<!-- JQuery library -->
<script src="/path/to/cdn/jquery.min.js"></script>

2. Load the BSTable plugin after jQuery.

<script src="bstable.js"></script>

3. Initialize the plugin on the HTML table to be editable.

<table class="table table-striped table-bordered" id="example">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@</td>
    </tr>
  </tbody>
</table>

var editableTable = new BSTable("example");
editableTable.init();

4. Define which columns (zero-indexed) needs to be editable.

var editableTable = new BSTable("example",{
    editableColumns:"1,2,3"
});

5. Create an Add button that lets you insert a brand new row to the HTML table.

<button id="new-row-button" class="btn btn-dark">
  New Row
</button>

var editableTable = new BSTable("example",{
    $addButton: $('#new-row-button')
});

6. Callback capabilities.

var editableTable = new BSTable("example",{
    onEdit: function() {}, 
    onBeforeDelete: function() {}, 
    onDelete: function() {}, 
    onAdd: function() {},
});

7. Override the default rendering template.

var editableTable = new BSTable("example",{
    advanced: { 
      columnLabel: 'Actions',
      buttonHTML: `<div class="btn-group pull-right">
        <button id="bEdit" type="button" class="btn btn-sm btn-default">
          <span class="fa fa-edit" > </span>
        </button>
        <button id="bDel" type="button" class="btn btn-sm btn-default">
          <span class="fa fa-trash" > </span>
        </button>
        <button id="bAcep" type="button" class="btn btn-sm btn-default" style="display:none;">
          <span class="fa fa-check-circle" > </span>
        </button>
        <button id="bCanc" type="button" class="btn btn-sm btn-default" style="display:none;">
          <span class="fa fa-times-circle" > </span>
        </button>
      </div>`
    }
});

8. Refresh the HTML table after the tabular information is up to date.

editableTable.refresh();

Create Dynamic CRUD Bootstrap Tables, BSTable Plugin/Github

See Demo And Download