YUI Library Examples: DataTable Control: XY-scrolling, Y-scrolling, and X-scrolling
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.
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 | ? |
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 | ? |
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 Logger Output:
Logger Console
INFO 3312ms (+0) 1:40:08 PM:
DataTable instance yui-dt2
Post-render routine executed
INFO 3312ms (+1) 1:40:08 PM:
DataTable instance yui-dt2
DataTable rendered
INFO 3311ms (+1) 1:40:08 PM:
DataTable instance yui-dt1
Post-render routine executed
INFO 3310ms (+0) 1:40:08 PM:
DataTable instance yui-dt1
DataTable rendered
INFO 3310ms (+0) 1:40:08 PM:
DataTable instance yui-dt0
Post-render routine executed
INFO 3310ms (+24) 1:40:08 PM:
DataTable instance yui-dt0
DataTable rendered
INFO 3286ms (+1) 1:40:08 PM:
DataTable instance yui-dt2
DataTable message hidden
INFO 3285ms (+0) 1:40:08 PM:
DataTable instance yui-dt2
DataTable rendering...
INFO 3285ms (+0) 1:40:08 PM:
RecordSet instance yui-rs2
Set 10 Record(s) at index 0
INFO 3285ms (+0) 1:40:08 PM:
DataSource instance0
Received live data response for "null"
INFO 3285ms (+0) 1:40:08 PM:
DataSource instance0
Making connection to live data for "null"
INFO 3285ms (+15) 1:40:08 PM:
DataTable instance yui-dt2
DataTable showing message: Loading...
WARN 3270ms (+0) 1:40:08 PM:
DataTable instance yui-dt2
Could not find DragDrop for resizeable Columns
INFO 3270ms (+1) 1:40:08 PM:
DataTable instance yui-dt2
TH cells for 6 keys created
INFO 3269ms (+1) 1:40:08 PM:
DataTable instance yui-dt2
Accessibility TH cells for 6 keys created
INFO 3268ms (+10) 1:40:08 PM:
RecordSet instance yui-rs2
RecordSet initialized
INFO 3258ms (+0) 1:40:08 PM:
ColumnSet instance yui-cs2
ColumnSet initialized
INFO 3258ms (+1) 1:40:08 PM:
DataTable instance yui-dt1
DataTable message hidden
INFO 3257ms (+0) 1:40:08 PM:
DataTable instance yui-dt1
DataTable rendering...
INFO 3257ms (+0) 1:40:08 PM:
RecordSet instance yui-rs1
Set 10 Record(s) at index 0
INFO 3257ms (+0) 1:40:08 PM:
DataSource instance0
Received live data response for "null"
INFO 3257ms (+1) 1:40:08 PM:
DataSource instance0
Making connection to live data for "null"
INFO 3256ms (+4) 1:40:08 PM:
DataTable instance yui-dt1
DataTable showing message: Loading...
WARN 3252ms (+0) 1:40:08 PM:
DataTable instance yui-dt1
Could not find DragDrop for resizeable Columns
INFO 3252ms (+3) 1:40:08 PM:
DataTable instance yui-dt1
TH cells for 6 keys created
INFO 3249ms (+0) 1:40:08 PM:
DataTable instance yui-dt1
Accessibility TH cells for 6 keys created
INFO 3249ms (+0) 1:40:08 PM:
RecordSet instance yui-rs1
RecordSet initialized
INFO 3249ms (+1) 1:40:08 PM:
ColumnSet instance yui-cs1
ColumnSet initialized
INFO 3248ms (+7) 1:40:08 PM:
DataTable instance yui-dt0
DataTable message hidden
INFO 3241ms (+0) 1:40:08 PM:
DataTable instance yui-dt0
DataTable rendering...
INFO 3241ms (+1) 1:40:08 PM:
RecordSet instance yui-rs0
Set 10 Record(s) at index 0
INFO 3240ms (+1) 1:40:08 PM:
DataSource instance0
Received live data response for "null"
INFO 3239ms (+0) 1:40:08 PM:
DataSource instance0
Making connection to live data for "null"
INFO 3239ms (+3) 1:40:08 PM:
DataTable instance yui-dt0
DataTable showing message: Loading...
WARN 3236ms (+0) 1:40:08 PM:
DataTable instance yui-dt0
Could not find DragDrop for resizeable Columns
INFO 3236ms (+2) 1:40:08 PM:
DataTable instance yui-dt0
TH cells for 6 keys created
INFO 3234ms (+12) 1:40:08 PM:
DataTable instance yui-dt0
Accessibility TH cells for 6 keys created
INFO 3222ms (+0) 1:40:08 PM:
RecordSet instance yui-rs0
RecordSet initialized
INFO 3222ms (+2) 1:40:08 PM:
ColumnSet instance yui-cs0
ColumnSet initialized
INFO 3220ms (+371) 1:40:08 PM:
DataSource instance0
DataSource initialized
INFO 2849ms (+2849) 1:40:07 PM:
LogReader instance0
LogReader initialized
INFO 0ms (+0) 1:40:05 PM:
global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
DataTable Control Examples:
- Basic Example
- Progressive Enhancement
- Custom Cell Formatting
- Conditional row coloring
- Nested Headers
- JSON Data Over XHR
- XML Data Over XHR With POST
- XML Data with XPath
- Textual Data Over XHR
- Polling the DataSource
- Adding, Updating, and Deleting Rows
- Client-side Pagination
- Client-side Sorting
- Server-side Pagination and Sorting for Dynamic Data
- Integrating Browser History Manager with Server-side Pagination and Sorting
- XY-scrolling, Y-scrolling, and X-scrolling
- Row Selection
- Cell Selection
- Inline Cell Editing
- Showing, Hiding, and Reordering Columns.
- Highlighting Cells, Rows, or Columns
- Reorder Rows with Drag and Drop
- Row Expansion
- Context Menu Integration
- Configuring the Paginator (included with examples for Paginator)
- TabView Integration
- Complex Example of Multiple Features
- Client-side Filtering of Local Data
- Filtering of Dynamic Data
- Datatable with Autocomplete
- Skinning Model
- Ratings (included with examples for ProgressBar Control)
- YQLDataSource (included with examples for DataSource Utility)
- Complex Application (included with examples for Layout Manager)
More DataTable Control Resources:
- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)
- Yahoo! UI Library
- Home (external)
- YUIBlog (external)
- YUI Discussion Forum (external)
- YUI on GitHub
- API Documentation
- Functional Examples
- YUI Theater (external)
- YUI License (external)
- YUI Functional Examples
- Animation
- AutoComplete
- Browser History Manager
- Button
- Calendar
- Carousel
- Charts
- Color Picker
- Cookie
- Connection Manager
- Container
- DataTable
- Dom
- Drag & Drop
- Event
- Get
- ImageCropper
- ImageLoader
- JSON
- Layout Manager
- Logger
- Menu
- Paginator
- Profiler
- ProfilerViewer
- ProgressBar
- Resize
- Rich Text Editor
- Selector
- Slider
- Storage
- SWF
- SWFStore
- Stylesheet
- TabView
- TreeView
- Uploader (experimental)
- YAHOO Global Object
- YUI Loader
- YUI Test
- Reset CSS
- Base CSS
- Fonts CSS
- Grids CSS
- YUI Articles on the YUI Website
- YUI FAQ (external)
- Graded Browser Support (external)
- Bug Reports/Feature Requests (external)
- Serving YUI Files from Yahoo! (external)
- Security Best Practices (external)
Copyright © 2010 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings