Monday, 24 August 2009

I've previously harped on about how great the YUI Data Table is so I'll spare the introduction.

For all its bells & whistles, what the data table doesn't offer is grouping of rows - i.e. you're limited to 1 level of data. But thanks to the YUI data table's extensibility, there's plenty of opportunity to roll your own - which is what I did:

The YUI data table provides a custom row formatter hook, which allowed me to insert a group header at the relevant points. I had to use a bit of CSS trickery to insert the headers, as they are floating DIV elements, not table rows. The reason for this is that inserting rows caused the YUI data table to get confused if row selection is enabled.

Update 4 Nov 2009: Thanks to the hard work of contributor Mark Mansour many updates have been made to the Grouped Data Table. Mark has made the component inherit from the standard DataTable, plus many other bug fixes & enhancements.

The extension also supports collapsing of groups, and group selection:

Usage is pretty straightforward, firstly include the groupeddatatable.js file on your page:

<script type="text/javascript" src="groupeddatatable.js"></script>

There is also a set of default styles based on the yui-sam look & feel:

Looks like the width problem was a result of Yui-2.6's dom-event class missing the getRegion method. I was able to bypass it by using the offsetWidth of the row. Unfortunately when you use minWidth's in the table, it grows after the setGroupWidth function is called and doesn't stretch. You may be missing an internal resize event.

Also just ran into problems where the height of a row exceeds one line, the group headers don't cover the whole row when they minimize and appear to "eat" rows if you collapse/expand in IE7.

Keep in mind these could all be related to trying to run this in yui-2.6

I figured out a slight problem in this solution. When the width of table (say a single column table) is less then the text width of group then this grouper rows goes out of the table to fit the whole content in one line without any wrapping.

How can I make this text to wrap and fit the grouper width to table width even if the table width is less than the width of the text in group column?

Thanks for adding the 2nd level grouping to wishlist. Kindly do let me know once you get a chance to implement that.Also, I noticed another small problem regarding word wrap of the grouper text. If the data table text has just one column then the grouper row are of varying lengths which move out of data table boundaries. Any hints as where and how shall I introduce word wrap in the script?

What is the easiest way to turn off grouping when a column is sorted? Grouping typically only makes sense when sorted on a particular column, so I'd like to turn it off if any other column is used for sorting, and turn it back on if the "primary" sort column is used again.

doBeforeSortColumn will trap the sort, but I'm not sure how to toggle grouping on or off.

Great addition to the DataTable widget. Works wonderful for FF 3.5.3. However, my deployment environment is IE7 and I receive an error if I collapse a row grouping, then attempt to expand the same row grouping. I receive javascript error:Line: 300Error: Could not get the display property. Invalid argument.

I figured out the IE7 problem. Simply changerow.style.display = "table-row";torow.style.display = ""; what would be more elegant is to figure out how YAHOO abstracts this out and possibly leverage that so it could be used for either browser.

From an IE7 perspective, the prior version appears to function better. From Firefox, yes, it looks to be much better and I like the fact that it is now an extension of DataTable. Thanks for all the effort.

1) to add ScrollingDataTable support a) the css for .icon div must not be absolute b) replace groupCell.setAttribute("colspan", numberOfColumns); with groupCell.colSpan = numberOfColumns; c) Replace YAHOO.widget.DataTable with YAHOO.widget.ScrollingDataTable

2) I did notice one small bug with drag & drop of columns (reordering). I had to extend the reorderColumn method & add code for it to skip the TR rows that had class of "group".