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:
<link rel="stylesheet" type="text/css" href="assets/datatablegrouper.css">
GroupedDataTable inherits from the standard YUI DataTable, so create an instance of it as per the standard YUI component:
// Create a GroupedDataTable based on the supplied columns & data source
var myDataTable = new YAHOO.widget.GroupedDataTable("dtContainer", myColumnDefs, myDataSource, { groupBy: "state" });
Notice the extra groupBy configuration parameter.
That's it. There's a much more detailed example provided with the script.
As always, there's bound to be issues with the script as there are too many scenarios for me to test. So please let me know what you come across.
Cheers, Anthony.
Posts
