JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

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"],
    },
});