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.
Please note that scrolling is currently not supported on Android devices and requires two-finger scroll on iOS.
XY Scrolling
Y Scrolling
X Scrolling
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 | ? |
YUI Logger Output:
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
- Quick Edit
- 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:
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
- YUI Home
- YUI 3
- YUIBlog
- Bug Reports/Feature Requests
- YUI on GitHub
- YUI License
- YUI 2.x Resources
- YUI 2
- YUI 2 Examples
- YUI 2 API Docs
- YUI 2 Discussion Forums
- Dependency Configurator
- YUI Components
- Animation
- AutoComplete
- Browser History Manager
- Button
- Calendar
- Carousel
- Charts
- Color Picker
- Connection Manager
- Container
- Cookie
- DataSource
- DataTable
- Dom
- Drag & Drop
- Element
- Event
- Get
- ImageCropper
- ImageLoader
- JSON
- Layout Manager
- Logger
- Menu
- Paginator
- Profiler
- ProfilerViewer
- ProgressBar
- Resize
- Rich Text Editor
- Selector
- Slider
- Storage
- StyleSheet
- SWF
- SWFStore
- TabView
- TreeView
- Uploader
- Yahoo Global Object
- YUI Loader
- YUI Test
- Reset CSS
- Base CSS
- Fonts CSS
- Grids CSS
Copyright © 2013 Yahoo! Inc. All rights reserved.