A nice, editable jQuery table plugin with Bootstrap

Editable Table is an interesting and useful jQuery table plugin, styled with Bootstrap.

Editable jQuery table plugin for web projects

A small, jQuery and Bootstrap based widget, that makes a HTML table editable and nice looking. The plugin turns a standard HTML table into a responsive, in-place editable spreadsheet, with input validation!

Key features

– Works very well with Bootstrap (v2/v3)

– Depends only on jQuery

– Supports validation and change events (so you can warn about invalid input or prevent invalid changes)

– Uses standard DOM focus for selection (so does not interrupt scrolling or tabbing outside the table)

– Native copy / paste support

– In-place edit

– Cross-browser and responsive

– Works on a normal HTML table – we can plug it in into any web table

Usage – examples

Basic:

$('#table').editableTableWidget();

Use a text area instead of input field:

$('#table').editableTableWidget({editor: $('<textarea>')});

Handle a change event:

$('table td').on('change', function(evt, newValue) {
  // do something with the new cell value 
  if (....) { 
    return false; // reject change
  }
});

License: MIT

Demo & docs:

http://mindmup.github.io/editable-table

GitHub:

https://github.com/mindmup/editable-table

See also:

JavaScript Excel tables library

jQuery convert JSON to grid plugin – Columns

Enjoy!