Javascript Library to Make HTML Table Editable With Bootstrap


BSTable is a dynamic jQuery CRUD table plugin that enables you to add / remove / update / edit attributes in an HTML table.

Javascript library to make HMTL tables editable with Bootstrap. Based on the boot stable JavaScript library which allowed editing of tables for each page – however, it did not allow handling of different events for each table.

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">
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="row">1</th>
      <th scope="row">2</th>
      <th scope="row">3</th>
      <td>the Bird</td>
var editableTable = new BSTable("example");

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

var editableTable = new BSTable("example",{

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
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 id="bDel" type="button" class="btn btn-sm btn-default">
          <span class="fa fa-trash" > </span>
        <button id="bAcep" type="button" class="btn btn-sm btn-default" style="display:none;">
          <span class="fa fa-check-circle" > </span>
        <button id="bCanc" type="button" class="btn btn-sm btn-default" style="display:none;">
          <span class="fa fa-times-circle" > </span>

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


Create Dynamic CRUD Bootstrap Tables, BSTable Plugin/Github


See Demo And Download

Official Website(CraftingGamerTom): Click Here

This superior jQuery/javascript plugin is developed by CraftingGamerTom. For extra Advanced Usage, please go to the official website.