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 had this same problem. What you have to do is move the Draggable/Droppable part into a component and pass that in via the component attribute.

For example, I wanted to be able to re-order columns in a table header. Row is my droppable area, and Cell is Draggable.

public render() {
    return (
        
            {headerCells}
        
    );
}

const DroppableComponent = (
    onDragEnd: (result: DropResult, provided: ResponderProvided) => void
) => (props: any) => {
    return (
        
            
                {(provided) => {
                    return (
                        

                            {props.children}
                            {provided.placeholder}
                        
                    );
                }}
            
        
    );
};

Notice I made Droppable Component be a function that returns a function. That was so that I could pass in the onDragEnd method from my main component. I tried putting my DroppableComponent in the component attribute as JSX and I was getting an error, so this is what I ended up with.

For the Draggable part I had the following:

    ...


const DraggableComponent = (id: string, index: number) => (props: any) => {
    return (
        
            {(provided) => (
                

                    {props.children}
                
            )}
        
    );
};

Hope this helps!