0

//html

        <lightning-datatable
            key-field="Id"
            data={dataForDisplay}
            hide-checkbox-column
            columns={columns}>
        </lightning-datatable>

//apex

DEBUG|listNameOffices: (Office 1, Office 2, Office 3)

@AuraEnabled
public static List<String> getNameOffices(){
    try {
        List<Contact> listData = [SELECT Office__c  FROM  Contact WHERE Office__c != ''];
        List<String> listNameOffices = new List<String>();
        for(Contact c : listData){
            listNameOffices.add(c.Office__c);
        }
        System.debug('listNameOffices: ' + listNameOffices);
        return listNameOffices;
    } catch (Exception e) {
        throw new AuraHandledException(e.getMessage());
    }
}

//js

@track columns = [];

connectedCallback(){
    getNameOffices()
        .then((returnedData) => {
        this.columns.push({ label : "Month", fieldName :"Month" });
        returnedData.forEach((item) => {
            this.columns.push({ label : item, fieldName : item.split(' ').join('_') });
        });
        console.log('columns: ' + JSON.stringify(this.columns));
        }).catch(err => console.log(err));
}

This is what the columns array contains after the method has worked out. At first glance, everything seems to be fine. I don't understand what the problem is?

JSON.stringify

columns: [{"label":"Month","fieldName":"Month"},{"label":"Office 1","fieldName":"Office_1"},{"label":"Office 2","fieldName":"Office_2"},{"label":"Office 3","fieldName":"Office_3"}]

This is what my table looks like after loading the page:

enter image description here But if I initially specify the names of the columns, and do not fill them using the connectedCallback() method, then everything works fine:

@track columns = [{label:"Month",fieldName:"Month"},{label:"Office 1",fieldName:"Office_1"},{label:"Office 2",fieldName:"Office_2"},{label:"Office 3",fieldName:"Office_3"}];

enter image description here

5
  • 1
    Without seeing the source data example or your Apex, we couldn't tell you. My immediate guess is that the fieldName attributes are incorrect somehow.
    – sfdcfox
    Jul 19 at 16:29
  • Also, you can (and should) use map to make your code easier to read. Here's an updated version: getNameOffices().then((data) => { this.columns = [{label:'Month',fieldName:'month'},...data.map(item=>({label:item,fieldName:item}))];}).catch((err) => { console.error(err);});
    – sfdcfox
    Jul 19 at 16:33
  • @sfdcfox, I added apex code to the description of the question. I use the apex code in order to be able to dynamically change the number of columns in the table (in the case when adding another office). Jul 19 at 19:15
  • 1
    I suggest opening the question again, because it has been edited and, in my opinion, there is enough information in it to understand and reproduce. Jul 25 at 12:17
  • Can you try pushing to a local array variable first and then setting this.columns all at once? What sfdcfox suggested with map would do the same, just in 1 step.
    – CyberJus
    Jul 30 at 17:52

Your Answer

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

Browse other questions tagged or ask your own question.