Vuetify tree data-table - vuetify.js

Question

how can I embed a v-tree-view component in v-data-table ?
I have tried so many times but without any result .
with no vuetify v-tree-table forexample , here comes the question , how to integrate the v-tree-view with v-data-table ?

Answer 1

You can define a slot to customize any column. So there you can insert your treeview. An example:
<template>
<v-data-table
:headers="headers"
:items="cosas"
>
<template v-slot:[`item.description`]>
<td>
<template>
<v-treeview :items="treeItems"></v-treeview>
</template>
</td>
</template>
</v-data-table>
</template>
<script>
export default {
name: 'MyComponent',
data () {
return {
headers:[
{ text: 'Name', value: 'name'},
{ text: 'Description', value: 'description'},
],
cosas:[
{ name: 'Item1', description: 'description1'},
{ name: 'Item2', description: 'description2'},
],
treeItems: [
{
id: 1,
name: 'Applications :',
children: [
{ id: 2, name: 'Calendar : app' },
{ id: 3, name: 'Chrome : app' },
{ id: 4, name: 'Webstorm : app' },
],
},
{
id: 5,
name: 'Documents :',
children: [
{
id: 6,
name: 'vuetify :',
children: [
{
id: 7,
name: 'src :',
children: [
{ id: 8, name: 'index : ts' },
{ id: 9, name: 'bootstrap : ts' },
],
},
],
},
{
id: 10,
name: 'material2 :',
children: [
{
id: 11,
name: 'src :',
children: [
{ id: 12, name: 'v-btn : ts' },
{ id: 13, name: 'v-card : ts' },
{ id: 14, name: 'v-window : ts' },
],
},
],
},
],
},
{
id: 15,
name: 'Downloads :',
children: [
{ id: 16, name: 'October : pdf' },
{ id: 17, name: 'November : pdf' },
{ id: 18, name: 'Tutorial : html' },
],
},
{
id: 19,
name: 'Videos :',
children: [
{
id: 20,
name: 'Tutorials :',
children: [
{ id: 21, name: 'Basic layouts : mp4' },
{ id: 22, name: 'Advanced techniques : mp4' },
{ id: 23, name: 'All about app : dir' },
],
},
{ id: 24, name: 'Intro : mov' },
{ id: 25, name: 'Conference introduction : avi' },
],
},
],
}
}
}
</script>
Set your filters in the template to insert it only in those cells that you need it.

Answer 2

i try with many libraries but i feel very hard dificult, because i want to use crud in nodes child, i created solucion: i used a table of type expanded and this expended area insert other table for child. you can read in official page about expand table:
https://vuetifyjs.com/en/components/data-tables/#expandable-rows
my code:
<v-data-table
item-key="_id"
:headers="headers"
:items="items"
:single-expand="singleExpand"
:expanded.sync="expanded"
show-expand
height="670"
fixed-header
sort-by="_id"
class="elevation-1 mt-sm-5 mt-md-5 mt-lg-5 mt-xl-5"
>
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length" style="background-color:#C0D0D0">
<v-card class="mx-auto my-1" max-width="900" outlined>
<v-card-text>
<div>
<span><strong> Delivery {{item.name_driver}}</strong></span>
</div>
<v-divider></v-divider>
<div>
<v-data-table
:headers="headersChild"
:items="item.children"
:items-per-page="5"
class="elevation-1"
>
</v-data-table>
</div>
</v-card-text>
</v-card>
</td>
</template>
</v-data-table>