JSFiddle - React, Tailwind, and code Playground

HTML

<table id="data" border="1" cellspacing="1" cellpadding="1">
    <thead>
        <tr>
            <th>#</th>
            <th>header2</th>
            <th>header3</th>
            <th>header4</th>
            <th>header5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>2</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>3</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>4</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>5</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>6</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
</table>Row Number:
<br>
<input type="text" id="rownum" readonly>
<br>of
<br>
<input type="text" id="maxrows" readonly>
<br>
<input type="button" id="goto_first" value="first">
<input type="button" id="goto_prev" value="prev">
<input type="button" id="goto_next" value="next">
<input type="button" id="goto_last" value="last">
<input type="button" id="goto_row" value="goto row">
<input type="button" id="remove_row" value="remove row">

CSS

.highlight {

    background-color: rgb(255,0,0);

}

JavaScript

window.onload = function () {

    var rowCount = $('#data >tbody >tr').length;
    $("#maxrows").val(rowCount);

    var $tbody = $("#data tbody").on('click', 'tr', function () {
        highlight($(this));
    });


    $('#goto_first').click(function () {
        var $first = $tbody.find('tr').first();
        highlight($first);
    });

    $('#goto_prev').click(function () {
        var $prev = $tbody.find('.highlight').prev();
        highlight($prev);
    });


    $('#goto_next').click(function () {
        var $next = $tbody.find('.highlight').next();
        highlight($next);
    });

    $('#goto_last').click(function () {
        var $last = $tbody.find('tr').last();
        highlight($last);
    });

    $('#goto_row').click(function () {

        var $row = prompt("Enter row number")

        highlight($("#data tr").eq($row));

    });

    $('#remove_row').click(function () {
        var $row = $tbody.find('.highlight')
        $row.remove();
        renumberRows();
    });

    function renumberRows() {
        $('#data tr').each(function(index, el){
            $(this).children('td').first().text(index++);
        });
    }
    
    function highlight($row) {
        if ($row.length) {
            $tbody.children().removeClass("highlight");
            $row.addClass('highlight');
            $("#rownum").val($row[0].rowIndex);
        }
    }

}