JSFiddle - React, Tailwind, and code Playground

by Kingdaro

HTML

<div id="app">
    <table border=1>
        <thead>
            <tr>
                <th v-for="column in mycolumns" v-text="column.column"></th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in myitems">
                <td v-for="column in mycolumns" v-text="column.field(item)"></td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript

var demo = new Vue({
    el: '#app',
    data: {
    		myitems: [
        		{
            		name: "todo 1",
                status: 1
            },
        		{
            		name: "todo 2",
                status: 2
            },
        		{
            		name: "todo 3",
                status: 1
            }
        ],
        mycolumns: [
        		{
            		column: "Todo Name",
                field: item => item.name 
            },
        		{
            		column: "Status",
                field: item => item.status
            },
        		{
            		column: "Status Explanation",
                field: item => item.status == 1 ? 'Done' : 'Todo'
            }
        ]
    } 
})