JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <table class="table">
        <thead>
            <tr>
                <th>Head 1</th>
                <th>Head 2</th>
            </tr>
        </thead>
        <tbody>
            <tr class="active">
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
            <tr>
               ...

CSS

.active{
    background-color:#000;
    color:#fff;
}
.container {
    height:200px;
    overflow: auto;
    border:1px solid #000;
}

JavaScript

function arrow(dir) {
    var activeTableRow = $('.table tbody tr.active')[dir](".table tbody tr");
    if (activeTableRow.length) {
        $('.table tbody tr.active').removeClass("active");
        activeTableRow.addClass('active');
    } 
};

/*
function arrowDown() {
    var activeTableRow = $('.table tbody tr.active').next(".table tbody tr");
    if (activeTableRow.length) {
        $('.table tbody tr.active').removeClass("active");
        activeTableRow.addClass('active');
    }
};*/


$(window).keydown(function (key) {
    if (key.keyCode == 38) {
        arrow("prev");
    }
    if (key.keyCode == 40) {
        arrow("next");
    }
});