Voodookit
Voodookit: Making <table>s Interactive, Editable, and Awesome
Voodookit is a jQuery plugin designed to turn tables of data into sortable, editable, interactive page components. You can use it for something as simple as making an HTML table sortable by any column, but its main use is in creating specialized spreadsheet-like apps.
Voodookit was originally built for Voo2do.com, a web-based task management system.
Download jquery.voodookit.js
Free Software, Dual-Licensed MIT or GPL like jQuery
Requires JQuery 1.4a1 or later
A Quick Demo
HTML
<table id="demo">
<tr> <th>Visitor Type</th> <th># Visitors</th> </tr>
<tr> <td>jQuery Plugin Enthusiast</td> <td>1234</td> </tr>
<tr> <td><table> Apologist</td> <td>779</td> </tr>
<tr> <td>Curious Hacker</td> <td>403</td> </tr>
<tr> <td>Confused Voodoo Practitioner</td> <td>8</td> </tr>
</table>
<a href="#" id="demo_add">add row</a>
<p>
<img id="demo_graph" src="http://chart.apis.google.com/chart?cht=p&chs=600x200"/>
</p>
<tr> <th>Visitor Type</th> <th># Visitors</th> </tr>
<tr> <td>jQuery Plugin Enthusiast</td> <td>1234</td> </tr>
<tr> <td><table> Apologist</td> <td>779</td> </tr>
<tr> <td>Curious Hacker</td> <td>403</td> </tr>
<tr> <td>Confused Voodoo Practitioner</td> <td>8</td> </tr>
</table>
<a href="#" id="demo_add">add row</a>
<p>
<img id="demo_graph" src="http://chart.apis.google.com/chart?cht=p&chs=600x200"/>
</p>
Javascript
var vkdemo = $("#demo").voodoo({ cols: [
{ name: "vtype",
type: $.voodoo.types.htmlEscapedString,
render: new $.voodoo.render.TextField() },
{ name: "count",
type: $.voodoo.types.integer,
render: new $.voodoo.render.TextField() }
]});
//
var img_baseURL = $("#demo_graph").attr("src");
function demo_redraw() {
var labels = $.map(vkdemo.col("vtype").cellValues(),
encodeURIComponent).join("|");
var data_sum = vkdemo.col("count").sum();
// calculate percentage for each component
var data = $.map(vkdemo.col("count").cellValues(),
function(n) { return n/data_sum * 100; }).join(",");
$("#demo_graph").attr("src",
img_baseURL + "&chl=" + labels +
"&chd=t:" + data);
}
$("#demo").bind("vkChange", demo_redraw);
demo_redraw();
$("#demo_add").click(function() {
vkdemo.appendRow();
return false;
});
{ name: "vtype",
type: $.voodoo.types.htmlEscapedString,
render: new $.voodoo.render.TextField() },
{ name: "count",
type: $.voodoo.types.integer,
render: new $.voodoo.render.TextField() }
]});
//
var img_baseURL = $("#demo_graph").attr("src");
function demo_redraw() {
var labels = $.map(vkdemo.col("vtype").cellValues(),
encodeURIComponent).join("|");
var data_sum = vkdemo.col("count").sum();
// calculate percentage for each component
var data = $.map(vkdemo.col("count").cellValues(),
function(n) { return n/data_sum * 100; }).join(",");
$("#demo_graph").attr("src",
img_baseURL + "&chl=" + labels +
"&chd=t:" + data);
}
$("#demo").bind("vkChange", demo_redraw);
demo_redraw();
$("#demo_add").click(function() {
vkdemo.appendRow();
return false;
});
Demos and Tests
| Visitor Type | # Visitors |
|---|---|
| jQuery Plugin Enthusiast | 1234 |
| <table> Apologist | 779 |
| Curious Hacker | 403 |
| Confused Voodoo Practitioner | 8 |
The full feature set includes: (features existing in Voodookit 0.1, to be rewritten as a jQuery plugin)
- Editing. Users can change cell values, add rows, and delete rows. Changes can be saved to your server (peicemeal or on form submission) or handled by custom javascript.
- Pagination. Ajax requests can load additional data from your server as needed.
- Sorting. Re-order table rows based on any column.
- Templating. Change how cell data is represented using a powerful yet simple template language.
- Computed Columns. Need to display a time remaining column based on existing total and elapsed column data? Or just need it calculated for easy reference? Voodookit makes it easy.
- Reduction. Compute and display a total, average, or other reduction of an entire column at the bottom of your table, with automatic recalculation if relevant cell values are changed.
- Data types. Strings, integers, dates, times: tell us what type of data you want in a column, and we'll ensure that it's parsed and serialized properly, And that nobody can get away with typing "banana" in an integer field. Use the built-in types or create your own.
Features planned for this new improved version:
- Filtering. Dynamically show and hide rows based on cell contents.
- jQuery Events. Hook into any table events: new rows, edits, recalculation of reductions, etc.
- Column resizing. If our smart column sizes still aren't quite right, users can drag header edges to resize.
- Keyboard control. Use customizable key bindings to move a row cursor up and down (like in GMail) and trigger row-specific actions.