JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.datatables.net/v/bs4/dt-1.10.18/fc-3.2.5/fh-3.1.4/sl-1.2.6/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/fc-3.2.5/fh-3.1.4/sl-1.2.6/datatables.min.css">
<script src="//cdn.datatables.net/plug-ins/1.10.19/features/scrollResize/dataTables.scrollResize.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<table id="table-new" class="table display nowrap" style="width:100%">
  <thead>
    <tr>
      <th class="cell-input"></th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th>Extn.</th>
      <th class="cell-actions">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="cell-input"></td>
      <td>Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>5421</td>
      <td class="cell-actions">
        <ul class="d-flex">
          <li><i class="fas fa-beer"></i></li>
          <li><i class="fas fa-copy"></i></li>
          <li><i class="fas fa-trash"></i></li>
        </ul>
      </td>
    </tr>
    <tr>
      <td class="cell-input"></td>
      <td>Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
      <td>8422</td>
      <td class="cell-actions">
        <ul class="d-flex">
          <li><i class="fas...

SCSS

body {
  padding: 20px;
  height: 100vh;
}

.table {
  tbody,
  thead {
    tr {
      td,
      th {
        &.cell-input {
          border-right: 1px solid #ccc;
          min-width: 50px;
        }
        &.cell-actions {
          border-left: 1px solid #ccc;
        }
        ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          li + li {
            margin-left: 0.675em;
          }
        }
      }
    }
  }
}

JavaScript

let DT1 = $('#table-new').DataTable({
  "scrollY": 100,
  "scrollX": true,
  "scrollCollapse": true,
  "bInfo": false,
  scrollResize: true,
  lengthChange: false,
  searching: false,
  paging: false,
  fixedColumns: {
    leftColumns: 1,
    rightColumns: 1
  },
  columnDefs: [{
    className: 'select-checkbox',
    targets: 0
  }, {
    orderable: false,
    targets: [0, 8]
  }],
  select: {
    style: 'multi+shift',
    selector: 'td.cell-input'
  },
  order: [
    [1, 'asc']
  ]
});
setTimeout(
  function() 
  {
    $.fn.dataTable.tables( { visible: false, api: true } ).columns.adjust().fixedColumns().relayout();
  }, 1000);