JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <table border="1">
    <thead>
      <tr>
        <th v-for="column in columns" :key="column">{{ column }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in rows" :key="index">
        <td v-for="column in columns" :key="column">
          {{ row[column] }}
        </td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript

Vue.createApp({
  data () {
    return {
      rows: [
        { title: 'A book', author: 'Me' },
        { title: 'Another book', author: 'You' }
      ]
    }
  },
  
  computed: {
    columns () {
      const firstRow = this.rows[0]
      
      if (!firstRow) {
        return []
      }
      
      return Object.keys(firstRow)
    }
  }
}).mount('#app')