JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.js"></script>
<body id="app">

  <table>

    <thead>
      <tr>
        <th v-for="header in tableHeader">{{header}}</th>
      </tr>
    </thead>

    <tbody>
      <tr v-for="data in tableData">
        <template v-if="data.id == 3">
          <!--<td v-for="header in tableHeader">Prince Vegeta</td>-->
        </template>
        <template v-else>
          <td v-for="header in tableHeader">{{data[[header]]}}</td>
        </template>

      </tr>
    </tbody>

  </table>

</body>

CSS

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

JavaScript

new Vue({
    el: '#app',
    data: {
        tableData: [
            { id: 1, name: 'Son Goku', race: 'saiyan'},
            { id: 2, name: 'Son Gohan', race: 'half-saiyan'},
            { id: 3, name: 'Vegeta', race: 'saiyan'},
            { id: 4, name: 'Trunks Brief', race: 'half-saiyan'},
        ],
        tableHeader: ["id", "name", "race"],
    },
});