JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<title>Example 1 - apply dataTable()</title>
      
      <link rel="stylesheet" type="text/css" href="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
      <link rel="stylesheet" type="text/css" href="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">


        <script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.12.4.js"></script>
        <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>
      
      
  </head>

    <body>
        <div class="container">
            
<table id="example" class="stripe row-border order-column" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                
                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
               
                
            </tr>
            <tr>
                <td>Garrett</td>
                <td>Winters</td>
               
                
            </tr>
            <tr>
                <td>Ashton</td>
                <td>Cox</td>
               
               
            </tr>
            <tr>
                <td>Ashton</td>
                <td>Cox</td>
               
               
            </tr>
            <tr>
                <td>Ashton</td>
                <td>Cox</td>
               
               
            </tr>
            <tr>
                <td>Ashton</td>
                <td>Cox</td>
               
               
            </tr>
            
        </tbody>
    </table>
            
        </div>
    </body>

CSS

/* Ensure that the demo table scrolls */
    th, td { white-space: nowrap; }
    div.dataTables_wrapper {
        margin: 0 auto;
    }
 
    div.container {
        width: 100%;
    }
    th,td{
      text-align: center;
    }

JavaScript

$(document).ready(function() {
    var table = $('#example').removeAttr('width').DataTable( {
        scrollY:        "100px",
        scrollX:        '100%',
        scrollCollapse: true,
        paging:         false,
        "bAutoWidth": false,
        columnDefs: [
            { width: '30%', targets: 0 },
            { width: '70%', targets: 0 }
           
        ],
        fixedColumns: true
    } );
} );