[SalesForce] LWC – Lightning-Datatable Not Refreshing When Data Changes

I have a simple component that calls an apex method which returns some records. I want to display them. The problem is when I fetch the records and add them into the array, the component does not refresh. After some research I belive I need to bind "this" but since i'm new to js, i'm not sure what that means.

<template>
    <lightning-card title="Date" icon-name="standard:record">  
        <lightning-datatable columns={columns} 
                            data={data} 
                            key-field="id"
                            hide-checkbox-column="true"
                            show-row-number-column="true"></lightning-datatable>
    </lightning-card>
</template>

Js:

import { LightningElement,api, track, wire } from 'lwc';
import populateData from '@salesforce/apex/ApexClass.Data';

export default class RelatedListEventOrder extends LightningElement {
    @api recordId;
    @track columns = [
        {
            label: 'Account Name',
            fieldName: 'accountname', 
            type: 'text',
        }, {
            label: 'Status',
            fieldName: 'Status',
            type: 'text'
        }, {
            label: 'Delivered',
            fieldName: 'delivered',
            type: 'boolean'
        }
    ];

    error;
    @track data = [
        {
            accountname: 'a',
            delivered: true,
            status: 'good'
        } 
    ];
    
    connectedCallback() {
        window.console.log("In connectedCallback");
        this.eventOrders();
    }

    eventOrders() {
        window.console.log("this.recordId: " + this.recordId);
        populateData({ recordId: this.recordId })
            .then((resWrapper) => {
                window.console.log("Sucessful");
                window.console.log("resWrapper: " + resWrapper);
                if(resWrapper){
                    window.console.log("resWrapper length: " + resWrapper.length);
                    resWrapper.forEach((res) => {
                        window.console.log("res.order.Account.Name: " + res.order.Account.Name);
                        window.console.log("res.order.Delivered__c: " + res.order.Delivered__c);
                        
                        window.console.log("res.order.Status: " + res.order.Status);

                        let lineItem = {};
                        lineItem.accountname = res.order.Account.Name,
                        lineItem.delivered = res.order.Delivered__c,
                        lineItem.status = res.order.Status,
                        window.console.log("========lineItem acc name:====== " +lineItem.accountname);
                        this.data.push(lineItem);
                    });
                }
                window.console.log("data.length: " + this.data.length);
            })
            .catch((error) => {
                this.error = error;
                window.console.log("Error: " + error);
            });
    }

}

The records return fine from apex as I can view then in the console. And lineItem is also populated. My question is when I add them to data, why is the component not reflecting this change? I have a feeling it is because "this" is not set correctly but I am unsure how to fix.

Best Answer

LWC data binding doesn't detect a call to push.

make an intermediate variable, and push to that array, then assign it to the data array right at the end. eg:

let temp = [];
temp.push(lineItem);
//ect ect
this.data = temp;

Related Solutions

[SalesForce] Pre selected Rows with Pagination not working in Datatable in Saleforce LWC

You need to keep a separate list of all selections in one variable, then update this variable accordingly as you navigate pages (and also keep track of any changes).

allSelectedRows = [];
preselectedRows = [];
changePage(pageNumber) {
    let pageData = this.getPageData();
    this.allSelectedRows = this.allSelectedRows
        .filter((rowId) => !pageData.find((record) => record.UserId === rowId)) // Preserve rows outside current page
        .concat(this.template.querySelector('lightning-datatable').selectedRows); // and add rows from current page
    this.page = pageNumber;
    pageData = this.getPageData();
    this.preslectedRows = this.allSelectedRows.filter(
        (rowId) => pageData.find((record) => record.UserId === rowId) // And now find records in current page
    );
}
onFirst() {
    this.changePage(1);
}
onNext() {
    this.changePage(this.page + 1);
}
// ... etc ...

Also, some general notes...

First, don't use await and then() together:

try {
// other code here
  let userList = await getUserList();
  // rest of code here
} catch(error) {
  this.error = error;
}
this.showLoadingSpinner = false;

Or:

getUserList().then(
  userList => {
    // success logic here
  })
  .catch(error => this.error = error)
  .finally(() => this.showLoadingSpinner = false);

Second, you really didn't need to JSON.serialize and JSON.parse, you can return the wrappers directly.

[SalesForce] How to add a value to an object’s property in LWC (Dynamic column to Datatable)

IIUC, you have an apex object that has a columns property, which you pass to your lwc. In your lwc, you want to add an action column for edit and delete.

Assuming your c-icrm-rich-datatable is extending the lightning-datatable component, the columns and actions property needs to look like this:

const actions = [
    { label: 'Edit Record', name: 'edit_record' },
    { label: 'Delete', name: 'delete_record' }
];

const columns = [
    { type: 'action', typeAttributes: { rowActions: actions, menuAlignment: 'left' } }
];

Note that columns and actions are arrays of objects. Each column on your table is an object which is an element in the columns array.

In your loop, you can do this:


let newCol = { type: 'action', typeAttributes: { rowActions: actions } };

for (let _key in _map) {
    if (_map.hasOwnProperty(_key)) {
        let record = {
            key: _key,
            iconName: _map[_key].iconName,
            objectPluralLabel: _map[_key].objectPluralLabel,
            recordList: _map[_key].recordList,
            columns: _map[_key].columns
        };
        record.columns.push(newCol);
    }
    this.records.push(record);
}

Check the "Creating Static Row-Level Actions" section here for more details.

Edit: Assumptions:

Your Apex object Column looks like this:

public class Column {
    @AuraEnabled
    public String fieldName {get; set;}
    @AuraEnabled
    public String fieldType {get; set;}
    @AuraEnabled
    public String label {get; set;}
}

So when you do _map[_key].columns in your loop, it looks like this

[
  {
    "fieldName": "Name",
    "fieldType": "text",
    "label": "Grant Report Name"
  },
  {
    "fieldName": "Award_Amount__c",
    "fieldType": "currency",
    "label": "Award Amount"
  },
  {
    "fieldName": "Docket_Record__c",
    "fieldType": "reference",
    "label": "Docket Record"
  }
]

And after you do record.columns.push(newCol);, if you ran a console.log(record.columns) It would look like this:

[
  {
    "fieldName": "Name",
    "fieldType": "text",
    "label": "Grant Report Name"
  },
  {
    "fieldName": "Award_Amount__c",
    "fieldType": "currency",
    "label": "Award Amount"
  },
  {
    "fieldName": "Docket_Record__c",
    "fieldType": "reference",
    "label": "Docket Record"
  },
  {
    "type": "action",
    "typeAttributes": {
      "rowActions": [
        {
          "label": "Edit",
          "name": "edit_record",
          "iconName": "utility:edit"
        },
        {
          "label": "Delete",
          "name": "delete_record",
          "iconName": "utility:delete"
        }
      ]
    }
  }
]

Best Answer

Related Solutions

[SalesForce] Pre selected Rows with Pagination not working in Datatable in Saleforce LWC

[SalesForce] How to add a value to an object’s property in LWC (Dynamic column to Datatable)

Related Topic