How to open a div on a particular row in a Salesforce lightning table list?

Step 1 : Create Apex Controller : dataTableCtrl.apxc
From Developer Console >> File >> New >> Apex Class
/* sfdcmonkey.com || Date 01/31/2018 || API Version 41.0 */
public class tableWithManageCtrl {
@AuraEnabled
public static List < account > fetchAccount() {

List < Account > returnList = new List < Account > ();

for (Account acc: [select id, Name, Type, Industry, Phone, Fax from account LIMIT 10]) {
returnList.add(acc);
}
return returnList;
}
}

Step 2 : Create Child Lightning Component  : auraIfContains.cmp
The purpose to create this child component is, create a Alternate/Workaround for contains() function in ‘aura:if’ Condition in Lightning Component.

check following post on this step 2 workaround :

Alternate/Workaround for contains() function in aura:if Condition in Lightning Component

<aura:component >
<aura:handler name=”init” value=”{!this}” access=”global” action=”{!c.doInit}” />
<aura:attribute name=”list” type=”string[]” />
<aura:attribute name=”element” type=”String” />
<aura:attribute name=”condition” type=”Boolean” />
<aura:handler name=”change” value=”{!v.list}” action=”{!c.doInit}”/>

<aura:if isTrue=”{!v.condition}”>
{!v.body}
</aura:if>
</aura:component>

auraIfContainsController.js

({
doInit: function(component, event, helper) {
var getList = component.get(‘v.list’);
var getElement = component.get(‘v.element’);
var getElementIndex = getList.indexOf(getElement);

if(getElementIndex != -1){
component.set(‘v.condition’,true);
}else{
component.set(‘v.condition’,false);
}
},
})

Step 3 : Create Parent Lightning Component  : dataTableWithDynamicCol.cmp

<aura:component controller=”tableWithManageCtrl” implements=”force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction” access=”global” >
<aura:handler name=”init” value=”this” action=”{!c.doInit}”/>
<aura:attribute name=”searchResult” type=”List” description=”use for store and display account list return from server”/>
<aura:attribute name=”options”
type=”List”
default=”[
{‘label’: ‘Type’, ‘value’: ‘Type’},
{‘label’: ‘Industry’, ‘value’: ‘Industry’},
{‘label’: ‘Phone’, ‘value’: ‘Phone’},
{‘label’: ‘Fax’, ‘value’: ‘Fax’},
]”/>

<aura:attribute name=”selectedValues” type=”List” default=”Name”/>
<aura:attribute name=”isOpen” type=”boolean” default=”false”/>

<aura:if isTrue=”{!v.isOpen}”>

<div role=”dialog” tabindex=”-1″ aria-labelledby=”header99″ class=”slds-modal slds-fade-in-open “>
<div class=”slds-modal__container”>

<div class=”slds-modal__header”>
<button class=”slds-button slds-modal__close slds-button–icon-inverse” title=”Close” onclick=”{!c.closeModel}”>
X
<span class=”slds-assistive-text”>Close</span>
</button>
<h2 id=”header99″ class=”slds-text-heading–medium”>Manage Table Columns</h2>
</div>

<div class=”slds-modal__content slds-p-around–medium”>
<div class=”slds-p-around_medium”>
<lightning:checkboxGroup aura:id=”mygroup”
name=”checkboxGroup”
label=”Manage Cloumn”
options=”{! v.options }”
value=”{! v.selectedValues }”
/>
</div>
</div>

<div class=”slds-modal__footer”>
<button class=”slds-button slds-button–neutral” onclick=”{!c.closeModel}” >Done</button>
</div>
</div>
</div>
<div class=”slds-backdrop slds-backdrop–open”></div>

</aura:if>

<div class=”slds-m-around–large”>

<div class=”slds-clearfix”>
<div class=”slds-float_right”>
<lightning:buttonIcon size=”large” onclick=”{!c.openModel}” iconName=”utility:matrix” variant=”bare” title=”manage table columns” alternativeText=”Settings” iconClass=”dark”/>
</div>
</div>

<br/><br/>

<table class=”slds-table slds-table_bordered slds-table_cell-buffer”>
<thead>
<tr class=”slds-text-title_caps”>
<th scope=”col”>
<div class=”slds-truncate” title=”Account Name”>Account Name</div>
</th>

<c:auraIfContains list=”{!v.selectedValues}”  element=”Type”>
<th scope=”col”><div class=”slds-truncate” title=”Type”>Type</div></th>
</c:auraIfContains>
<c:auraIfContains list=”{!v.selectedValues}”  element=”Industry”>
<th scope=”col”><div class=”slds-truncate” title=”Industry”>Industry</div></th>
</c:auraIfContains>
<c:auraIfContains list=”{!v.selectedValues}”  element=”Phone”>
<th scope=”col”><div class=”slds-truncate” title=”Phone”>Phone</div></th>
</c:auraIfContains>
<c:auraIfContains list=”{!v.selectedValues}”  element=”Fax”>
<th scope=”col”><div class=”slds-truncate” title=”Fax”>Fax</div></th>
</c:auraIfContains>
</tr>
</thead>
<tbody>

<aura:iteration items=”{!v.searchResult}” var=”acc”>
<tr>

<td><div class=”slds-truncate”>{!acc.Name}</div></td>
<c:auraIfContains list=”{!v.selectedValues}”  element=”Type”>
<td><div class=”slds-truncate”>{!acc.Type}</div></td>
</c:auraIfContains>
<c:auraIfContains list=”{!v.selectedValues}”  element=”Industry”>
<td><div class=”slds-truncate”>{!acc.Industry}</div></td>
</c:auraIfContains>
<c:auraIfContains list=”{!v.selectedValues}”  element=”Phone”>
<td><div class=”slds-truncate”>{!acc.Phone}</div></td>
</c:auraIfContains>
<c:auraIfContains list=”{!v.selectedValues}”  element=”Fax”>
<td><div class=”slds-truncate”>{!acc.Fax}</div></td>
</c:auraIfContains>
</tr>
</aura:iteration>
</tbody>
</table>
</div>

</aura:component>

check code comments.
dataTableWithDynamicColController.js

({
doInit: function(component, event, helper) {
var action = component.get(“c.fetchAccount”);
action.setCallback(this, function(response) {
var state = response.getState();
if (state === “SUCCESS”) {
var storeResponse = response.getReturnValue();
// set searchResult list with return value from server.
component.set(“v.searchResult”, storeResponse);
}

});
$A.enqueueAction(action);
},
openModel: function(component, event, helper) {
// for Display Model,set the “isOpen” attribute to “true”
component.set(“v.isOpen”, true);
},

closeModel: function(component, event, helper) {
// for Hide/Close Model,set the “isOpen” attribute to “Fasle”
component.set(“v.isOpen”, false);
},
})

Step 4 : Create Lightning Application for Testing: demo.app
From Developer Console >> File >> New >> Lightning Application

<aura:application extends=”force:slds”>
<c:dataTableWithDynamicCol/>

</aura:application>

Output :