Expand/Collapsible complete table row in lightning component

Copy paste this code as it is you can get the view, later you can change this per your Requirement.

Component code:

<aura:component controller="AccountsController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
 
    <aura:attribute name="items" type="Object[]" default="[]" />
    <aura:attribute name="idvalue" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
 
    <table>
        <tr>
            <th >Detail</th>
            <th >Origin</th>
            <th >Destination</th>
            <th ># of Trips Per Week</th>
            <th >Minimum Charge</th>
            <th >Awarded?</th>
            <th >Detail</th>
            <th >Origin</th>
            <th >Destination</th>
            <th ># of Trips Per Week</th>
        </tr>
     
     
        <aura:iteration items="{!v.items}" var="item" indexVar="itemIndex">
            <tr>
                <td scope="row" >
                    <div >
                        <lightning:buttonIcon value="{!itemIndex}" onclick="{!c.toggle}" iconName="{!item.expanded?'utility:chevrondown':'utility:chevronright'}" />
                    </div>
                </td>             
                <td scope="row">
                    <div class="slds-cell-wrap" >{!item.Name}</div>
                </td>
                <td scope="row">
                    <div class="slds-cell-wrap">{!item.Name}</div>
                </td>             
                <td scope="row">
                    <div class="slds-cell-wrap">{!item.Name}</div>
                </td>
                <td scope="row">
                    <div class="slds-cell-wrap">{!item.Name}</div>
                </td>
                <td scope="row" >
                    <div class="slds-cell-wrap">{!item.Name}</div>
                </td> 
                <td scope="row" >
                    <div class="slds-cell-wrap">{!item.Name}</div>
                </td>
                <td scope="row" >
                    <div class="slds-cell-wrap">{!item.Name}</div>
                </td>
                <td scope="row" >
                    <div class="slds-cell-wrap">{!item.Name}</div>
                </td>
                <td scope="row" >
                    <div class="slds-cell-wrap">{!item.Name}</div>
                </td>
            </tr>
         
            <aura:if isTrue="{!item.expanded}" >
                <tr>
                    <td colspan="10">
                        <section style="border-style: outset;  border-width: thin;">
                            <div class="row">
                                <div class="column">
                                    <h2><b>Address</b></h2>
                                    <aura:if isTrue="{!not(empty(item.Title))}">
                                        <p>{!item.Name}</p>
                                        <aura:set attribute="else">
                                            &nbsp;
                                        </aura:set>
                                    </aura:if>
                                    <hr class="hrline"/>
                                    <h2><b>ASN Quantity</b></h2>
                                    <aura:if isTrue="{!not(empty(item.Name))}">
                                        <p>{!item.Name}</p>
                                        <aura:set attribute="else">
                                            &nbsp;
                                        </aura:set>
                                    </aura:if>
                                    <hr class="hrline"/>
                                    <h2><b>Sales Order Quantity</b></h2>
                                    <aura:if isTrue="{!not(empty(item.Name))}">
                                        <p>{!item.Name}</p>
                                        <aura:set attribute="else">
                                            &nbsp;
                                        </aura:set>
                                    </aura:if>
                                    <hr class="hrline"/>
                                    <h2><b>Original Quantity</b></h2>
                                    <aura:if isTrue="{!not(empty(item.Name))}">
                                        <p>{!item.Name}</p>
                                        <aura:set attribute="else">
                                            &nbsp;
                                        </aura:set>
                                    </aura:if>
                                    <hr class="hrline"/>
                                    <h2><b>Cancelled Quantity</b></h2>
                                    <aura:if isTrue="{!not(empty(item.Name))}">
                                        <p>{!item.Name}</p>
                                        <aura:set attribute="else">
                                            &nbsp;
                                        </aura:set>
                                    </aura:if>
                                    <hr class="hrline"/>
                                    <h2><b>Return sales Order number</b></h2>
                                    <aura:if isTrue="{!not(empty(item.Name))}">
                                        <p>{!item.Name}</p>
                                        <aura:set attribute="else">
                                            &nbsp;
                                        </aura:set>
                                    </aura:if>
                                    <hr class="hrline"/>
                                    <h2><b>Original Sales Order Number</b></h2>
                                    <aura:if isTrue="{!not(empty(item.Name))}">
                                        <p>{!item.Name}</p>
                                        <aura:set attribute="else">
                                            &nbsp;
                                        </aura:set>
                                    </aura:if>
                                    <hr class="hrline"/>
                                </div>
                                <div class="column">
                                    <h2><b>Unit</b></h2>
                                    <p>{!item.Name}</p>
                                    <hr class="hrline"/>
                                    <h2><b>Unit Price</b></h2>
                                    <p>{!item.Name}</p>
                                    <hr class="hrline"/>
                                    <h2><b>Discount Amount</b></h2>
                                    <p>{!item.Name}</p>
                                    <hr class="hrline"/>
                                    <h2><b>Net Amount</b></h2>
                                    <p>{!item.Name}</p>
                                    <hr class="hrline"/>
                                    <h2><b>Open Ext Amount</b></h2>
                                    <p>{!item.Name}</p>
                                    <hr class="hrline"/>
                                    <h2><b>Purchase Unit Price</b></h2>
                                    <p>{!item.Name}</p>
                                    <hr class="hrline"/>
                                    <h2><b>Kit Item</b></h2>
                                    <p>{!item.Name}</p>
                                    <hr class="hrline"/>
                                </div>
                                <div class="column">
                                    <h2><b>Revenue share Vender</b></h2>
                                    <p>{!item.Name}</p>
                                    <hr class="hrline"/>
                                </div>
                                <div class="column">
                                    <h2><b>FullFiller hours of Operation</b></h2>
                                    <p>{!item.Name}</p>
                                    <hr class="hrline"/>
                                </div>
                             
                            </div>
                        </section>
                        <section style="border-style: outset;  border-width: thin;">
                            <div class="row">
                                <div class="column">
                                    <h2><b>Column 1.1</b></h2> 
                                    <p>Some text..</p>
                                    <hr class="hrline"/>
                                 
                                </div>
                                <div class="column">
                                    <h2><b>Column 2.1</b></h2>
                                    <p>Some text..</p>
                                    <hr class="hrline"/>
                                </div>
                                <div class="column">
                                    <h2><b>Column 3.1</b></h2>
                                    <p>Some text..</p>
                                    <hr class="hrline"/>
                                </div>
                                <div class="column">
                                    <h2><b>Column 4.1</b></h2>
                                    <p>Some text..</p>
                                    <hr class="hrline"/>
                                </div>
                             
                            </div>
                        </section>
                        <section style="border-style: outset;  border-width: thin;">
                            <div class="row">
                                <div class="column">
                                    <h2>Column 1.1</h2>
                                    <p>Some text..</p>
                                    <hr class="hrline"/>
                                </div>
                                <div class="column">
                                    <h2>Column 2.1</h2>
                                    <p>Some text..</p>
                                    <hr class="hrline"/>
                                </div>
                                <div class="column">
                                    <h2>Column 3.1</h2>
                                    <p>Some text..</p>
                                    <hr class="hrline"/>
                                </div>
                                <div class="column">
                                    <h2>Column 4.1</h2>
                                    <p>Some text..</p>
                                    <hr class="hrline"/>
                                </div>
                            </div>
                        </section>
                    </td>
                </tr>
            </aura:if>
        </aura:iteration>
    </table>
