function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
RbnRbn 

Expand collapse for parent and child rows in a html table in Lightning

Hello everyone,


I am looking to have an expand collapse for the below html table (Parent should have all the childs beneath it and when collapsed it should display all the childs, by default it should show only the parent records).

User-added image
Below is the component code.

 

<aura:iteration items="{!v.allProducts}" var="prod" indexVar="itemIndex">
            <!--<lightning:buttonIcon value="{!itemIndex}"  iconName="{!item.expanded?'utility:chevrondown':'utility:chevronright'}" />-->
            <tr>
                <aura:if isTrue="{!!prod.isGreyRow }">

                    <td class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered slds-border_left slds-border_right">{!prod.name} </td>
                    <td class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered slds-border_left slds-border_right  width=5px">{!prod.F2Actuals} </td>
                    <td class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered slds-border_left slds-border_right">{!prod.F1Actuals} </td>
                    <td class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered slds-border_left slds-border_right"> {!prod.FActuals}</td>
                    <td class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered slds-border_left slds-border_right">{!prod.FActualsYTD}  </td>
</aura:if>
     </tr>
     </aura:iteration>
    </table>

Controller code:

({
getRevenueMetricData:function(component, event, helper){
    var action = component.get("c.getTableRowsFromClientPlanId");
    action.setParams({
        "planId": component.get('v.gbmid')
    });     
    action.setCallback(this,function(response){
        var state = response.getState();
        if (state === "SUCCESS") {
            var data =response.getReturnValue();
            component.set("v.allProducts", data);

            }
             }

        else if (state  ==="null" || state  ===undefined || state  ==="ERROR"  ) {
            this.handleException(component,response.getError());}
    });
    $A.enqueueAction(action);
},


I am aware that this expand collapse can be achieved by lighting :treegrid, however my requirement doesn't satidfy if i amke use of tree grid.

Hence i have to go with the html table... Everything is coming correctly data wise. I am struck getting the expand and collapsible functioning.

Any suggestions in this regard will be really helpful.

Regards,
Rabin

 

sitogels prediksi togelsitogels prediksi togel
sitogels adalah situs prediksi togel (http://sitogels.net/) terlengkap yang menyediakan pasaran togel sgp, prediksi hk