Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: DataTable Control (beta): Fixed Scrolling

# DataTable Control (beta): Fixed Scrolling

Enabling fixed scrolling on a DataTable keeps the Column headers fixed as the body of the table scrolls. Please note that this feature is not currently compatible with Column sorting or resizeable Columns.

View example in new window.

## Sample Code for this Example

Data:

YAHOO.example.Data = { areacodes: [ {areacode: "201", state: "New Jersey"}, {areacode: "202", state: "Washington, DC"}, {areacode: "203", state: "Connecticut"}, ... ] }

CSS:

/* custom css for this example */ #fixedscrolling { height:20em; } /* customized css for scrolling */ .yui-dt-scrollable { width:30em; /* SET OVERALL WIDTH HERE for ie (make sure columns add up to this total) */ height:30em; /* SET HEIGHT HERE for ie */ } .yui-dt-scrollbody { height:30em; /* SET HEIGHT HERE for non-ie */ *height:auto; /* for ie */ } .yui-dt-scrollable thead { background:#696969; /*dark gray*/ /* ie needs a background color */ color:#fff; } /* SET WIDTHS FOR EACH TH TO HELP ALIGN COLUMNS */ /* IF ALL COLS CAN BE SAME WIDTH USE THIS: .yui-dt-scrollable th, .yui-dt-scrollbody td { width:20em; }*/ /* OTHERWISE SET EACH COL WIDTH EXPLICITLY:*/ .yui-dt-col-areacode { width:10em; } .yui-dt-col-state { width:20em; }

Markup:

<div id="fixedscrolling"></div>

JavaScript:

YAHOO.util.Event.addListener(window, "load", function() { YAHOO.example.Scrolling = new function() { var myColumnDefs = [ {key:"areacode"}, {key:"state"} ]; this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes); this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; this.myDataSource.responseSchema = { fields: ["areacode","state"] }; this.myDataTable = new YAHOO.widget.DataTable("fixedscrolling", myColumnDefs, this.myDataSource, {scrollable:true}); }; });

### 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 (beta) Examples:

- Basic Example
- Progressive Enhancement
- Custom Cell Formatting
- Nested headers
- JSON Data Over XHR
- XML Data Over XHR With POST
- Textual Data Over XHR
- Local XML Data
- Client-side Pagination
- Client-side Sorting
- Server-side Pagination
- Server-side Sorting
- Server-side Pagination and Sorting, with Browser History Manager
- Fixed Scrolling
- Row Selection
- Cell Selection
- Inline Cell Editing
- Context Menu Integration
- Complex Example of Multiple Features
- Datatable with Autocomplete
- Skinning Model

### More DataTable Control (beta) Resources:

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

Copyright © 2007 Yahoo! Inc. All rights reserved.

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