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">

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


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" ... />
  • 1
    great answer. through the point. – Kamal Jun 25 '19 at 22:49
  • 2
    still works in LWC as well simply by adding suppress-bottom-bar - FYI upvoted! – Ronnie Oct 26 '19 at 0:22

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.


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

Thanks to tsalb for pointing me in the right direction.

  • 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 '18 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 '19 at 0:21

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:

handleSave(event) {
    this.draftValues = null;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.