DataTable Widget :: Scrolling

Sample Code

Data:

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.

Markup:

JavaScript:

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