🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

This is an upgraded version of the jQuery Bootstable plugin that adds inline editing and dynamic row creation functionalities to Bootstrap 4 tables.

Bootstrap editable-table bootstrap-4

Documentation

plugin for plugin for edittable tables

Credit to https://github.com/t-edson for the initial bootstrap3 version

Bootstable

This version uses bootsrap4 and font awesome icons it also modifies the intial version to allow users to write into the newly inserted rows directly

Javascript library to make HMTL tables editable, using Bootstrap

Bootstable

"Bootstable" is a javascript library (plug-in), that lets convert a HTML static table to a editable table. A table is made editable, including several buttons to perform the edition actions.

Edition options includes:

Edit fields. Remove rows. Add rows. (require and aditional button) 

Dependencies:

Jquery Bootstrap Font awesome 

Bootstrap is necessary to format correctly the controls used, and to draw icons.

No database connection is included. The library was designed to work offline, when editing.

Examples:

Sets all the columns of #mytable editable:

$('#mytable').SetEditable();

Sets the columns 0 and 1 of #mytable editable:

$('#mytable').SetEditable({ columnsEd: "0,1" //editable columns });

Includes a "New row" button:

$('#mytable').SetEditable({ columnsEd: "0,1", $addButton: $('#but_add') });

IMPORTANT: Bootstable need the ID of the table to edit, and can only work on a single table.

$('.mytable').SetEditable(); //BAD! No class reference allowed. $('table').SetEditable(); //BAD! No several tables allowed.

If several tables need to be editable in a same Web page, it's needed to set each table:

$('#mytable1').SetEditable(); $('#mytable2').SetEditable();

LIMITATION: When using several editable tables, events won't work properly.

Parameters:

columnsEd: null,         //Index to editable columns. If null all td editables. Ex.: "1,2,3,4,5" $addButton: null,        //Jquery object of "Add" button onEdit: function() {},   //Called after edition onBeforeDelete: function() {}, //Called before deletion onDelete: function() {}, //Called after deletion onAdd: function() {}     //Called when added a new row 

You May Also Like