function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Robert Baillie 10Robert Baillie 10 

How do I switch off the 'edited' highlighting in LWC lighting-datatable

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.

Does anyone have any idea?
Best Answer chosen by Robert Baillie 10
NagendraNagendra (Salesforce Developers) 
Hi Robert,

Sorry for this issue you are facing.

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]; 

    }
Thanks,
Nagendra