YUI Library Examples: DataTable Control: Nested Headers

Sample Code for this Example

Data:

CSS:

Markup:

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.

YUI Library Examples: DataTable Control: Nested Headers

Sample Code for this Example

YUI Logger Output:

DataTable Control Examples:

More DataTable Control Resources: