JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </tbody>
</table>

CSS

th {
    background-color: #eee;
    width: 50px;
    border: 1px solid #000;
}
td {
    background-color: #bbb;
    width: 50px;
    text-align: right;
    border: 1px solid #000;
}
table{
    border-collapse:separate;
}

JavaScript

(function($) {
    $('table thead tr').sortable({
        'axis': 'x'
    })
}($))