I ran into this issue as well. I came up with a solution that works for me, and might be of interest to someone else. I have my AppTable component that can be used by a parent component with as little code as possible. This works great for me, as now I can quickly build 100 tables, and they will all have consistent look, feel and functionality. And, I’m able to use custom cell templates for each one if I need to.
Relevant parts:
// AppTable.vue
// Dynamically build cell templates
template(
v-for="column in columns"
v-slot:[`body-cell-${column.name}`]="props"
)
// Allow a column to provide a component
q-td(v-if="props.col.component")
div(:is="props.col.component" :props="props")
// Allow for parent component to provide custom cell template
// If parent doesn't have custom template, display column value
q-td(v-else)
slot(:name="`body-cell-${column.name}`" :value="props.value") {{ _displayCellValue(props.value) }}
// UsersTable.vue
.users-table
app-table(
:columns="columns"
:settings="settings"
:do-request="doRequest"
:do-batch-action="doBatchAction"
)
template(#body-cell-roles="props")
q-badge(
v-for="role in props.value"
:key="`role-${role.id}`"
:label="role.name"
)