JSFiddle - React, Tailwind, and code Playground

by Benahmed Taoufiq

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://rawgit.com/jebaird/dragtable/master/src/js/jquery.dragtable.js"></script>
<link rel="stylesheet" href="https://rawgit.com/jebaird/dragtable/master/src/css/dragtable-default.css">
<table class="tablex" border="1">
  <thead>
    <tr>
      <th>th 1</th>
      <th>th 2</th>
      <th>th 3</th>
      <th>th 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td 1-1</td>
      <td>td 1-2</td>
      <td>td 1-3</td>
      <td>td 1-4</td>
    </tr>
    <tr>
      <td>td 2-1</td>
      <td>td 2-2</td>
      <td>td 2-3</td>
      <td>td 2-4</td>
    </tr>
    <tr>
      <td>td 3-1</td>
      <td>td 3-2</td>
      <td>td 3-3</td>
      <td>td 3-4</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

table thead th {
  padding: 3px 10px;
  border-bottom: 1px solid #000000;
  background: #CCCCCC;
  background-size: 50%;
}

table tbody td {
  padding: 3px 10px;
  white-space: no
}

table tbody tr:nth-of-type(2n+1) td {
  background: #7AA6DC;
}

JavaScript

$(document).ready(function() {
/* document.ready n'est pas obligatoire sur jsfiddle, vu qu'elle est utilisée en interne */
  $('.tablex').each(function() {

    $(this).dragtable({
      placeholder: 'dragtable-col-placeholder test3',
      items: 'thead th:not( .notdraggable ):not( :has( .dragtable-drag-handle ) ), .dragtable-drag-handle',
      appendTarget: $(this).parent(),
      scroll: true
    });


  });
});