JSFiddle - React, Tailwind, and code Playground

by xawixawxaw

HTML

<script src="http://datatables.net/download/build/jquery.dataTables.min.js"></script>
<script src="http://cdn.datatables.net/fixedcolumns/3.0.0/js/dataTables.fixedColumns.min.js"></script>
<script src="http://cdn.datatables.net/colreorder/1.1.0/js/dataTables.colReorder.min.js"></script>
<table class="dtable">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Hobby</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Xawi</td>
            <td>Draw</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Xawi</td>
            <td>Draw</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Xawi</td>
            <td>Draw</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Xawi</td>
            <td>Draw</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Xawi</td>
            <td>Draw</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Xawi</td>
            <td>Draw</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Xawi</td>
            <td>Draw</td>
        </tr>
    </tbody>
</table>

CSS

.dtable thead {
    border: 1px solid #356C92;
    border-bottom: 2px solid #4399D4;
}
.dtable{
    background: #fff
}
.DTFC_LeftBodyWrapper table.dataTable tr.even { background-color: #ffc9c9;}
table.dataTable tr.even {
    background-color: rgb(239, 239, 239);
}

table.dataTable tr.odd {
    background-color: #fff;
}

JavaScript

$(function () {
               $dtable = $('.dtable');
               odataTable = $dtable.dataTable({
                   "sScrollY": "200px",
                   "sScrollX": "100%",
                   "sScrollXInner": "120%",
                   "bScrollCollapse": true,
                   "bPaginate": false,
                   "bFilter": false
                   //"sHeightMatch": "semiauto"
               });
               if (!$dtable.find(".align-center").is(":visible")) {
                   new $.fn.dataTable.FixedColumns(odataTable, {
                       "iLeftColumns": 1,
                   })
               }

           });