YUI Library Home

YUI Library Examples: DataTable Control: Nested Headers

DataTable Control: Nested Headers

View example in new window.

Page
Statistics
Visits
Views
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:

1YAHOO.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:

1YAHOO.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 | ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Logger Console

INFO 2452ms (+0) 10:50:52 PM:
DataTable  instance yui-dt0
Post-render routine executed
INFO 2452ms (+16) 10:50:52 PM:
DataTable  instance yui-dt0
DataTable rendered
INFO 2436ms (+3) 10:50:52 PM:
DataTable  instance yui-dt0
DataTable message hidden
INFO 2433ms (+0) 10:50:52 PM:
DataTable  instance yui-dt0
DataTable rendering...
INFO 2433ms (+1) 10:50:52 PM:
RecordSet  instance yui-rs0
Set 5 Record(s) at index 0
INFO 2432ms (+0) 10:50:52 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}]}
INFO 2432ms (+1) 10:50:52 PM:
DataSource  instance0
Received live data response for "null"
INFO 2431ms (+0) 10:50:52 PM:
DataSource  instance0
Making connection to live data for "null"
INFO 2431ms (+6) 10:50:52 PM:
DataTable  instance yui-dt0
DataTable showing message: Loading...
INFO 2425ms (+3) 10:50:52 PM:
DataTable  instance yui-dt0
TH cells for 5 keys created
INFO 2422ms (+1) 10:50:52 PM:
RecordSet  instance yui-rs0
RecordSet initialized
INFO 2421ms (+1) 10:50:52 PM:
ColumnSet  instance yui-cs0
ColumnSet initialized
INFO 2420ms (+45) 10:50:52 PM:
DataSource  instance0
DataSource initialized
INFO 2375ms (+2375) 10:50:52 PM:
LogReader  instance0
LogReader initialized
INFO 0ms (+0) 10:50:49 PM:
global
Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More DataTable Control Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings