You need to sign in to do that
Don't have an account?
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).
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