You have to use typeAttribute object in URL column. I tried to use JS object but couldn't use JS object in typeAttribute in datatable. So, my finding was that your label should be a field in each entry in data list.
Try this playground version of your code: https://developer.salesforce.com/docs/component-library/tools/playground/vi7rAWnIH/20/edit
Issue with your version of code which is rendering label as target is there is no value attribute in typeAttribute object. It's correct name is target. Screenshot from lightning-datatable documentation:
Codet snippet in case playground is not available:
JS data array:
const data = [{createdDate : "1479944705000" , duplicateWebsite : "www.google.com", websiteLabel:"google", personDetailMatch : true }];
datatable column definition:
const columns = [
{ label: 'Date', fieldName: 'createdDate' , type: 'date-local',typeAttributes :{ month: "2-digit",day: "2-digit"}},
{ label: 'Duplicate Website', fieldName: 'duplicateWebsite', type: 'url' , typeAttributes:{label: { fieldName: 'websiteLabel' }}},
{ label: 'Person Detail Match', fieldName: 'personDetailMatch', type: 'boolean' }
];
As @sfdcfox mentioned, this is both a feature, and a limitation, of LWC's "shadow DOM" feature. You can create your own custom component. But, there is a workaround how to over come LWC's "shadow DOM".
A. Creating custom component approach
Scenario You need to change styling of component which is simple to implement.
You can create standard html tag and apply your custom styling.
<div class="slds-form-element slds-form-element_horizontal">
<label class="slds-form-element__label" for="horizontal-input-id-02">Textarea Input</label>
<div class="slds-form-element__control">
<textarea id="horizontal-input-id-02" placeholder="Placeholder Text" class="slds-textarea"></textarea>
</div>
</div>
B. LWC's shadow dom workaround
Scenario You need to change styling of component which is hard to implement.
- Create separate CSS file with you styling. Make CSS selector as detailed as possible. General selectors like
div
will override styling of every div
element on your page (not only on your component).
- Upload CSS file as static resource.
- Load your style in JS like this:
import { LightningElement } from 'lwc';
import CUSTOM_CSS from '@salesforce/resourceUrl/custom_css';
export default class TestComponent extends LightningElement {
connectedCallback() {
loadStyle(this, CUSTOM_CSS)
.then(() => {});
}
}
Best Answer
I think you are looking for
linkify
type attribute for "text" column type.