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.
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
P.S.
If there is a way to update a table without a dash callback that can also solve the problem
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.
@jinnyzor
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.
Thanks!
(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.)
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
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.
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.
