JSFiddle - React, Tailwind, and code Playground

by ipr101

HTML

<table class="list" border="1">
    <tbody>
        <tr>
            <th>Outlet</th>
            <th>Delivery Point</th>
            <th>Actions</th>
        </tr>    
        <tr class="sep">
            <td>Foobar</td>
            <td>Foobar</td>
            <td><input type="button" value="Delete"/></td>
        </tr>
        <tr class="sep">
            <td>Barfoo</td>
            <td>Foobar</td>
            <td><input type="button" value="Delete"/></td>
        </tr>
        <tr class="sep">
            <td>Foo</td>
            <td>Foobar</td>
            <td><input type="button" value="Delete"/></td>
        </tr>
        <tr class="sep">
            <td>Bar</td>
            <td>Foobar</td>
            <td><input type="button" value="Delete"/></td>
        </tr>
    </tbody>
</table>

CSS

table.list {
    border-width: 1px;
    border-spacing: 2px;
    border-style: outset;
    border-color: gray;
    border-collapse: collapse;
    background-color: white;
}
table.list th {
    border-width: 1px;
    padding: 1px;
    border-style: inset;
    border-color: gray;
    background-color: white;
    -moz-border-radius: ;
}
table.list td {
    border-width: 1px;
    padding: 1px;
    border-style: inset;
    border-color: gray;
    background-color: white;
    -moz-border-radius: ;
}

JavaScript

$(document).ready( function() {
    $('table.list tbody').sortable({
        disabled: false,
        items: 'tr.sep',
        // handle: 'span.ui-icon-arrowthick-2-n-s',
        opacity: 0.7,
        //axis: 'y',
        update: function( e, ui ) {
            var currentTr = ui.item;
            // do some stuff...
        }
    });
});