<template>
<v-data-table
:headers="headers"
:items="records"
:items-per-page="5"
show-select
loading
item-key="id"
class="elevation-1"
>
<template v-slot:top>
<div>
<table-tabs></table-tabs>
<v-text-field
append-icon="mdi-close"
class="mx-4"
flat
hide-details
label="Search"
prepend-inner-icon="mdi-magnify"
solo-inverted
></v-text-field>
</div>
</template>
<template v-slot:item.id="{ item }">
<product-instance-cell v-bind:item="item" :data="item"></product-instance-cell>
</template>
<template v-slot:item.boxCode="{ item }">
<serial-cell v-bind:boxCode="item.boxCode" :serial="item.boxCode"></serial-cell>
</template>
<template v-if="hasField('manager')" v-slot:item.manager="{ item }">
<user-cell v-bind:user="item.manager" :user="item.manager"></user-cell>
</template>
<template v-slot:item.customer="{ item }">
<customer-cell v-bind:customer="item.customer" :customer="item.customer"></customer-cell>
</template>
<template v-slot:item.updatedAt="{ item }">
<date-cell v-bind:updatedAt="item.updatedAt" :date="item.updatedAt"></date-cell>
</template>
</v-data-table>
I must pass the field's name and cell component below the template to create custom cells for specific models and fields.
<template v-slot:item.id="{ item }">
<product-instance-cell v-bind:item="item" :data="item"></product-instance-cell>
</template>
However, I want to dynamically load the cells because my table does not have a specific model usage. The table can display 5 different types of models Array<T> and I have a "table spec" that contains all the necessary information to create the table, such as header cell names, sorting logic, maximum row count, and cell component names by model and field.
Dealing with the data table header that does not require another template is easy, and the entire template code above works for only one model. For a super dynamic table with spec data, I am looking to create a solution. How can I achieve this?
I am open to other Vue's philosophical approaches, even if they are not specific solutions for this particular case.