JSFiddle - React, Tailwind, and code Playground

HTML

<table id="sortFixed">
    <caption>Kurt Vonnegut novels</caption>
    <thead>
        <tr><th>Year</th><th>Title</th><th>Grade</th></tr>
    </thead>
    <tbody>
        <tr><td>1969</td><td>Slaughterhouse-Five</td><td>A+</td></tr>
        <tr><td>1952</td><td>Player Piano</td><td>B</td></tr>
        <tr><td>1963</td><td>Cat's Cradle</td><td>A+</td></tr>
        <tr><td>1973</td><td>Breakfast of Champions</td><td>C</td></tr>
        <tr><td>1965</td><td>God Bless You, Mr. Rosewater</td><td>A</td></tr>
    </tbody>
</table>

CSS

.must-have-class {
    background-color: orange;
}

#sortFixed thead tr {
    border-bottom: 1px solid #d6d6d6; 
    cursor: n-resize;
}

#sortFixed tr {
    border-bottom: 1px solid #e6e6e6; 
    cursor: n-resize;
}

JavaScript

// Fix the width of the cells

$('td, th', '#sortFixed').each(function () {
    var cell = $(this);
    cell.width(cell.width());
});

$('#sortFixed tbody').sortable({
        items: '> tr',
        forcePlaceholderSize: true,
        placeholder:'must-have-class',
        start: function (event, ui) {
            // Build a placeholder cell that spans all the cells in the row
            var cellCount = 0;
            $('td, th', ui.helper).each(function () {
                // For each TD or TH try and get it's colspan attribute, and add that or 1 to the total
                var colspan = 1;
                var colspanAttr = $(this).attr('colspan');
                if (colspanAttr > 1) {
                    colspan = colspanAttr;
                }
                cellCount += colspan;
            });

            // Add the placeholder UI - note that this is the item's content, so TD rather thanTR
            ui.placeholder.html('<td colspan="' + cellCount + '">&nbsp;</td>');
        }
    }).disableSelection();