-1

enter image description hereI have a component where the data is displayed using html data table aura:iteration. However the header is not aligned with the body. I have tried with many slds css but no success. Can anyone pls help with this issue?

      <table class="slds-table slds-table_fixed-layout slds-table_striped">
            <thead>
                <lightning:recordEditForm aura:id="recordEditForm" 
                                          recordTypeId="{!recData.RecordTypeId}"
                                          objectApiName="mstns__c">
                    <tr class="slds-text-title_caps">
                        <th scope="col" id="Select">
                            <div class="slds-truncate" title="Select">Select</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title=" Name">Milestone Name</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="Status">Status</div>
                        </th>

                    </tr></lightning:recordEditForm>
            </thead>               
            <tbody>
                <lightning:accordion aura:id="accordion" activeSectionName="Milestone Records">
                    <aura:iteration items="{!v.dataRows}" var="recData">
                        <lightning:recordEditForm aura:id="recordEditForm" 
                                                  recordTypeId="{!recData.RecordTypeId}"
                                                  objectApiName="mstns__c">
                            <tr>
                                <aura:if isTrue="{!v.objectRec == 'Opportunity'}">
                                    <td scope="row" data-label="Select">
                                        <!-- Checked for all new Milestones -->
                                        <ui:inputCheckbox aura:id="milestoneSelected" value="true"/>
                                    </td>
                                    <aura:set attribute="else">                                
                                        <th scope="row" data-label="Select">
                                            <!-- Checked for existing Milestones and greyed for completed Milestones-->   
                                            <aura:if isTrue="{!if(not(empty(recData.Id)), true,false) }">       

                                                <ui:inputCheckbox aura:id="milestoneSelected_mp" value="true" disabled="{!and(recData.Status__c=='Completed',recData.Close_Date__c!=null)}"/>
                                                <aura:set attribute="else">
                                                    <ui:inputCheckbox aura:id="milestoneSelected_mp" value="false" disabled="{!and(recData.Status__c=='Completed',recData.Close_Date__c!=null)}"/>
                                                </aura:set>
                                            </aura:if>
                                        </th></aura:set></aura:if>
                                <td scope="row" data-label="Milestone Name">
                                    <lightning:formattedText value="{!recData.Milestone_Name__c}" required="false"/>
                                </td>
                                <td data-label="Status">

                                    <lightning:inputField fieldName="Status__c" value="{!recData.Status__c}" disabled="{!and(recData.Status__c=='Completed',recData.Close_Date__c!=null)}" class="cellUp"/>       </td>  

                            </tr>
                        </lightning:recordEditForm>

                    </aura:iteration>   </lightning:accordion>
                <lightning:button variant="brand" label="Submit" title="Submit the records" onclick="{!c.clickSubmit}" />
                <!--<lightning:button variant="Neutral" label="Previous" title="Go to previous screen" onclick="{!c.clickPrevious}" />-->
                <lightning:button variant="Neutral" label="Cancel" title="Cancel" onclick="{!c.Cancel}" />
            </tbody>
        </table>
0

Remove the lightning:recordEditForm and lightning:accordion elements from your code. They are not compatible with tables. If you need a collapsible table, consider using lightning:treeGrid instead. To save/load data, you can use force:recordData or an Apex Controller.

  • I need lightning:recordEditForm for showing up the table as a form, giving the ability to the user to edit values. I am fetching/creating the data using an apex controller and passing the data to the table. This lightning:accordion was just a try. I can remove this. @sfdcfox – Kanikala Nov 3 '18 at 5:41
  • 1
    @Kanikala Again, that's not how the lightning:recordEditForm works; it's used to look just like a normal record edit form in the UI. You're not even using the form correctly; it is meant to be used with lightning:inputField. As written, you're not doing yourself any favors. – sfdcfox Nov 3 '18 at 5:43

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.