Vuetify data table - manually display expandable rows

Question

I have a bunch of dynamic columns in a v-data table which I need to loop through and interrogate in order to display the correct info. It looks a bit like this (taken from the answer here: Vuetify format cell based on item type)

<v-data-table :item="items" ... >
 <template v-for="header in headers" v-slot:[`item.${header.value}`]="{ item } ">
   <template v-if="header.type === 'foo'">
     <span style="color: red;">{{ item[header.value] }}</span>
   </template>
   <template v-else-if="header.value === 'data-table-expand'">
     ???
   </template>
   <template v-else>
     {{ item[header.value] }}
   </template>
 </template>
</v-data-table>

Since I need the v-if statement, all other types default to the v-else. However, the v-else is not suitable for when a type is an expandable row. It will display a blank value for that column. So I created a v-else-if template to be able to capture the expandable row column and correctly render it to the screen.

The problem is that I don't know what to put in the template to indicate it's a column with expandable rows (https://vuetifyjs.com/en/components/data-tables/#expandable-rows). In other words it does not render the carat icon that shrinks/expands the subtable, nor does it render the clickable actions. How would I modify the v-else-if template to correctly render its contents?

No, I'm looking for the code that renders the icon and all it's functionality when clicked on — ekjcfn3902039

ekjcfn3902039 ekjcfn3902039 · Accepted Answer · 2021-01-13T18:46:50

I came up with a workaround using computed properties.

Instead of using

v-for="header in headers"

I changed it to a computed headers which is filtered.

<template v-for="header in headersIWant" v-slot:[`item.${header.value}`]="{ item } ">
  <span style="color: red;">{{ item[header.value] }}</span>
</template>
...
computed: {
 headersIWant() {
  return this.headers.filter(x => x.type === 'foo');
 }
}

Vuetify data table - manually display expandable rows

1 Answers