<template>
  <table>
    <thead>
      <tr>
        <template v-for="header in dataset.headers">
          <th :key="header">{{ header }}</th>
        </template>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(tuple, row) in dataset.data" :key="row">
        <template v-for="(item, col) in tuple">
          <td :key="col" v-if="col === 1 && !isHexValue(item)" colspan="2">
            {{ item }}
          </td>
          <td :key="item[0]" v-else>{{ item }}</td>
          <td
            v-if="isHexValue(item)"
            :key="item[1]"
            :style="'background-color:' + item"
          ></td>
        </template>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: "DataTable",
  props: {
    dataset: {
      type: Object,
      required: true
    }
  },
  methods: {
    isHexValue(value) {
      return /^#[0-9a-f]{6}$/i.test(value) ? value : false;
    }
  }
};
</script>

<style lang="scss" scoped>
table {
  border-collapse: collapse;
  width: 100%;

  th,
  td {
    padding: 0.5em 1em;
  }
}

thead {
  tr {
    background-color: #3f4c6b;
    color: #fff;
  }
}

tbody {
  tr {
    background-color: #fff;
  }

  tr:nth-child(odd) {
    background-color: #eee;
  }

  td:first-child {
    text-align: right;
  }
}
</style>
