The beta release of DataTable in YUI 3.3.0 gives us a very powerful component to play with. To kick the tires in a useful way, I decided to update my Treeble examples to use DataTable. (Treeble enables displaying hierarchical data in a table.)

To my delight, it was a breeze! All the hard work is done in TreebleDataSource, which extends YUI 3 DataSource, so all I had to do was plug it into DataTable by using Y.Plugin.DataTableDataSource and then configure the columns:

var ds = new Y.TreebleDataSource(...),
	pg = new Y.Paginator(...),
	table;

function sendRequest() {
	table.datasource.load({
		request: {
			startIndex:  pg.getStartIndex(),
			resultCount: pg.getRowsPerPage()
		}
	});
}

var cols = [
    { key: 'yui33-hack', label: '' },
    {
        key: 'treeblenub', label: '',
        formatter: Y.Treeble.buildTwistdownFormatter(sendRequest)
    },
    {
        key: 'title', label: 'Title',
        formatter: Y.Treeble.treeValueFormatter
    },
    ...
];

table = new Y.DataTable.Base({columnset: cols});
table.plug(Y.Plugin.DataTableDataSource, {datasource: ds});

To see the complete source code, refer to the live example.

The only flies in the ointment are:

• The yui33-hack column. Due to a bug in YUI 3.3.0 DataTable, the td element passed to a column formatter is actually from the previous column. Thus, the first column in the table displays the twistdown, and the second column is empty.
• Undefined values in the data are displayed as {value} instead of blanks (bug 2529858).

In order to make Treeble easier to use, I have added a Sam skin which styles to the CSS classes written out by the Y.Treeble formatters.

Enjoy!

About the author: John Lindal (@jafl5272 on Twitter) is one of the lead engineers constructing the foundation on which Yahoo! APT is built. Previously, he worked on the Yahoo! Publisher Network.