JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

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

CSS

th {
    text-align: left;
}

td {
    white-space: nowrap;
}

Babel + JSX

var height = $(window).height();
var createColumn = columnName => _.object(['data'], [columnName]);
var rows = getUsers(5);
var columns = _.chain(rows)
  .first()
  .keys()
  .map(createColumn)
  .value();

console.log(rows, columns);

const $table = $('table:first').DataTable({
  scrollY: '100px',
  "aaData": rows,
  "columns": columns,
  autoWidth: true,
  searching: false,
  processing: true,
  info: false,
  paging: false,
  ordering: false,
  lengthChange: false
});

console.log(columns);
function clear() {
    const rows = $table.rows();
    rows.cache().clear();
    rows.clear();
    $table.draw();
}

$("#clear").on("click", clear);

$("#button").click(function() {
  clear();
   
  const users = getUsers(5);
  $table.rows.add(users)
    .draw();
});

function getUsers(count) {
  const users = [{
    "name": "Tiger Nixon",
    "position": "System Architect",
    "office": "Edinburgh",
    "age": "61",
    "start_date": "2011/04/25",
    "salary": "$320,800"
  }, {
    "name": "Garrett Winters",
    "position": "Accountant",
    "office": "Tokyo",
    "age": "63",
    "start_date": "2011/07/25",
    "salary": "$170,750"
  }, {
    "name": "Ashton Cox",
    "position": "Junior Technical Author",
    "office": "San Francisco",
    "age": "66",
    "start_date": "2009/01/12",
    "salary": "$86,000"
  }, {
    "name": "Cedric Kelly",
    "position": "Senior Javascript Developer",
    "office": "Edinburgh",
    "age": "22",
    "start_date": "2012/03/29",
    "salary": "$433,060"
  }, {
    "name": "Airi Satou",
    "position": "Accountant",
    "office": "Tokyo",
    "age": "33",
    "start_date": "2008/11/28",
    "salary": "$162,700"
  }, {
    "name": "Brielle Williamson",
    "position": "Integration Specialist",
    "office": "New York",
    "age": "61",
    "start_date": "2012/12/02",
    "salary": "$372,000"
  }, {
    "name": "Herrod Chandler",
    "position": "Sales Assistant",
    "office": "San Francisco",
    "age": "59",
    "start_date":...