JSFiddle - React, Tailwind, and code Playground

by akaimo

HTML

<div class="wrapper">

<table border="1" id="navigate">
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>Stuff!</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
        </tr>
        <tr>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
        </tr>
        <tr>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
        </tr>
        <tr>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
        </tr>
        <tr>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
        </tr>
        <tr>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
        </tr>
        <tr>
            <td>$nbsp;</td>
            <td>$nbsp;</td>
           ...

CSS

tr.doc-selected{border:1px solid blue;color:#fff;background-color:#4285F4}
td{padding:5px;text-align:center}

JavaScript

var active = 0;
rePosition();

$(document).keydown(function(e){
    reCalculate(e);
    rePosition();
    return false;
});
    
$('tr').click(function(){
   active = $(this).closest('table').find('tr').index(this);
   rePosition();
});

function reCalculate(e){
    var rows = $('#navigate tr').length;
    var columns = $('#navigate tr:eq(0)').length;
    //alert(columns + 'x' + rows);
    
    if (e.keyCode == 37) { //move left or wrap
        active = (active>0)?active-1:active;
    }
    if (e.keyCode == 38) { // move up
        active = (active-columns>=0)?active-columns:active;
    }
    if (e.keyCode == 39) { // move right or wrap
       active = (active<(columns*rows)-1)?active+1:active;
    }
    if (e.keyCode == 40) { // move down
        active = (active+columns<=(rows*columns)-1)?active+columns:active;
    }
}

function rePosition(){
    $('.active').removeClass('active');
    $('#navigate tr').eq(active).addClass('active');
    scrollInView();
}

function scrollInView(){
    var target = $('.wrapper #navigate tr:eq('+active+')');
    if (target.length)
    {
        var top = target.offset().top;
        
        $('html,body').stop().animate({scrollTop: top-100}, 400);
        return false;
    }
}