Javascript library to make HMTL tables editable, using Bootstrap

Overview

Donate to the project

paypal

Bootstable

Javascript library to make HMTL tables editable.

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.

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

Edition options includes:

  • Edit fields.
  • Remove rows.
  • Add rows.

Dependencies:

  • Jquery
  • Bootstrap

Bootstrap is necessary to format correctly the controls used, and to draw icons. It's possible to work without Bootstrap too. In this case style is missing.

Requirements

  1. For a table to be editable, it needs to have the following structure:
<table id="some_id">
      <thead>
            <tr> 
                  <th></th>  <th></th>  <th></th> ...
            </tr>
      </thead>
      <tbody>
            <tr>
                  <td></td>  <td></td>  <td></td> ...
            </tr>
      </tbody>
</table>
  1. Bootstable needs 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();       //GOOD!
  $('#mytable2').SetEditable();       //GOOD!

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

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 (Obsolete):

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

Includes a "New row" button (Prefered):

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

  $('#but_add').click(function() {
        rowAddNew('mytable');
  });

Set a "New row" button to add a row and set initial values:

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

  $('#but_add').click(function() {
        rowAddNew('mytable', [1,2,3]);
  });

Set a "New row" button to add a row, set initial values and turn to edit mode:

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

  $('#but_add').click(function() {
        rowAddNewAndEdit('mytable', [1,2,3]);
  });

Parameters:

  columnsEd: null,         //Index to editable columns. If null, all columns will be editables. Ex.: "1,2,3,4,5"
  $addButton: null,        //Jquery object of "Add" button. OBSOLETE. 
  bootstrap: true,         //Indicates if library is going to worl with Bootstrap library.
  onEdit: function() {},   //Called after edition
  onBeforeDelete: function() {}, //Called before deletion
  onDelete: function() {}, //Called after deletion
  onAdd: function() {}     //Called when added a new row

Utilities

There are two functions, included in the library, to facilitate the export of the table:

  • function TableToCSV(tabId, separator)
  • function TableToJson(tabId)

These functions return a string in the appropriate format (CSV or JSON) from any HTML table.

References

Some page explaining the use of bootstable:

Comments
  • Is posible get data and send to json object ?

    Is posible get data and send to json object ?

    Hi Very nice Job congratulations ¡¡¡¡

    I like to use your bootstable.min.js code. But i have one doubt , bootstrap-table.min.js have a function to get all the values in a table, and then can send all the values to a json object ($table.bootstrapTable('getData') ), its posible do a similar function compatible with your code ?

     $Guardadatos.click(function () {
      	 // alert(JSON.stringify($table.bootstrapTable('getData')));
      	  var datos = JSON.stringify($table.bootstrapTable('getData'));
      	  //var obj=JSON.parse(datos);
            var obj = jQuery.parseJSON(datos);
            console.log(obj);
            
        });
    

    Thanks

    opened by enrutador 4
  • Get Content of Deleted Row Inside onDelete Function

    Get Content of Deleted Row Inside onDelete Function

    Hi there!

    I've been using your library to extend the functionality of a table on my website. I figured out how to get the content of a row when a row is edited:

         onEdit: function(columnsEd) {   
              var orgName = columnsEd[0].childNodes[0].innerHTML;
              var contact = columnsEd[0].childNodes[1].innerHTML;
              var number = columnsEd[0].childNodes[2].innerHTML;
              var email = columnsEd[0].childNodes[3].innerHTML;
              var notes = columnsEd[0].childNodes[4].innerHTML;
              editOrg(orgName, contact, number, email, notes);
         }
    
    

    But, I can't figure out how to get the content of a row when the onDelete function is called:

         onDelete: function() {
                // somehow get content of deleted row
          }
    

    Any help would be appreciated! Thanks.

    opened by ShawnStrong 4
  • Table is not working with toggle menu

    Table is not working with toggle menu

    Also, there is a type error in safari browser.

    TypeError: params.$addColButton.click is not a function. (In 'params.$addColButton.click(function() { rowAddNewCol($tabedi.attr("id")); })', 'params.$addColButton.click' is undefined)

    opened by sariogluba 2
  • Adding row not showing editable inputs

    Adding row not showing editable inputs

    Creating a button and then adding $addButton: $('#but_add') to the params does work well when creating a new row. But shouldn't it transfer the new (now empty) row into input boxes directly?

    opened by DjovDev 2
  • How to get values of input text onEdit, onDelete and onAdd functions

    How to get values of input text onEdit, onDelete and onAdd functions

    Hi, First thanks for this great library.

    I just want to know that how can I get values of input text onEdit, onDelete and onAdd functions of the which I edit and update the same in database using ajax.

    opened by manojrhr 2
  • TableToCSV

    TableToCSV

    I'm struggling with the feedback of the function TableToCSV not returning the value to the variable. Syntax in the HTML file looks like :

    $List = "" ... $List = TableToCSV('table-list',',')

    but $List remains empty. Any suggestion if the call of the function needs to be changed ?

    opened by PCS2328 3
  • Added input type check and select options

    Added input type check and select options

    #16

    $("#table-list").SetEditable({ 
            columnsEd: "0,1,2,3,4,5,6",
            columnsType: "date,,select,number,number,checkbox,checkbox",
            columnsSelect: [{2: ["Choice 1","Choice 2","Choice 3"]}],
            columnsCheck: [{5: ["YEP","No"]},{6: ["OK","CANCELED"]}]
        });
    
    opened by seddik 0
  • input type option in SetEditable function or even more options other than type

    input type option in SetEditable function or even more options other than type

    Customize the Input type is a must

     $("#table-list").SetEditable({
            columnsEd: "0,1,2,3,4,5,6",
            columnsType:"date,,number"
        });
    

    image

    opened by seddik 0
  • After right clicking google translate, the table is not editable, but rows deleted on selection

    After right clicking google translate, the table is not editable, but rows deleted on selection

    After right clicking google translate, the table is not editable, but rows deleted on selection. Tested in Google Chrome browser, And <font style= tag alone is displayed as a result of translation.

    opened by rajeshkumargp 1
