Componente web Lightning: ¿Podemos capturar el evento rowclick lightning-datatable simplemente haga clic?

Question

Quiero hacer lightning-datatable con evento de clic de fila. No tiene casilla de verificación ni un menú desplegable de opciones o un enlace como se muestra a continuación.

Estoy buscando eventos de mesa de relámpagos, pero casi el artículo usa onrowaction. ¿Hay alguna forma de hacer clic en fila en lightning-datatable?

Cuando escribí el evento onclick en lightning-datatable, parece que no se puede obtener el valor de la fila.

Ahora, hago un código como este

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

La tabla de datos Lightning no tiene un onclickevento en el que pueda identificar en qué fila se hizo clic. Pero se puede lograr con un poco de manipulación.

Lo siguiente funcionó en el patio de recreo, pero no funciona en entornos normales.

<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
}

Otros enfoques

Hay otros enfoques para esto que brindan una experiencia de usuario decente, como usar un botón de fila como menciona Rahul Gawale.

Configura tu tabla de datos para manejar el rowactionevento:

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

Agregue una columna a la tabla de datos para un botón:

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

Defina un controlador para la acción de fila:

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

}

Otros enfoques que utilizan la tabla de datos incluyen:

• Muestre las casillas de verificación y maneje onrowselection- 1 clic
• Utilice una columna de acción con un menú desplegable de acciones: 2 clics