</aura:component>

Controller JS:

({
init : function(component, event, helper) {
var currentOrderId = component.get("v.recordId");
        var action = component.get("c.getAccounts");
     
        //action.setParams({ ADSRecId : "a0o4F000000QwVUQA0" });
     
        action.setCallback(this, function(response) {
        var state = response.getState();
            //alert(state);
            if (state === "SUCCESS") {
             
                var Responsedata = response.getReturnValue();
                //alert('Responsedata--'+JSON.stringify(Responsedata));
                component.set("v.items", response.getReturnValue());
             
            }
        });
                         
        $A.enqueueAction(action);
},
 
    toggle: function(component, event, helper) {
        var items = component.get("v.items"), index = event.getSource().get("v.value");
        items[index].expanded = !items[index].expanded;
        component.set("v.items", items);
    }
 
})


Styles:

.THIS table, .THIS th, .THIS td {
    border: 1px solid black;
    text-align: center;
    width: 5%;
}
.THIS th{
    font-weight: bold;
    color: black;
 
}
.THIS h2{
    color: black;
    text-align: left;
}
.THIS p{
    color: black;
    text-align: left;
}
.THIS .column {
    float: Left;
    width: 25%;
    padding: 10px;
    height: 315px;
}
.THIS .row:after {
    content: "";
    display: table;
    clear: both;
}
.THIS .hrline {
    margin-top: 1px;
    margin-bottom: 1px;
    width: 60%;
}


Apex Class:

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


Output Images: