0

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

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)
  • 1
    You are right! The JSON string was never serialized. – Glen De Marcos Aug 1 at 6:42
1

In your case, I would recommend using connectedCallback() instead of wire. If you worry about the execution sequence of connectedCallback and rendering, take a look at the lifecycle hooks provided by lwc: https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_lifecycle_hooks . You can choose the right one if you need.

In your case, since other part is already rendered corrected and if you put your TypeAttributes retrieved by a connectedCallback() I don't see any issue in it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.