JSFiddle - React, Tailwind, and code Playground

HTML

<table id="data">
  <tr> <td>Row 1</td></tr>
  <tr> <td>Row 2</td></tr>
  <tr> <td>Row 3 </td></tr>
  <tr> <td>Row 4</td></tr>
  <tr> <td>Row 5</td></tr>
  <tr> <td>Row 6</td></tr>
  <tr> <td>Row 7</td></tr>
  <tr> <td>Row 8</td></tr>
  <tr> <td>Row 9</td></tr>
  <tr> <td>Row 10</td></tr>
  <tr> <td>Row 11</td></tr>
  <tr> <td>Row 12</td></tr>
  <tr> <td>Row 13</td></tr>
  <tr> <td>Row 14</td></tr>
  <tr> <td>Row 15</td></tr>
  <tr> <td>Row 16</td></tr>
  <tr> <td>Row 17</td></tr>
  <tr> <td>Row 18</td></tr>
</table>

CSS

#data tr {
  display: none;
}

JavaScript

$(document).ready(function(){
    $('#data').after('<div id="nav"></div>');
    var rowsShown = 4;
    var rowsTotal = $('#data tbody tr').length;
    var numPages = rowsTotal/rowsShown;
    for(i = 0;i < numPages;i++) {
        var pageNum = i + 1;
        $('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
    }
    $('#data tbody tr').hide();
    $('#data tbody tr').slice(0, rowsShown).show();
    $('#nav a:first').addClass('active');
    $('#nav a').bind('click', function(){

        $('#nav a').removeClass('active');
        $(this).addClass('active');
        var currPage = $(this).attr('rel');
        var startItem = currPage * rowsShown;
        var endItem = startItem + rowsShown;
        $('#data tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
        css('display','table-row').animate({opacity:1}, 300);
    });
});