Lightning Web Components inline editing Datatable - data update issue

Question

I am starting with Lightning Web Components and I've tried to use data table. For some reason I can see data being changed in table - but in js controller my variable remain unchanged. js

import { LightningElement, track, api } from 'lwc';
import getProducts from 
'@salesforce/apex/ONE_SRV_OpportunityLineItem.getAvaliableOli';
import saveProducts from         '@salesforce/apex/ONE_SRV_OpportunityLineItem.saveProducts';

export default class Productsearch extends LightningElement {
@api recordId;
@track error;
@track products;

html

<lightning-datatable data={filteredProducts}
                                     columns={columns}
                                     selected-rows={selectedRows}
                                     onrowselection={updateSelected}
                                     onsave={save}
                                     oncellchange={cellChange}
                                     key-field="Id"

                ></lightning-datatable>

Any ideas why this happend?

Does anyone have good example how to do this properly?

Answer 1

Before I begin with my answer, I would like to point a few key points.

1) There is no two-way binding, LWC works in prop-down - event up. That means when you edit anything on the UI, you have to write an onChange handler to update those individual values back to your javascript model. In your case when cell changes you have to update your filteredProducts attribute.

2) The one-way binding is from JS - HTML. But...there are some limitations to it. Complex Object /Array changed in JS are not propagated to the markup. I have asked a similar post for this behavior.

Now coming to your question, as there is no two-way binding, so when you edit a cell cellChange event is called and when you click on save then save event is called.

In those events you get the recordId and updated values in event.detail.draftValues. You can call apex to update those values.

mySaveMethod(event){
         console.log('save method valled');
         console.log(event.detail.draftValues);
        //Update the rows by calling apex and passing array.
        updateMyOppList(event.detail.draftValue).then(()=>{
            refreshApex(this.filteredProducts); //To fetch latest updated values from database, and rerender the UI
        });


    }

Note: Original Array which you are iterating over, even if you edited the value, it still contains the old values. You have to update them, i prefer using refreshApex to get latest values from database.

Sample Playground code: https://developer.salesforce.com/docs/component-library/tools/playground/xYVFGbRGb/7/edit