<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns">{{ column }}</th>
      </tr>
    <tbody>
      <tr v-for="row in rows">
        <td>{{ row }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'vue-table',
  props: {
    columns: {
      type: Array,
      default: () => ([]),
    },
    rows: {
      type: Array,
      default: () => ([]),
    },
    rowsPerPage: {
      type: Number,
      default: 5
    },
    page: {
      type: Number,
      default: 1
    }
  },
  computed: {
    shownRows () {
      const min = this.rowsPerPage * (this.page - 1)
      const max = this.rowsPerPage * this.page - 1
      return this.rows.filter((row, index) => (index <= max && index >= min))
    }
  }
}
</script>