<template>
  <div
    ref="view"
    class="table_view"
  >
    <table>
      <tr
        v-for="(item,key) of items"
        :key="key"
      >
        <td
          v-for="(col,c_key) of columns"
          :key="c_key"
          v-text="resolve_data(item,col)"
        />
      </tr>
    </table>
  </div>
</template>

<script>
import { resolve_data } from '../helper';

export default {
  props: {
    items: {
      type:     Array,
      required: true
    },
    columns: {
      type:     Array,
      required: true
    }
  },
  methods: { resolve_data }
};
</script>

<style>
.table_view {
  overflow: auto;
  border: 1px solid blue;
  width: max-content;
  max-width: 100%;
  max-height: 100vh;
  font-size: 12px;
}

table {
  border-collapse: collapse;
}

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

td {
  border: 1px solid black;
  margin: 0;
}
</style>
