How to make column as url hyperlink in datatable using lWC?

Question

Column : CaseNumber / ContactID (lookup)

I want to make them both as clickable link in <lightning-datatable

Code :

  @wire(getAllCases, { lv0: '$listViewId' })
    wiredOpps(result) {
        const { data, error } = result;
        
        if(result.data) {
            console.log('vvvvvvv',data);
            let nameUrl;
            let preparedArr = [];
            result.data.forEach(record => {
                result.data.map((xx) =>{})
                let preparedRec = {};
                this.data = result.data.map((ssss) =>
                Object.assign({ CaseNumberURL: "/clients/s/case/" + ssss.Id }, ssss));
              
                //preparedRec.CaseNumberURL = record.CaseNumber;
                preparedRec.Status = record.Status;
                preparedRec.Subject = record.Subject;
                preparedRec.ContactIdURL = record.Contact.Name;
                preparedRec.Interaction_client__c = record.Interaction_client__c;
                preparedRec.Date_ouverture__c = record.Date_ouverture__c;
                preparedRec.Priority = record.Priority;
                preparedRec.Type = record.Type;
                preparedRec.Produit__c = record.Produit__c;
                preparedRec.Environnement__c = record.Environnement__c;
                preparedRec.SiteForPortal__c = record.SiteForPortal__c;
                preparedRec.Developpement__c = record.Developpement__c;
                preparedRec.CorrectionsReports__c = record.CorrectionsReports__c;
                preparedRec.Nom_du_groupement__c = record.Nom_du_groupement__c;
                preparedRec.Date_fermeture__c = record.Date_fermeture__c;
                preparedArr.push(preparedRec);
            });
            this.cases = preparedArr;
          
        }
        if(error) {
            this.error = error;
            this.cases = [];
        }

 @track columns = [
        {label: 'NUMERO DE LA REQUETE', fieldName: 'CaseNumberURL',type: 'url',typeAttributes: {label: { fieldName: 'CaseNumber' }, target: '_blank'},sortable: true},
        {label: 'NOM DU CONTACT',fieldName: 'ContactIdURL',type: 'lookup',typeAttributes: {label: { fieldName: 'ContactId' }, target: '_blank'},sortable: true},

The problem i'm facing is that the column CaseNumberURL is get filled but it doesnt show value in UI

Answer 1

It doesn't look like you are actually writing those values to your preparedRec. Add this:

preparedRec.CaseNumber = record.CaseNumber;
preparedRec.CaseNumberURL = record.CaseNumberURL;

I don't think you need the Object.assign call either. Try this:

preparedRec.CaseNumberURL = `/clients/s/case/${record.Id}`;

Also, get rid of this:

result.data.map((xx) =>{})
let preparedRec = {};
this.data = result.data.map((ssss) =>

So... to recap. Do this:

wiredCases(data,error) {
  if(data){
    let preparedArr = [];
    data.forEach(record => {
      let preparedRec = {};
      preparedRec.CaseNumber = record.CaseNumber;
      preparedRec.CaseNumberURL = `/clients/s/case/${record.Id}`;        
      //... more mapping
      preparedArr.push(preparedRec);
    });
    this.cases = preparedArr;
  }
}

Answer 2

You don't need Array.prototype.forEach and Array.prototype.map at the same time. Your code is all kinds of confused. Since you already have almost all the data you want, you can write a very short function to handle this:

@wire(getAllCases, { lv0: "$listViewId" })
wiredOpps(result) {
  const { data, error } = result;
  this.error = error;
  this.cases = undefined;
  if (data) {
    this.data = result.data.map((record) => ({
      ...record,
      CaseNumberURL: `/clients/s/case/${record.Id}`,
    }));
  }
}

Here, we use () => ({}) to form a new object, ...record is the spread operator, and automatically performs a shallow copy of all the fields, and the CaseNumberURL part adds the custom link you're looking for.

This is far more efficient then creating a separate array and accessing each property individually, plus all the extra Array.prototype.push calls.