0

I have a lightning datatable

html code

 <c-custom-lightning-datatable key-field="Id"
                        data={sObjectRecordList}
                        columns={columns}
                        onsave={handleSave}
                        draft-values={draftValues}
                        onaccountselection={handleSelection}>
    </c-custom-lightning-datatable>

js code - onaccountselection I have called the handleSelection method

  @track draftValues = [];
  handleSelection(event){
       console.log('this.draftValues ::: '+JSON.stringify(this.draftValues));
  }

My problem here is that, if I edit any values on the datatable - the draftValues should contain that.

However, if I fire the handleSelection method after changing any value on the datatable, the this.draftValues console.log is coming as empty. The previous changes in the datatable is not held in the draftValues valriable.

Is this not the correct way to fetch the previous draft values ?

2
  • As per the Html markup, you are referring to a custom component lighting datatable. Any reason why you are not using the standard base cmp <lightning-datatable>..... </lightning-datatable>?
    – Shamina
    Feb 7 at 6:35
  • Yes, it has a template embeded for lookups, so I need the custom component.
    – Madhurima
    Feb 7 at 6:40
2

Data bindings in LWC are always from parent to child, and never from child to parent. That is to say, it is impossible for an LWC to directly update the parent's data. You can read more about it in the @api decorator documentation. I refer to you to the LWC OSS documentation on this, as it's more complete.

Technically, the only documented way to access the new draft values is to handle the onsave event. You may also be able to read the values directly, as in:

this.template.querySelector('c-custom-lightning-datatable').draftValues;

However, since API (public) properties are supposed to be read-only, I'm not sure this would work. Either way, you cannot expect this.draftValues to be updated in the parent automatically.

3
  • Ok, I have another question. Had I used <lightning-datatable> instead of the custom component, would that have worked? Or I would have the same error because its not a two way binding? @sfdcfox
    – Madhurima
    Feb 7 at 14:43
  • @Madhurima Correct. There is no two-way binding in LWC.
    – sfdcfox
    Feb 7 at 16:32
  • Even I thought this.template.querySelector('c-custom-lightning-datatable').draftValues; might not work, but it surprisingly does. So thank you so much. @sfdcfox
    – Madhurima
    Feb 8 at 9:53

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.