Change the colour of hyperlink in lightning datatable?

Question

Is there any way to change the color of the hyperlink (Account Name) from blue to black and also how can I add a link to another lwc in the hyperlink? I tried searching but no luck, If anybody can help would really appreciate it.

this is the output image.

Thanks in advance

Answer 1

The documented way to do this is to add a custom cell component. See the "Creating Custom Data Types" section in the Lightning Datatable.

As you will see from how long that section is, quite a few steps are involved. But essentially you can inject your own component that has access to the data rows and so can render whatever it likes based on those values. A mechanism is included to allow specific attributes to be passed through via typeAttributes.

I suggest you Google to find worked examples to fully understand this before you implement your own.

Answer 2

As discussed on the developer forum, you can have a reference to the implementation in this article to fit your use case.

For quick reference I am posting the implementation from article here which you can modify as needed:

Lightning Web Component:

    </lightning-card>
</template>


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',  cellAttributes:{
        class:{fieldName:'accountColor'}
    }},
    {label:'Annual Revenue', fieldName:'AnnualRevenue', type:'currency', cellAttributes:{
        class:{fieldName:'amountColor'},
        iconName:{fieldName:'iconName'}, iconPosition:'right'
    }},
    {label:'Industry', fieldName:'Industry', type:'text', cellAttributes:{
        class:{fieldName:'industryColor'}
    }},
    {label:'Phone', fieldName:'Phone', type:'phone'},
]
export default class DatatableDemo extends LightningElement {
    tableData
    columns = COLUMNS
    isCssLoaded = false

    @wire(getAccounts)
    accountsHandler({data, error}){ 
        if(data){ 
            
            this.tableData = data.map(item=>{
                let amountColor = item.AnnualRevenue <500000 ? "slds-text-color_error":"slds-text-color_success"
                let iconName = item.AnnualRevenue <500000 ? "utility:down":"utility:up"
                return {...item, 
                    "amountColor":amountColor,
                    "iconName":iconName,
                    "industryColor":"slds-icon-custom-custom12 slds-text-color_default",
                    "accountColor":"datatable-orange"
                }
            })
            console.log(this.tableData)
        }
        if(error){
            console.error(error)
        }
    }

    renderedCallback(){ 
        if(this.isCssLoaded) return
        this.isCssLoaded = true
        loadStyle(this, COLORS).then(()=>{
            console.log("Loaded Successfully")
        }).catch(error=>{ 
            console.error("Error in loading the colors")
        })
    }

}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

Apex class:

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

Colors.css

.datatable-orange{
  color:#fff;
  background-color:#e06000;
}
.datatable-orange:hover{
  color:#000;
  background-color:#e06000;
}
.myTable table>thead .slds-cell-fixed.slds-has-button-menu, .myTable table>thead .slds-cell-fixed.slds-has-button-menu:hover{
  background: antiquewhite;
}