How to get selected row data from lightning-datatable in Salesforce LWC [closed]

Question

It seems very easy to get selected lightning data-table in LWC. There is a method getSelectedRows but how to get row using this method? May I get an example to get selected row from the data table and also at a time only one-row can be checked.

Answer 1

You can get THIS COMPONENT

Implement as below using above component:

<template>
    <lightning-button label="Get selected" onclick={getSelected}></lightning-button>
    <c-datatable config={config}>
    </c-datatable>
</template>

JS:

import { LightningElement, wire, track } from 'lwc';

export default class Example extends LightningElement {
    @track config = {
        objectName: "Account",
        pageSize: 5,
        tableConfig: {
            columns: [
                { api: 'Name', label: 'Name', fieldName: 'Name', sortable: true },
                { api: 'CreatedDate', label: 'Created On', fieldName: 'CreatedDate', type: 'date', sortable: true },
                { api: 'CreatedBy.Name', label: 'Created By', fieldName: 'CreatedByName', sortable: true }
            ],
            maxRowSelection: 1
        }
    };
    getSelected() {
        console.log("getSelectedRows => ", this.template.querySelector('c-datatable').getSelectedRows());
    }
}

Answer 2

The answer mentioned above would work perfectly fine. However the custom component c-datatable seems to be making use of its own method @api getSelectedRows rather than the native method getSelectedRowsprovided by LWC. So here's a native way to get the selected rows.

this.template.querySelector('lightning-datatable').getSelectedRows(); 

Playground URL : https://developer.salesforce.com/docs/component-library/tools/playground/mJeYCgn7n/3/edit

basic.html

<template>
<div style="height: 300px;">
    <lightning-button onclick={handleclick} value="Demo" label="Demo"></lightning-button>

    <lightning-datatable
            key-field="id"
            data={data}
            columns={columns}>
    </lightning-datatable>
</div>    

basic.js

import { LightningElement, track } from 'lwc';
import fetchDataHelper from './fetchDataHelper';

const columns = [
    { label: 'Label', fieldName: 'name' },
    { label: 'Website', fieldName: 'website', type: 'url' },
    { label: 'Phone', fieldName: 'phone', type: 'phone' },
    { label: 'Balance', fieldName: 'amount', type: 'currency' },
    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
];

export default class BasicDatatable extends LightningElement {
    @track data = [];
    @track columns = columns;

    async connectedCallback() {
        const data = await fetchDataHelper({ amountOfRecords: 100 });
        this.data = data;
    }

    handleclick(){
        var el = this.template.querySelector('lightning-datatable');
        console.log(el);
        var selected = el.getSelectedRows();
        console.log(selected);
    }
}

If you have multiple lightning-datatable elements use a id specifier like data-id or class to find your specific your datatable then use getSelectedRows() method on it.

Result