Navigate to the Record Page from the Data table (using LWC)

 

Apex Class:

public with sharing class myFirstApexLWCwithLink {

    @AuraEnabled(Cacheable = true)

    public static List<Account> getAccount() {

        return [SELECT Id,Name, Rating  FROM Account WHERE Rating = 'Hot' ORDER BY CreatedDate DESC];

    }

}

JS:

import { LightningElement, wire, track } from 'lwc';

import getAccount from '@salesforce/apex/myFirstApexLWCwithLink.getAccount';

const columns = [

    {

        label: 'Name',

        fieldName: 'aName',

        type: 'url',

        typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}

    }, {

        label: 'Rating',

        fieldName: 'Rating',

        type: 'text',

    }

];

export default class dataTablewithLink extends LightningElement {

    myData = [];

    columns = columns;

    @wire(getAccount)

    contacts({ error, data }) {

        if (data) {

            let aList = [];

            data.forEach((record) => {

                let accRecord = Object.assign({}, record);  

                accRecord.aName = '/' + accRecord.Id;

                //accRecord.Id = accRecord.Id;

                //accRecord.Name = accRecord.Name

                aList.push(accRecord);

            });

            this.myData = aList;

            this.error = undefined;

            console.table(this.myData);

        } else if (error) {

            this.error = error;

        }

    }

}

HTML:

<template>

    <lightning-card title="My First Datatable with Navigation to Record"><br/>

         <div if:true={myData}>

            <lightning-datatable data={myData}

                                 columns={columns}

                                 key-field="Id"

                                 hide-checkbox-column="true"></lightning-datatable>

        </div>

    </lightning-card>

</template>

XML:

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>54.0</apiVersion>

    <isExposed>false</isExposed>

</LightningComponentBundle>

AURA:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

    <c:dataTablewithLink/>

</aura:component>

Output:

https://www.youtube.com/watch?v=HXgqjAbOByw