I have a data table based on Lightning component. In one of the column it displays Icon and when user click it should expand and show more information as child row. Is it possible to achieve this without using JQuery?
<table aura:id="companyList" class="slds-table slds-table--bordered slds-table_cell-buffer slds-max-medium-table--stacked-horizontal slds-hide" role="listbox">
<thead>
<tr >
<th colspan="4" scope="col">
<aura:if isTrue="{!v.searching}">
<div role="status" class="slds-spinner slds-spinner_large slds-spinner_brand ">
<span class="slds-assistive-text">Searching for Companies</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</aura:if>
<div class="slds-grid">
<div class="slds-col slds-align-bottom">
<p class="slds-text-body--small page-header__info">{!v.SECompanies.length} Record(s)</p>
</div>
</div>
</th>
</tr>
<tr class="slds-text-heading--label">
<th scope="row" class="nobordertop">Action</th>
<th scope="col" class="nobordertop">Protection Info</th>
<th scope="col" class="nobordertop">Company ID</th>
<th scope="col" class="nobordertop">Company</th>
<th scope="col" class="nobordertop">Ultimate Parent Co</th>
<th scope="col" class="nobordertop">Street</th>
<th scope="col" class="nobordertop">Address</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.SECompanies}" var="company" indexVar="rowIndex">
<tr data-data="{!rowIndex}">
<td data-data="{!rowIndex}">
<lightning:buttonMenu onselect="{!c.handleSelect}" alternativeText="Toggle menu">
<lightning:menuItem label="Edit" value="menuitem1" iconName="action:edit" />
<lightning:menuItem label="New Opportunity" value="menuitem2" iconName="action:new_opportunity" />
</lightning:buttonMenu>
</td>
<td data-index="{!rowIndex}" data-label="Protection Info" title="Protection Info">
<button class="slds-button slds-button--icon-border-filled slds-button--icon-border-small" onclick="{!c.handleIconClick}">
<lightning:icon class="icon" iconName="{!company.protectionImageSource}" variant="warning" size="small" title="Click to view protection information"/>
</button>
</td>
<td data-label="Company ID" title="Company ID">
<div><a data-record="{!company.companyId}" >{!company.companyId}</a></div>
</td>
<td data-label="Company Name" title="Company Name">
<button class="slds-button slds-button-neutral" onclick="{!c.companySelected}" data="{!company}" role="option">{!company.companyName}</button>
</td>
<td data-label="Ultimate Parent Name" title="Ultimate Parent Name">
<div><a data-record="{!company.ultimateParentName}" >{!company.ultimateParentName}</a></div>
</td>
<td data-label="Street" title="Street">
<div><a data-record="{!company.street1}" >{!company.street1}</a></div>
</td>
<td data-label="Address" title="Address">
<div><a data-record="{!company.address}" >{!company.address}</a></div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
({
doInit : function(component, event, helper) {
component.set("v.rows", [
{ Name: "Action",
expanded: false
},
{ Name: "Protection Info",
expanded: false,
children: [
{ Name: "Protection Desc" }
]},
{ Name: "Company ID",
expanded: false
},
{ Name: "Company",
expanded: false
},
{
Name: "Ultimate Parent Co",
expanded: false
},
{
Name: "Street",
expanded: false
},
{
Name: "Address",
expanded: false
}
]);
}
});
handleIconClick: function(component, event) { var rows = component.get("v.rows"); rows[event.target.dataset.index].expanded = !rows[event.target.dataset.index].expanded; component.set("v.rows", rows); }