JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://use.fontawesome.com/c3ef28c600.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.2.0/js/dataTables.rowReorder.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css">
<table id="orderTable" class="list-container list__table--items" order_draft_id="1">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th>Item Name</th>

      <th></th>

      <th>Stock</th>

      <th>Unit price</th>
      <th>Total ($)</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr product_id="14" vat_id="15" order_data_draft_id="1">
      <td>1</td>
      <td>
        <i class="fa fa-ellipsis-v"></i>
      </td>
      <td>
        <div class="list-item">
          00014017632
        </div>
      </td>
      <td class="type--subdued">x</td>
      <td>
        0
      </td>
      <td>
        0
      </td>

      <td>
        0
      </td>
      <td class="list__table--controls">
        <button type="button" data-action="addRow" class="btn-link"><i class="fa fa-ellipsis-h"></i></button>


      </td>
    </tr>

    <tr product_id="6" vat_id="15" order_data_draft_id="2">
      <td>2</td>
      <td>
        <i class="fa fa-ellipsis-v"></i>
      </td>
      <td>
        <div class="list-item">
          00014011932










        </div>
      </td>



      <td class="type--subdued">x</td>




      <td>
        0
      </td>















      <td>
        0
      </td>

      <td>
        0
      </td>
      <td class="list__table--controls">
        <button type="button" data-action="addRow" class="btn-link"><i class="fa fa-ellipsis-h"></i></button>


      </td>
    </tr>

    <tr product_id="6"...

JavaScript

$(document).ready(function() {
 $.fn.copyAllAttributes = function (sourceElement, erase, copyClass, ignoreAttr) {
        erase = erase || false;
        copyClass = copyClass || false;
        ignoreAttr = ignoreAttr || '';

        // 'that' contains a pointer to the destination element
        var that = this;

        // Place holder for all attributes
        var allAttributes = $(sourceElement).prop("attributes"),
            attrString = '';

        if (allAttributes && that.length == 1) {
            $.each(allAttributes, function () {
                // Ensure that class names are not copied but rather added
                if(this.name == "class"){
                    copyClass ? that.addClass(this.value) : 0;
                } else if (ignoreAttr.indexOf(this.name) == -1){
                    that.attr(this.name, this.value);
                    attrString += ' ';
                    attrString += this.name;
                }
            });

            erase ? $(sourceElement).removeAttr(attrString) :0; // bug
        }
        return that;
    };
  var table = $('#orderTable')
    .DataTable({
      dom: 't',
      rowReorder: {
        snapX: 7,
        update: false
      },
      // ordering: true,
      orderFixed: {
        post: [0, 'asc']
      },
      // keys: true,
      paging: false,

    }),
    empty_row = false;

  table.on('row-reorder', function(e, diff, edit) {
    table.order([0, 'asc']);

    table.rows().invalidate();

    for (var i = diff.length - 1; i >= 0; i--) {
      diff[i].nodeData = table.row(diff[i].node).data();
    }

    for (var i = table.data().length - 1; i >= 0; i--) {
      for (var j = diff.length - 1; j >= 0; j--) {
        if (i === diff[j].newPosition) {
          table.row(i).data(diff[j].nodeData);
          table.cell(i, 0).data(diff[j].newData);
          i--;
        }
      }
    }

    table.draw(false);
  });

  table.on('click', 'th', function() {
    reindexRows();
  });

 ...