Treeble with YUI 3 DataTable

By John LindalJanuary 24th, 2011

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.

Tagged as:

7 Comments

  1. Floydian said:
    January 25, 2011 at 7:36 am

    Treeble is an awesome idea! I hadn’t seen that one before. I just might consider using it on my gt5power.com site to display the Game Guide/FAQ instead of using a YUI 2 TreeView widget.

    Whether I end up using it there or not, I have no doubt that this is something I’ll end up using multiple times in the future!

    Cheers

  2. devsmt said:
    January 28, 2011 at 3:10 am

    very cool!

  3. Thanh said:
    April 21, 2011 at 2:18 am

    Hi John,

    I’m using your Treeble with YUI 2 but I have a request that is if it’s possible to expand/collapse all the rows at once.

    Thanks

  4. John Lindal said:
    April 21, 2011 at 9:13 am

    Expand all is a very expensive operation, because it normally requires an XHR call for each node that is being opened. You can do it, but you have to call the toggle function for each node separately.

  5. Thanh said:
    April 28, 2011 at 8:00 am

    Yeah, I have tried this solution and as u said it is not very performant and the navigator freeze when there is so many nodes to expand.

    So there is no solution where we could create the treeble with all nodes opened … what a pity !

    thanks anyway.

  6. John Lindal said:
    April 28, 2011 at 10:45 am

    I recently added an option to YUI 3 Treeble so you can specify the initial state of a node as part of the data. You could try that as an alternative to opening everything via the toggle() API.

  7. John Lindal said:
    August 23, 2011 at 4:29 pm

    Thanks to gallery-patch-340-datatable-formatter, the YUI 3.4.0 version of gallery-treeble no longer requires an extra hack column to render correctly.