JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<table class="sort-table">
  <thead>
    <tr>
      <th class="header-td">Column1 </th>
      <th class="header-td">Column2 </th>
      <th class="header-td">Column3 </th>
      <th class="header-td">Column4 </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="body-td">row1 td1</td>
      <td class="body-td hidden-td">row1 hidden td</td>
      <td class="body-td">row1 td2</td>
      <td class="body-td">row1 td3</td>
      <td class="body-td">row1 td4</td>
    </tr>
    <tr>
      <td class="body-td">row2 td1</td>
      <td class="body-td hidden-td">row1 hidden td</td>
      <td class="body-td">row2 td2</td>
      <td class="body-td">row2 td3</td>
      <td class="body-td">row2 td4</td>
    </tr>
    <tr>
      <td class="body-td">row3 td1</td>
      <td class="body-td hidden-td">row1 hidden td</td>
      <td class="body-td">row3 td2</td>
      <td class="body-td">row3 td3</td>
      <td class="body-td">row3 td4</td>
    </tr>
    <tr>
      <td class="body-td">row4 td1</td>
      <td class="body-td hidden-td">row1 hidden td</td>
      <td class="body-td">row4 td2</td>
      <td class="body-td">row4 td3</td>
      <td class="body-td">row4 td4</td>
    </tr>
  </tbody>
</table>

CSS

.sort-table {
  width: 100%;
  border: 1px solid #cecece;
  background-color: #d5a45a;
}

thead {
  background-color: #0e79c4;
}

th {
  font-size: 1em;
  line-height: 1.375em;
  font-weight: 400;
  background-color: #0e79c4;
  vertical-align: middle;
  padding: 0.5em 0.9375em;
  text-align: left;
}

tr {
  border: 1px solid #cecece;
}

td {
  padding: 1em;
  vertical-align: middle;
  display: table-cell;
  border-top: 1px solid #cecece;
}

.hidden-td {
  display: none;
}

.placeholder-style {
  background-color: grey;
}

JavaScript

$('tbody').sortable({
  items: ">tr",
  appendTo: "parent",
  opacity: 1,
  containment: "document",
  placeholder: "placeholder-style",
  cursor: "move",
  delay: 150,
});