Nested-Headers

YUI Library JavaScript DHTML


            



    
Nested Headers

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}











Nested Headers

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.NestedHeaders = function() {
        var myColumnDefs = [
            {key:"page", label:"Page", sortable:true, resizeable:true},
            {label:"Statistics", formatter:YAHOO.widget.DataTable.formatNumber, children:[
                {label:"Visits",
                    children: [
                        {key:"visitsmonth", label:"This Month",sortable:true, resizeable:true},
                        {key:"visitsytd", label:"YTD", abbr:"Year to Date",sortable:true, resizeable:true}
                    ]
                },
                {label:"Views",
                    children: [
                        {key:"viewsmonth", label:"This Month",sortable:true, resizeable:true},
                        {key:"viewsytd", label:"YTD", abbr:"Year to Date",sortable:true, resizeable:true}
                    ]
                }
            ]}
        ];
        var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.webstats);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: ["page","visitsmonth","visitsytd","viewsmonth","viewsytd"]
        };
        var myDataTable = new YAHOO.widget.DataTable("nested", myColumnDefs, myDataSource);

        return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});



yui_2.7.0b.zip( 4,431 k)