Mui-datatables: Question regarding the use of onRowsDelete.

[maitedev]

Hi, I have a question regarding the use of onRowsDelete.
I want to use the following function to remove items from the table, but I don't know if I am using it correctly combined with the option onRowsDelete Thanks in advance.

handleDeleteUser = (idToDelete) => {
axios.delete(https://jsonplaceholder.typicode.com/users/${idToDelete})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
};
render() {
const options = {
onRowsDelete: (rowsDeleted) => {
const idsToDelete = rowsDeleted.data.map(item => item.dataIndex)
idsToDelete.map(idToDelete => this.handleDeleteUser(idToDelete))
}
};

[gabrielliwerant]

The way onRowsDelete works currently with async requests is a bit awkward. Internally, onRowsDelete and the delete method are synchronous. This means that it won't be able to wait for a successful response from a promise before it executes. You would need to use it the other way around, by deleting first and then syncing it with your API. Essentially, it is, at the moment, only intended for UI behavior.

If you want to delete rows on the UI as a result of a successful response from an asynchronous request, then you would need to supply your own delete button and function via customToolbarSelect. There you could cause the table to wait for your success response before removing the data and updating the table. But bear in mind that means that you are responsible for handling the table's data state.

There is a PR up now which should help devs to integrate asynchronous requests with the onRowsDelete function if you want to keep up with progress on it: https://github.com/gregnb/mui-datatables/pull/835.

[maitedev]

Okay Gabriel, I keep track of the onRowsDelete function progress.
You told me I should use it backwards, removing it first and then synchronizing it with its API.
translated that to my code what change should I make? or it is simply knowing that I should not expect a successful response from a promise before it is executed.
  
onRowsDelete: (rowsDeleted) => {
  const idsToDelete = rowsDeleted.data.map (item => item.dataIndex)
  this.handleDeleteUser (idsToDelete)
        console.log (idsToDelete);
}

[gabrielliwerant]

If you're not concerned with making the request first and making the table deletions dependent on that, then the code you have should work as is. So that is correct, you should bear in mind that even if your request is unsuccessful, the rows will still show as deleted from the table, so you will have to re-render the table to show the correct data in that case.

The other option is to create your own delete function with customToolbarSelect.

[maitedev]

Hi grabriel, so I must create my own delete button and incorporate it into the customToolbarSelect option?
I have seen some examples of how some developers use this property, but it is not very clear to me.

[gabrielliwerant]

Correct, for now, the only solution is to add your own custom select toolbar as in the customize-toolbarselect example. Simple Ex:

customToolbarSelect: (selectedRows, displayData, setSelectedRows) => (
  <div>
    <button onClick={() => handleMyDelete(selectedRows)}>My Delete</button>
  </div>
),

[maitedev]

Thank you very much Gabriel!
I have another question, related to the bar that is displayed when selecting a checkBox. Should I close this issue and open another issue to ask the question or can you answer me here?
I would like to know if there is a way to stop showing this bar.
Thanks,

[gabrielliwerant]

Well, since you asked it here, I'll answer it here!

There have been a number of issues opened about showing/hiding the bar including some PRs. My trouble is that out of all of them, I don't think I've ever heard a good answer to the UX question about what exactly is supposed to happen once it's removed, since that's the only way users currently have of acting on their selections. You can prevent any selections from taking place at all with the options, but if you allow selections and remove the bar, I don't see how users will make any use of their selected fields. I'm open to hearing what the user story here would be.

[maitedev]

Well, the buttons of my application I am showing them below the AppBreadcrumbs component. If I'm not going to use any button in the table, it doesn't make much sense to show the empty bar when checking a checkbox.

I mean the bar that is displayed showing the delete button.

[gabrielliwerant]

I'll take that into consideration. You can watch the other issues on this or the PR up for review to keep up-to-date on this issue.

[maitedev]

Ok, thanks Gabriel !! Excuse my bothering.