Nested Rows inside table with shared headers - Aura Iteration

Question

I'm trying to create a table with nested rows based on nested array data set with following structure:

[ 'key1' : [ 'subKey1' : 'subValue1', 'subKey2' : 'subValue2', ], 'key2' : [ 'subKey1' : 'subValue1' ] ]

I'd like the table to display with shared headings and first column height should span length of inner array for that row. For example:

Instead, I get the following:

My code for this is below:

            <table class="slds-table slds-table--bordered slds-table--cell-buffer">
            <thead>
            <tr class="slds-text-title--caps slds-cell-wrap">
                <th scope="col">
                    <div class="slds-truncate slds-cell-wrap" title="A">A</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-cell-wrap" title="B">B</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-cell-wrap" title="C">C</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-cell-wrap" title="D">D
                    </div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-cell-wrap" title="E">E</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-cell-wrap" title="F">F</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-cell-wrap" title="G">G</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-cell-wrap" title="H">H</div>
                </th>
            </tr>
            </thead>
            <tbody>
            <aura:iteration items="{!v.data}" var="row" indexVar="key">
                <tr>
                    <th scope="row" data-label="A" rowspan="{!row.value.length}">
                        parent{!key+1}
                    </th>
                    <aura:iteration items="{!row.value}" var="subRow" indexVar="num">
                        <th>b{!num+1}</th>
                        <th>c{!num+1}</th>
                        <th>d{!num+1}</th>
                        <th>e{!num+1}</th>
                        <th>f{!num+1}</th>
                        <th>g{!num+1}</th>
                        <th>h{!num+1}</th>
                    </aura:iteration>
                </tr>
            </aura:iteration>
            </tbody>
        </table>

I've tried putting another "tr" element inside the inner iteration but that just lumps everything under one heading. Any ideas?