JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table table-hover table-striped" id="mytable">
    <thead>
    <tr>
        <th>#</th>
        <th>Table heading 1</th>
        <th>Table heading 2</th>
        <th>Table heading 3</th>
    </tr>
        <tr>
        <th>#</th>
        <th>Table heading 1</th>
        <th>Table heading 2</th>
        <th>Table heading 3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
    </tr>
    </tbody>
</table>

JavaScript

$(function () {
$('#mytable').sortable({
items: "th",
        //    axis: "x",
           helper: "clone",
/* start: function(event, ui){
        $(".ui-sortable-placeholder").css({width: $(ui.item).width()});    
            }  */
}).disableSelection();
});