React-beautiful-dnd: React beautiful dnd not working with React Semantic UI Table

[MRauca]

Hello, I've tried to use react-beautiful-dnd in combination with React Semantic UI Table, but I cannot get it to work properly because of provided.innerRef issues ( https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md). I've seen some users experience similar issues with material ui too. (https://stackoverflow.com/questions/51839298/use-material-ui-table-with-react-beautiful-dnd).
Here is the code sample which is working properly for a normal html table but not for a semantic ui react table: https://codesandbox.io/s/l467j0wj7m.
I will appreciate any feedback, solutions or workarounds.

[alexreardon]

Have you tried looking at our table guide

Let me know if that helps!

I am not sure how semantic UI exposes refs. Does it have a innerRef or similar named callback for exposing underlying DOM nodes?

[alexreardon]

I am not sure the exact details for how semantic UI exposes refs. Rather than digging into that personally, it would be great to get the input from somebody who is more familiar with that library

[MRauca]

Have you tried looking at our table guide

Let me know if that helps!

I am not sure how semantic UI exposes refs. Does it have a innerRef or similar named callback for exposing underlying DOM nodes?

Thank you very much for the help which pointed me in a direction. I found some info regarding refs in react-semantic-ui here: https://react.semantic-ui.com/addons/ref/#types-ref. I still have some trouble integrating it. Will get back with info and hopefully a working solution.

[MRauca]

Here is the working solution: https://codesandbox.io/s/84vz99mxn9. Previews attemps are commented out in the render function.

[AdamBCo]

@MRauca Thanks for providing the solution above. It really helped. I did notice that when you drag the row, the cells collapse. How were you able to address that issue? Thanks for the help.

[MRauca]

@AdamBCo Here is an official example that seems to be working properly: https://react-beautiful-dnd.netlify.com/?path=/story/tables--with-fixed-width-columns. The code for that example is here: https://github.com/atlassian/react-beautiful-dnd/blob/master/stories/src/table/with-fixed-columns.jsx. The styles are lost for the row while dragging and they need to be applied specifically while dragging. Hope it helps.

const Row = styled.tr`
  /* stylelint-disable comment-empty-line-before */
  ${props =>
    props.isDragging
      ? `
    background: ${colors.G100};

    /* maintain cell width while dragging */
    display: table;
  `
      : ''} /* stylelint-enable */;
`;