[SalesForce] Displaying a repeat within a repeat in VF page

Based on my earlier question i had built up a wrapper class to display in the format below.

  Area            Allocated   Currently available
 - New York       20              15
    Vendor1       10              10
    Vendor2       10              5

 - Philadelphia   10              8
    Vendor1       5               5
    Vendor2       5               3

public class HDDevicesbyArea
    {
        public string HD_Area{get;set;}
        public double HD_Current {get;set;}
        public string HD_Allocated {get; set;}
        List<HDDevicesbyVendor> ListHDDevicesbyVendor {get; set;}
        public HDDevicesbyArea ( string HD_Area_v, string allocated_v, List<HDDevicesbyVendor> ListHDDevicesbyVendor_v )
        {
         // constructor code
        }

How should i have my VF page to set show the inner list also show in the same columns?
I have a Lsit of class HDDevicesArea which i would repeat in VF page. I also have List ListHDDevicesbyVendor within the class HDDevicesbyArea

I need to show ListHDDevicesbyVendor using the same columns as HDDevicesbyArea

<apex:pageBlock id="theResultBlock" >
    <apex:pageBlockSection id="ResultSection" columns="1" >
     <table width="100%" cellpadding ="1" cellspacing = "1">
        <tr>
            <th>Area / Vendor</th>
            <th>Allocation</th>
            <th>Current</th>

        </tr>
              <apex:repeat value="{!HDDevicesbyArea}" var="HD" id="theRepeat">
        <tr>
              <td><apex:outputText value= "{!HD.HD_Vendor"} /></td>
              <td><apex:outputText value= "{!HD.HD_Current"}</td>
              <td><apex:outputText value= "{!HD.HD_Allocated"}</td>
            </tr>
            </apex:repeat>
        </table>
    </apex:pageBlockSection>
 </apex:pageBlock>

Thanks in Advance

Best Answer

I'd avoid using datatable as per your comments, as its quite difficult to do anything other than iterate a common set of data and output a column per property. I think this is simply a matter of iterating the inner list and generating its own HTML table rows. E.g.

<apex:repeat value="{!HDDevicesbyArea}" var="HD" id="theRepeat">
  <tr>
     <td><apex:outputText value= "{!HD.HD_Area"} /></td>
     <td><apex:outputText value= "{!HD.HD_Current"}</td>
     <td><apex:outputText value= "{!HD.HD_Allocated"}</td>
  </tr>

  <apex:repeat value="{!HD.ListHDDevicesbyVendor}" var="dev">
    <tr>
     <td><apex:outputText value= "{!dev.HD_Vendor}" /></td>
     <td><apex:outputText value= "{!dev.HD_Current"}</td>
     <td><apex:outputText value= "{!dev.HD_Allocated"}</td>
    </tr>
  </apex:repeat>
</apex:repeat>

That way the first row in the repeat contains the area and current/allocated, and the following rows contain the vendor and the current/allocated.