JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<table id="example">
    <thead>
        <th>name</th>
        <th>position</th>
        <th>office</th>
        <th>age</th>
        <th>start_date</th>
        <th>salary</th>
    </thead>

</table>

CSS

td {
    white-space: nowrap;
}

JavaScript

var data = [{
    "name": "Tiger Nixon",
    "position": "System Architect",
    "salary": "$3,120",
    "start_date": "2011/04/25",
    "office": "Edinburgh",
    "extn": "5421"
  }, {
    "name": "Garrett Winters",
    "position": "Director",
    "salary": "$5,300",
    "start_date": "2011/07/25",
    "office": "Edinburgh",
    "extn": "8422"
  }];


var createColumn = columnName => _.object(['data'], [columnName]);
var columns = _.chain(data)
  .first()
  .keys()
  .map(createColumn)
  .value();

var table = $('#example').DataTable({
  searching: false,
  paging: false,
  autoWidth: true,
  columns
});


table.rows.add(data)
  .draw();