How to process selected rows of lightning data table LWC Salesforce. - Salesforce Globe For You
Solution:use getSelectedRows() to get the selected rows of lightning data table.
Example:
displayLightningDataTableLWC.html
<template>
<lightning-Card title="Process Lightning Data Table Data">
<div>
<lightning-datatable
key-field="id"
data={lstLeads}
columns={columns}>
</lightning-datatable>
</div>
<div style="padding-top: 10;">
<lightning-button variant="brand" label="Get Selected Records" title="Process Lightning Data Table Data"
onclick={getSelectedRec} class="slds-m-left_x-small"></lightning-button>
</div>
<div title="Selected Leads">
<lightning-Card title="Selected Leads are">
<lightning-datatable
key-field="id"
data={lstSelectedLeads}
columns={columns}>
</lightning-datatable>
</lightning-Card>
</div>
</lightning-Card>
</template>
displayLightningDataTableLWC.js
import { LightningElement,track } from 'lwc';
import getLeads from '@salesforce/apex/LeadController.getLeads';
const columns = [
{ label: 'Id', fieldName: 'Id' },
{ label: 'Name', fieldName: 'Name'}
];
export default class DisplayLightningDataTableLWC extends LightningElement {
@track lstLeads;
@track lstSelectedLeads;
columns = columns;
async connectedCallback() {
getLeads()
.then(result => {
this.lstLeads = result;
})
.catch(error => {
this.error = error;
});
}
getSelectedRec() {
var selectedRecords =
this.template.querySelector("lightning-datatable").getSelectedRows();
console.log('selectedRecords are ',selectedRecords);
this.lstSelectedLeads = selectedRecords;
}
}
displayLightningDataTableLWC.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>51.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Output:
