YUI Library Examples: DataTable Control (beta): Nested Headers

Page	Statistics
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
Loading data...

	view plain \| print \| ?

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 \| ?

1	/* No custom CSS. */

	view plain \| print \| ?

1	<div id="nested"></div>

	view plain \| print \| ?

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	});

INFO2286ms (+20) 11:04:31 PM:

DataTable instance yui-dt0

DataTable initialized with 5 of 5 rows

INFO2266ms (+0) 11:04:31 PM:

DataTable instance yui-dt0

DataTable message hidden

INFO2266ms (+0) 11:04:31 PM:
DataTable  instance yui-dt0
DataTable rendering...

INFO2266ms (+1) 11:04:31 PM:

DataTable instance yui-dt0

DataTable showing message: Loading data...

INFO2265ms (+1) 11:04:31 PM:
RecordSet  instance yui-rs0
Set 5 Record(s) at index 0

INFO2264ms (+0) 11:04:31 PM:
DataSource  instance0
Parsed array data is {results => [{viewsytd => 657, viewsmonth => 44, visitsytd => 400, visitsmonth => 20, page => home.html}, {viewsytd => 567, viewsmonth => 97, visitsytd => 377, visitsmonth => 24, page => blog.html}, {viewsytd => 543, viewsmonth => 42, visitsytd => 548, visitsmonth => 32, page => contact.html}, {viewsytd => 946, viewsmonth => 12, visitsytd => 465, visitsmonth => 8, page => about.html}, {viewsytd => 0, viewsmonth => 0, visitsytd => 0, visitsmonth => 0, page => pagenotfound.html}]}

INFO2264ms (+1) 11:04:31 PM:

DataSource instance0

Received live data response for "null"

INFO2263ms (+1) 11:04:31 PM:

DataSource instance0

Making connection to live data for "null"

INFO2262ms (+3) 11:04:31 PM:

DataTable instance yui-dt0

DataTable showing message: Loading data...

INFO2259ms (+0) 11:04:31 PM:

DataTable instance yui-dt0

Accessibility TH cells for 5keys created

INFO2259ms (+6) 11:04:31 PM:

DataTable instance yui-dt0

TH cells for 5 keys created

INFO2253ms (+0) 11:04:31 PM:
RecordSet  instance yui-rs0
RecordSet initialized

INFO2253ms (+3) 11:04:31 PM:
ColumnSet  instance yui-cs0
ColumnSet initialized

INFO2250ms (+7) 11:04:31 PM:
DataSource  instance0
DataSource initialized

INFO2243ms (+2243) 11:04:31 PM:
LogReader  instance0
LogReader initialized

INFO0ms (+0) 11:04:28 PM:
global
Logger initialized

YUI Library Examples: DataTable Control (beta): Nested Headers

Sample Code for this Example

YUI Logger Output:

Logger Console

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources:

Page	Statistics
	Visits		Views
	This Month	YTD	This Month	YTD
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
Loading data...