1

I have an object 'AccountLineItem' . I have a field 'System' and a boolean field 'isHeader'. I am trying to group by system field where isHeader =true . I have a Map<String,List> .Which I am returning to my lighningComponent . I am getting a table with correct grouping and records . The issue I am facing is of alignment .

enter image description here

The way I am using component is

<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
      
      <table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_fixed-layout">
            
            <thead>
               <tr class="slds-text-title">
                 <th scope="col" style="width:6.25rem">
                        <div class="slds-cell-wrap" title="Header1">Action</div>
                    </th>
                    
                    <th scope="col" style="width:6.25rem">
                        <div class="slds-cell-wrap" title="Header2">GBU</div>
                    </th>
                    <th scope="col" style="width:6.25rem">
                        <div class="slds-cell-wrap" title="Header3">PL</div>
                    </th>
                    <th scope="col" style="width:6.25rem">
                        <div class="slds-cell-wrap" title="Header4">SubPL</div>
                    </th>
                    
                </tr>
            </thead>
            <br/>
            <br/>
            <tbody>
            
            <aura:iteration items="{!v.mapSystemToAccList}" var="PNumber">
                 
                    <div class="slds-grid slds-gutters">
                       <div class="slds-col">
                    <strong><p>{!PNumber.key}</p></strong>                         
                       </div>
                    
                        
                    </div>
                   <tr class="slds-hint-parent">
                        <th scope="row" style= "width:6.25rem">
                            <lightning:input type="checkbox"  id="{!PNumber.value}" onchange="{!c.selectQuoteLine}" aura:id="boxPackLanguages" />
                        </th>
                    
                        <aura:iteration items="{!PNumber.value}" var="AccLIData" indexVar= "item">
                           <tr>
                            <!--  <div class="slds-grid_vertical slds-gutters_xxx-small">-->
                            <td scope="row" data-label="GBU" style= "width:10.25rem">
                                <div  class="slds-cell-wrap">
                                    <ui:outputText value="{!AccIData.Header1__c}"/>
                                </div>
                            </td>
                            
                            <td scope="row" style= "width:6.25rem">
                                <div  class="slds-cell-wrap">
                                    <ui:outputText value="{!AccIData.HEader2__c}"/>
                                </div>
                            </td>
                            <td scope="row" style= "width:6.25rem">
                                <div  class="slds-cell-wrap">
                                    <ui:outputText value="{!AccIData.Header3__c}"/>
                                </div>
                            </td>
                            <td scope="row" style= "width:6.25rem">
                                <div  class="slds-cell-wrap">
                                    <ui:outputText value="{!AccIData.Header4__c}"/>
                                </div>
                            </td>
                           
                            </tr>
                        </aura:iteration> 
                        
                    </tr>
                </aura:iteration>
                
            </tbody>
            
        </table>

Please let me know how can I align records as per header in this scenario

1
  • 2
    Any reason why you're not using <lightning:layout>? Jan 21 at 16:15
0

I think the main thing wrong is that you have a div in the table flow.

Change this:

<div class="slds-grid slds-gutters">
  <div class="slds-col">
     <strong><p>{!PNumber.key}</p></strong>                         
  </div>
</div>

To a <tr colspan="4">

Once you have a proper table structure, I think the table with work correctly. Essentially you can't have anything other than th, tbody or tr in your table.... (there may be a couple of other extra obscure tags you can add also)

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.