JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/fixedcolumns/3.2.0/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.0/css/fixedColumns.dataTables.min.css">
<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Employee Name</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <th>x</th>
      <th>x</th>
      <th>x</th>
      <th>x</th>
      <th>x</th>
      <th>x</th>
      <th>x</th>
      <th>x</th>
      <th>x</th>
    </tr>
  </tfoot>
</table>

CSS

/* Ensure that the demo table scrolls */

th,
td {
  white-space: nowrap;
}

div.dataTables_wrapper {
  width: 800px;
  margin: 0 auto;
}

td:nth-child(2),
td:nth-child(3),
td:nth-child(4),
td:nth-child(5),
td:nth-child(6),
td:nth-child(7),
td:nth-child(8),
th:nth-child(2),
th:nth-child(3),
th:nth-child(4),
th:nth-child(5),
th:nth-child(6),
th:nth-child(7),
th:nth-child(8) {
  background-color: coral;
}

JavaScript

var json_data = [{"Employee Name":"1398","MON":"24","TUE":"24","WED":"24","THU":"24","FRI":"24","SAT":"24","SUN":"24","TOTAL":"168"},{"Employee Name":"2857","MON":"2","TUE":"0","WED":"0","THU":"0","FRI":"0","SAT":"0","SUN":"24","TOTAL":"26"},{"Employee Name":"2996","MON":"24","TUE":"24","WED":"24","THU":"24","FRI":"24","SAT":"24","SUN":"24","TOTAL":"168"},{"Employee Name":"14353","MON":"24","TUE":"24","WED":"24","THU":"24","FRI":"24","SAT":"24","SUN":"24","TOTAL":"168"},{"Employee Name":"14399","MON":"24","TUE":"24","WED":"24","THU":"24","FRI":"24","SAT":"24","SUN":"24","TOTAL":"168"},{"Employee Name":"14417","MON":"24","TUE":"24","WED":"24","THU":"24","FRI":"24","SAT":"24","SUN":"24","TOTAL":"168"},{"Employee Name":"14419","MON":"24","TUE":"24","WED":"24","THU":"24","FRI":"10","SAT":"0","SUN":"24","TOTAL":"130"},{"Employee Name":"14420","MON":"13","TUE":"24","WED":"24","THU":"10","FRI":"0","SAT":"0","SUN":"0","TOTAL":"71"},{"Employee Name":"14453","MON":"24","TUE":"24","WED":"24","THU":"24","FRI":"48","SAT":"48","SUN":"24","TOTAL":"216"},{"Employee Name":"14469","MON":"0","TUE":"24","WED":"24","THU":"24","FRI":"24","SAT":"24","SUN":"0","TOTAL":"120"},{"Employee Name":"14476","MON":"0","TUE":"0","WED":"0","THU":"0","FRI":"24","SAT":"24","SUN":"0","TOTAL":"48"},{"Employee Name":"14672","MON":"24","TUE":"24","WED":"24","THU":"24","FRI":"24","SAT":"24","SUN":"24","TOTAL":"168"},{"Employee Name":"14677","MON":"24","TUE":"24","WED":"24","THU":"24","FRI":"24","SAT":"24","SUN":"24","TOTAL":"168"},{"Employee Name":"15290","MON":"24","TUE":"24","WED":"24","THU":"24","FRI":"24","SAT":"24","SUN":"24","TOTAL":"168"},{"Employee Name":"15503","MON":"24","TUE":"24","WED":"24","THU":"24","FRI":"24","SAT":"24","SUN":"24","TOTAL":"168"},{"Employee Name":"15812","MON":"24","TUE":"24","WED":"24","THU":"24","FRI":"24","SAT":"24","SUN":"24","TOTAL":"168"},{"Employee Name":"15887","MON":"24","TUE":"24","WED":"24","THU":"24","FRI":"24","SAT":"24","SUN":"24","TOTAL":"168"},{"Employee...