The Rating.AverageRating values from the YQL response are displayed as YUI ProgressBars. The YQL query for this example is:

which can be tested by pasting it into the YQL Console. We are using YQLDataSource, a subclass of DataSource to handle the communication with YQL for us.

The code to build the DataTable on that query is:

We create a simple DataTable with the columns Title, Address and Phone as simple text fields that are displayed just as they are received. A fourth column receives data held in the nested field Rating.AverageRating. We use a custom formatter to render ProgressBars instead of showing the plain numbers. All columns are sortable, even the Ratings column.

The ratingFormatter is the function that will create the ProgressBars:

var pbs = []; var ratingFormatter = function (elLiner, oRecord, oColumn, oData) { var pb = new YAHOO.widget.ProgressBar({ width:'90px', height:'18px', maxValue:5, className:'ratings', value:oData }).render(elLiner); pbs.push(pb); };

The core of it is the creation of the ProgressBar 90px wide and 18px high. We set this size because our star image is a 18-pixel square and we want to fit up to five stars horizontally. Five is, indeed, the maxValue that the rating might reach. We add a className "ratings" to the widget, which will help us with some formatting details and, finally, we set the current value for the progressBar to the cell value.

Every time the DataTable is sorted or redrawn for any reason (such as call to the render method or paging), the formatter function will be called again. As with any widget, the ProgressBar might take resources that might not be automatically cleared by the garbage collector, so it is vital to call destroy method to make sure all such resources are cleared. We store each ProgressBar instance in the array pbs. Before any render, we iterate over this array and destroy every instance we have stored.

We have applied the yui-skin-sam as a skin for all the widgets of the page, (the DataTable and ProgressBars), so we need to override some of these settings in order to set the stars images. The stars come from a two images (a red star and a gray star) which are tiled to fill the allotted space. We gave the ratings className to all the ProgressBars as an argument at instantiation, so we can use .yui-skin-sam .ratings as a selector in our custom styles:

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.