CODEWITHSUNDEEP
reactjssemantic-ui-react
M. Rauca
M. Rauca

Reputation: 40

React beautiful dnd not working with React Semantic UI Table

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. (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.

Upvotes: 0

Views: 964

Answers (1)

Simon
Simon

Reputation: 66

I had the same problem and found a solution here.

Put a Ref around Table.Body and set the provided.innerRef on Ref rather than on Table.Body:

{(provided, snapshot) => (
    <Ref innerRef={provided.innerRef}>
        <Table.Body {...provided.droppableProps}>
        </Table.Body>
    </Ref>
)}

And the same for Table.Row:

{(provided, snapshot) => (
    <Ref innerRef={provided.innerRef}>
        <Table.Row  {...provided.draggableProps}
            {...provided.dragHandleProps}>
        </Table.Row>
    </Ref>
)}

That should do the trick. See also: https://github.com/atlassian/react-beautiful-dnd/issues/859

Upvotes: 2

Related Questions