[next] Implement or allow drag&drop for row reordering

[Phygon]

I would like to be able to reorder data rows via drag & drop, for example using react-beautiful-dnd.

In a previous version of the next branch (0.2.20), I could extend the TableBody class and inject the neccessary placeholder

s from react-beautiful-dnd. But with the rewrite from class-based to function components, this is not possible anymore.

I would suggest to add an API to inject the placeholders and styles to the table components to make it possible for client code to implement d&d, or alternatively, to support row reordering natively.

[Phygon]

Here is an example of a d&d-able table with the older version of the next branch:

https://codesandbox.io/s/material-table-drag-drop-on83oj

[ckchiu2]

I created the PR #569 (and also merged in #661) for the exact purpose.

Although you cannot inject the placeholder in the same table body, you can create another one and put it in.

Demo: https://codesandbox.io/s/material-table-drag-drop-forked-ncq5y9?file=/src/TableComponents.js

[Phygon]

Thanks!
I didn't know you could just have another in there.

Would you consider adding something like this to the core, or do you think it's a niche use case?

[ckchiu2]

It is more like a workaround because all material-table components are self contained.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.