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

## Dev, Build and Test

import { api, LightningElement } from 'lwc';
import pfmText from './pfmText.html';

export default class PfmTableCustomComponent extends LightningElement {
    @api rowId;
    @api colId;
    @api val;
    @api config;

    componentName = 'c-pfm-text';
    renderedCallbackTriggered = false;

    connectedCallback() {}

    renderedCallback() {
        if (this.renderedCallbackTriggered || !this.config) {
            return;
        }

        const customComponent = this.template.querySelector(this.componentName);
        const componentAttribute =
            this.config && this.config.componentAttributes ? this.config.componentAttributes : null;
        if (componentAttribute) {
            Object.keys(componentAttribute).forEach(key => {
                customComponent[key] = componentAttribute[key];
            });
        }

        if (this.config.preRefreshComponentAttributes) {
            this.config.preRefreshComponentAttributes(customComponent, this.val);
        }

        if (customComponent.refreshAttributes) {
            customComponent.refreshAttributes();
        }

        this.renderedCallbackTriggered = true;
    }

    render() {
        this.componentName = this.config && this.config.componentName ? this.config.componentName : 'c-pfm-text';
        switch (this.componentName) {
            case 'NewComponentToBeSet':
                return pfmText;
            case 'c-pfm-text':
                return pfmText;
            default:
                return pfmText;
        }
    }
}