JSFiddle - React, Tailwind, and code Playground

by ksumarine

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.5/vue.js"></script>
<table id="testTable">
    <thead>
        <tr class="header">
            <td>Name</td>
            <td>Age</td>
            <td>Height</td>
            <td v-repeat="testing[0].misc">Misc</td>
        </tr>
    </thead>
    <tbody>
        <tr v-repeat="testing">
            <td>{{name}}</td>
            <td>{{age}}</td>
            <td>{{height}}</td>
            <td v-repeat="misc">
                {{item}}, {{text}}
            </td>
        </tr>
    </tbody>
</table>

CSS

table {
    border-collapse:collapse;
}
.header {
    background:navy;
    color:white;
}
td {
    border:1px solid #000;
    padding:2px;
}

JavaScript

var data = [{
    name: 'Bob',
    age: 50,
    height: 5.11,
    misc: [{
        item: 1,
        text: 'test1'
    }, {
        item: 2,
        text: 'test2'
    }, {
        item: 3,
        text: 'test3'
    }, {
        item: 4,
        text: 'test4'
    }, {
        item: 5,
        text: 'test5'
    }]
}, {
    name: 'Steve',
    age: 52,
    height: 5.10,
    misc: [{
        item: 6,
        text: 'test6'
    }, {
        item: 7,
        text: 'test7'
    }, {
        item: 8,
        text: 'test8'
    }, {
        item: 9,
        text: 'test9'
    }, {
        item: 10,
        text: 'test10'
    }]
}];
var vue = new Vue({
    el: '#testTable',
    data: {
        title: 'testing',
        testing: data
    }
});