JSFiddle - React, Tailwind, and code Playground

by Sokiraon

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id='app'>
<v-app>
	<v-simple-table>
		<thead>
			<tr>
				<th v-for='header in headers'>
					{{ header }}
				</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for='item in content'>
				<td v-for="key in headers">
					{{ item[key] }}
				</td>
			</tr>
		</tbody>
	</v-simple-table>
</v-app>
</div>

JavaScript

Vue.use(Vuetify);

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