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:

Convert List of Records into picklist in lightning.

Converting List of Account records into Picklist values in the component.

Component:- ListToPicklist.cmp

<aura:component access="global" controller="ListToPicklistcon" implements="flexipage:availableForAllPageTypes">

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
   <aura:attribute name="objInfo" type="account" default="{sobjectType : 'Account'}" />

   <div class="slds-form-element">
      <label class="slds-form-element__label" for="select-01">Select Label</label>
      <div class="slds-select_container">
         <ui:inputSelect  aura:id="accIndustry" class="slds-select" change="{!c.onPicklistChange}"/>
      </div>
   </div>
 
</aura:component>

JS:- ListToPicklistController.js

({
doInit: function(component, event, helper) {
        helper.fetchPickListVal(component, 'accIndustry');
    },
    onPicklistChange: function(component, event, helper) {
        // get the value of select option
        alert(event.getSource().get("v.value"));
    },
})

Helper:- ListToPicklistHelper.js

({
    fetchPickListVal: function(component, elementId) {
       
        var action = component.get("c.getselectOptions");
       
        var opts = [];
        action.setCallback(this, function(response) {
            if (response.getState() == "SUCCESS") {
                var allValues = response.getReturnValue();
  alert('allValues---'+allValues);
                if (allValues != undefined && allValues.length > 0) {
                    opts.push({
                        class: "optionClass",
                        label: "--- None ---",
                        value: ""
                    });
                }
                for (var i = 0; i < allValues.length; i++) {
                    opts.push({
                        class: "optionClass",
                        label: allValues[i],
                        value: allValues[i]
                    });
                }
                component.find(elementId).set("v.options", opts);
            }
        });
        $A.enqueueAction(action);
    },
})

Apex Class: 

public class ListToPicklistcon {
   
    @AuraEnabled
    public static List < String > getselectOptions() {
       
        List<account> values = [select id,name from account];
        List < String > allOpts = new list < String > ();
       
        // Add these values to the selectoption list.
        for (account a: values) {
            allOpts.add(a.name);
        }
        system.debug('allOpts ---->' + allOpts);
        allOpts.sort();
        return allOpts;
    }
   
}