JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://datatables.net/release-datatables/media/js/jquery.dataTables.min.js"></script>
<fieldset id="fieldset">
    <div id="container" style="margin-right: 10px;">
        <table id="test_grid"></table>
    </div>
</fieldset>

CSS

/*
 * Table styles
 */
table.dataTable {
  width: 100%;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
  /*
   * Header and footer styles
   */
  /*
   * Body styles
   */
}
table.dataTable thead th,
table.dataTable tfoot th {
  font-weight: bold;
}
table.dataTable thead th,
table.dataTable thead td {
  padding: 10px 18px;
  border-bottom: 1px solid #111111;
}
table.dataTable thead th:active,
table.dataTable thead td:active {
  outline: none;
}
table.dataTable tfoot th,
table.dataTable tfoot td {
  padding: 10px 18px 6px 18px;
  border-top: 1px solid #111111;
}
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting {
  cursor: pointer;
  *cursor: hand;
}
table.dataTable thead .sorting {
  background: url("../images/sort_both.png") no-repeat center right;
}
table.dataTable thead .sorting_asc {
  background: url("../images/sort_asc.png") no-repeat center right;
}
table.dataTable thead .sorting_desc {
  background: url("../images/sort_desc.png") no-repeat center right;
}
table.dataTable thead .sorting_asc_disabled {
  background: url("../images/sort_asc_disabled.png") no-repeat center right;
}
table.dataTable thead .sorting_desc_disabled {
  background: url("../images/sort_desc_disabled.png") no-repeat center right;
}
table.dataTable tbody tr {
  background-color: white;
}
table.dataTable tbody tr.selected {
  background-color: #b0bed9;
}
table.dataTable tbody th,
table.dataTable tbody td {
  padding: 8px 10px;
}
table.dataTable th.center,
table.dataTable td.center,
table.dataTable td.dataTables_empty {
  text-align: center;
}
table.dataTable th.right,
table.dataTable td.right {
  text-align: right;
}
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
  border-top: 1px solid #dddddd;
}
table.dataTable.row-border tbody tr:first-child th,
table.dataTable.row-border tbody tr:first-child td,...

JavaScript

var aDataSet = [];
var baseUrl = "http://api.opencongress.org/people/senators";
var perPageQuery = "per_page=";
var pageIndexQuery = "page=";
var currentPage = 1;
var perPage = 10;
var needToReturnToPageOne = false;
var totalRecords = 0;
var echo = 0;

var oTable = $("#test_grid").dataTable({
    "bProcessing": true,
        "bServerSide": true,
        "aaData": aDataSet,
        "aLengthMenu": [
        [10],
        [20],
        [30]
    ],
        "sDom": 'Rlfrtip',
        "sAjaxSource": baseUrl + "?" + perPageQuery + perPage + "&" + pageIndexQuery + currentPage,
        "sPaginationType": "full_numbers",
        "aoColumns": [{
        "sTitle": "ID",
        "sWidth": "250px"
    }, {
        "sTitle": "First",
        "sWidth": "250px"
    }, {
        "sTitle": "Last",
        "sWidth": "250px"
    }, {
        "sTitle": "Birthday",
        "sWidth": "250px"
    } ],
        "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
        echo = aoData[0].value;

        setup(oSettings);

        sSource = baseUrl + "?" + perPageQuery + perPage + "&" + pageIndexQuery + currentPage;
    
    oSettings.jqXHR = $.ajax({
        dataType: 'json',
        url: sSource,
        accepts: "application/json",
        headers: {
            Accept: "application/json"
        },
        success: function (json) {
            displayItems(json);
            json.iTotalRecords = json.total_pages * oSettings._iDisplayLength;
            totalRecords = json.total_pages;
            json.iTotalDisplayRecords = json.total_pages * oSettings._iDisplayLength;
            json.sEcho = echo;
            json.aaData = aDataSet;

            fnCallback(json);
        }
    });
}

});

/* Setting up buisness logic to check if we should return to the first page
            and assigning the variables: perPage, directionOfSort, SortBy, and currentPage. */
function setup(oSettings) {
    /* The entries per page has changed */
    if (perPage !=...