JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/underscore-min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<table id="dynamic">
  <thead @click="reorder">
    <th data-ord="id">ID</th>
    <th data-ord="nick">Nick name</th>
    <th data-ord="first">First name</th>
    <th data-ord="last">Last name</th>
    <th data-ord="email">Email</th>
  </thead>
  <tbody>
    <tr v-for="user in users" :key="user.id">
      <td>{{ user.id }}</td>
      <td>{{ user.nick }}</td>
      <td>{{ user.first }}</td>
      <td>{{ user.last }}</td>
      <td>{{ user.email }}</td>
    </tr>
  </tbody>
</table>

<button>Load data</button>

CSS

table {
  width: 80%;
  margin: 10px auto;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}
th {
  padding: 5px;
  background-color: black;
  color: white;
  font-weight: bold;
  cursor: pointer;
}
th, td { border: 1px solid black; padding: 3px 0; text-align: center; }
th:not(:last-child) { border-right: 1px solid white; }
button { display: block; margin: 0 auto; }

JavaScript

var table = new Vue({
  el: '#dynamic',
  data: {users: []},
  methods: {
    reorder (evt) {
      let key = evt.target.dataset.ord
      this.users = _.sortBy(this.users, key)
    }
  }
})

$('button').click(function () {
  $.getJSON('https://api.mockaroo.com/api/03f2c610?count=20&key=cdbbbcd0')
   .done(data => table.$data.users = data)
})