Enabling scrolling

In this recipe, we will implement a scrolling data table, an alternative method to paging that allows us to better handle the display of large data sets which would be cumbersome to display in full.

We will do this by using an alternative, but similarly defined YUI control: ScrollingDataTable.

Getting ready

Open datatable.js file for editing. We will modify the definition of the dataTable object.

How to do it...

Modify the dataTable definition to match the following code:

var dataTable = new YAHOO.widget.ScrollingDataTable ("container", columns, dataSource, {
height: "150px"
});

How it works...

We used the alternative control ScrollingDataTable, passing in a configuration object as the fourth argument. This configuration object simply sets a height for the DataTable, and any content that overflows this height will scroll. Similarly, we may set a width to enable horizontal scrolling, or both a height and a width to enable both horizontal and vertical scrolling.

The following screenshots...