<template>
  <div class="pkg-n-table-responsive n-overflow-x-auto">
    <table class="n-table" cellspacing="0">
      <thead class="pkg-n-table-head n-radius-md">
        <th
          v-for="(column, index) in columns"
          :key="index"
          class="pkg-n-table--head n-px-7 n-py-4 n-text-start n-font-bold"
        >
          {{ column.label }}
        </th>
      </thead>
      <tbody class="pkg-n-table-body">
        <tr
          v-for="(row, index) in rows"
          :key="index"
          class="pkg-n-table-row n-radius-md"
        >
          <td
            v-for="(column, i) in columns"
            :key="i"
            class="n-text-body2 n-p-7 pkg-n-table--table-data"
          >
            <slot :name="column.key" :column="column" :row="row">
              {{ getCellValue(column, row) }}
            </slot>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "NTable",

  props: {
    wrapperClass: {
      type: String,
      default: "",
    },
    columns: {
      type: Array,
      default: () => [],
    },
    rows: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    getCellValue(column, row) {
      return row[column.key] || "-";
    },
  },
});
</script>

<style scoped>
@import url("./n-table.css");
</style>
