JSFiddle - React, Tailwind, and code Playground

by ayyanarpms

HTML

<script src="https://www.jqueryscript.net/demo/touch-table-row-sorter/RowSorter.js"></script>
<div id='sortable' style='height:200px;overflow-y:scroll'>
<table id="table3">
    <thead>
        <tr>
            <th colspan="3">handler: "span.sort-handler"</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>Record 1 <span class="sort-handler"></span></td>
            <td>Record 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Record 2 <span class="sort-handler"></span></td>
            <td>Record 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Record 3 <span class="sort-handler"></span></td>
            <td>Recrod 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Record 4 <span class="sort-handler"></span></td>
            <td>Record 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Record 5 <span class="sort-handler"></span></td>
            <td>Record 5</td>
        </tr>
         <tr>
            <td>Row 6</td>
            <td>Record 6 <span class="sort-handler"></span></td>
            <td>Record 6</td>
        </tr>
     <tr>
            <td>Row 7</td>
            <td>Record 7 <span class="sort-handler"></span></td>
            <td>Record 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Record 8 <span class="sort-handler"></span></td>
            <td>Record 8</td>
        </tr>
    </tbody>
    <tfoot>5
        <tr>
            <td colspan="3">&nbsp;</td>
        </tr>
    </tfoot>
</table>
</div>

CSS

<style>
    table {float: left; margin: 20px; font-size: 14px; font-family: tahoma, arial, sans-serif;}
    table.sorting-table {cursor: ns-resize; box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);}
    table thead th {background-color: #ccc; padding: 5px 8px;}
    table td {background-color: #ddd; padding: 5px 8px;}
    table tr.sorting-row td {background-color: #8b8;}
    table td.sorter {background-color: #f80; width: 10px; cursor: ns-resize;}
    .sort-handler {float: right; background-color: #f80; width: 14px; height: 14px; margin: 2px 0 0 6px; cursor: ns-resize;}

    table.sorting-table tbody tr:not(.sorting-row) td {opacity: 0.2;}

    /* some styling for table1 */
    table#table1 tr.sorting-row td {background-color: #ccc;}
    table#table1.sorting-table {cursor: ns-resize; box-shadow: none; outline: 1px solid #333;}
    table#table1.sorting-table tbody tr:not(.sorting-row) td {opacity: 1; color: #bbb; text-shadow: 0 1px 0 rgba(255, 255, 255, 1);}
</style>

JavaScript

RowSorter("#table3", {
    handler: 'span.sort-handler',
    onDrop: function(tbody, row, new_index, old_index) {
        var table = tbody.nodeName === 'TBODY' ? tbody.parentNode : tbody;
        table.querySelectorAll('tfoot td')[0].innerHTML = (old_index + 1) + '. row moved to ' + (new_index + 1);
    }
});