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?


    <lightning-card title="Datatable styling in lwc">
        <template if:true={tableData}>
            <div class="myTable">


    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" },
        {label:'Annual Revenue', fieldName: 'AnnualRevenue', type: 'currency', 
        {label:'Industry', fieldName: 'Industry', type: 'text'},
        {label:'Phone', fieldName: 'Phone', type: 'phone'}
    export default class DatatableDemo extends LightningElement {
column = COLUMN

...... other code


public with sharing class tableController {
    public static List<Account> getAccounts() {
        return [SELECT Id, Name, AnnualRevenue, Industry, Phone from Account];

1 Answer 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:

    {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() {
      .then(result => {
        let tempAccts = [];
          let newAcct = JSON.parse(JSON.stringify(acct));
          newAcct.LinkUrl = `/${acct.Id}`;
        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 = [];
  • 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, 2021 at 18:30
  • I edited the question. please check Apr 6, 2021 at 18:35
  • Have updated - couple of issues with my answer which I've fixed. Apr 6, 2021 at 20:45

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .