JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<h1>Hidden columns</h1>

<table>
    <tbody class="sort-y">
        <tr>
            <td>First</td>
            <td class="hidden">&nbsp;</td>
            <td>Second</td>
            <td>Third</td>
        </tr>
        <tr>
            <td>First</td>
            <td class="hidden">&nbsp;</td>
            <td>Second</td>
            <td>Third</td>
        </tr>
        <tr>
            <td>First</td>
            <td class="hidden">&nbsp;</td>
            <td>Second</td>
            <td>Third</td>
        </tr>
        <tr>
            <td>First</td>
            <td class="hidden">&nbsp;</td>
            <td>Second</td>
            <td>Third</td>
        </tr>
        <tr>
            <td>First</td>
            <td class="hidden">&nbsp;</td>
            <td>Second</td>
            <td>Third</td>
        </tr>
        <tr>
            <td>First</td>
            <td class="hidden">&nbsp;</td>
            <td>Second</td>
            <td>Third</td>
        </tr>
        <tr>
            <td>First</td>
            <td class="hidden">&nbsp;</td>
            <td>Second</td>
            <td>Third</td>
        </tr>
        <tr>
            <td>First</td>
            <td class="hidden">&nbsp;</td>
            <td>Second</td>
            <td>Third</td>
        </tr>
        <tr>
            <td>First</td>
            <td class="hidden">&nbsp;</td>
            <td>Second</td>
            <td>Third</td>
        </tr>
        <tr>
            <td>First</td>
            <td class="hidden">&nbsp;</td>
            <td>Second</td>
            <td>Third</td>
        </tr>
    </tbody>
</table>
	<h1>No hidden columns</h1>

<table>
    <tbody class="sort-y">
        <tr>
            <td>First</td>
            <td>&nbsp;</td>
            <td>Second</td>
            <td>Third</td>
        </tr>
        <tr>
            <td>First</td>
            <td>&nbsp;</td>
            <td>Second</td>
           ...

CSS

table {
    width: 100%;
    margin: 20px;
    border: 1px solid red;
}
.hidden {
    display: none;
}
.ui-sortable-placeholder {
    visibility:visible !important;
}
tr td:nth-child(1) {
    background-color:red;
}
tr td:nth-child(2) {
    background-color:blue;
}
tr td:nth-child(3) {
    background-color:green;
}
tr td:nth-child(4) {
    background-color:yellow;
}

JavaScript

$(".sort-y").sortable({
    helper: function (e, tr) {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function (index) {
            // Set helper cell sizes to match the original sizes
            $(this).width($originals.eq(index).width());
        });
        return $helper;
    },
    sort: function (e, ui) {
        ui.placeholder.find('td').each(function (key, value) {
            if (ui.helper.find('td').eq(key).is(':visible')) $(this).show();
            else $(this).hide();
        });
    }
});