JSFiddle - React, Tailwind, and code Playground

by Yasin Yoruk

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
  
<table class="timeline-table" id="my-table">
  <thead>
    <tr>
      <th v-for="key in Object.keys(rows[0])">{{ key }}</th>
    </tr>
  </thead>
  <tbody >
    <tr v-for="row in rows">
      <td v-for="key in Object.keys(row)">{{ row[key] }}</td>
    </tr>
  </tbody>
</table>

JavaScript

new Vue({
  el: '#my-table',
  data: {
  rows: [{
    Head1: '1',
    Head2: '2',
    Head3: '3',
    Head4: '4'
  },
  {
    Head1: '11',
    Head2: '22',
    Head3: '33',
    Head4: '44'
  }]
  }
})