+ Start a Discussion
Joseph WinterJoseph Winter 

Cannot retrieve attribute of lightning:button when created through lightning:datatable

I am creating a datatable to display a list of events, hosted on a lightning component designed for mobile.

I want to be able to navigate to a record in the datatable when clicking on the record's label. In this instance, making the column of type URL does not properly work in the mobile app, so i must use "e.force:navigateToURL" to handle the navigation to the record. To achieve this, I made the column of type "button".

To get the right record Id, i have stored the Id of the record as the "name" attribute of the button, (see line 4 of the JS Controller) and want to retrieve this from the buttons event (see line 25 of the JS Controller). For some reason, this value is always returned as "undefined" when logged.
 
<aura:component controller="LtngCtrlEventsList"  implements="force:appHostable,flexipage:availableForAllPageTypes" access="global">
    
	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
               
    <aura:attribute name="eventsList" type="Object" access="public"/>
    <aura:attribute name="columnsList" type="List" access="public"/>
    
    <lightning:card iconName="standard:event" title="Today's Events">
        <div class="slds-p-horizontal_medium">
            <lightning:datatable
                                 keyField="id"
                                 data="{!v.eventsList}"
                                 columns="{!v.columnsList}"
                                 hideCheckboxColumn="true"
                                 onrowaction="{!c.redirect}"/> 
        </div>
    </lightning:card>
   
</aura:component>
 
({
	doInit : function(component, event, helper) {
        component.set("v.columnsList",[
            {label: "Subject", fieldName: "linkName", type: "button", typeAttributes: {label: {fieldName: 'Subject'}, name: {fieldName : 'Id'}, onClick: '{!c.redirect}'}},
            {label: "Time", fieldName: "StartDateTime", type: "date", typeAttributes: {hour:"2-digit", minute:"2-digit"}},
            {label: "Concerning", fieldName: "WhatName", type: "text"}
        ]);
        var action = component.get("c.getUserEvents");
        action.setCallback(this, function(a) {
            if (a.getState() == 'SUCCESS'){
                var response = a.getReturnValue();
                console.log(response);
                response.forEach(function(record){
                    record.linkName = "{!v.directToRecord}";
                    if(record.What) record.WhatName = record.What.Name;
                });
                component.set("v.eventsList", response);
            }
        });
        $A.enqueueAction(action);
        
	},
    
    redirect : function(component, event, helper){
        console.log(event.getSource().get("v.name")); 
        var urlEvent = $A.get("e.force:navigateToURL");
        urlEvent.setParams({
          "url": "/" + event.getParam("name")
        });
        urlEvent.fire();
    }
    
})
I can confirm the button is rendered with the "name" attribute populated, as seen below:
User-added image
Why is this the case? The "event.getSource().get("v.name")" retrieves nothing even though the button is a "lightning:button".

Please advise on whether this is a limitation of the lightning:datatable or not.
Thanks
Alain CabonAlain Cabon
You can follow this example. You can get the row directly.

var columns = [
{label: 'Opportunity name', fieldName: 'opportunityName', type: 'text', sortable: true, iconName: 'standard:opportunity'},
{label: 'Close date', fieldName: 'closeDate', type: 'date', sortable: true, cellAttributes: { iconName: 'utility:event', iconAlternativeText: 'Close Date' }},
{label: 'View', type: 'button', initialWidth: 135, typeAttributes: { label: 'View Details', name: 'view_details', title: 'Click to View Details'}},
];

controller: 

handleRowAction: function (cmp, event, helper) {

        var action = event.getParam('action');
        var row = event.getParam('row');


        switch (action.name) {
            case 'view_details': helper.showRowDetails(row); break;
            case 'edit_status': helper.editRowStatus(cmp, row, action); break;
            default: helper.showRowDetails(row); break;
        }
}

helper

showRowDetails : function(row) {
      // eslint-disable-next-line no-alert
       alert("Showing opportunity " + row.opportunityName + " closing on " + row.closeDate);
}
 
<lightning:datatable
                columns="{! v.columns }"
                data="{! v.data }"
                keyField="{! v.keyField }"
                hideCheckboxColumn="{! v.hideCheckboxColumn }"
                resizeColumnDisabled="{! v.resizeColumnDisabled }"
                minColumnWidth="{! v.minColumnWidth }"
                maxColumnWidth="{! v.maxColumnWidth }"
                resizeStep="20"
                sortedBy="{! v.sortedBy }"
                sortedDirection="{! v.sortedDirection }"
                defaultSortDirection="{! v.defaultSortDirection }"
                showRowNumberColumn="{! v.showRowNumberColumn }"
                rowNumberOffset="{! v.rowNumberOffset }"
                onrowselection="{! c.updateSelectedText }"
                onrowaction="{! c.handleRowAction }"
                onresize="{! c.storeColumnWidths }"
                onsort="{! c.updateColumnSorting }"
                />


https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/example#lightningcomponentdemo:exampleDatatableInAction