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

DataTable Control (beta): XY-scrolling, Y-scrolling, and X-scrolling

Scrolling can be enabled on a DataTable along the x, y, or xy-axes. Set the DataTable's "scrollable" value to "true", and set a width and/and or height string values.

View example in new window.

XY Scrolling

field1
field2
field3
field4
field5
field6
field1
field2
field3
field4
field5
field6
bananas
2/1/2007
111
23.4
bob
http://www.yahoo.com
2/1/2006
12.3
35.12
ann
http://www.yahoo.com
apples
12/1/2007
1
34.12
charlie
http://www.yahoo.com
bananas
2/11/2007
1112
03
diane
http://www.yahoo.com
cherries
2/11/1999
124
3
edgar
http://www.yahoo.com
January 10, 2005
12
34
francine
http://www.yahoo.com
unknown
January 1, 2005
19.1
234.5
george
http://www.yahoo.com
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
Loading data...

Y Scrolling

field1
field2
field3
field4
field5
field6
field1
field2
field3
field4
field5
field6
bananas
2/1/2007
111
23.4
bob
http://www.yahoo.com
2/1/2006
12.3
35.12
ann
http://www.yahoo.com
apples
12/1/2007
1
34.12
charlie
http://www.yahoo.com
bananas
2/11/2007
1112
03
diane
http://www.yahoo.com
cherries
2/11/1999
124
3
edgar
http://www.yahoo.com
January 10, 2005
12
34
francine
http://www.yahoo.com
unknown
January 1, 2005
19.1
234.5
george
http://www.yahoo.com
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
Loading data...

X Scrolling

field1
field2
field3
field4
field5
field6
field1
field2
field3
field4
field5
field6
bananas
2/1/2007
111
23.4
bob
http://www.yahoo.com
2/1/2006
12.3
35.12
ann
http://www.yahoo.com
apples
12/1/2007
1
34.12
charlie
http://www.yahoo.com
bananas
2/11/2007
1112
03
diane
http://www.yahoo.com
cherries
2/11/1999
124
3
edgar
http://www.yahoo.com
January 10, 2005
12
34
francine
http://www.yahoo.com
unknown
January 1, 2005
19.1
234.5
george
http://www.yahoo.com
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
Loading data...

Sample Code for this Example

Data:

1YAHOO.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 | ?

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:

1YAHOO.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 "scrollable:true" and set width and height string values 
45        this.myDataTableXY = new YAHOO.widget.DataTable("xyscrolling", myColumnDefs, 
46                this.myDataSource, {scrollable:true, width:"30em", height:"10em"}); 
47 
48        // Set "scrollable:true" and set only height string value 
49        this.myDataTableY = new YAHOO.widget.DataTable("yscrolling", myColumnDefsY, 
50                this.myDataSource, {scrollable:true, height:"10em"}); 
51 
52        // Set "scrollable:true" and set only width string value 
53        this.myDataTableX = new YAHOO.widget.DataTable("xscrolling", myColumnDefsX, 
54                this.myDataSource, {scrollable:true, width:"30em"}); 
55    }; 
56}); 
view plain | print | ?

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

More DataTable Control (beta) Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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