JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
    <div class="row">
            <div class="box clearfix">
            <h3>Bootstrap Data Table</h3>
            <p>Easily turn your tables into datatables.</p>

            <table class="table table-hover" id="bootstrap-table">
                <thead>
                <tr>
                    <th>#ID</th>
                    <th>Username</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>200</td>
                    <td>janedoe</td>
                    <td>Yane</td>
                    <td>Doe</td>
                </tr>
                <tr>
                    <td>100</td>
                    <td>zanedoe</td>
                    <td>Jane</td>
                    <td>Moe</td>
                </tr>
                <tr>
                    <td>300</td>
                    <td>aanedoe</td>
                    <td>Lane</td>
                    <td>Doe</td>
                </tr>
                <tr>
                    <td>100</td>
                    <td>canedoe</td>
                    <td>Jane</td>
                    <td>Boe</td>
                </tr>
                <tr>
                    <td>100</td>
                    <td>janedoe</td>
                    <td>Jane</td>
                    <td>Doe</td>
                </tr>
                <tr>
                    <td>100</td>
                    <td>janedoe</td>
                    <td>Jane</td>
                    <td>Doe</td>
                </tr>
                <tr>
                    <td>100</td>
                    <td>janedoe</td>
                   ...

CSS

.bdt thead th {
    cursor: pointer;
}

.bdt .sort-icon {
    width: 10px;
    display: inline-block;
    padding-left: 5px;
}

.search-form {
    margin-right: 25px;
}

#table-footer {
    margin-bottom: 15px;
}

#table-footer a, #table-footer button {
    outline: none;
}

#table-footer .form-horizontal .control-label {
    text-align: left;
    margin: 0 15px;
}

#table-footer .pagination {
    margin: 0 15px;
}

#table-footer .pagination li:not(.active) {
    cursor: pointer;
}

.disable-sorting {
    cursor: auto !important;
}

body {
	background: #F0F0F0;
	font-family: 'Open Sans', Arial, sans-serif;
	padding: 40px;
}

.box {
	background: #fff;
}

.box > h3 {
	color: #333;
    font-size: 17px;
    font-weight: 400;
    padding-left: 20px;
    padding-top: 20px;
}

.box > p {
	color: #919599;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 18px;
    padding-bottom: 20px;
    padding-left: 20px;
}

.bdt {
	
}

.bdt thead {
	
}

.bdt > thead > tr > th, .bdt > tbody > tr > td {
	font-size: 13px;
}

.bdt tr:last-child td, .bdt tr:last-child th {
    border-bottom: 1px solid #f0f1f5;
}

.bdt > tbody > tr > td, .bdt > tbody > tr > th, .bdt > tfoot > tr > td, .bdt > tfoot > tr > th, .bdt > thead > tr > td, .bdt > thead > tr > th {
    border-color: #e6e7ed;
    padding: 17px 25px;
}

.search-form .form-control {
	border-color: #e6e7ed;
    border-radius: 0;
    box-shadow: none;
    font-weight: 400;
    height: 56px;
    margin-left: 20px
}

#page-rows-form {
	padding-left: 20px;
}

#page-rows-form label {
	line-height: 40px;
	padding-right: 10px;
}

#page-rows-form select {
	background-clip: padding-box;
    border-color: #e6e7ed;
    border-radius: 0;
    box-shadow: none;
    font-weight: 400;
    height: 56px;
    margin: 0;
    outline: 0 none;
    padding: 13px;
}

#table-footer {
	margin-bottom: 20px;
}

.pagination {
	padding-right: 20px
}

.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled >...

JavaScript

(function ($) {
    "use strict";

    /**
     * @type {number}
     */
    var actualPage = 1;
    /**
     * @type {number}
     */
    var pageCount = 0;
    /**
     * @type {number}
     */
    var pageRowCount = 0;
    /**
     * @type {string}
     */
    var pages = '';
    /**
     * @type {object}
     */
    var obj = null;
    /**
     * @type {boolean}
     */
    var activeSearch = false;
    /**
     * @type {string}
     */
    var arrowUp = '';
    /**
     * @type {string}
     */
    var arrowDown = '';
    /**
     * @type {string}
     */
    var searchFormClass = '';
    /**
     * @type {string}
     */
    var pageFieldText = '';
    /**
     * @type {string}
     */
    var searchFieldText = '';

    $.fn.bdt = function (options, callback) {

        var settings = $.extend({
            pageRowCount: 10,
            arrowDown: 'fa-angle-down',
            arrowUp: 'fa-angle-up',
            searchFormClass: 'pull-left search-form',
            pageFieldText: 'Entries per Page:',
            searchFieldText: 'Search',
            showSearchForm: 1,
            showEntriesPerPageField: 1,
            nextText: 'Next',
            previousText: 'Previous'
        }, options);

        /**
         * @type {object}
         */
        var tableBody = null;

        return this.each(function () {
            obj = $(this).addClass('bdt');
            tableBody = obj.find("tbody");
            pageRowCount = settings.pageRowCount;
            arrowDown = settings.arrowDown;
            arrowUp = settings.arrowUp;
            searchFormClass = settings.searchFormClass;
            pageFieldText = settings.pageFieldText;
            searchFieldText = settings.searchFieldText;
            
            var searchForm, entriesPerPageField;

            /**
             * search input field
             */
            if(settings.showSearchForm == 1) {
                searchForm = $('<form/>')
                    .addClass(searchFormClass)
        ...