DataTable Widget :: Nested Headers

Sample Code

CSS:

/* custom css*/ #nested {margin:1em;} #nested table {border-collapse:collapse;} #nested th, #nested td {border:1px solid #000;padding:.25em;} #nested th {background-color:#696969;color:#fff;}/*dark gray*/ #nested .yui-dt-odd {background-color:#eee;} /*light gray*/

Markup:

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

JavaScript:

var myColumnHeaders = [ {key:"page", text:"Page"}, {text:"Statistics", type:"number", children:[ {text:"Visits", children: [ {key:"visitsmonth", text:"This Month"}, {key:"visitsytd", text:"YTD", abbr:"Year to Date"} ] }, {text:"Views", children: [ {key:"viewsmonth", text:"This Month"}, {key:"viewsytd", text:"YTD", abbr:"Year to Date"} ] } ]} ]; var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders); 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", myColumnSet, myDataSource,{caption:"Example: Nested Headers"});