Yahoo! Developer Network Home - Help

Site Search (YDN & YUIBlog):

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

# DataTable Control (beta): Nested Headers

View example in new window.

## Sample Code for this Example

Data:

YAHOO.example.Data = { webstats: [ ["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] ] }

CSS:

/* No custom CSS. */

Markup:

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

JavaScript:

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.

### DataTable Control (beta) Examples:

### More DataTable Control (beta) Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

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