PDTable

PDTable is a javascript class I wrote to solve the problem of populating a table with data easily and repetitively using javascript. If you're developing web based applications you'll often find yourself writing UI elements, and that's a pain. I tend to get things in via XML and store them in javascript arrays/objects, and PDTable is written to make the drawing of that data way easier. Tested working in Safari & Firefox (Mac) and IE7 (IE6 testing coming soon).

Requires mootools, you'll need Moo.js, Function.js, Array.js, String.js and Element.js.

To download just save pdtable.js (v1.1)

Covered by an MIT-style license you can pretty much do anything you like with this code. See the pdtable.js file for details.

Quick start guide

Start with some basic HTML:

<table id="ztable">
	<tr id="ztable-h">
		<th>ID</th>
		<th>Name</th>
	</tr>
	<tr id="ztable-s">
		<td class="ztable-moo">&nbsp;</td>
		<td class="ztable-alsomoo">&nbsp;</td>
	</tr>
</table>

The class on the skeleton (ztable-s here) tds are used below.

Then start the javascript:

mypdt = new PDTable({table: 'sometable', skeleton: 'some-skeleton', sticky: ['some-header'] });

The basics: table is either an id or a node. The parent we're going to work on. some-skeleton is our template row, and sticky is an array of ids that are not part of the re-draw process.

To add a row to the table:

row = mypdt.addRow({ id: 'mypdt-0', values: { 'moo': 'ABC', 'alsomoo' : 'DEF' } });

The basics: id is the ID that the "row" will have (as in the DOM), values is a javascript object full of key/value pairs. You could also pass in an object. row gives you back the inserted row to do with as you please. How does it determine the values? Each td has a class of the form something-key, something can be anything, key will be used as the lookup. From the above example it will look for moo and alsomoo in the passed in values. It can also have other classes, but this one has to be first.

To clear the table use:

mypdt.clear();

Examples

Simple

Moo	Also Moo
?	!

var zt = null;

window.addEvent('load', function() {
	zt = new PDTable({table: 'ztable', skeleton: 'ztable-s', sticky: ['ztable-h'] });
	zt.clear();
	zt.addRow({ id: 'moo-0', values: { 'moo': 'ABC', 'alsomoo' : 'DEF' } });
	zt.addRow({ id: 'moo-1', values: { 'moo': 'This is', 'alsomoo' : 'another test.' } });
});

Using addMulti()

Function	Description
A	B

var test3 = null;
var something2 = [
	{ 'name': 'clear', 'descr': 'Clears all data rows.'},
	{ 'name': 'addRow', 'descr': 'Adds a single data row.'},
	{ 'name': 'addMulti', 'descr': 'Adds multiple data rows.'}
];

window.addEvent('load', function() {
	test3 = new PDTable({table: 'mtable', skeleton: 'mtable-s', sticky: ['mtable-h'] });
	test3.clear();
	test3.addMulti(something2, {id: 'moo2', callback: function(a) {
		a.onmouseover = function() { $(this).addClass('hover') }
		a.onmouseout = function() { $(this).removeClass('hover') }
	}});
});