How to expand data table rows in YUI2

I've been assigned to work on a data table solution which allows user to click on an arrow to expand and display a drop-down row for details.

> Customers                  123

  - Melbourne                 (2)

  - Brisbane                    (119)

  - Darwin                      (2)

- Processing                   5

Requirement:

- Not every row needs a drop down, in this case, only the first row

- A grand total of all the items' total is displayed at the parent (bold) row

- Data Table is preferred to display the data

However, my solution falls between DataTableControl: Row Expansion and Nested DataTables.  I use this version of rowexpansion.js for my assignment.

Solution

End result

References

- If DataTable's width is set to 100%, column width will be ignored in YUI2.  Here's the workaround.

1. Set the CSS property "width: 100%" for either the DataTable's table tag, or the div that contains the DataTable.
2. Set the "width" DataTable column property to the number of pixels you want specifically per column.
3. Set the "minWidth" DataTable column property to a ridiculously enormous number per columns you want auto-sized.

var myColumnDefs = [
  {key:"foo", width: 20},
  {key:"bar", minWidth: 999999 },
];

new YAHOO.widget.DataTable("someContainer", myColumnDefs, myDataSource);