function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
shalini sharma 24shalini sharma 24 

populate the opportunity name field as clickable in lightning dataTable

Hi,

I want to display the opportunity records with fields Oppotunity Name, Type in the lightniing dataTable. In that table, the opportunity Name column should be clickable and redirect to record detail page.
sfdcMonkey.comsfdcMonkey.com
HI shalini, here is the workaround for your requirement, add row level actions to redirect selected record on lightning:datatable :
apex :
public with sharing class Controller{
    @AuraEnabled
    public static List<opportunity> getopportynity() {
        return [SELECT Id, Name, Type FROM opportunity LIMIT 10];
    }
}
lightning component:
<aura:component controller="Controller" implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:appHostable" access="global" >
    
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
	
	<aura:attribute name="mydata" type="Object"/>
    <aura:attribute name="mycolumns" type="List"/>
    
	
  
      <lightning:datatable data="{! v.mydata }" 
                           columns="{! v.mycolumns }" 
                           keyField="Id"
                           onrowaction="{! c.handleRowAction }"/>
</aura:component>
controller :
({
   init: function (cmp, event, helper) {
       var actions = [{ label: 'Show details', name: 'show_details' }];
       
          cmp.set('v.mycolumns', [
              { type: 'action', typeAttributes: { rowActions: actions } },
              {label: 'Name', fieldName: 'Name', type: 'text'},
              {label: 'Type', fieldName: 'Type', type: 'type'}
       ]);
        helper.getData(cmp);
    },
    
    handleRowAction : function(cmp,event,helper){
       var action = event.getParam('action');
       var row = event.getParam('row');
     // navigate to sObject detail page     
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": row.Id,
            "slideDevName": "detail"
        });
        navEvt.fire();
    },
    
})

helper :
({
    getData:function(cmp){
        var action=cmp.get('c.getopportynity');
        action.setCallback(this,$A.getCallback(function(response){
            var state=response.getState();
            if(state==="SUCCESS"){
                var oResponse=response.getReturnValue();
                cmp.set("v.mydata",oResponse);
            }else if(state==="ERROR"){
                var errors=response.getError();console.error(errors);
            }
        }
        ));
        $A.enqueueAction(action)}
    
})

Note : we are using $A.get("e.force:navigateToSObject") event,  This event is handled by the one.app container. It’s supported in Lightning Experience, Salesforce app, and Lightning communities.
Output :
User-added image
Thanks, kindly let us inform if it helps you 
http://sfdcmonkey.com

 

 
Aneesh B 10Aneesh B 10
Another way of achieving this is by doing the following:

component:
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" controller="TableComponentApexController">
    <aura:attribute name="columns" type="List" default="[
            {label: 'Name', fieldName: 'linkName', type: 'url', typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}},
            {label: 'Stage', fieldName: 'StageName', type: 'text'}
        ]"/>
    <aura:attribute name="data" type="List"/>
    <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
	<lightning:datatable
            columns="{! v.columns }"
            data="{! v.data }"
            hideCheckboxColumn = "true"
            keyField="id"/>
</aura:component>
controller:
({
	onInit : function(cmp, event, helper) {
		var action = cmp.get("c.getRecords");
        action.setParams({ SOQL : cmp.get("v.soql") });

        // Create a callback that is executed after 
        // the server-side action returns
        action.setCallback(this, function(response) {
            debugger;
            var state = response.getState();
            if (state === "SUCCESS") {                
				var records =response.getReturnValue();
                records.forEach(function(record){
                    record.linkName = '/'+record.Id;
                });
                cmp.set('v.data',records);
            }
            else if (state === "INCOMPLETE") {
                // do something
            }
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " + 
                                 errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });

        $A.enqueueAction(action);
	}
})

The only drawback of this is that the record opens in the same tab. But I am sure there must be a work around to this issue(or it must be a bug with Salesforce). But this definitely is an acceptable solution.