Component:
<aura:component implements="force:appHostable"
controller="AccountListController">
<aura:attribute type="Account[]" name="acctList"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:attribute name="selectedAccts" type="List"/>
<aura:handler name="init" value="{!this}" action="{!c.init}"/>
<div class="slds-box slds-theme_default">
<lightning:datatable data="{! v.acctList }"
columns="{! v.mycolumns }"
keyField="id"
onrowselection="{!c.handleSelect}"/>
<br/>
<center>
<lightning:button onclick="{!c.showSelectedName}" label="Show" variant="brand"/>
</center>
</div>
</aura:component>
Controller:
({
init : function(component, event, helper) {
component.set('v.mycolumns', [
{label: 'Account Name', fieldName: 'linkName', type: 'url',
typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}},
{label: 'Industry', fieldName: 'Industry', type: 'text'},
{label: 'Type', fieldName: 'Type', type: 'Text'}
]);
helper.fetchAccounts(component, event);
},
handleSelect : function(component, event, helper) {
var selectedRows = event.getParam('selectedRows');
var setRows = [];
for ( var i = 0; i < selectedRows.length; i++ ) {
setRows.push(selectedRows[i]);
}
component.set("v.selectedAccts", setRows);
},
showSelectedName : function(component, event, helper) {
var records = component.get("v.selectedAccts");
for ( var i = 0; i < records.length; i++ ) {
alert(records[i].Name);
}
}
})
Helper:
({
fetchAccounts : function(component, event) {
var action = component.get("c.fetchAccts");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var records = response.getReturnValue();
records.forEach(function(record) {
record.linkName = '/' + record.Id;
record.CheckBool = false;
});
component.set("v.acctList", records);
}
});
$A.enqueueAction(action);
}
})
Apex Class:
public class AccountListController {
@AuraEnabled
public static List < Account > fetchAccts() {
return [ SELECT Id, Name, Industry, Type FROM Account LIMIT 5 ];
}
}
Output:
<aura:component implements="force:appHostable"
controller="AccountListController">
<aura:attribute type="Account[]" name="acctList"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:attribute name="selectedAccts" type="List"/>
<aura:handler name="init" value="{!this}" action="{!c.init}"/>
<div class="slds-box slds-theme_default">
<lightning:datatable data="{! v.acctList }"
columns="{! v.mycolumns }"
keyField="id"
onrowselection="{!c.handleSelect}"/>
<br/>
<center>
<lightning:button onclick="{!c.showSelectedName}" label="Show" variant="brand"/>
</center>
</div>
</aura:component>
Controller:
({
init : function(component, event, helper) {
component.set('v.mycolumns', [
{label: 'Account Name', fieldName: 'linkName', type: 'url',
typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}},
{label: 'Industry', fieldName: 'Industry', type: 'text'},
{label: 'Type', fieldName: 'Type', type: 'Text'}
]);
helper.fetchAccounts(component, event);
},
handleSelect : function(component, event, helper) {
var selectedRows = event.getParam('selectedRows');
var setRows = [];
for ( var i = 0; i < selectedRows.length; i++ ) {
setRows.push(selectedRows[i]);
}
component.set("v.selectedAccts", setRows);
},
showSelectedName : function(component, event, helper) {
var records = component.get("v.selectedAccts");
for ( var i = 0; i < records.length; i++ ) {
alert(records[i].Name);
}
}
})
Helper:
({
fetchAccounts : function(component, event) {
var action = component.get("c.fetchAccts");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var records = response.getReturnValue();
records.forEach(function(record) {
record.linkName = '/' + record.Id;
record.CheckBool = false;
});
component.set("v.acctList", records);
}
});
$A.enqueueAction(action);
}
})
Apex Class:
public class AccountListController {
@AuraEnabled
public static List < Account > fetchAccts() {
return [ SELECT Id, Name, Industry, Type FROM Account LIMIT 5 ];
}
}
Output:
This is very helpful...
ReplyDeleteHow I can get the count of selected row and put validation on maximum selection.
ReplyDeleteYou have to use length property. For sample code, check https://www.infallibletechie.com/2020/03/how-to-get-count-of-selected-row-in.html
DeleteI have a similar functionality but to copy the selected rows, create a new record and refresh the list to show the new record as well. Can you please guide me?
ReplyDeletePass the selected values to apex class to create a new record and use $A.get('e.force:refreshView').fire() to refresh.
DeleteI am getting message as undefined
ReplyDeletePut some console statements to find what is returning and passed.
DeleteHow would keep the previously selected rows while filtering the datatable? IE: currently the selected rows are duplicating the previously selected rows between filters.
ReplyDeleteYou have to write that logic inside your filter method.
Deletehow to test this?
ReplyDeleteI created a Tab for this component to test.
DeleteSeeing the example above, I understood onrowselection is for single row selection. How to proceed with multiple selected rows?
ReplyDeleteYou have to use event.getParam( 'selectedRows' ).
DeleteCheck https://www.infallibletechie.com/2020/03/how-to-get-count-of-selected-row-in.html
This handles when a row is selected. How to handle a scenario where a row is deselected?
ReplyDeleteCheck this for getting deselected rows in LWC
Deletehttps://www.infallibletechie.com/2020/10/how-to-get-deselected-rows-in-lighting.html