Back to the index of articles and examples

Nested DataTables

Start typing the name of a recording artist in the box above, suggestions should show up right underneath, ordered in decreasing number of published tracks (most popular at the top). You can use the down arrow to go and select any of them and hit Enter when found.

Released albums by that artist will be shown in a table, the latest at the top. Clicking in the [+] sign will expand any of those albums to show its track list. Clicking on the title itself will open up the album description page in a separate tab. More than one album can be expanded at once. All data columns are sortable.

This program uses YQL to fetch the data and also show how to nest several DataTables within a master DataTable.

The artist search only finds complete words, which makes the AutoComplete box seem erratic. This is a limitation in the service that provides the information. Neither YQL, which intermediates the queries, nor this application can improve on the base service.

For this example, the nesting functionality has been encapsulated in a YAHOO.widget.NestedDataTable object that takes the following arguments:

  1. container: container element for the master table
  2. masterColDefs: the columns definitions for the master table
  3. masterDataSource: the DataSource instance for the master table
  4. nestedColDefs: the array of column definitions for the nested tables
  5. nestedDataSource: the DataSource instance for the nested tables
  6. masterOptions: the configuration options for the master table
  7. nestedOptions: (optional) the configuration options for the nested tables

The configuration options for the master table needs to have a generateNestedRequest attribute which should be a function that will receive a reference to the record in the master table being expanded and should return a value that will be used as the initialRequest configuration attribute for the nested DataTable for this record. The nature of such value depends on the type of DataSource used. For a YQLDataSource it should be the YQL statement to send, for an XHRDataSource it would be the URL-arguments to append to the base-URL.

The code has been tested with both client and server side sorting and paging.

API Documentation