1

I have a lightning web component that fetch account record from Salesforce. When a user clicks on the Account name, I want to take the user to the Account record page. How can I achieve this?

.html

<template>
    <lightning-card title="Datatable styling in lwc">
        <template if:true={tableData}>
            <div class="myTable">
            <lightning-datatable 
                key-field="Id" 
                data={tableData} 
                columns={columns}
                hide-checkbox-column>
            </lightning-datatable>
            </div>
        </template>
    </lightning-card>
</template>

.js

    import { LightningElement, wire } from 'lwc';
    import getAccounts from '@salesforce/apex/tableController.getAccounts'
    import {loadStyle} from 'lightning/platformResourceLoader'
    import COLORS from '@salesforce/resourceUrl/colors'

    const COLUMNS = [
            {label:'Account Name', fieldName: 'Name',
    type: "url",
    typeAttributes: { label: { fieldName: "Id" }, target: "_top" },
    cellAttributes:{ 
        class:{fieldName:'accountColor'},
    }},
        
        {label:'Annual Revenue', fieldName: 'AnnualRevenue', type: 'currency', 
        cellAttributes:{ 
            class:{fieldName:'amountColor'}
        }},
    
        {label:'Industry', fieldName: 'Industry', type: 'text'},
    
        {label:'Phone', fieldName: 'Phone', type: 'phone'}
    ]
    
    export default class DatatableDemo extends LightningElement {
tableData
column = COLUMN

...... other code
}

.cls

public with sharing class tableController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        return [SELECT Id, Name, AnnualRevenue, Industry, Phone from Account];
    }
}
1

For a hyperlink you need two fields: The Name field and the Id field of whatever data you are wanting to show.

So for your Account version above, your configuration for an Account hyperlink would be:

COLUMNS = [
    {label: 'Account Name', fieldName: 'LinkUrl', type: "url",
     typeAttributes: { label: { fieldName: "Name" }, target: "_top" },
     cellAttributes:{ class:{fieldName:'accountColor'}}
    },
    ....other columns 

One you have the data, you need to add another acct field - the url one:

connectedCallback() {
    getAccounts()
      .then(result => {
        let tempAccts = [];
        result.forEach(acct=>{
          let newAcct = JSON.parse(JSON.stringify(acct));
          newAcct.LinkUrl = `/${acct.Id}`;
          tempAccts.push(newAcct);
        });
        this.tableData = tempAccts;
      })
      .catch(error => {
        this.error = error;
      });
  }

The JSON.parse... bit is because the Acct data is immutable.

Finally, you need to use the LinkUrl field in the columns - note, I had the Id/Name fields the wrong way around - I've corrected above.

Couple more things - you will need to assign your COLUMNS to a class member.

export default class DatatableDemo extends LightningElement {
    columns = COLUMNS;
    tableData = [];
    
}
3
  • I changed the js code to this but when I click on the account name, a new tab open with the link like this: sample%20account%20for%20entitlements. It does not take me to the account record page Apr 6 at 18:30
  • I edited the question. please check Apr 6 at 18:35
  • Have updated - couple of issues with my answer which I've fixed. Apr 6 at 20:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.