+ Start a Discussion
Sujendran Sundarraj 8Sujendran Sundarraj 8 

collapse a table row inside a table in lightning component

Hello all, 
I have a requirement in which I need to display list of account records and each account record should hold its contact records and each contact records will also have some other information in a seperate row below. 
I want to have a collapisible buttonicon on each account records and contact reocrds. when I click account record collapisible button it should show or hide its contacts, similiarly when I click on contact's collapsible icon it should show or hide some contact below it. 
This is my sample code. 
 
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" controller="Accountcon" access="global" >
	<aura:attribute name="accounts" type="Account[]"></aura:attribute>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler>
    <table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <tr class="slds-line-height_reset">
            <tr class="slds-truncate" ><b>Show</b></tr>
        <td class="slds-truncate" ><b>Name</b></td>               
        <td class="slds-truncate" ><b>Type</b></td>
        </tr>
        <aura:iteration items="{!v.accounts}" var="ac" indexVar="mylocIndex">
        <tr class="slds-hint-parent">
            <td> <lightning:buttonIcon value="{!mylocIndex}" iconName="{!ac.expanded?'utility:chevronright':'utility:chevrondown'}" onclick="{!c.toggle}" ></lightning:buttonIcon>
            </td>
        <td class="slds-truncate">{!ac.Name}</td>    
        <td class="slds-truncate">{!ac.Type}</td>
            </tr>
            <aura:if isTrue="{!ac.expanded}">
               <tr class="slds-line-height_reset">
                    <td class="slds-truncate" ><b>show</b></td>
            <td class="slds-truncate" ><b>Last Name</b></td>
                       
        <td class="slds-truncate" ><b>Email</b></td>
        </tr>
                    <b>Contact details</b>
            <aura:iteration items="{!ac.Contacts}" var="con">
               
               <tr class="slds-hint-parent">
                   <td> <lightning:buttonIcon value="{!mylocIndex}" iconName="{!ac.expanded?'utility:chevronright':'utility:chevrondown'}" onclick="{!c.toggle}" ></lightning:buttonIcon>
            </td>
                   <td class="slds-truncate">
                {!con.LastName}</td>
                   
                   <td class="slds-truncate">{!con.email}</td>
                </tr>
                <tr>this section should be shown or hidden onclick of collapsible button on the contact record </tr>
               </aura:iteration>
            </aura:if>
        
         </aura:iteration>
        </table>
</aura:component>




Controller.js

({
	doInit : function(component, event, helper) {
		var action = component.get("c.getacct");
        action.setCallback(this, function(action){
            component.set("v.accounts", action.getReturnValue());
        });
        $A.enqueueAction(action);
	},
     toggle :function(component, event, helper){
       
         var items = component.get("v.accounts"); 
        
        var index = event.getSource().get("v.value");
       items[index].expanded = !items[index].expanded;
       component.set("v.accounts", items);
        
        
    }
})


Apex class: 

public class AccountsController {
      @AuraEnabled
      public static List <Account> getAccounts() {
        return [SELECT Id, name, industry, Type, NumberOfEmployees, TickerSymbol, Phone, (select name, email, phone from contacts) FROM Account ORDER BY createdDate ASC limit 10];
      }
}

In my code when I click on the collapsible icon in contact it hides the entire contacts section. any help on this would be much appreciated. 
Thank you. 
LuisMRochaLuisMRocha
I think the toggle,

You are using the {!mylocIndex} for contacts toggle which is the same one that is being used for the accounts. You will need to seperate the expansion. 
    <lightning:buttonIcon value="{!mylocIndex}" iconName="{!ac.expanded?'utility:chevronright':'utility:chevronright'}" onclick="{!c.toggle}" ></lightning:buttonIcon>
                        
Sujendran Sundarraj 8Sujendran Sundarraj 8
Hello @LuisMRocha, 
Thank you for your reply, 
I tried but I cant get the exact output. Can you please help me on that. 
Thank you. 
LuisMRochaLuisMRocha
Hello Sujendran, 

I would say instead making this fully custom,

I would use the accordion:
https://developer.salesforce.com/docs/component-library/bundle/lightning:accordionSection/example

I created this you can add the table components if you want to. I left some comments for sections like the Open Sections:

Example

Here is the code:
Component:
<aura:component implements="forceCommunity:availableForAllPageTypes" controller="Accountcon" access="global" >
    <aura:attribute name="accounts" type="Account[]"></aura:attribute>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler>
 
    
    <aura:attribute name="activeSections" type="List" default="['A','C']" />
    <aura:attribute name="activeSectionsMessage" type="String" default="" />
    
    <aura:attribute name="activeSubSections" type="List" default="['A','C']" />
    <aura:attribute name="activeSubSectionsMessage" type="String" default="" />

    <p>{! v.activeSectionsMessage }</p>
    <p>{! v.activeSubSectionsMessage }</p>
    
    
    <lightning:accordion allowMultipleSectionsOpen="true"
                         onsectiontoggle="{! c.handleSectionToggle }"
                         activeSectionName="{! v.activeSections }" >
        <aura:iteration items="{!v.accounts}" var="ac" indexVar="mylocIndex">
            <lightning:accordionSection name="{!ac.Name}" label="{!ac.Name}">
                <aura:set attribute="body">
                    Type: {!ac.Type}
                    <lightning:accordion allowMultipleSectionsOpen="true"
                                         onsectiontoggle="{! c.handleSubSectionToggle }"
                                         activeSectionName="{! v.activeSubSections }" >
                        <aura:iteration items="{!ac.Contacts}" var="con">
                            <lightning:accordionSection name="{!con.LastName}" label="{!con.LastName}">
                                <aura:set attribute="body">
                                    {!con.Email}
                                </aura:set>
                            </lightning:accordionSection>
                        </aura:iteration>
                    </lightning:accordion>
                </aura:set>
            </lightning:accordionSection>
        </aura:iteration>
    </lightning:accordion>
</aura:component>

Controller:
({
    doInit : function(component, event, helper) {
        var action = component.get("c.getAccounts");
        action.setCallback(this, function(action){
            console.log(action.getReturnValue());
            component.set("v.accounts", action.getReturnValue());
        });
        $A.enqueueAction(action);
    },
    handleSectionToggle: function (cmp, event) {
        var openSections = event.getParam('openSections');

        if (openSections.length === 0) {
            cmp.set('v.activeSectionsMessage', "All sections are closed");
        } else {
            cmp.set('v.activeSectionsMessage', "Open sections: " + openSections.join(', '));
        }
    },
    handleSubSectionToggle : function (cmp, event) {
        var openSections = event.getParam('openSections');

        if (openSections.length === 0) {
            cmp.set('v.activeSubSectionsMessage', "All sections are closed");
        } else {
            cmp.set('v.activeSubSectionsMessage', "Open sections: " + openSections.join(', '));
        }
    }
})

Apex Class:
public without sharing class Accountcon {
    @AuraEnabled
    public static List <Account> getAccounts() {
        return [SELECT name, industry, Type, NumberOfEmployees, TickerSymbol, Phone, (select name, Title, LastName, email, phone from contacts) FROM Account ORDER BY createdDate ASC limit 10];
    }
}

This works in my org, you can implement this and let me know if this works out for you. I think this will be the simplest way with reusable slds components. Good luck! :) 
 
jon grudenjon gruden
are you join the acme market survey?   Acme Listens Survey (https://checkthis.today/acme-survey-www-acmemarketssurvey-com/)  Acme Market Survey (https://checkthis.today/acme-survey-www-acmemarketssurvey-com/)