1

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. enter image description here

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.

1

Fundamentally you need to ensure the structure generated is valid, ensuring that the nested table is itself in a td, and that the nested table's containing td is set to span all the (relevant) columns in the outer table. For example, when generating an outer table with three columns, you can have the inner table span all three by doing something like this (minimum markup required just to illustrate):

<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td colspan="3">
      <table style="width: 100%">
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

The crucial point here is that the nested table is requested to take 100% of the available width and that the available width is the span of all columns in the outer table. If I add border="1" to the two tables and render my example markup you see:

table with spanning nested table

2
  • Have you tried adding style="display:block" to the inner table and try? It will behave like the screenshot that I shared in the question. – AshSFcloud Jan 28 at 7:41
  • I don't understand. If you have to have a nested table and you want it to take up the full width of the outer table then it must be in a td with a colspan and needs the 100% width. Adding "display:block" makes zero difference to this. That said, I think you probably should be considering rendering this without tables at all, using flexbox or similar HTML5 capabilities because you cannot otherwise sensibly keep the inner data columns the same widths as the outer ones. – Phil W Jan 28 at 8:26
1

Wrap your inner table in a table row + td, and make it 100%

<tr><td>
  <table class="slds-table" style="display:none; width:100%;">
    ...inner table stuff     
  </table>
</tr></td> 

You may also need to specify the colspan in the td if it doesn't fill its parent.

1
  • Caspar, It will work fine if it is a direct view. but I am adding style class from controller to hide and show the table. when onclick is invoked, the issue is still there. – AshSFcloud Jan 28 at 7:39

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.