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;
}
}
@protyushc

This comment has been minimized.

Copy link

@protyushc protyushc commented May 19, 2021

Hi Akshay,
whenever i use any extended datatable, my header and columns values get misaligned. any idea how to resolve the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment