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>&lt;table&gt; 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;
     });

Demos and Tests

Visitor Type # Visitors
jQuery Plugin Enthusiast 1234
<table> Apologist 779
Curious Hacker 403
Confused Voodoo Practitioner 8
add row

The full feature set includes: (features existing in Voodookit 0.1, to be rewritten as a jQuery plugin)

Features planned for this new improved version: