Example: DataTable - Scrolling (YUI Library)

# DataTable Widget :: Scrolling

### Sample Code

Data:

YAHOO.example.Data.areacodes = [ {areacode: "201", state: "New Jersey"}, ..., {areacode: "989", state: "Michigan"} ];

CSS:

All of the CSS rules shown below build upon the foundational CSS that is provided with DataTable. When a DataTable's `scrollable` property is set to `true`, the classes `yui-dt-scrollable` and `yui-dt-scrollbody` are applied to the appropriate elements by the DataTable. These classes are defined in the foundational CSS, and this example shows how to modify them to get specific characteristics with respect to column width, table height, and so on.

/* 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; /* for ie */ } /* 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-scrollable .col1 { width:10em; /* this column was assigned "col1" as "className" */ } .yui-dt-scrollable .col2 { width:20em; /* this column was assigned "col2" as "className" */ } /* custom css*/ #scroll {margin:1em;} #scroll table {border-collapse:collapse;} #scroll th, #scroll td {border:1px solid #000;} #scroll th {background-color:#696969;color:#fff;}/*dark gray*/ #scroll .yui-dt-odd {background-color:#eee;} /*light gray*/

Markup:

<div id="scroll"></div>

JavaScript:

To make a DataTable instance scrollable, set the `scrollable` property to `true` at instantiation (as in line 13 below).

var myColumnHeaders = [ {key:"areacode",className:"col1"}, {key:"state",className:"col2"} ]; var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders); var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; myDataSource.responseSchema = { fields: ["areacode","state"] }; var myDataTable = new YAHOO.widget.DataTable("scroll",myColumnSet,myDataSource,{scrollable:true});