Custom Icons or Image as column in lightning-datatable LWC

customIconOutput.css

.image
{
  height: 1.5rem;
  width: auto;
}

customIconOutput.html

<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>

customIconOutput.js

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

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