Not able to get the updated data in LWC Lightning data table

Question

I have lightning datatable with inline edit . With draftvalues i am able to get the edited values and using updated record I am able to update. It reflected in the backend and not in ui.

LWC JS

@track datanew;
saveDraftValues = [];


handleSave(event) {
        this.saveDraftValues = event.detail.draftValues;
        const recordInputs = this.saveDraftValues.slice().map(draft => {
            const fields = Object.assign({}, draft);
            console.log('fields======'+fields+'=='+JSON.stringify(fields));
            return { fields };
        });
        console.log('draft======'+JSON.stringify(this.saveDraftValues));
        console.log('rec======'+this.recordInputs);
        // Updateing the records using the UiRecordAPi
        const promises = recordInputs.map(recordInput => updateRecord(recordInput));
        Promise.all(promises).then(res => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Records Updated Successfully!!',
                    variant: 'success'
                })
                
            );
            
            this.saveDraftValues = [];
            console.log('=datanew====='+JSON.stringify(this.datanew));
        }).catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error',
                    message: 'An Error Occured!!',
                    variant: 'error'
                })
            );
        }).finally(() => {
            this.saveDraftValues = [];
        });
    }


EX:

draft======`

[{"City__c":"test","Id":"0017F000036b5AoQAI"},{"City__c":"test1","Id":"0017F000036b5ApQAI"}]`

=datanew=====

[{"Id":"0017F000036b5AoQAI","Name":"wer","City__c":"car","Description":"test","url":"/0017F000036b5AoQAI"},
{"Id":"0017F000036b5ApQAI","Name":"teddy","City__c":"bike","Description":"radha","url":"/0017F000036b5ApQAI"},
{"Id":"0017F000036b5AoQPI","Name":"squid","City__c":"ind","Description":"test","url":"/0017F000036b5AoQPI"}]

Datanew should be updated with draft values Please help me

Answer 1

It depends on where datanew comes from. If it comes from Apex, you need to call the appropriate method to refresh the data.

// datanew is loaded via wire method
import { refreshApex } from '@salesforce/apex'

...

Promise.all(promises).then(res => {
  refreshApex(this.datanew);

Or:

// datanew is loaded via imperative apex call
Promise.all(promises).then(res => {
  getTableData({}).then(data => {
    this.datanew = data;
  });

Otherwise, you can just apply the values directly:

this.datanew.forEach(data => 
  Object.assign(
    data, 
    event.detail.draftValues.find(draft => draft.Id === data.Id)
  )
)