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>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>
</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;
}

.selected {
    background-color: #000000;
    color:#FFFFFF;
}

JavaScript

// this is for column reordering (with arrows)
$.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));
        }
    });
}

$(function () {
    $('th').on('click', function () {
        $('.selected').removeClass('selected');
        $(this).addClass('selected');
        var that = this;
        $('body').off('keydown');
        $('body').on('keydown', function (event) {
            if (event.keyCode === 39) {       //right
                jQuery.moveColumn($('table'), $(that).index(), $(that).index() + 1);
            } else if (event.keyCode === 37) {//left
                jQuery.moveColumn($('table'), $(that).index(), $(that).index() - 1);
            }
        });
    });
});