JSFiddle - React, Tailwind, and code Playground

by RaviMakwana

HTML

<script src="https://www.datatables.net/release-datatables/media/js/jquery.js"></script>
<script src="https://www.datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script src="https://www.datatables.net/release-datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js"></script>
<link rel="stylesheet" href="https://www.datatables.net/release-datatables/media/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://www.datatables.net/release-datatables/extensions/FixedColumns/css/dataTables.fixedColumns.css">
<script src="https://rawgithub.com/Silvacom/colResize/master/dataTables.colResize.js"></script>
<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Extn.</th>
            <th>E-mail</th>
        </tr>
    </thead>
 
    <tbody>
        <tr>
            <td>Tiger</td>
            <td>Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
            <td>5421</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>Garrett</td>
            <td>Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
            <td>8422</td>
            <td>[email protected]</td>
        </tr>       
        <tr>
            <td>Donna</td>
            <td>Snider</td>
            <td>Customer Support</td>
            <td>New York</td>
            <td>27</td>
            <td>2011/01/25</td>
            <td>$112,000</td>
            <td>4226</td>
            <td>[email protected]</td>
        </tr>
   ...

CSS

/* Ensure that the demo table scrolls */
    th, td { white-space: nowrap; }
    div.dataTables_wrapper {
        width: 800px;
        margin: 0 auto;
    }

JavaScript

$(document).ready(function() {
    var table = $('#example').DataTable( {
        dom: 'Zlfrtip',
        //target first column only
        colResize: {
           exclude: [2,3,4,5,6,7]
        },
        scrollY:        "300px",
        scrollX:        'true',
        scrollCollapse: 'true',
        paging:         false
    });
    new $.fn.dataTable.FixedColumns( table );
});