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

Scrolling can be enabled along the x, y, or xy-axes. Call the YAHOO.widget.ScrollingDataTable constructor and pass in width and/and or height string values as configurations. Since scrolling functionality has been moved to the ScrollingDataTable subclass, please note that you cannot start with a YAHOO.widget.DataTable instance and add scrolling to it dynamically at runtime.

View example in new window.

XY Scrolling

field1	field2	field3	field4	field5	field6

field1	field2	field3	field4	field5	field6
Loading...
bananas	02/01/2007	111	23.4	bob	http://www.yahoo.com
cherries	02/01/2006	12.3	35.12	ann	http://www.yahoo.com
apples	12/01/2007	1	34.12	charlie	http://www.yahoo.com
bananas	02/11/2007	1112	03	diane	http://www.yahoo.com
cherries	02/11/1999	124	3	edgar	http://www.yahoo.com
bananas	January 10, 2005	12	34	francine	http://www.yahoo.com
apples	January 1, 2005	19.1	234.5	george	http://www.yahoo.com
bananas	1/11/05	10.02	345.654	hannah	http://www.yahoo.com
cherries	1/11/2005	109	23.456	igor	http://www.yahoo.com
bananas	November 1, 2005	11111	23.0123	julie	http://www.yahoo.com

Y Scrolling

field1	field2	field3	field4	field5	field6

field1	field2	field3	field4	field5	field6
Loading...
bananas	02/01/2007	111	23.4	bob	http://www.yahoo.com
cherries	02/01/2006	12.3	35.12	ann	http://www.yahoo.com
apples	12/01/2007	1	34.12	charlie	http://www.yahoo.com
bananas	02/11/2007	1112	03	diane	http://www.yahoo.com
cherries	02/11/1999	124	3	edgar	http://www.yahoo.com
bananas	January 10, 2005	12	34	francine	http://www.yahoo.com
apples	January 1, 2005	19.1	234.5	george	http://www.yahoo.com
bananas	1/11/05	10.02	345.654	hannah	http://www.yahoo.com
cherries	1/11/2005	109	23.456	igor	http://www.yahoo.com
bananas	November 1, 2005	11111	23.0123	julie	http://www.yahoo.com

X Scrolling

field1	field2	field3	field4	field5	field6

field1	field2	field3	field4	field5	field6
Loading...
bananas	02/01/2007	111	23.4	bob	http://www.yahoo.com
cherries	02/01/2006	12.3	35.12	ann	http://www.yahoo.com
apples	12/01/2007	1	34.12	charlie	http://www.yahoo.com
bananas	02/11/2007	1112	03	diane	http://www.yahoo.com
cherries	02/11/1999	124	3	edgar	http://www.yahoo.com
bananas	January 10, 2005	12	34	francine	http://www.yahoo.com
apples	January 1, 2005	19.1	234.5	george	http://www.yahoo.com
bananas	1/11/05	10.02	345.654	hannah	http://www.yahoo.com
cherries	1/11/2005	109	23.456	igor	http://www.yahoo.com
bananas	November 1, 2005	11111	23.0123	julie	http://www.yahoo.com

Sample Code for this Example

Data:


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

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:


1	/* No custom CSS. */
	view plain \| print \| ?

Markup:


1	<div id="xyscrolling"></div>
2
3	<div id="yscrolling"></div>
4
5	<div id="xscrolling"></div>
	view plain \| print \| ?

JavaScript:


1	YAHOO.util.Event.addListener(window, "load", function() {
2	YAHOO.example.Scrolling = new function() {
3	var myColumnDefs = [
4	{key:"field1"},
5	{key:"field2", formatter:"date"},
6	{key:"field3"},
7	{key:"field4"},
8	{key:"field5"},
9	{key:"field6", width:150}
10	];
11
12	var myColumnDefsY = [
13	{key:"field1"},
14	{key:"field2", formatter:"date"},
15	{key:"field3"},
16	{key:"field4"},
17	{key:"field5"},
18	{key:"field6"}
19	];
20
21	var myColumnDefsX = [
22	{key:"field1", width:300},
23	{key:"field2", formatter:"date", width:300},
24	{key:"field3", width:300},
25	{key:"field4", width:300},
26	{key:"field5", width:300},
27	{key:"field6", width:300}
28	];
29
30	this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.multitypes);
31	this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
32	this.myDataSource.responseSchema = {
33	resultsList: "items",
34	fields: [
35	{key:"field1"},
36	{key:"field2", formatter:"date"},
37	{key:"field3"},
38	{key:"field4"},
39	{key:"field5"},
40	{key:"field6"}
41	]
42	};
43
44	// Set width and height as string values
45	var myDataTableXY = new YAHOO.widget.ScrollingDataTable("xyscrolling", myColumnDefs,
46	myDataSource, {width:"30em", height:"10em"});
47
48	// Set height as a string value
49	var myDataTableY = new YAHOO.widget.ScrollingDataTable("yscrolling", myColumnDefsY,
50	myDataSource, {height:"10em"});
51
52	// Set width as a string value
53	var myDataTableX = new YAHOO.widget.ScrollingDataTable("xscrolling", myColumnDefsX,
54	myDataSource, {width:"30em"});
55	};
56	});
	view plain \| print \| ?

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"});
    };
});

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 Library Examples: DataTable Control: XY-scrolling, Y-scrolling, and X-scrolling

Sample Code for this Example

Configuration for This Example

YUI Logger Output:

Logger Console

DataTable Control Examples:

More DataTable Control Resources: