Column Drag & Drop Reordering - react-table

react-table-dnd-reordering.js

// In your component, add this var and functions:

 let columnBeingDragged = null;

  const onDragStart = e => {
    columnBeingDragged = e.target.dataset.columnIndex;
  };

  const onDrop = e => {
    e.preventDefault();
    const newPosition = e.target.dataset.columnIndex;
    const currentCols = visibleColumns.map(c => c.id);
    const colToBeMoved = currentCols.splice(columnBeingDragged, 1);
    currentCols.splice(newPosition, 0, colToBeMoved[0]);
    setColumnOrder(currentCols);
  };

// In the TH element, add the following props:

  <th
  {...column.getHeaderProps()}
  {...column.getHeaderProps(column.getSortByToggleProps())}

  // THESE
  data-column-index={i}
  draggable="true"
  onDragStart={onDragStart}
  onDragOver={e => e.preventDefault()}
  onDrop={onDrop}
>
  {column.render('Header')}
</th>

Do you have a code sandbox example?

Do you have a code sandbox example?

The solution is based on this example