JSFiddle - React, Tailwind, and code Playground

HTML

<table id="" class="display dataTable no-footer user_datatable nowrap">
          <thead>
              <tr>
                  <th>Action</th>
                  <th>ID</th>
                  <th>Project Activation</th>
                  <th>Customer</th>
                  <th>Address</th>
                  <th>Service ID</th>
                  <th>Province</th>
                  <th>City</th>
                  <th>PARTNERS</th>
                  <th>POP</th>
                  <th>ODF POP</th>
                  <th>CODE CUSTOMER</th>
                  <th>ODF USER</th>
                  <th>JB TAPPING</th>
                  <th>SOFTCOPY</th>
              </tr>
          </thead>
          <tbody></tbody>
        </table>

CSS

table.dataTable {
  clear: both;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  max-width: none !important;
  border-collapse: separate !important; }
  table.dataTable td,
  table.dataTable th {
    -webkit-box-sizing: content-box;
    box-sizing: content-box; }
    table.dataTable td.dataTables_empty,
    table.dataTable th.dataTables_empty {
      text-align: center; }
  table.dataTable.nowrap th,
  table.dataTable.nowrap td {
    white-space: nowrap; }


div.dataTables_wrapper div.dataTables_length label {
  font-weight: normal;
  text-align: left;
  white-space: nowrap; }

div.dataTables_wrapper div.dataTables_length select {
  width: 75px;
  display: inline-block; }

div.dataTables_wrapper div.dataTables_filter {
  text-align: right; }
  div.dataTables_wrapper div.dataTables_filter label {
    font-weight: normal;
    white-space: nowrap;
    text-align: left; }
  div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0.5em;
    display: inline-block;
    width: auto; }

div.dataTables_wrapper div.dataTables_info {
  padding-top: 8px;
  white-space: nowrap; }

div.dataTables_wrapper div.dataTables_paginate {
  margin: 0;
  white-space: nowrap;
  text-align: right; }
  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 2px 0;
    white-space: nowrap; }

div.dataTables_wrapper div.dataTables_processing {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  margin-top: -26px;
  text-align: center;
  padding: 1em 0; }

table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > td.sorting {
  padding-right: 30px; }

table.dataTable thead > tr > th:active,
table.dataTable thead > tr > td:active {
  outline: none; }

table.dataTable thead .sorting,
table.dataTable thead...

JavaScript

$(function() {
      var table = $('.user_datatable').DataTable({
          processing: true,
          serverSide: true,
          fixedHeader: true,
          responsive: true,
          scrollX: true,
          ajax: "{{ route('survei.index') }}",
          columns: [
              {data: 'action', name: 'action', orderable: false, searchable: false},
              {data: 'id', name: 'id'},
              {data: 'project_activation', name: 'project_activation'},
              {data: 'customer', name: 'customer'},
              {data: 'address', name: 'address'},
              {data: 'service_id', name: 'service_id'},
              {data: 'province', name: 'province'},
              {data: 'city', name: 'city'},
              {data: 'partners', name: 'partners'},
              {data: 'pop', name: 'pop'},
              {data: 'odf', name: 'odf'},
              {data: 'code_customer', name: 'code_customer'},
              {data: 'odf_user', name: 'odf_user'},
              {data: 'jb_tap', name: 'jb_tap'},
              {data: 'fileupload', name: 'fileupload'},
          ]
      }).columns.adjust().fixedColumns().relayout();
    });