JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.3.0/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.3.0/css/fixedColumns.dataTables.min.css">
    <table id="laravel_datatable">
      <thead>
        <tr>
          <th rowspan="3">Line : 0</th>
          <th rowspan="3">Material Number : 1</th>
          <th rowspan="3">MODEL : 2</th>

          <th colspan="3" id="Mon" class="mon"></th>
          <th colspan="3" id="Tue" class="tue"></th>
          <th colspan="3" id="Wed" class="wed"></th>
          <th colspan="3" id="Thu" class="thu"></th>
          <th colspan="3" id="Fri" class="fri"></th>
          <th colspan="3" id="Sat" class="sat"></th>
          <th colspan="3" id="Sun" class="sun"></th>

          <th colspan="3" style="text-align: center;">WEEK Total</th>
          <th rowspan="3">remark : 27</th>

          <!--           <th colspan="3" style="text-align: center;">Month Total</th> -->
        </tr>
        <tr>
          <th colspan="3" style="text-align: center;" class="mon">Mon</th>
          <th colspan="3" style="text-align: center;" class="tue">Tue</th>
          <th colspan="3" style="text-align: center;" class="wed">Wed</th>
          <th colspan="3" style="text-align: center;" class="thu">Thu</th>
          <th colspan="3" style="text-align: center;" class="fri">Fri</th>
          <th colspan="3" style="text-align: center;" class="sat">Sat</th>
          <th colspan="3" style="text-align: center;" class="sun">Sun</th>

          <th colspan="3" style="text-align: center;">Mon-Fri</th>
          <!--           <th colspan="3"...

CSS

table,
table.dataTable,
thead,
th,
td {
  border: 0.1px solid black;
  white-space: nowrap;
  line-height: 0.6 !important;
  text-align: center;
}

JavaScript

$(document).ready(function() {
  var table = $("#laravel_datatable")
    .DataTable({
       scrollY: true,
       scrollX: true,
       scrollCollapse: true,
      // searching: false,
      paging: false,
      destroy: true,
      processing: true,
      ajax: {
        type: 'GET',
        url: "http://www.mocky.io/v2/5e56404f300000580028e462"
      },
      serverSide: true,
      fixedColumns: {
        leftColumns: 3
      },
      columns: [{
          data: "ProdLine",
          className: "text-nowrap",
          name: "ProdLine",
          orderable: false
        },

        {
          data: "MatCode",
          name: "MatCode",
          orderable: false
        },
        {
          data: "MatDesc",
          name: "MatDesc",
          orderable: false
        },
        {
          data: "MonDay_ProdQty",
          name: "MonDay_ProdQty",
          className: "mon ",
          searchable: false,
          orderable: false
        },
        {
          data: "MonDay_OfflineQty",
          name: "MonDay_OfflineQty",
          className: "mon ",
          searchable: false,
          orderable: false
        },
        {
          data: "Ach1",
          name: "Ach1",
          className: "mon ",
          orderable: false
        },
        {
          data: "TuesDay_ProdQty",
          name: "TuesDay_ProdQty",
          className: "tue ",
          searchable: false,
          orderable: false
        },
        {
          data: "TuesDay_OfflineQty",
          name: "TuesDay_OfflineQty",
          className: "tue ",
          searchable: false,
          orderable: false
        },
        {
          data: "Ach2",
          name: "Ach2",
          className: "tue ",
          orderable: false
        },
        {
          data: "Wednesday_ProdQty",
          name: "Wednesday_ProdQty",
          className: "wed ",
          searchable: false,
          orderable: false
        },
        {
          data: "Wednesday_OfflineQty",
          name:...