<template>
  <div v-if="propsData.length>0" class="mb-5">
    <label class="form-label">Props Details</label>
    <table class="table">
      <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col" class="text-center">Type</th>
        <th scope="col" class="text-center">Default</th>
        <th scope="col" class="text-center">Details</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="data in propsData">
        <td>{{ data.name ? data.name : '-' }}</td>
        <td class="text-center">{{ data.type ? data.type : '-' }}</td>
        <td class="text-center">{{ data.default_val ? data.default_val : '-' }}</td>
        <td class="text-center">{{ data.details ? data.details : '-' }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "PropsDetailsTable",
  props: {
    propsData: {
      type: Array,
      default: []
    }
  },
  data() {
    return {}
  }
}
</script>

<style scoped lang="scss">

</style>