0

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:

enter image description here

Instead, I get the following: enter image description here

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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.