JSFiddle - React, Tailwind, and code Playground

by Sokiraon

HTML

<!--HTML-->
<div id='app'>
	<table>
		<tr>
			<th v-for='header in headers'>
				{{ header }}
			</th>
		</tr>
		<tr v-for='item in content'>
			<td v-for="key in headers">
				{{ item[key] }}
			</td>
		</tr>
	</table>
</div>

CSS

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

th, td {
	padding: 5px 10px 5px 10px;
}

JavaScript

new Vue({
	el: '#app',
	data: {
		headers: ['Name', 'Sex'],
		content: [
			{
				Name: 'John',
				Sex: 'Male',
			},
			{
				Name: 'Nancy',
				Sex: 'Female',
			},
		],
	},
})