Developing reusable components using props and slots in Vue

#Component
<template>
  <div>
    <h5>{{ title }}</h5>
    <table>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
      <tr v-for="(row, i) in data" :key="i">
        <td v-for="(column, j) in row" :key="`${i}-${j}`">{{ column }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  name: 'DataTable',
  props: {
    title,
    headers,
    Data
  },
}
</script>

#The parent that calls the component
<template>
  <DataTable :title="title" :headers="headers" :data="data"/>
</template>
<script>
// Omit the import statement for the component
export default {
  data() {
    return {
      title: 'Title',
      headers: ['C1', 'C2', 'C3', 'C4'],
      data: [
        {
          c1: `R1-C1`,
          c2: `R1-C2`,
          c3: `R1-C3`,
          c4: `R1-C4`,
        },
        {
          c1: `R2-C1`,
          c2: `R2-C2`,
          c3: `R2-C3`,
          c4: `R2-C4`,
        },
      ]
    }
  },
}
</script>

<script>
export default {
  props: {
    title: {
      // A prop with a String type. When a prop can have multiple types, you can specify them using an array, such as [String, Number], etc.
      type: String,
      // This prop must be provided by the parent component.
      required: true,
      // Prop validation check. Returns a Boolean to determine the result.
      validator(value) {
        return value.startsWith('Title')
      }
    },
  },
}
</script>

<template>
  <div>
    <h5>{{ title }}</h5>
    <table>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
      <tr v-for="(row, i) in data" :key="i">
        <!-- The class information is retrieved using a function that evaluates the received styles -->
        <td
          v-for="(value, j) in row"
          :class="cellStyle(value)"
          :key="`${i}-${j}`"
        >
          {{ value }}
        </td>
        <!-- If there are buttons, prepare a separate column for them -->
        <td v-if="buttons.length > 0">
          <button
            v-for="button in buttons"
            :class="button.class"
            :disabled="button.disabled(row)"
            @click="button.onClick(row)"
            :key="`${button}-${i}`"
          >
            {{ button.text }}
          </button>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  props: {
    title,
    headers,
    data,
    // To receive the cell style logic as a prop
    cellStyle,
    // To receive button information as a prop
    buttons,
  },
}
</script>

<template>
  <!-- Passing the function that returns class information and button-related information as props -->
  <DataTable :title="title" :headers="headers" :data="data" :cell-style="cellStyle()" :buttons="buttons" />
</template>
<script>
export default {
  data() {
    return {
      // Other data information is omitted.
      Buttons: [
        {
          text: 'edit',
          class: 'btn-primary',
          disabled: (rowData) => {
            // Logic to determine whether to disable the button
          },
          onClick: (rowData) => {
            // Logic after button press
          },
        },
        {
          text: 'delete',
          class: 'btn-danger',
          disabled: (rowData) => {
            // Logic to determine whether to disable the button
          },
          onClick: (rowData) => {
            // Logic after button press
          },
        },
      ],
    }
  },
  methods: {
    cellStyle() {
      return (val) => {
        // The logic that returns the necessary style class information
      }
    }
  }
}
</script>

<template>
  <div>
    <!-- default slot -->
    <slot />
    <!-- table slot -->
    <slot name="table" />
  </div>
</template>

<template>
  <DataTable>
    <!-- When you write HTML code inside the component, it is automatically placed into the slot declared on the component side -->
    <!-- If not wrapped in a template, it is placed into the default slot -->
    <h5>Title</h5>
    <!-- Placed into the slot named table -->
    <template #table>
      <table>
        <tr>
          <th v-for="header in headers" :keys="header">{{ header }}</th>
        </tr>
        <tr v-for="(row, i) in data" :keys="`row-${i}`">
          <td
            v-for="(column, j) in row"
            :class="{
              'font-italic': italicFont(column),
              'font-weight-bold': boldFont(column)
            }"
            :key="`row-${i}-col-${j}`"
          >
            {{ column }}
          </td>
          <td>
            <button :disabled="editDisabled(column.c1)" @click="edit(column.c1)">Edit</button>
            <button :disabled="destroyDisabled(column.c1)" @click="click(column.c1)">Delete</button>
          </td>
        </tr>
      </table>
    </template>
  </DataTable>
</template>
<script>
export default {
  // Omit data information
  methods: {
    edit(id) {
      // Logic to edit the data for that row
    },
    destroy(id) {
      // Logic to delete the data for that row
    },
    italicFont(val) {
      // Logic to determine whether the font should be Italic
    },
    boldFont(val) {
      // Logic to determine whether the font should be bold
    },
    editDisabled(id) {
      // Logic to determine whether the edit button should be disabled
    },
    destroyDisabled(id) {
      // Logic to determine whether the delete button should be disabled
    }
  },
}
</script>

<template>
  <DataTable>
    <!-- Use h1 instead of h5 -->
    <h1>Title</h1>
    <template #table>
      <!-- Use <div> instead of <table>, <tr>, and <th> -->
      <div>
        <div>
          <div v-for="header in headers" :keys="header">{{ header }}</div>
          <div></div>
        </div>
        <div v-for="(row, i) in data" :keys="`row-${i}`">
          <div v-for="(column, j) in row" :key="`row-${i}-col-${j}`">
            {{ column }}
          </div>
          <div>
            <button :disabled="editDisabled(column.c1)" @click="edit(column.c1)">Edit</button>
            <button :disabled="destroyDisabled(column.c1)" @click="click(column.c1)">Delete</button>
          </div>
        </div>
      </div>
    </template>
  </DataTable>
</template>

<template>
  <div>
    <!-- Use props to ensure the text is always placed in <h5> -->
    <h5>{{ title }}</h5>
    <!-- Ensure the use of <table> tag -->
    <table>
      <tr>
        <!—Use props to pass header information to enforce the use of <th> -->
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
      <!-- Dynamically generate slots based on the number of rows in the passed data -->
      <!-- Use v-bind to pass data to the parent template -->
      <slot name="table-item" v-for="row in data" v-bind="row" />
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title,
      headers,
      data
    }
  }
}
</script>

<template>
  <!—Pass the title and headers as props -->
  <DataTable title="Title" :headers="headers" :data="data">
    <!-- Receive the v-bind data on the component side -->
    <template #table-item="row">
      <!—Accept a row of data and define how it should be displayed -->
      <tr>
        <td v-for="(column, i) in row" :key="`col-${i}`">
          {{ column }}
        </td>
        <td>
          <button :disabled="editDisabled(column.c1)" @click="edit(column.c1)">Edit</button>
          <button :disabled="destroyDisabled(column.c1)" @click="click(column.c1)">Delete</button>
        </td>
      </tr>
    </template>
  </DataTable>
</template>

<template>
  <DataTable title="Title" :headers="headers" :data="data">
    <template #table-item="row">
      <!-- Notify the developer in some way if it is not <tr> -->
      <div>
        <td v-for="(column, i) in row" :key="`col-${i}`">
          {{ column }}
        </td>
      </div>
    </template>
  </DataTable>
</template>