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">
</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">
</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">
</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">
</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">
</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">
</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">
</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:
