JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<script src="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify/dist/vuetify.min.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<div id="app">
  <h1>Table</h1>
  <div>
    <v-data-table v-bind:headers="headers" :items="items" hide-actions class="elevation-1">
      <template slot="items" scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">
          {{ props.item.calories }}
          <object-modifier
            title="Hello"
            :item="props.item"
            @some-action="modifyItem"
          ></object-modifier>
        </td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.sodium }}</td>
        <td class="text-xs-right">{{ props.item.calcium }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </template>
    </v-data-table>
  </div>
</div>


<template id="object-modifier">
  <div>
    {{title}}
    <div>
      {{item.name}}
      <button @click="$emit('some-action', item)">action</button>
    </div>
  </div>
</template>

JavaScript

Vue.component('object-modifier', {
	template: '#object-modifier',
  props: ['title', 'item']
})

new Vue({
  	el: '#app',
    methods: {
    	modifyItem: function (item) {
      	var message = 'modify item ' + item.name
      	window.alert(message)
			}
		},
    data: function() {
      return {
        headers: [{
          text: 'Dessert (100g serving)',
          left: true,
          sortable: false,
          value: 'name'
        }, {
          text: 'Calories',
          value: 'calories'
        }, {
          text: 'Fat (g)',
          value: 'fat'
        }, {
          text: 'Carbs (g)',
          value: 'carbs'
        }, {
          text: 'Protein (g)',
          value: 'protein'
        }, {
          text: 'Sodium (mg)',
          value: 'sodium'
        }, {
          text: 'Calcium (%)',
          value: 'calcium'
        }, {
          text: 'Iron (%)',
          value: 'iron'
        }],
        items: [{
          value: false,
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          sodium: 562,
          calcium: '0%',
          iron: '45%'
        }, {
          value: false,
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          sodium: 326,
          calcium: '2%',
          iron: '22%'
        }, {
          value: false,
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          sodium: 54,
          calcium: '12%',
          iron: '6%'
        }]
      }
    }
  })