JSFiddle - React, Tailwind, and code Playground

by Trevor Dowdle

HTML

<div id="allLists">

<span class="list">
<table class="altRow ">
    <thead style="display:block;padding:0px">
    <tr>
        <th style="padding:4px 3px;" width="10">#</th>
        <th style="padding:4px 3px;" width="240">Name</th>
    </tr>
    </thead>
    <tbody class="sortable swimTableTbody" style="display:block;min-height: 25px;">
         <tr id="row_13666">
           <td width="10">&nbsp;</td>
           <td width="240">some content1</td>
        </tr>
         <tr id="row_13666">
           <td width="10">&nbsp;</td>
           <td width="240">some content2</td>
        </tr>
         <tr id="row_13666">
           <td width="10">&nbsp;</td>
           <td width="240">some content3</td>
        </tr>
         <tr id="row_13666">
           <td width="10">&nbsp;</td>
           <td width="240">some content4</td>
        </tr>
         <tr id="row_13666">
           <td width="10">&nbsp;</td>
           <td width="240">some content5</td>
        </tr>
        <tr id="row_13666">
           <td width="10">&nbsp;</td>
           <td width="240">some content6</td>
        </tr>
         <tr id="row_13666">
           <td width="10">&nbsp;</td>
           <td width="240">some content7</td>
        </tr>
        <tr id="row_13666">
           <td width="10">&nbsp;</td>
           <td width="240">some content8</td>
        </tr>
    </tbody>
</table>

</span>

<span class="list">

<table class="altRow ">
    <thead style="display:block;padding:0px">
    <tr>
        <th style="padding:4px 3px;" width="10">#</th>
        <th style="padding:4px 3px;" width="240">Name</th>
    </tr>
    </thead>
    <tbody class="sortable swimTableTbody" style="display:block;min-height: 25px;">

        <tr id="row_13666">
           <td width="10">&nbsp;</td>
           <td width="240">some content9</td>
        </tr>
         <tr id="row_13666">
           <td width="10">&nbsp;</td>
           <td width="240">some content10</td>
        </tr>
         <tr id="row_13666">
     ...

CSS

#allLists {
bottom: 12px;
left: 0;
position: absolute;
right: 0;
top: 10px;
white-space: nowrap;
}

.swimTableTbody {
 display: block;
 overflow-y: auto;  
 width: 100%;
 height: 150px;
}

.list {
display: inline-block;
width: 300px;
top: 80px;
position: relative;
}

JavaScript

$(".sortable").sortable({
            connectWith: ".sortable",
            placeholder: "ui-state-highlight",
            scroll: true,
            helper: function(e, tr)
            {
                var $originals = tr.children();
                var $helper = tr.clone();
                $helper.children().each(function(index)
                {
                    $(this).width($originals.eq(index).width());
                });
                $helper.css("background-color", "rgb(223, 240, 249)");
                return $helper;
            },
            sort: function(event, ui){    
                    $(document).scrollLeft(ui.offset.left);
            }
        });
        $("#sortable").disableSelection();