5

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')); 

},
0

4 Answers 4

18

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" ... />
3
  • 1
    great answer. through the point.
    – Kamal
    Jun 25, 2019 at 22:49
  • 2
    still works in LWC as well simply by adding suppress-bottom-bar - FYI upvoted!
    – Ronnie
    Oct 26, 2019 at 0:22
  • After editing without the save/cancel buttons, how do we access the updated values?
    – jbyrd
    Aug 24, 2021 at 17:31
14

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.

2
  • 6
    Glad you figured it out! It's quite a hassle that these features are implied right now rather than explicitly documented...
    – tsalb
    May 23, 2018 at 15:34
  • this one is sometimes problematic in LWC i have noticed, my oncellshange event calls a save, and immediately clears the draft values after storing them in another const to pass back to my controller, however, after the first cell edit, and another is edited, the bar is back. adding suppress-bottom-bar to the component took it away completely
    – Ronnie
    Oct 26, 2019 at 0:21
4

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;
    ...
}
2
  • Weirdly this only seems to hide buttons on first save and wouldn't hide after editing again
    – dzh
    Jul 18, 2023 at 9:08
  • 1
    What I had to do is first set this.draftValues = event.detail.draftValues <.. do my apex call ..> then this.draftValues = undefined
    – dzh
    Jul 18, 2023 at 9:10
0

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.

You must log in to answer this question.

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