Use material-ui table with react-beautiful-dnd

Question

I\'m looking to use material-ui in combination with react-beautiful-dnd in order to make a sortable table. However, using material-ui\'s table components causes trouble as T

Answer 1

I came across this while working on a similar task. Re the OP's question, TableRow and TableBody both support a ref prop (vs. innerRef) that forwards to the root element.

Refer to the FAQ:

• https://material-ui.com/getting-started/faq/#how-can-i-access-the-dom-element

This is mentioned in the docs for both TableRow and TableBody:

• https://material-ui.com/api/table-row/
• https://material-ui.com/api/table-body/

Therefore you do not necessarily need to move the Draggable/Droppable parts into their own components per the answers from @Bryant and @funql.org.

You also don't necessarily need to pass isDragging to your TableRow (though you could if you created a custom wrapper component that accepts this prop). If your use-case is styling the row when dragged, you can add a className or style prop to your TableRow and apply conditional styling when isDragging is true.

Here's a working example of a Material UI table that features sortable rows with react-beautiful-dnd:

• https://codesandbox.io/s/react-material-ui-and-react-beautiful-dnd-uofv4

Incidentally I created it as part of an issue report because I'm not sure why there is a 1 pixel jump (the thickness of the border-bottom on table cells) when a given table row is dragged, but that's another issue! The implementation is solid enough to support the many cases where a minor 1px visual glitch is acceptable.