JSFiddle - React, Tailwind, and code Playground

by unhw

HTML

<table id="locale">
            <th>Heading1</th>
            <th>Heading2</th>
            <tbody>
                <tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>
                <tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>
                <tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>
                <tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is td</td><td>This is td</td></tr>

<tr><td>This is td</td><td>This is td</td></tr>
                <tr><td>This is td</td><td>This is td</td></tr>
<tr><td>This is...

CSS

table {
    border: 1px solid black;
    padding: 10px; 10px;
    margin-bottom: 10px;
}

th {
    background-color: #ddd;
}

th, td {
    border: 1px solid black;
    padding: 5px 5px;
}

.prev, .next {
    width: 50px;
    text-align: center;
    margin-right: 10px;
    user-select: none;
   -o-user-select:none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
}

.prev, .next {
    border: 1px solid green;
    cursor: pointer;
}

.prev.disabled, .next.disabled {
    border: 1px solid red;
    cursor: default;
}

JavaScript

var maxRows = 10;
$('table#locale').each(function() {
    var cTable = $(this);
    var cRows = cTable.find('tr:gt(0)');
    var cRowCount = cRows.size();
    
    if (cRowCount < maxRows) {
        return;
    }

    cRows.each(function(i) {
        $(this).find('td:first').text(function(j, val) {
           return val;
        }); 
    });

    cRows.filter(':gt(' + (maxRows - 1) + ')').hide();


    var cPrev = cTable.siblings('.prev');
    var cNext = cTable.siblings('.next');

    cPrev.addClass('disabled');

    cPrev.click(function() {
        var cFirstVisible = cRows.index(cRows.filter(':visible'));
        
        if (cPrev.hasClass('disabled')) {
            return false;
        }
        
        cRows.hide();
        if (cFirstVisible - maxRows - 1 > 0) {
            cRows.filter(':lt(' + cFirstVisible + '):gt(' + (cFirstVisible - maxRows - 1) + ')').show();
        } else {
            cRows.filter(':lt(' + cFirstVisible + ')').show();
        }

        if (cFirstVisible - maxRows <= 0) {
            cPrev.addClass('disabled');
        }
        
        cNext.removeClass('disabled');

        return false;
    });

    cNext.click(function() {
        var cFirstVisible = cRows.index(cRows.filter(':visible'));
        
        if (cNext.hasClass('disabled')) {
            return false;
        }
        
        cRows.hide();
        cRows.filter(':lt(' + (cFirstVisible +2 * maxRows) + '):gt(' + (cFirstVisible + maxRows - 1) + ')').show();

        if (cFirstVisible + 2 * maxRows >= cRows.size()) {
            cNext.addClass('disabled');
        }
        
        cPrev.removeClass('disabled');

        return false;
    });

});