0

I am new to Lightning Components and I have 2 Lightning Components (parent-child) where Parent iterates records of the child component.

<lightning:card title="Energy Profiles">
        <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
            <thead>
                <tr class="slds-line-height_reset">
                    <lightning:layout>  
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Months">Months</div>
                        </th>                       
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Days">Days</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="PeakMWh">Peak MWh</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="PeakPercentage">Peak (%)</div>
                        </th>   
                        <th class="" scope="col">
                            <div class="slds-truncate" title="OffPeakMWh">Off-Peak MWh</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="OffPeakPercentage">Off-Peak (%)</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="TotalConsumptionMWh">Total Consumptio MWh</div>
                        </th>    
                        <th class="" scope="col">
                            <div class="slds-truncate" title="DayMZ">Day (MZ)</div>
                        </th> 
                        <th class="" scope="col">
                            <div class="slds-truncate" title="PeakMZA">Peak (MZA)</div>
                        </th>     
                        <th class="" scope="col">
                            <div class="slds-truncate" title="cosf">cosf</div>
                        </th>   
                        <th class="" scope="col">
                            <div class="slds-truncate" title="LFPercentage">LF (%)</div>
                        </th>          
                    </lightning:layout> 
                </tr>
            </thead>
            
            
            <!-- Iterate child records -->
            <tbody>
                <tr class="slds-hint-parent">
                    <aura:iteration items="{!v.records}" var="rec" indexVar="index">                     
                        <lightning:layout> 
                            <c:ChildComponent record="{!rec}"/>
                        </lightning:layout>  
                    </aura:iteration>
                </tr>
            </tbody>
        </table>

And ChildComponent.cmp

 <tr>        
        <lightning:layout>     
            <td><lightning:input value="{!v.record.Month__c}" readonly="true"/></td>   
            <td><lightning:input value="{!v.record.Days__c}" readonly="true"/></td>        
            <td><lightning:input type='number' value="{!v.record.PeakMWh__c}" onchange="{!c.calculate}"/></td>       
            <td><lightning:input type='number' formatter="percent-fixed" value="{!v.record.el_PeakPercentage__c}" disabled="true"/></td>           
            <td><lightning:input type='number' value="{!v.record.OffPeakMWh__c}" onchange="{!c.calculate}"/></td>        
            <td><lightning:input type='number' formatter="percent-fixed" value="{!v.record.el_OffPeakPercentage__c}" disabled="true"/></td>       
            <td><lightning:input type='number' value="{!v.record.TotalConsumption__c}" disabled="true"/></td>       
            <td><lightning:input type='number' value="{!v.record.DayMZ__c}" onchange="{!c.calculate}"/></td>       
            <td><lightning:input type='number' value="{!v.record.PeakMZA__c}" onchange="{!c.calculate}"/></td>       
            <td><lightning:input type='number' value="{!v.record.cosf__c}" onchange="{!c.calculate}"/></td>       
            <td><lightning:input type='number' formatter="percent-fixed" value="{!v.record.LF__c}" disabled="true"/></td>
        </lightning:layout>
    </tr>

My problem is that I can't allign borders between headers and rows from the Child component. What am I missing out?

enter image description here

2
  • 1
    1. i am not sure why useing lightning:layout, please try to remove this tag. 2. I am seeing there are two <tr> inside <tr> from parent component, please remove one <tr> tag
    – Sarvesh
    Sep 28, 2020 at 16:07
  • Hello Sarvesh, you are right, I removed the tags you mentioned and everything works fine!! Sep 29, 2020 at 6:28

0

You must log in to answer this question.

Browse other questions tagged .