JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

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

CSS

td {
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    padding: 5px;
}

th {
    border-right: 1px solid #000000;
    border-bottom: 2px solid #000000;
    padding: 5px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

JavaScript

// this is for column/row reordering (with mouse)
$.moveColumn = function (table, from, to) {
    var rows = jQuery('tr', table), cols;
    rows.each(function() {
        cols = jQuery(this).children('th, td');
        if (from > to && cols.eq(to).length > 0) {
            cols.eq(from).detach().insertBefore(cols.eq(to));
        } else if (from < to && cols.eq(to).length > 0) {
            cols.eq(from).detach().insertAfter(cols.eq(to));
        }
    });
}

$.moveRow = function (table, from, to) {
    var row_from = table.find('tr').eq(from),
        row_to = table.find('tr').eq(to);
  
    if (from > to && row_to.length > 0) {
      row_from.detach().insertBefore(row_to);
      
    } else if (from < to && row_to.length > 0) {
      row_from.detach().insertAfter(row_to);
    }
}

$(function () {
    var mouse_pos, start_th, start_tr;
    $('th').on('mousedown', function () {
        mouse_pos = 'down';
        start_th = this;
    });
    $('th').on('mouseup', function () {
        if (mouse_pos === 'down' && start_th !== this) {
            jQuery.moveColumn($('table'), $(start_th).index(), $(this).index());
        }
        mouse_pos = 'up';
    });
  
    $('tr').on('mousedown', function () {
        mouse_pos = 'down';
        start_tr = this;
    });
    $('tr').on('mouseup', function () {
        if (mouse_pos === 'down' && start_tr !== this) {
            jQuery.moveRow($('table'), $(start_tr).index(), $(this).index());
        }
        mouse_pos = 'up';
    });
});