YUI Library Home

Site Search (YDN & YUIBlog):

# 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 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

## Y Scrolling

## 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:

/* No custom CSS. */

Markup:

<div id="xyscrolling"></div> <div id="yscrolling"></div> <div id="xscrolling"></div>

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 "scrollable:true" and set width and height string values this.myDataTableXY = new YAHOO.widget.DataTable("xyscrolling", myColumnDefs, this.myDataSource, {scrollable:true, width:"30em", height:"10em"}); // Set "scrollable:true" and set only height string value this.myDataTableY = new YAHOO.widget.DataTable("yscrolling", myColumnDefsY, this.myDataSource, {scrollable:true, height:"10em"}); // Set "scrollable:true" and set only width string value this.myDataTableX = new YAHOO.widget.DataTable("xscrolling", myColumnDefsX, this.myDataSource, {scrollable:true, 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:

- Basic Example
- Progressive Enhancement
- Custom Cell Formatting
- Conditional row coloring
- Nested Headers
- JSON Data Over XHR
- XML Data Over XHR With POST
- Textual Data Over XHR
- Local XML Data
- Adding and Deleting Rows
- Client-side Pagination
- Client-side Sorting
- Server-side Pagination and Sorting for Dynamic Data
- XY-scrolling, Y-scrolling, and X-scrolling
- Row Selection
- Cell Selection
- Inline Cell Editing
- Context Menu Integration
- Showing, Hiding, and Reordering Columns.
- Highlighting Cells, Rows, or Columns
- Complex Example of Multiple Features
- Datatable with Autocomplete
- Skinning Model
- Configuring the Paginator (included with examples for Paginator)
- Complex Application (included with examples for Layout Manager)

### More DataTable Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

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