[SalesForce] Datatable dynamic initialization styles LWC

I am trying to fill in data table column type attributes being pulled from custom metadata specification. I'm using a wrapper class to hold all info surrounding datatable columns, but additional info is hosted for typeAttributes for datetime columns. The data table is rendering (and the typeAttributes are making into the front end when printing) except for the typeAttribute formatting on the table isn't applying. The official documentation references connectedCallback() as the equivalent of init in aura components but I'm not sure that is 100% true. Could it be an issue with the rendering lifecycle? Would i need to make use of a wire service (@wire) on the column styling to process earlier than the connectedCallback()?

Component

<lightning-datatable
    key-field="Id"
    data={tableData}
    columns={tableColumns}
    suppress-bottom-bar="true"
    hide-checkbox-column="true"
    onsort={updateColumnSorting}
    sorted-by={sortedBy}
    sorted-direction={sortedDirection}>
</lightning-datatable>

JS

//onInit
connectedCallback() {
    getResults({recordId:this.recordId, apiConfigName:this.externalDataCategory})
        .then(result => {
            this.tableColumns = result.columns;
            this.tableData = result.data;
            this.tableLoadingState = false;
            this.totalRecords = result.data.length;
            if (result.data.length !== 0 && !isNaN(result.data.length)) {
                this.totalPages = Math.ceil(result.data.length / this.pageSize);
            }
            else {
                this.tableColumns = [];
                this.tableData = [];
                this.tableLoadingState = false;
                this.totalRecords = 0;
                this.totalPages = 1;
            }
            const event = new CustomEvent('recordsloaded', {
                detail: result.data.length
                    });
            this.dispatchEvent(event);
        })
        .catch(error => {
            this.tableError = error;
            this.tableData = undefined;
            this.tableLoadingState = false;
        });
}

Apex

/** setting typeAttributes within dataTable column **/


TypeAttributes ta = new TypeAttributes('long', 'numeric', 'long', '2-digit', '2-digit', '2-digit', '2-digit', true);
column.typeAttributes = JSON.serialize(ta);

/** TypeAttributes Wrapper **/


public class TypeAttributes {
    @AuraEnabled public String weekday;
    @AuraEnabled public String year;
    @AuraEnabled public String month;
    @AuraEnabled public String day;
    @AuraEnabled public String hour;
    @AuraEnabled public String minute;
    @AuraEnabled public String second;
    @AuraEnabled public Boolean hour12;

    public TypeAttributes(String weekday, String year, String month, String day, String hour, String minute, String second, Boolean hour12) {
        this.weekday = weekday;
        this.year = year;
        this.month = month;
        this.day = day;
        this.hour = hour;
        this.minute = minute;
        this.second = second;
        this.hour12 = hour12; 
    }
}

Best Answer

There is no problem with the implementation design. According to the code that you posted, there is problem in the consuming of returned data.

You are serialising type attributes using JSON.serialize(ta) in apex. But I do not see where you are parsing it back to Object. typeAttributes in column is Object. So you should be doing something like:

JSON.parse(column.typeAttributes)
Related Topic