YUI Library Examples: DataTable Control: Nested Headers

DataTable Control: Nested Headers

Page	Statistics
	Visits		Views
	This Month	YTD	This Month	YTD
Loading...
home.html	20	400	44	657
blog.html	24	377	97	567
contact.html	32	548	42	543
about.html	8	465	12	946
pagenotfound.html	0	0	0	0

Sample Code for this Example

Data:


1	YAHOO.example.Data = {
2	webstats: [
3	["home.html",20,400,44,657],
4	["blog.html",24,377,97,567],
5	["contact.html",32,548,42,543],
6	["about.html",8,465,12,946],
7	["pagenotfound.html",0,0,0,0]
8	]
9	}
	view plain \| print \| ?

CSS:


1	/* No custom CSS. */
	view plain \| print \| ?

Markup:


1	<div id="nested"></div>
	view plain \| print \| ?

JavaScript:


1	YAHOO.util.Event.addListener(window, "load", function() {
2	YAHOO.example.NestedHeaders = new function() {
3	var myColumnDefs = [
4	{key:"page", label:"Page", sortable:true, resizeable:true},
5	{label:"Statistics", formatter:YAHOO.widget.DataTable.formatNumber, children:[
6	{label:"Visits",
7	children: [
8	{key:"visitsmonth", label:"This Month",sortable:true, resizeable:true},
9	{key:"visitsytd", label:"YTD", abbr:"Year to Date",sortable:true, resizeable:true}
10	]
11	},
12	{label:"Views",
13	children: [
14	{key:"viewsmonth", label:"This Month",sortable:true, resizeable:true},
15	{key:"viewsytd", label:"YTD", abbr:"Year to Date",sortable:true, resizeable:true}
16	]
17
18	}
19	]}
20	];
21
22	this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.webstats);
23	this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
24	this.myDataSource.responseSchema = {
25	fields: ["page","visitsmonth","visitsytd","viewsmonth","viewsytd"]
26	};
27
28	this.myDataTable = new YAHOO.widget.DataTable("nested", myColumnDefs, this.myDataSource);
29	};
30	});
	view plain \| print \| ?

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.NestedHeaders = new 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}
                    ]

}
            ]}
        ];

this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.webstats);
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        this.myDataSource.responseSchema = {
            fields: ["page","visitsmonth","visitsytd","viewsmonth","viewsytd"]
        };

this.myDataTable = new YAHOO.widget.DataTable("nested", myColumnDefs, this.myDataSource);
    };
});

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

YUI Library Examples: DataTable Control: Nested Headers

Sample Code for this Example

YUI Logger Output:

DataTable Control Examples:

More DataTable Control Resources: