Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Custom Icons or Image as column in lightning-datatable LWC
.image
{
height: 1.5rem;
width: auto;
}
<template>
<template if:true={isImage}>
<p class="slds-truncate slds-p-horizontal_x-small">
<img src={getUrlValue} class="image" alt={getUrlValue}/>
</p>
</template>
<template if:true={isIcon}>
<span class="slds-truncate slds-p-horizontal_x-small">
<lightning-icon icon-name={getIconValue} alternative-text={getIconValue} size="small"></lightning-icon>
</span>
</template>
</template>
import { LightningElement, api } from 'lwc';
const validNameRe = /^([a-zA-Z]+):([a-zA-Z]\w*)$/;
const validIconCategory = ['standard','utility','custom','action','doctype'];
export default class CustomIconOutput extends LightningElement {
@api value = '';
get isIcon(){
return validNameRe.test(this.value.trim().toLowerCase()) && validIconCategory.includes(validNameRe.exec(this.value.trim())[1].toLowerCase());
}
get getIconValue(){
return this.value.toLowerCase();
}
get isImage(){
return !this.isIcon;
}
get getUrlValue(){
return this.value;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.