4

How to apply drag-n-drop functionality from react-dnd library to TableHeaderColumn component from material ui

The problem is react-dnd does not support custom tags and suggests to wrap TableHeaderColumn in div but material ui does not allow to wrap table component in any tag :(

I can't find any examples by this theme

Denis
  • 2,429
  • 5
  • 33
  • 61

1 Answers1

1

And the answer is - there are no way to do it with react-dnd, at least for this moment. So I've ended up using react-sortable-hoc which works as expected in pair with material UI table elements.

Denis
  • 2,429
  • 5
  • 33
  • 61
  • 2
    Can you provede an example? React-sortable-hoc with material-ui doesn't work for me. – WebBrother Dec 05 '16 at 14:36
  • Did you ever find a solution to this? – terrabl Mar 26 '18 at 19:45
  • Would also like to see an example of react-sortable + material ui – gabrielwr Oct 05 '18 at 15:01
  • 3
    probably too late for the previous commenters, but google still lead me here. This is a good library for this purpose, so here's an example https://codesandbox.io/s/material-demo-q9313?file=/demo.js – Bastiat Apr 13 '20 at 21:32
  • @Bastiat do you have links for sorting the rows as well? – blah Jul 14 '21 at 09:15
  • 2
    @blah updated the same link. This is the basis of how I typically do table sorting, you see the sortFunc on the column definition and then a function that handles the sorting and allows custom sorting per column/based on different data types. Related to this library, notice the distance prop on the sortable header. That keeps the sort from starting immediately which allows the onClick to be registered for row purposes rather than the mousedown eating the event for column sort – Bastiat Jul 19 '21 at 15:56