Lightning Web Component: Can we catch rowclick event lightning-datatable just click

Question

I want to make lightning-datatable with row-click event. It's without checkbox or onrowaction pulldown or link like below.

I'm looking for lightning-table events, but almost article uses onrowaction. Is there way to row-click on lightning-datatable?

When I wrote onclick event on lightning-datatable, it looks that can't get row value.

Now, I make code like this

list.html

   <template if:true={searchedResult} data-item={searchedResult.id}>
            <lightning-datatable
                key-field="id"
                data={searchedResult} hide-checkbox-column
                columns={columns} onclick={handleRowAction}>
            </lightning-datatable>
        </template>

list.js

columns = [
    {label: 'Name', fieldName:'name', type: 'text'},
    {label: 'AccountName', fieldName:'note', type: 'text'},
    {label: 'LastUpdate', fieldName:'lastUpDate', type: 'date'}, 
];
    handleRowAction(e) {
        console.log(e);
        publish(this.sfidContext, SFIDChannel, e);
    }

Answer 1

Lightning datatable does not have an onclick event where you can identify which row has been clicked. But it can be achieved with a bit of fiddling.

The following worked in playground, but does not work in regular environments.

<lightning-datatable ... onclick={handleClick}></lightning-datatable>

handleClick(event) {
    const rowNode = event.toElement.closest('tr');

    // Row index (-1 to account for header row)
    console.log(rowNode.rowIndex - 1);

    // Row Id
    console.log(rowNode.dataset.rowKeyValue);

    // Use either of these to get the row data from the table data
}

Other Approaches

There are other approaches to this that provides a decent user experience such as using a row button as Rahul Gawale mentions.

Setup your datatable to handle the rowaction event:

<lightning-datatable ... onrowaction={handleRowAction}></lightning-datatable>

Add a column to the datatable for a button:

{  
    type: 'button', 
    typeAttributes: {
        label: 'Click me'
    }
}

Define a handler for the row action:

handleRowAction(event) {
    // contains properties of the clicked row
    const row = event.detail.row;

}

Other approaches using datatable include:

• Show the checkboxes and handle onrowselection - 1 click
• Use an action column with a dropdown of actions - 2 clicks

Answer 2

I was able to get the row-click working by extending Lightning-Datatable and manually assigning a click handler in a lifecycle method. Wrote a blog post with a more detailed example for my use case.

Example:

export default class DatatablePlus extends LightningElement {
...

  renderedCallback() {
    // Prevent multiple handler assigment
    if (this._hasRendered) {
        return;
    }

    const table = this.template.querySelector('tbody');
    table.addEventListener(
        'click',
        (e) => { console.log(e.target.tagName + ' was clicked.'); }
    );
        
    this._hasRendered = true;
  }

}

A couple things to note:

a) With this pattern we don't have access to a detail prop, and target could vary. As such, you might want to normalize the clicked target by e.g. finding the TR element which has an "id" value attached as an attribute.

b) If you want to send the clicked Row's Id to a parent component; Custom events won't work since they get re-targeted when crossing the Shadow barrier. There are a few patterns that Salesforce recommends. However, I found that a window.postMessage served my needs.

Answer 3

H you can use the following logic

1. add click listener <lightning-datatable ... onclick={handleClick}></lightning-datatable>

2. use currentTarget and access data itself

    handleClick(event){
    const data = event.currentTarget.data;
   }