JSFiddle - React, Tailwind, and code Playground

HTML

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css"/>

<!-- Fixed Columns -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>


<table id="hop"></table>

JavaScript

var params = {
  paging: false,
  info: false,
  searching: false,
  bDestroy: true,
  data: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]],
  bSort: false,

  scrollY: "500px",
  scrollX: true,
  fixedColumns: {
    leftColumns: 2,
    rightColumns: 0,
  },
  columns: [
    { title: "Lorem" },
    { title: "ipsum" },
    { title: "dolor" },
    { title: "sit" },
    { title: "amet" },
    { title: "consectetur" },
    { title: "adipisicing" },
    { title: "elit" },
    { title: "sed" },
    { title: "do" },
    { title: "eiusmod" },
    { title: "tempor" },
    { title: "incididunt" },
    { title: "ut" },
    { title: "labore" },
    { title: "et" },
    { title: "dolore" },
    { title: "magna" },
    { title: "aliqua" },
    { title: "Ut" },
    { title: "enim" },
    { title: "ad" },
    { title: "minim" },
    { title: "veniam" }
  ],
};

$(document.querySelector('#hop')).dataTable(params);