editableTableWidget
tiny editable jQuery Bootstrap spreadsheet

About

This tiny (3KB, < 120 lines) jQuery plugin turns any table into an editable spreadsheet. Here are the key features:

• No magic - works on a normal HTML table (so you can plug it in into any web table, and apply any JS function to calculate values)
• 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)
• Input automatically copies underlying table cell styling
• Native copy/paste support
• Does not force any styling (so you can style it any way you want, using normal CSS)
• Works well with Bootstrap
• Depends only on jQuery
• Tested in Chrome 32, Firefox 26, IE 10, Safari 7, Android Chrome and iOS 7 Safari

Usage

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

Use a text area instead of input field to input (or supply a custom editor element)

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

Make sure that the editor clones some specific CSS properties of the underlying cell

$('#table').editableTableWidget({
	cloneProperties: ['background', 'border', 'outline']
});

Mark content as invalid during editing (for example, change one of the item names above to blank or try to enter a non-numeric cost)

$('table td').on('validate', function(evt, newValue) {
	if (....) { 
		return false; // mark cell as invalid 
	}
});

Act on a change (or even reject it). This is how the numbers above recalculate. Also, try to increase total cost over 5000!

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

Why?

We built a tabular data editor for MindMup. Yes, there are plenty of existing widgets such as this, but the ones we could find were either too magic (automatically generated tables with custom styles, interrupting normal focus flow, faking selection with background styles, flash-based copy-paste) or too big (good ones start at 200KB).

MindMup targets recent browsers, so with HTML5, everything we need can fit into less than 3K. We built this tiny tiny editor that does everything we need, does not impose any particular additional CSS, does not fight DOM but uses it as normal, works well with Bootstrap styling, and fits nicely into jQuery event processing.

It's released under the MIT license, so fork and enjoy!

FAQ

Can the widget insert rows and columns?

It works on your HTML table. Just use normal DOM manipulation to insert rows and cells. You don't need to extend the widget for that. You can bind a keystroke to the table or some buttons to do that, for example.

Can the widget apply numeric functions?

It works on your HTML table. Just use normal javascript/DOM manipulation to calculate stuff. Listen to the change event and recalculate (see an example).

Can the widget sync with a background data model?

It works on your HTML table, so just use HTML5 data binding or whatever you would normally use to sync with the DOM, and normal javascript/DOM manipulation to update. You don't need to tell the widget about updates. To sync in the other direction, subscribe to the change event.

How do I post data to my server?

It works on your HTML table, so use standard DOM functions to pull the data from the table, and use jQuery to post to the server

What other widgets are there?

This widget is intentionally minimalistic. If you need more magic and "it works on your HTML table" is not a good answer for you, then check out HandsonTable or SlickGrid.