JSFiddle - React, Tailwind, and code Playground

by Rich Bragg

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">
<table id="leaders-table" class="data-table" width="100%" border="1" />

JavaScript

var columns = [
  { "title": "Col 1" },
  { "title": "Col 2" },
  { "title": "Col 3" },
  { "title": "Col 4" },
  { "title": "Status" },
  { "title": "Score" },
  { "title": "Total Time" },
  { "title": "Solve Time" },
  { "title": "Last Update" },
  { "title": "Notes" },
  { "title": "Clue Number 1" }, 
  { "title": "Clue Number 2" }, 
  { "title": "Clue Number 3" }, 
  { "title": "Clue Number 4" },
  { "title": "Clue Number 5" },
  { "title": "Clue Number 6" }
];
var data = [
  [
    "1",
    "1",
    "ReallyLongUnbrokenText ThatWillCauseMisalignment Between Header Cells and Body Cells",
    "GroupA",
    "stillinprogress",
    "24",
    "575250:56:29",
    "0:25",
    "04/25/14 05:11 PM PDT (0:33)",
    "adf<br>penalty: 2 sec",
	"24 (0:25)",
    "0 (not started)",            
    "0 (5470:56:27 in progress)",
    "n/a",
    "n/a",
    "n/a"
  ],
];
$("#leaders-table").DataTable({
  "columns": columns,
  "data": data,
  "scrollX": true,
  "scrollCollapse": true
});