title: Example of Ant Design Table with both resizable columns and drag and drop columns?
body: <p>I am trying to implement both resizable and drag and drop columns in <a href="https://ant.design/components/table/" rel="nofollow noreferrer">Ant Design's Table component</a>.</p>
  <p>I have got both working independently but cannot make them work without errors or bugs at the same time. I need to be able to drag on a column border and resize it horizontally and also be able to click on a the column header and drag and drop it.</p>
  <p>I am looking for these functionalities to be similar to the features of this table:
  <a href="https://www.ag-grid.com/example.php" rel="nofollow noreferrer">https://www.ag-grid.com/example.php</a></p>
  <p>I have tried implementing it with <a href="https://github.com/STRML/react-resizable" rel="nofollow noreferrer">react-resizable</a> for resizable columns and both <a href="https://github.com/clauderic/react-sortable-hoc" rel="nofollow noreferrer">react-sortable-hoc</a> and <a href="https://github.com/raisezhang/react-drag-listview" rel="nofollow noreferrer">react-drag-listview</a> for drag and dropping column order.</p>
  <p>With the react-drag-listview the latest problem is that I must disable one feature when using the other, and in Firefox, this results in the error:</p>
  <blockquote>
  <p>Uncaught TypeError: target.parentNode</p>
  </blockquote>
  <p>I can't find any examples of both of these features being used together with the Ant D table but I'm sure it must be possible to make them work simultaneously.</p>
  <p>TIA</p>