JSFiddle - React, Tailwind, and code Playground

by urashita

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css">
<script src="https://cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">1. Summary</a></li>
    <li><a href="#tabs-2">2. Detail</a></li>
  </ul>
  <div id="tabs-1">
    <ul id="sortable1" class="connectedSortable ui-helper-reset">
      <table id="summary" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Position</th>
                
            </tr>
        </thead>
 
        <tbody id="summary_body">
            <tr>
                <td>1</td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
            </tr>
            </tbody>
      </table>
    </ul>
  </div>
  <div id="tabs-2">
    <ul id="sortable2" class="connectedSortable ui-helper-reset">
      <table id="detail" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
               ...

CSS

#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }

JavaScript

$(function() {
    var tabs = $( "#tabs" ).tabs();    
    $( "#summary_body, #detail_body" ).sortable().disableSelection();
  });
  
    $('#summary').DataTable( {
         "searching": false,
        "paging": false,
        "ordering": false,
        "info": false
    } );
  
    $('#detail').DataTable( {
         "searching": false,
        "paging": false,
        "ordering": false,
        "info": false
    } );