JSFiddle - React, Tailwind, and code Playground

by JinHan Heo

HTML

<div id="test">
  <table style="border:1px;">
    <tr>
      <td>시간</td>
      <td v-for="(date, index) in dates" :key="index" style="text-align:center;">
        {{ date }}
      </td>
    </tr>
    <tr v-for="(hour, index) in hours" :key="index">
      <td>{{ hour }}</td>
      <td v-for="(item, index) in items" :key="index">
        <span v-if="item[hour] !== undefined">
          {{ format(item[hour]) }}
        </span>
      </td>
    </tr>
  </table>
</div>

<template id="child">
  
</template>

CSS

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #999;
  padding: 0.5rem;
  text-align: left;
}

JavaScript

new Vue({
	el: '#test',
  data: {
  	items: [
  {
    "12": {
      "And": 11,
      "iOS": 7
    },
    "13": {
      "iOS": 21,
      "And": 25
    },
    "14": {
      "iOS": 19,
      "And": 15
    },
    "15": {
      "And": 10,
      "iOS": 23
    },
    "16": {
      "And": 12,
      "iOS": 30
    },
    "17": {
      "iOS": 25,
      "And": 19
    },
    "18": {
      "iOS": 40,
      "And": 31
    },
    "19": {
      "iOS": 29,
      "And": 25
    },
    "20": {
      "iOS": 64,
      "And": 30
    },
    "21": {
      "iOS": 37,
      "And": 37
    },
    "22": {
      "iOS": 51,
      "And": 34
    },
    "23": {
      "iOS": 56,
      "And": 30
    }
  },
  {
    "10": {
      "iOS": 23,
      "And": 13
    },
    "11": {
      "iOS": 32,
      "And": 22
    },
    "12": {
      "iOS": 15,
      "And": 20
    },
    "13": {
      "And": 17,
      "iOS": 17
    },
    "14": {
      "And": 22,
      "iOS": 32
    },
    "15": {
      "iOS": 25,
      "And": 13
    },
    "16": {
      "iOS": 25,
      "And": 25
    },
    "17": {
      "iOS": 19,
      "And": 21
    },
    "18": {
      "iOS": 40,
      "And": 29
    },
    "19": {
      "And": 28,
      "iOS": 33
    },
    "20": {
      "iOS": 40,
      "And": 40
    },
    "21": {
      "And": 38,
      "iOS": 34
    },
    "22": {
      "And": 40,
      "iOS": 53
    },
    "23": {
      "iOS": 39,
      "And": 41
    },
    "00": {
      "And": 23,
      "iOS": 29
    },
    "01": {
      "iOS": 30,
      "And": 17
    },
    "02": {
      "And": 15,
      "iOS": 18
    },
    "03": {
      "And": 6,
      "iOS": 14
    },
    "04": {
      "iOS": 9,
      "And": 3
    },
    "05": {
      "iOS": 4,
      "And": 4
    },
    "06": {
      "iOS": 4
    },
    "07": {
      "iOS": 4,
      "And": 4
    },
    "08": {
      "iOS": 4,
      "And": 1
    },
    "09": {
      "iOS": 15,
      "And": 4
    }
  },
  {
    "10": {
      "And": 10,
      "iOS": 12
    },
    "11": {
      "iOS": 37,
     ...