<script setup lang="ts">
interface Props {
  headings: string[];
  data: string[][];
}

defineProps<Props>();
</script>

<template>
  <table class="data-table">
    <thead class="data-table__head">
      <tr class="data-table__row">
        <th
          class="data-table__heading"
          v-for="(heading, idx) in headings"
          :key="idx"
        >
          {{ heading }}
        </th>
      </tr>
    </thead>
    <tbody class="data-table__body">
      <tr class="data-table__row" v-for="(row, idx) in data" :key="idx">
        <td class="data-table__cell" v-for="(cell, idx) in row" :key="idx">
          {{ cell }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style lang="scss">
.data-table {
  table-layout: fixed;

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