Mui-datatables: Deleting rows from customToolbarSelect

[jakesyl]

In discussing the original implementation of the customToolbarSelect property (#49), @gregnb gives the example of using customToolbarSelect and adding a DeleteIcon to the custom toolbar to continue supporting deleting rows. The example goes on to show a handleClick, but not actually the deleting of the rows.

Beyond either manually modifying the data as a property (which would reinitialize the table removing current filters/page number, or creating a ref and updating the state through that (using setTableData as is done in the selectRowsDelete method now and manually triggering the onRowsDelete) I can't delete rows when customToolbarSelect is enabled

Expected Behavior

I should be able to delete rows when customToolbarSelect is selected

Current Behavior

I can't delete rows when customToolbarSelect is selected

Steps to Reproduce (for bugs)

1. Enable customToolbarSelect
2. Try to delete rows

[jakesyl]

Looks like another use case for this is custom delete icons which was requested on #5 by @JesusADS and that deleting by row id was requested on #44 by @EmanMohammad.

For context, I'm looking at implementing this myself today and want to get my head around the use cases.

[matteo1976]

for delete row with customToolbarSelect i did like this...
I have in my index a function
deleteUsers(rowsSelect)

inside I use rowSelect.data.map() in order to modify my original data and set new state
this.setState({ mydata: new_data})

so when i use customToolbarSelect i just pass my function as props in my component
```
const options = {
filterType: 'checkbox',
customToolbarSelect: selectedRows => (
selectedRows={selectedRows}
onRowsDelete={this.deleteUsers}
/>
),
}

and inside my component i use like this:
 ```
 handleClick = () => {
    //console.log('click!', this.props.selectedRows)
    // a user can do something with these selectedRow values

    this.props.onRowsDelete(this.props.selectedRows)

  }

[jakesyl]

this is what I ended up doing @matteo1976, but since there's a delete prop, would be great to have this baked in.

[ghost]

I'm sorry, but I do not quite understand the code snipplets that @matteo1976 posted (which is supposed to illustrate how this issue can be resolved by ourselves).

Is this.props.onRowsDelete(this.props.selectedRows) the one that passes the selected rows to be deleted, resulting in the deletion?

[MiKaminskas]

I tried to do evrything like it was described by @matteo1976 , but it's not working. If I'm perfoming delete then table deletes rows. But on the second call the table is again full with deleted rows.

UPD: no more questions. after update on version 2.6 everything is working. I had 2.4 before.

[krisgoks]

Can someone please give a working example on how to achieve this? I am struggling get this to work

[patorjk]

@krisgoks check out the examples folder in this repo. Here's a codesandbox of the selectable rows example, which shows one way of handling row deletion:

https://codesandbox.io/s/muidatatables-custom-toolbar-hv5n9?file=/index.js