LWC Data Table: Hyerplink a record with lookup field

Question

I am trying to add a hyperlink in my datatable to the records that are displayed. I achieved this for records that do not use a lookup field, where I can easily access each field as needed. But for a record that uses a lookup, it's trickier since I cannot use dot notation to access the needed fields here.

Each of my Job Opening object has a related list which shows each applicant, and application related to it. The applicant is a lookup field.

I am able to see all the data I need from the result object, it's just a matter of how to display it.

You can see in the screenshot that applications work just fine and I can access each one from the table, but for applicants, it does not display their names correctly, instead, it shows their IDs (I can access these records just fine too).

export default class ApexDatatableExample extends NavigationMixin(LightningElement) {

  @track columns = [
    {
      label: 'Applicant',
      fieldName: 'applicantURL',
      type: 'url',
      typeAttributes: {label: { fieldName: 'Applicant__r.Name' }, 
      target: '_blank'},
      sortable: true
    },
    {
      label: 'Application Name',
      fieldName: 'nameUrl',
      type: 'url',
      typeAttributes: {label: { fieldName: 'Name' }, 
      target: '_blank'},
      sortable: true
    },
  ]
  
  @api recordId;
  records;

  @track error;
  @track applications = [];
 
  @wire(getApps, { jobId: '$recordId'}) wiredApps(result) {
    const {data, error} = result;
    if(data) {
      let nameUrl;
      let applicantURL;
      this.applications = data.map(row => {
        nameUrl = `/${row.Id}`;
        applicantURL = `/${row.Applicant__c}`
        return {...row , nameUrl, applicantURL}
      })
      this.error = null;
    }
    if(error) {
      this.error = error;
      this.applications = [];
    }
  }
}

Controller Method:

   @AuraEnabled(cacheable=true)
   public static List<Application__c> getApps(string jobId){
      return [SELECT Id,Name,Applicant__r.Name FROM Application__c 
      WHERE Applied_to_Job_Opening__c =: jobId 
      Order By Name asc];      
   }

Any help would be appreciated.

Answer 1

You're right, dot notation cannot be used so data should be flattened.
You've already done almost everything, you only need to create a new property for applicantName the same way you created applicantURL and change the columns definition to use it.

Columns:

// no need to track this
columns = [
    {
      label: 'Applicant',
      fieldName: 'applicantURL',
      type: 'url',
      typeAttributes: {
        label: { fieldName: 'applicantName' },
        target: '_blank'
      },
      sortable: true
    },
    {
      label: 'Application Name',
      fieldName: 'nameUrl',
      type: 'url',
      typeAttributes: {
        label: { fieldName: 'Name' }, 
        target: '_blank'
      },
      sortable: true
    },
];

Wired function;

@wire(getApps, { jobId: '$recordId'}) wiredApps(result) {
    const {data, error} = result;
    if(data) {
      this.applications = data.map(row => {
        const nameUrl = `/lightning/r/${row.Id}/view`;
        const applicantURL = `/lightning/r/${row.Applicant__c}/view`;
        const applicantName = row.Applicant__r.Name;
        return {...row , nameUrl, applicantURL, applicantName };
      })
      this.error = null;
    }
    if(error) {
      this.error = error;
      this.applications = [];
    }
}