The most basic class that extends the Template class is probably the one that proves its value. Any time you need to show tabular data, you just need two things: an HTML <table>, and some data... and a function that turns that data into table <tr>s.. and a function that updates those rows and <td>s... and a function that wipes or rebuilds the table... and.. you see where this is going.

Just do this:

var data = [
   ['Web Man', 4, 26, 26],
   ['Test Man', 2, 10, 10]
];
var myTable = new Table({
   rowHeaders : ['Developer', 'Hours Worked', 'Hours Saved', 'Hours to Party']
})
  .appendTo('body')
  .build(data);

Okay, we made a basic table, but only because it had data that was ordered the way we want (an object - or an array - containing arrays of data). What if the data comes out of order, in an object? All you need is to provide a template in the form of jQuery or a string and include name or data-name attributes in the HTML.

Let's imagine you wrote the table template in your actual HTML file. You can now easily template it and use it to create tables.

<table class="table template" id="hoursTableTemplate">
    <thead>
        <tr>
            <th>Developer</th>
            <th>Hours Worked</th>
            <th>Hours Saved</th>
            <th>Hours to Party</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span data-name="man"></span></td>
            <td><span data-name="worked"></span></td>
            <td><span data-name="saved"></span></td>
            <td><span data-name="party"></span></td>
        </tr>
    </tbody>
</table>

Table will take your HTML template, seek out the pieces it needs, and template your table so it can then build it. Note the data-name attributes. Table's build method populates rows by using Util's $.fn.populate, which will only populate HTML elements with name or data-name attributes.

var data = {
   0 : {
      man : 'Web Man',
      worked : 4,
      saved : 26,
      party : 26
   },
   1 : {
      man : 'Test Man',
      worked : 2,
      saved : 10,
      party : 10
   }
};

var myTable = new Table({
    template : $('#hoursTableTemplate')
})
  .appendTo('body')
  .build(data);

As expected, the result is the same...

If you mean to massage your raw data before it gets built into a table, Table has a method called processRow that can be overwritten, by extending Table as a child class. For example, if you had a table with rows, and those rows could be deleted, you might write something like this:

_processRow(data){
	var self = this;
	data.developer = "Developer " + data.developer;
	data.party = data.party > 10 ? '<strong>'+data.party+'</strong>' : data.party;
	data.deleteRow = $('<button type="button" class="delete"></button>')
		.click(function(){
			self.deleteRow(data._id);
		});
	return data;
}

The data has been altered (and the untouched data has conveniently been cached in _cachedData) and is ready for the actual table. In this case, we've added some strings or HTML to the data, and introduced a new data property,deleteRow. This new property would populate an element with a data-name="deleteRow" attribute in the table's template.

How about more? Take a look at Table's child classes, RenderTable - a table that can rebuild itself without wiping the DOM, and ControlTable - a table that extends RenderTable and provides some default table action buttons (delete/view/update)