5

I'm using a lightning-datatable in LWC, and hooking into 'oncellchange' to ensure that any inline editing is automatically included in the underlying javascript data model immediately.

I then have another button 'Recalculate' that is not in the data-table, and this button will 'action' the change and perform some calculations elsewhere on page.

On click of the 'Recalculate' button, I would like the yellow highlights on the inline edited cells of the data-table to be cleared, but I can't work out how. This is so the user can see that their changes have been applied.

There's no reference in the documentation stating how this can be done, nor is there anything on how to get any component to re-render.

I have tried looking for DOM elements that have the highlighting class defined, but I suspect I am hitting a Shadow DOM boundary (which would make sense) and therefore cannot access the sub-elements of the data table component.

Improve this question
3

1 Answer 1

Reset to default
5

I managed to get it done, by force re-rendering the data-table. Which I did by changing the table's column attribute. You have to track column and then recreate column by slicing and stitching column array together. 

  @track columns = [
    { label: 'Label', fieldName: 'name', editable: true },
    { label: 'Website', fieldName: 'website', type: 'url', editable: true },
    { label: 'Phone', fieldName: 'phone', type: 'phone', editable: true },
    { label: 'CloseAt', fieldName: 'closeAt', type: 'date', editable: true },
    { label: 'Balance', fieldName: 'amount', type: 'currency', editable: true },
];

 clearDraft(){

       this.columns = [...this.columns]; 

    }

Playground Link : https://developer.salesforce.com/docs/component-library/tools/playground/gKChLwn-d/5/edit

Improve this answer
3
  • LOL - Well, that's a bit of a hack, but it works - though I had to dig through your code sample to work it out since it requires: 1 - The column definition to be stored in a constant (which is being referenced by the [...columns]. 2 - The column member variable to be tracked. I would not normally do either of those things. If you update your answer to include those points I'll accept as correct.
    – Rob Baillie
    Commented Jun 10, 2019 at 13:44
  • @RobBaillie you don't actually have to store the table column as constant. Just make it as trackable property.
    – Pranay Jaiswal
    Commented Jun 10, 2019 at 14:12
  • Yep, looks like that does it.
    – Rob Baillie
    Commented Jun 10, 2019 at 14:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .