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?
Best Answer
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 thensave
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.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