JSFiddle - React, Tailwind, and code Playground

by dylanjha

HTML

<table class='draggable-columns'>
    <thead>
        <tr>
            <th data-method='one' data-col=1>
                One
            </th>
            <th data-method='two' data-col=2>
                Two
            </th>
            <th data-method='three' data-col=3>
                Three
            </th>
       </tr>
    </thead>
    <tbody>
        <tr>
            <td data-col=1>data</td>
            <td data-col=2>data</td>
            <td data-col=3>data</td>
        </tr>
        <tr>
            <td data-col=1>data</td>
            <td data-col=2>data</td>
            <td data-col=3>data</td>
        </tr>
    </tbody>
</table>

SCSS

table {
    border-collapse: collapse;
    th, td {
        border: 1px solid #ccc;
        padding: 4px 6px;
    }
    th {
        background: #eee;
    }
    td {
        
    }
}

JavaScript

$(function(){
   
    $('.draggable-columns th').draggable({
        start: function(e, ui){
            var d = $(ui.helper)
               ,col = d.data('col')
               ,restOfCol = $("td[data-col=" + col + "]");
            for(var i=0; i< restOfCol.length; i++){
             var el = restOfCol[i];
                d.appendTo(el);
            }
        }        
    });
    
});