JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script src="https://datatables.net/release-datatables/media/js/dataTables.bootstrap4.js"></script>
<script src="https://datatables.net/release-datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css">
<link rel="stylesheet" href="https://datatables.net/release-datatables/media/css/dataTables.bootstrap4.css">
<link rel="stylesheet" href="https://datatables.net/release-datatables/extensions/FixedColumns/css/fixedColumns.bootstrap4.css">
<!-- https://datatables.net/release-datatables/extensions/FixedColumns/examples/styling/bootstrap4.html -->

<table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
    <thead>
            <tr>
          <th scope="row">&nbsp;</th>
          <th>7/27/21</th>
          <th>7/26/21</th>
          <th>7/25/21</th>
          <th>7/24/21</th>
          <th>7/23/21</th>
          <th>7/22/21</th>
          <th>7/21/21</th>
          <th>7/20/21</th>
          <th>7/19/21</th>
          <th>7/18/21</th>
          <th>7/17/21</th>
          <th>7/16/21</th>
          <th>7/15/21</th>
          <th>7/14/21</th>
          <th>7/13/21</th>
          <th>7/12/21</th>
          <th>7/11/21</th>
          <th>7/10/21</th>
          <th>7/9/21</th>
          <th>7/8/21</th>
          <th>7/7/21</th>
          <th>7/6/21</th>
          <th>7/5/21</th>
          <th>7/4/21</th>
          <th>7/3/21</th>
          <th>7/2/21</th>
          <th>7/1/21</th>
        </tr>
    </thead>
    <tbody>

        <tr>
          <th scope="row">Confirmed positive patients</th>
          <td>64</td>
          <td>53</td>
          <td>51</td>
          <td>32</td>
          <td>32</td>
          <td>28</td>
         ...

JavaScript

$(document).ready(function() {
    var table = $('#example').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,
        fixedColumns: {
        leftColumns: 1,
        rightColumns: 3,
				 "columnDefs": [ {
						"orderable": false
					} ]
    }
    } );
    
    
   
} );