Option to hide the Cancel/Save Changes buttons when editing a table

I would like an option to not show these buttons when editing a table.

In this case there is no underlying database to update.

I have a table with rows sourced from various place. I let the user enter data into cells. When the user is done entering the needed data they click a "Done" button and those rows are used when creating an object array that is passed to a bulk update query to update a another table.

Hi @bradlymethews :wave:

Happy to help you out here. When selecting and inspecting a component in the right hand pane, you can dynamically set whether to show or hide a button:

I use this frequently when attempting to run hidden work-flows or operations in the background. This can most certainly be used to hide buttons, too!

Thanks, but in this case I am referring specifically to the Cancel/Save Changes buttons on the table edit mode:

Hi @bradlymathews :wave:

So it turns out you're able to disable the save changes button doing something like this:

but unfortunately I don't think we'll be able to disable the other one apart from using some custom-css which may be a brittle solution at best.

Best

Pawan

Thanks, that looks like it will be a workable solutions.

After playing, this CSS worked, but it also hides the clear selection button. Replace tblBundledProducts with your table name:

#table-tblBundledProducts .-left .ant-btn {
  display: none
}

But like all CSS hacks, and as you point out, it will be brittle.

2 Likes

Do we have a better solution of this at this point (i.e. remove the cancel / save dialog completely other than resorting to CSS)?

Hi @lastfreedom,

Unfortunately I don't think the table has been changed to allow for users to disable the popup which shows "Cancel/Save Changes" as this tool is central to editing tables and their data.

Could you give me more details about your use case?

From bradlymathew's example above, it seems that he is using an empty table as a medium for data intake without the table being connected to a database.

For this use case, a much better option would be to use a Form component to create an object array that can then be passed to a bulk update query to update another table.

Are you looking to populate a table with data to then edit or do you need a large number of empty fields to input data to then use in queries/other components?

Jumping onto this thread as I've had a similar desire last week.

We want to hide the save button at the bottom because we have a lot row actions and want saving to be a row action for "UI" and behaviour consistency.

Additionally, as part of the review process, the business wants the end users to review, edit, and save records row by row to ensure they've been checked thoroughly.
Rather than enabling users to save data en mass to reduce mistakes.

Hi @ferret141,

Ok it sounds like you are looking to have row edits be row actions. Where you are going to have users click on the row action icon on the far right side and then run a query which will update the DB table based on the changeset of the table.

I can add you plus 1 onto the ticket to hide the save/canceltable modal as well!

Precisely. Thanks.

1 Like