JSFiddle - React, Tailwind, and code Playground

by d_unknown

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="bootstrap.min.css "></script>
<script src="bootstrap.min.js"></script>
<table class="display" id="table_data" width="100%">
    <thead class="header">
        <tr class="well">
            <th style="font-size: 14px;">ID#</th>
            <th style="font-size: 14px;">Username</th>
            <th style="font-size: 14px;">Account Type</th>
            <th style="font-size: 14px;">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="font-size: 15px;padding-left: 20px;">1034569</td>
            <td style="font-size: 15px;padding-left: 20px;">d_unknown</td>
            <td style="font-size: 15px;padding-left: 20px;">admin</td>
            <td style="font-size: 15px;padding-left: 20px;">Active</td>
        </tr>
    </tbody>
</table>
<!-- END Table-->

JavaScript

var tableI = $('#table_data').DataTable({
    "bLengthChange": false,
        "scrollX": true,
        "dom": 'frtp'
});