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

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)

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

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

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.