Owner
Tito Hinostroza
Tito Hinostroza
Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

Andrei Victor Bulearca 14 Feb 10, 2022
A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. ?? Support us with Developer Merchandise

null 138 Jan 2, 2023
Table of contents Trilium widget for editable and readonly text notes.

Trilium-TocWidget Table of contents Trilium widget for editable and readonly text notes. Screenshot Features The ToC is live and automatically updated

Antonio Tejada 25 Dec 29, 2022
✏️ A small jQuery extension to turn a static HTML table into an editable one. For quickly populating a small table with JSON data, letting the user modify it with validation, and then getting JSON data back out.

jquery-editable-table A small jQuery extension to turn an HTML table editable for fast data entry and validation Demo ?? https://jsfiddle.net/torrobin

Tor 7 Jul 31, 2022
Powerful interactive, editable to Do list. keep track of your activities

Project Name To do List Built With HTML CSS webpack Live Demo Live Demo Link Getting Started To get a local copy up and running follow these simple ex

Federico Luna 8 Sep 2, 2022
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.

Bootstrap Colorpicker Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4. THIS PROJECT IS NOT MAINTAINED ANYMORE. After almost 10

Javi Aguilar 1.4k Dec 22, 2022
Jspreadsheet is a lightweight vanilla javascript plugin to create amazing web-based interactive tables and spreadsheets compatible with other spreadsheet software.

Jspreadsheet CE v4: The JavaScript spreadsheet Jexcel CE has been renamed to Jspreadsheet CE News Important: Please import jspreadsheet.css (jexcel.cs

null 6.2k Dec 19, 2022
Render readable & responsive tables in the terminal

terminal-columns Readable tables for the terminal. Tables can be automatically responsive! Features Content wrapped to fit column width Column widths

hiroki osame 28 Oct 28, 2022
Obsidian-dataview-table-filter-menu - Dynamically created filter menu for dataview tables in obsidian

Dataview table Filter Menu for Obsidian Dynamically created filter menu for data

shiro 17 Sep 24, 2022
An open-source boat display cockpit for navigation, speed, heading, and tide tables running on Raspberry Pi and accessible as a webapp through any smartphone.

An open-source boat display cockpit for navigation, speed, heading, and tide tables running on Raspberry Pi and accessible as a webapp through any smartphone

Andy 44 Dec 30, 2022
View maps, graphs, and tables of your save and compete in a casual, evergreen leaderboard of EU4 achievement speed runs. Upload and share your save with the world.

PDX Tools PDX Tools is a modern EU4 save file analyzer that allow users to view maps, graphs, and data tables of their save all within the browser. If

PDX Tools 24 Dec 27, 2022
⚡️ CRUDify Supabase Tables

⚡️ CRUDify Supabase Tables ⚡️ This is a wrapper around @supabase/supabase-js that generates CRUD actions (like Prisma) to manage tables' data. Quickst

Batyr 6 Oct 14, 2022
An Obsidian Plugin that allows to export tables from a pane in reading mode to CSV files.

Obsidian Plugin "Table to CSV Exporter" This is my very first attempt in writing a plugin for Obsidian. I didn't even know TypeScript before (but Java

Stefan Wolfrum 26 Dec 27, 2022
A jQuery plugin for making html tables searchable and sortable with pagination

jQuery.fancyTable A jQuery plugin for making html tables searchable and sortable with pagination. Live demo See a live demo on CodePen Installation Us

null 45 Dec 19, 2022
Graphs/networks turned into tables

(IMP NOTE FOR CONTRIBUTORS: PLEASE DON'T FORMAT THE CODE, IT'S DIFFICULT FOR ME TO FIND THE CHANGES. THANK YOU!) Graph to Table You must have seen gra

null 12 Oct 20, 2022
A library for boolean aliases to help you make your code more confusing and make your coworkers hate you.

yup-nope A library for boolean aliases to help you make your code more confusing and make your coworkers hate you. Installation Using npm: npm install

Bence A. Tóth 4 Dec 10, 2022
A simple javascript library for pagination, compatible with Bootstrap.

Easy Pagination JS A simple library for pagination, compatible with Bootstrap. Check my website here. Demo Check this Demo here. Example Import the fi

Wilfredo Paiz 18 Aug 5, 2022