Confirmation when deleting datatable row


i have a Dash data table where rows can be deleted. I’d like to have some sort of warning when a users tries to delete a row. I saw I can use a Confirm Dialog, the problem is setting up the callbacks.
I already have a large callback with several inputs and the data table’s data as output. This callback deals with all editing of the table (it updates a backend DB), including row deletion. When a user deletes a row this “editing” callback is triggered. I can have this callback display the confirm dialog, but then I would need to re- trigger the “editing” callback to perform the deletion - but this time I won’t have the data needed to perform the action.

Any ideas would be greatly appreciated :slight_smile:

Hello @amihaio,

When I work with databases and a front end, I actually make a change log instead of taking their actions directly.

I also give them the ability to reapply the old value. That way the can undo their changes if necessary.

Then when the user is ready, they click save, which pushes the change log to get parsed for the updates.

I understand not wanting to do things this way due to ease.

How exactly do you trigger the delete action? Is it just based upon the data changing?

Thanks for the quick reply!

Actually the change log sounds like an interesting idea (I was wondering how I would implement an undo function).
Do you mind elaborating on how you implement this?
The change log is a file on disk?
Does this mean you don’t use the edit ability of the data table, rather you have an “update table” modal or something of the like? Then this modal collects the intended changes and pushes them to another components that performs the update in the backend?

Regarding the current implementation, the Dash data table has the a native ability to delete rows, which changes the data property of the table and this is what triggers a callback that updates the backend DB.


I use the edit functions of the table as well, but when the data_timestamp changes, I compare the old version (data_previous) to the new version (data) and pull out the changes. I place the rows key, column, old value and new value into a separate table.

On the second table, when you delete a row it reverts the change to the original table.

For my row ids, all of my tables have unique identifiers or combos in order to create distinct matches.

I haven’t messed with deleting rows, but you’d still know that the row doesn’t exist in the new data.

I like doing this all on the clientside to make sure the changes are quick. Lol.

Thanks for the info
I started implementing a change list as you mention, seems like the right thing to do for many reasons.
Still though, the solution for initial problem seems extremely hacky and not scalable. I’ll describe the situation again since I don’t think it was clear at first.

Since an output can appear in only one callback, I have a main callback that takes as input all things that can change the table and have the table’s data prop as output. This works fine as long as you don’t need to move to another callback in the middle, as is the case for want a warning dialog. In this case I can trigger the dialog from the main callback, but then need to go back to the main callback to be able to output the data. This means that for each such element (e.g. warning dialog) I want to trigger before making the update to the table I need to create a hidden div as output of the warning’s callback and input to the main callback. (I hope this is better described now).
If you have any ideas on how to do this better I’d greatly appreciate it :slight_smile:

If there is a way to update a table without a dash callback that can also solve the problem

1 Like


What you can do is instead of allowing the data to delete the row, you can have an icon that is a red “x”, so it looks the same, but is actually a cell.

Then when that cell is clicked, you fire your confirmation text. If yes, then you remove that row from the tables data, and fire your db update in the background. :slight_smile:

Hey, back from the dead…
I want to implement what you mentioned with my own icon in a column instead of the built in row deleter.
I was wondering though how to catch a click on a cell in a callback? This doesn’t edit the table so nothing changes.


(All I’m looking for is an extra confirmation step before deleting a row to mitigate accidental clicks. Doesn’t have to be a confirmation modal, could also be a change in icon for example. So any simple solution to this would be appreciated.)

Hey @amihaio,

Have you checked out AG grid.

With it, you can create a custom cellRenderer that can send back info to the cellRendererData prop of the grid. With this, you could design a button that can delete a row easily.


Yeah I heard about it, and I want to eventually move to it, but it’s a big change and I want a stable working version with dataTable first. In the end I managed to solve the problem with some hacks. Turns out data_previous is not updated when making changes to the table via callback which was a huge pain. Anyway, it works for now and at some point I’ll move to AG grid, thanks

What’d you end up doing?

It’s a bit hard to explain cuz of the convoluted logic. One example is that when deleting a row, it is first deleted from the table and only then the confirmation modal is triggered. So if the deletion is not confirmed, the row is put back in place, but since the change was made via callback the data_previous is not updated meaning that if you delete a row right after, it doesn’t trigger the confirmation since the length of data and data_previous is the same. So I needed to change the logic to look at the number of columns…
Anyway, I hope AG grid is easier to work with

So, with the addition of dash 2.9, this actually becomes a lot easier.

What you can do is have an icon in a specific cell, just for fun. Then have your callback be triggered from the cellClicked prop of the table.

Use this to display a modal asking for confirmation of deleting. If yes is selected, then use the yes button as the input and the cellClicked of the table to delete the row via a partial delete callback with patch.


I can’t find the cellClicked prop in the datatable reference. This is for datatable and not AG grid?

You could use active_cell I think.

The cellClicked is a Dash AG Grid prop.

There is no cellClicked prop for the Dash DataTable - the closest thing is active_cell The issue with active_cell is that’s triggered just by navigating to the cell, and you can’t click on it more than once, so it doesn’t work well as a trigger for a button.

Yeah I was thinking along the same lines, thanks! (I’ll make the move to AG grid at some point)

1 Like