Show/Hide OOB SAVE button on LWC datatable on an event fire

Question

I have a LWC component embed in column of LWC Datatable using custom data types. Now I want to show/Hide OOB datatable Save button on an event fire from embed LWC component.

sdGridCustomDatatableChild - LWC datatable Component

-> sdGridCustomDatatableChild.js

import LightningDatatable from 'lightning/datatable';
import DatatableLookupTemplate from "./lookupTemplate.html";
export default class sdGridCustomDatatableChild extends LightningDatatable {
    static customTypes = {
        lookup: {
            template: DatatableLookupTemplate,
            standardCellLayout: true,
            typeAttributes: ['recordID','parentID']
        }
    };    
}

-> LookupTemplate.html

<template>
<c-lwc-reusalbe-lookup-search-component recordid={typeAttributes.recordID} parentid={typeAttributes.parentID}></c-lwc-reusalbe-lookup-search-component>
</template>

-> sdGridCustomDatatableChild.html

<template>
</template>

-> sdGridCustomDatatableChild.js-meta.xml

Answer 1

Your child component would have to fire off an event:

this.dispatchEvent(
  new CustomEvent('removeedits', { bubbles: true, composed: true })
)

Note that this event configuration will travel all the way up the DOM to the root element, so make sure you pick a reasonably unique name.

Next, configure your table to handle the event:

<c-lwc-reusalbe-lookup-search-component onremoveedits={handleRemoveEdits} ...

Now, you can handle that event:

handleRemoveEdits(event) {
  event.target.draftValues = null;
}

By setting draftValues to null, it will reset inline editing. All changes will be lost, so make sure you apply them to your data if you wish to preserve the data before discarding the draftValues.