fonteva-design-guide/force-app/main/default/lwc/pfmTableCustomBadge/pfmTableCustomBadge.js

## Dev, Build and Test

import { LightningElement, api, track } from 'lwc';

export default class PfmTableCustomBadge extends LightningElement {
    @api rowId;
    @api colId;
    @api badgeAttributes;
    @api
    get val() {
        return this.val;
    }
    set val(value) {
        this.additionalText = value.additionalText;
        this.showBadge = value.showBadge;
    }

    @track classes = 'pfm-custom_badge';
    @track additionalText;
    @track hasAdditionalText = true;
    @track showBadge = true;
    @track renderedCallbackTriggered = false;
    @track valMargin = 'right:xx-small';
    @track badgeName;

    renderedCallback() {
        if (!this.renderedCallbackTriggered && this.badgeAttributes) {
            this.badgeName = 'pfm-custom_badge-' + this.rowId;

            if (this.showBadge) {
                const badge = this.template.querySelector('c-pfm-badge');
                Object.keys(this.badgeAttributes).forEach(key => {
                    badge[key] = this.badgeAttributes[key];
                });
                badge.refreshAttributes();
            }

            this.valMargin = this.showBadge ? 'right:xx-small' : '';
            this.renderedCallbackTriggered = true;
        }
    }
}