How to select a row(s) of record from DataTable without using wrapper class in lightning
- Subham Patel
- Jul 10, 2019
- 1 min read
cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller="WrapperInLtngCC" >
<aura:attribute name="data" type="contact[]"/>
<aura:attribute name="columns" type="List"/>
<aura:attribute name="selectedRows" type="List"/>
<!--<aura:handler name="init" value="{! this }" action="{! c.init }"/>-->
<div class="space">
<lightning:button label="Show Contacts" title="Show Contacts" onclick="{! c.handleClick }"/>
<lightning:button label="Show selected contacts" title="Show selected contacts" onclick="{! c.showSelectedContacts }"/>
</div>
<lightning:datatable data="{! v.data }"
columns="{! v.columns }"
keyField="Id"
onrowselection="{!c.handleSelect}">
<!--hideCheckboxColumn="true"-->
</lightning:datatable>
</aura:component>
Controller(JS)
({
handleClick: function (cmp, event, helper) {
cmp.set('v.columns', [
{ label: 'Contact Name', fieldName: 'Name', type: 'text'},
{ label: 'Phone', fieldName: 'Phone', type: 'phone'},
{ label: 'Email', fieldName: 'Email', type: 'email'}
]);
var action = cmp.get('c.getContacts');
action.setCallback(this, $A.getCallback(function (response) {
var state = response.getState();
if (state === "SUCCESS") {
cmp.set('v.data', response.getReturnValue());
} else if (state === "ERROR") {
var errors = response.getError();
console.error(errors);
}
}));
$A.enqueueAction(action);
},
showSelectedContacts: function (cmp, event, helper) {
var listCont = cmp.get("v.selectedRows");
for(var i=0;i<listCont.length;i++){
alert(listCont[i].Name);
}
},
handleSelect: function(cmp, event, helper){
var selectedRows = event.getParam('selectedRows');
//alert(selectedRows);
//var setRows = [];
cmp.set("v.selectedRows",selectedRows);
}
})
ApexController
public with sharing class WrapperInLtngCC {
/*
@AuraEnabled public Contact cont {get;set;}
@AuraEnabled public boolean isSelected {get;set;}
public WrapperInLtngCC (Contact con, boolean b){
cont = con;
isSelected = b;
}*/
@AuraEnabled
public static List<Contact> getContacts() {
List<Contact> contacts =
[SELECT Id, Name, Phone, Email FROM Contact];
//Add isAccessible() check
return contacts;
}
}
CSS
.THIS.space {
padding-bottom: 2%;
}

On clicking on Show Contact button

Select some records & click on Show Selected Contact button

Comments