lightning:datatable component - hiding Save and Cancel buttons after inline edit

Question

I've been testing out the new inline edit feature for the lightning:datatable component in a Summer '18 sandbox, but I can't seem to work out how to hide the Save and Cancel buttons after I complete the onsave action.

How can I make this change?

How onsave action is defined in lightning:datatable component

<lightning:datatable aura:id="adviserTable" class="adviserTable"
                        columns="{!v.memberColumns}" data="{!v.memberDataDisplayed}"
                        keyField="planMemberId" onsort="{!c.updateColumnSorting}"
                        sortedBy="{!v.sortedBy}" sortedDirection="{!v.sortedDirection}"
                        onrowaction="{!c.handleRowAction}" enableInfiniteLoading="{!v.enableInfiniteLoading}"
                        onloadmore="{!c.loadMoreMembers}" onsave="{!c.handleSave}"
                        hideCheckboxColumn="true" showRowNumberColumn="true">
</lightning:datatable>

handleSave function

handleSave: function(cmp, event, helper) {
    // call to empty helper function that currently does nothing, but will have server side call to persist changes
    helper.updateEditedValues(event.getParams('draftValues')); 

},

Answer 1

According to the documentation on <lightning:datatable>, you may find the suppressBottomBar attribute useful:

Specifies whether the inline edit Save/Cancel bottom bar should be hidden.

<lightning:datatable suppressBottomBar="true" ... />

Answer 2

Clearing the draftValues attribute on the lightning:datatable component clears the edited cells and hides the Save and Cancel buttons at the bottom of the table.

e.g.

cmp.find("table-component-id").set("v.draftValues", null);

Thanks to tsalb for pointing me in the right direction.

Answer 3

This question has already been answered for Aura components, however here's a solution for LWCs. You can bind a variable to draft-values like this:

<lightning-datatable ... draft-values={draftValues} onsave={handleSave}>

and in your JS, you need to set the variable to null on save, which will remove the save and cancel buttons:

draftValues;
handleSave(event) {
    ...
    this.draftValues = null;
    ...
}

Answer 4

Building on top of Rai's answer, this is what needed for LWC version of datatable

async handleSave(event) {
    try {
        this.draftValues = event.detail.draftValues
        await Promise.all(
            event.detail.draftValues.map(i => updateRecord({
                fields: {
                    Id: i.Id,
                }
            })))
        this.draftValues = undefined
    } catch (error) {
    }
}

Note you need to set draftValues to whatever comes from event, then set to null again.