YUI Library Examples: DataTable Control: XY-scrolling, Y-scrolling, and X-scrolling

Sample Code for this Example

Data:

YAHOO.example.Data.multitypes = {
    items: [
        {field1: "bananas", field2:new Date(2007, 1, 1), field3:111, field4:"23.4", field5:"bob", field6:"http://www.yahoo.com"},
        {field1: undefined, field2:new Date(2006, 1, 1), field3:12.3, field4:"35.12", field5:"ann", field6:"http://www.yahoo.com"},
        {field1: "apples", field2:new Date(2007, 11, 1), field3:1, field4:34.12, field5:"charlie", field6:"http://www.yahoo.com"},
        {field1: "bananas", field2:new Date(2007, 1, 11), field3:1112, field4:"03", field5:"diane", field6:"http://www.yahoo.com"},
        {field1: "cherries", field2:new Date(1999, 1, 11), field3:124, field4:03, field5:"edgar", field6:"http://www.yahoo.com"},
        {field1: "", field2:"January 10, 2005", field3:"12", field4:"34", field5:"francine", field6:"http://www.yahoo.com"},
        {field1: "unknown", field2:"January 1, 2005", field3:"19.1", field4:"234.5", field5:"george", field6:"http://www.yahoo.com"},
        {field1: null, field2:"1/11/05", field3:"10.02", field4:"345.654", field5:"hannah", field6:"http://www.yahoo.com"},
        {field1: "cherries", field2:"1/11/2005", field3:"109", field4:23.456, field5:"igor", field6:"http://www.yahoo.com"},
        {field1: "bananas", field2:"November 1, 2005", field3:"11111", field4:23.0123, field5:"julie", field6:"http://www.yahoo.com"}
    ]
}

CSS:

Markup:

JavaScript:

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.Scrolling = new function() {
        var myColumnDefs = [
                {key:"field1"},
                {key:"field2", formatter:"date"},
                {key:"field3"},
                {key:"field4"},
                {key:"field5"},
                {key:"field6", width:150}
            ];
            
        var myColumnDefsY = [
                {key:"field1"},
                {key:"field2", formatter:"date"},
                {key:"field3"},
                {key:"field4"},
                {key:"field5"},
                {key:"field6"}
            ];

var myColumnDefsX = [
                {key:"field1", width:300},
                {key:"field2", formatter:"date", width:300},
                {key:"field3", width:300},
                {key:"field4", width:300},
                {key:"field5", width:300},
                {key:"field6", width:300}
            ];

this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.multitypes);
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        this.myDataSource.responseSchema = {
            resultsList: "items",
            fields: [
                {key:"field1"},
                {key:"field2", formatter:"date"},
                {key:"field3"},
                {key:"field4"},
                {key:"field5"},
                {key:"field6"}
            ]
        };

// Set width and height as string values
        var myDataTableXY = new YAHOO.widget.ScrollingDataTable("xyscrolling", myColumnDefs,
                myDataSource, {width:"30em", height:"10em"});

// Set height as a string value
        var myDataTableY = new YAHOO.widget.ScrollingDataTable("yscrolling", myColumnDefsY,
                myDataSource, {height:"10em"});

// Set width as a string value
        var myDataTableX = new YAHOO.widget.ScrollingDataTable("xscrolling", myColumnDefsX,
                myDataSource, {width:"30em"});
    };
});

YUI Logger Output:

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

Reload with logging
and debugging disabled.

DataTable Control Examples:

More DataTable Control Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.

YUI Library Examples: DataTable Control: XY-scrolling, Y-scrolling, and X-scrolling

DataTable Control: XY-scrolling, Y-scrolling, and X-scrolling

XY Scrolling

Y Scrolling

X Scrolling

Sample Code for this Example

YUI Logger Output:

DataTable Control Examples:

More DataTable Control Resources: