JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<div id="table-container">
  <project-table :data="data"></project-table>
</div>
    <script id="table-template" type="text/x-template">
        <table class="u-full-width">
            <thead>
                <tr>
                    <th>Project location</th>
                    <th>Total</th>
                    <th>Timestamp</th>
                </tr>
            </thead>
            <tbody>
            <template v-for="item in data">
              <tr class="name-row" >
                <th class="name" colspan="3">{{item.key}}</th>
              </tr>
							<template v-for="subregion in item.values">
                <tr>
                   <th class="group-name" colspan="4">{{subregion.key}}</th>
                </tr>
                <tr v-for="site in subregion.values">
                    <td>{{site.site}}</td>
                    <td>{{site.total}}</td>
                    <td>
                        <span>{{site.timestamp}}</span>
                    </td>  
                </tr>
              </template>
            </template>
            <tbody>
        </table>
    </script>

CSS

.name-row {
  background: #ddd;
  border-top: 1px solid black;
  }
  
  .group-name {
  background: #eee;
  }

JavaScript

var sites = [
  {
    key: "Region 1",
    values: [
      {
        key: "Sub region 1",
        values: [
          {
            site: "Site A",
            timestamp: 1507246300935,
            total: 3,
          },
          {
            site: "Site B",
            timestamp: 1507246300818,
            total: 0,
          },
          {
            site: "Site C",
            timestamp: 1507246300936,
            total: 0,
          }
        ],
      },
      {
        key: "Sub region 2",
        values: [
          {
            site: "Site A",
            timestamp: 1507246301442,
            total: 20,
          },
          {
            site: "Site B",
            timestamp: 1507246301788,
            total: 5,
          }
        ]
      },
      {
        key: "Sub region 3",
        values: [
          {
            site: "Site A",
            timestamp: 1507246302503,
            total: 66,
          },
          {
            site: "Site B",
            timestamp: 1507246302783,
            total: 2
          }
        ]
      }
    ]
  },
  {
    key: "Region 2",
    values: [
      {
        key: "Sub region 1",
        values: [
          {
            site: "Site A",
            timestamp: 1507246306789,
            total: 0,
          },
          {
            site: "Site B",
            timestamp: 1507246307439,
            total: 6,
          }
        ]
      },
      {
        key: "Sub region 2",
        values: [
          {
            site: "Site A",
            timestamp: 1507246308269,
            total: 10,
          },
          {
            site: "Site B",
            timestamp: 1507246308683,
            total: 30,
          }
        ]
      }
    ]
  }
];

Vue.component('project-table', {
  template: '#table-template',
  props: {
    data: Array
  }
});

var app = new Vue({
el: '#table-container',
data: {data: sites},
})