I am trying to create a lightning data table which has hyperlink columns. when i try to add a reference field in column it just showing the id.

component.set('v.columns', [
            { label: 'NAME', fieldName: 'linkName', type: 'url',sortable : true, typeAttributes: {label: { fieldName: 'Name' }, target: '_self'} },
            { label: 'ACCOUNT', fieldName: 'accountname', type: 'url',sortable : true, typeAttributes: {label: { fieldName: '**Account__r.Name**', type:'reference'}, target: '_self'}},]);

enter image description here

instead of id it should display account name. i tried giving the field but its only printing the id.


2 Answers 2

  1. url will not work here, you need to use button type and variant base .
  2. You should use onrowaction for navigation .
  3. You should use NavigationMixin for navigating .
  4. You can use custom datatable to fetch the records automatically.

Below is the code using above component:


    <c-datatable config={config}


import { LightningElement, wire, api, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class Poc extends NavigationMixin(LightningElement) {
    config = {
        objectName: 'Contact',
        tableConfig: {
            columns: [
                { api: 'Name', label: 'Name', fieldName: 'Name' },
                    api: 'Account.Name',
                    label: 'Account Name',
                    fieldName: 'AccountName',
                    type: 'button',
                    typeAttributes: { label: { fieldName: 'AccountName' }, name: 'AccountNav', variant: 'base' }

    handleRowAction(event) {
        const actionName = event.detail.action.name;
        const row = event.detail.row;
        switch (actionName) {
            case 'AccountNav':
                    type: 'standard__recordPage',
                    attributes: {
                        recordId: row.Account.Id,
                        actionName: 'view'

Even if you dont want to use the custom component and implement the logic to fetch records yourself, you can still use above columns configuration.


I found a solution for this

after fetching the records from apex, add temporary fields on the record.


               record => {record.linkName = '/'+record.Id,
                          record.**accountid** =  '/'+record.Account__c
                          record.**accountName** = record.Account__r.Name }

now configure the data table columns list as shown with the temporary fields,

component.set('v.columns', [
        { label: 'NAME',fieldName: 'linkName', type: 'url',sortable : true, typeAttributes: {label:{fieldName:'Name'},tooltip: {fieldName:'Name'}, target: '_self'} },
        { label: 'ACCOUNT', fieldName: '**accountid**', type: 'url',sortable : true, typeAttributes:{label:{fieldName: '**accountName**'},tooltip:{fieldName:'accountName'}, target:'_blank'}}

if we do like this instead of id it will show the account name.

You must log in to answer this question.

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