Data table to getAttribute value in JS LWC

Question

Get attribute key value returns null value. Can anyone please help me on this?

<div class="slds-p-top_x-large">
                        <lightning-datatable key-field="Id" data={studentdata} columns={studentColumns} data-record-id={Id}
                            draft-values={draftValues} hide-checkbox-column="true" resize-column-disabled="true"
                             onsave={handleStudentSave} onrowaction={handleRowAction}>
                        </lightning-datatable>                             
                    </div>



handleRowAction (event){
alert('Hello'   +  event.target.getAttribute("data-record-id"));
//alert('Hello'   +  event.target.getAttribute("key-field"));
}

Answer 1

record id can be accessed using dataset event.target.dataset.recordId. record-id translates to recordId. The kebab cased 'data-' attributes from html translates to camel-cased dataset property names in JS. For example, if it was 'data-new-email-id' it translates to 'newEmailId' in JS.

Answer 2

It depends what you're trying to achieve, but will cover the possible outcomes you are trying to find.

Getting the record id of a row on rowaction

Check out the example in the lightning-datatable Component Reference and related Playground.

The gist of it is you would interrogate event.detail to get the row attributes (e.g. ID) as the rowaction events are dispatched from the rows which are effectively children of the datatable component. This concept is explained in detail in Create and Dispatch Events.

In your use case, you would get the record Id of each row using event.detail.row.id:

handleRowAction(event) {
    const recordId = event.detail.row.id;
}

Getting the key field used in the datatable

I suggest declaring a property for the key-field attribute in the module. This way you can use it in the module for other purposes.

JS:

keyField = 'Id';

HTML:

<lightning-datatable key-field={keyField} ...></lightning-datatable>

Answer 3

  <lightning-datatable key-field="Id" data={data} columns={columns} hide-checkbox-column="true"
        onrowaction={handleRowActions} ></lightning-datatable>

---

handleRowActions(event){
        let actionName = event.detail.action.name;
        console.log('Action Name '+ actionName);       
        let row = event.detail.row;
        console.log('selected Row '+ JSON.stringify(row));
        let rowId = event.detail.row.Id;
        console.log('selected Row '+ rowId);
    }

Use event.detail.row : it will return row record. use event.deail.row.Id : it will return row Id