I have a tabulator table that users are able to edit.
When a user edits a table, I maintain the changes in a 'pending' state. They click a submit button, and the changes are persisted.
However, when the user sorts, filters, or refreshes the table it will clear their changes.
How can I warn the user about data loss when they perform a table refresh?
What I need is something simple like:
tabulator.subscribe("data-loading", () => !this.pendingChanges)
I tried making a module that did the above and checked if it worked with any of the data-* internal events, but it doesn't prevent refreshing the table, so I'm not sure if there's an event I can use to do this?
The internal data-loading event is used to confirm whether a particular module has data available to load, by returning false you are telling Tabulator that your module has nothing to load, but that wont prevent other modules saying that they do have data available.
Also unless you are using remote sorting/filtering then those actions will not trigger a data refresh in the first place.
There are a few options if you are using ajax sorting/filtering:
Instead of using ajax sorting/filtering, load all data into the table and then let Tabulator do the sorting/filtering for you, this will then persist any edited values. This is the default behaviour of Tabulator
I would suggest that you trigger the save back to the remote server as soon as the user has finished editing the cell, that way there is no risk of their sort causing issues.
If a user clicks off a cell that is being edited to sort or filter then it will be saved before the fitler/sort is triggered.
You can do this based on the 'cellEdited' event:
table.on("cellEdited", function(cell){
//cell - cell component
});
another option would be to use the cellEdited event to track when changes to the table are made and then store that row data somewhere, in the event that that data is refreshed you could then reapply those changes.