JSFiddle - React, Tailwind, and code Playground

by Eric L

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/rowreorder/1.1.1/js/dataTables.rowReorder.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.1.1/css/rowReorder.dataTables.min.css">
<form>
  <table>
    <tr>
      <td><a href="#" text="600whatwhat" data-toggle="modal" data-target="#splitLoad">Click me for modal</a></td>
    </tr>
  </table>
</form>

<div class="modal" id="splitLoad" tabindex="-1" role="dialog" aria-labelledby="splitLoadLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="splitLoadLabel">Split Load</h4>
      </div>
      <div class="modal-body">
        <div class="table-responsive col-md-4">
          <table class="table table-striped table-bordered table-responsive table-condensed" id="splitShipment">
            <thead>
              <tr>
                <td>Store</td>
                <td>State</td>
                <td>% Available</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td id="store">Store1</td>
                <td>WI</td>
                <td>60</td>
              </tr>
              <tr>
                <td id="store">Store2</td>
                <td>WI</td>
                <td>40</td>
              </tr>
              <tr>
                <td id="store">Store3</td>
                <td>WI</td>
               ...

CSS

.modal-dialog {
    overflow-y: auto;    
    overflow-x: auto;
    width: 90%;
    height: auto;
}
.modal-footer {
    overflow-y: auto;    
    overflow-x: auto;
 }

JavaScript

var table2 = $('#splitShipment').DataTable({
      fixedHeader: true,
      responsive: true,
      paging: false,
      info: false,
      searching: false
    });
    var table = $('#splitList').DataTable({
      fixedHeader: true,
      responsive: true,
      rowReorder: {
        selector: 'td:last-child'
      },      
      columnDefs: [{
        orderable: true,
        targets: 0
      }, {
        orderable: true,
        className: 'reorder',
        targets: '_all'
      }],
      order: [
        [4, 'asc']
      ],
      paging: false,
      info: false,
      searching: false
    });
  
    $('#splitShipment tbody').on( 'click', 'tr', function () {            
      $(this).addClass('selected').siblings().removeClass('selected');  
      $('#splitList tbody tr').removeClass('selected');
      
    } );
    $('#splitList tbody').on( 'click', 'tr', function () {            
      $(this).addClass('selected').siblings().removeClass('selected');    
      $('#splitShipment tbody tr').removeClass('selected');
    } );
 
    $('#right').click( function () {
      if($(".selected").length > 0 ) {
        var row = $('.selected').closest("tr");
        console.log(row);
        var lastStop = parseInt($('#splitList tr:last td:last-child').text()) + 1 ;    
        var data=[];
        $(row).find('td').each(function() {
          data.push($(this).text());          
        });
        data.push('<input type="text"/> ');
        data.push(lastStop);
        table.row.add(data).draw();
        table2.row(row).remove().draw();
      }
      else {
        alert("select something");
      }
    } );