I have a table to show a wrapper list of data. Also, collapse/Hide another (Child record list) table onclick of table row.
When I click on a row, the table is showing in the first td length/section only. not full column length. Check the screenshot below.
Here is the markup
<table class="slds-table slds-table_bordered slds-border_right slds-border_left slds-border_top">
<thead>
<tr>
all header colunms td scope="col"</tr>
</thead>
<tbody>
<aura:iteration items="{!invLineItem.subWrapList}" var="childLineItem" indexVar="index">
<tr data-myid="{!childLineItem.invLineItemObj.blusyn__position__c}"
onclick="{!c.expandChildItems}"
style="cursor: pointer;"> <!-- onclick="{!c.expandChildItems}" id="{!childLineItem.blusyn__position__c}"> -->
all rows td scope="row"
</tr>
<table class="slds-table"
id="{!childLineItem.invLineItemObj.blusyn__position__c}"
style="display:none;">
<aura:iteration items="{!childLineItem.subChildInvLineItemList}"
var="subChildLineItem">
<tr style="background-color:gray;">
all rows td scope="row"
</tr>
</aura:iteration>
</table>
</aura:iteration>
</tbody></table>
controller to show and hide the table
expandChildItems : function(component, event, helper){
var positionId = event.currentTarget.dataset.myid;
var x = document.getElementById(positionId);
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
},
hide and collapse function is working fine. Please let me know what can I do to get the table properly show in the main table. Thank you.