Develop Reference

vuetify v-autocomplete table dropdown

Trying to create a v-autocomplete dropdown with a table format. For example I have a select with a list of products each one with product name, keywords, prefix etc... want to be able to display this info as table on a dropdown.
I was able to get the header working but then when I use a template for the items using
<v-autocomplete
dense
label="Select product"
:items="products"
:item-value="product_name"
:filter="customFilter"
:return-object="true"
v-model="form.product">
<template slot="selection" slot-scope="{ item, selected }">
{{ item.product_name ? item.product_name : ""}}
</template>
<template v-slot:prepend-item>
<v-simple-table dense>
<thead>
<tr>
<th>Full Name</th><th>Short Name</th><th>Prefix</th><th>Keywords</th>
</tr>
</thead>
</v-simple-table>
</template>
<template slot="item" slot-scope="{item}">
<v-simple-table>
<tbody>
<tr>
<td>{{ item.product_name }} </td><td>{{ item.product }}</td><td>{{ item.view_prefix }}</td><td>{{ item.keywords }}</td>
</tr>
</tbody>
</v-simple-table>
</template>
</v-autocomplete>
So this shows a perfect header but the data inside doesn't line up. The filter works fine and I can search for items on each column fine. Just want to be able to line up the header with the data properly. Let me know if anyone can help!

Vuetify v-data-table add complex data

i am working on v-data-table. I couldn't figure out how to process the information from the backend. Could you help?
i tried this code but i get vue.runtime.esm.js:1897 TypeError: this.items.slice is not a function
<v-data-table :headers="headers" :items="products" class="elevation-1" :search="search">
<template slot="item" slot-scope="props">
<tr>
<td>{{ props.item.id }}</td>
<td class="text-xs-right">{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.id }}</td>
<td class="text-xs-right">{{ props.item.category}}</td>
....
<v-btn icon class="mx-0" #click="editItem(props.item)">
<v-icon class="mx-0 primary--text white--text">edit</v-icon>
</v-btn>
<v-btn icon class="mx-0" #click="deleteItem(props.item)">
<v-icon class="mx-0 red--text white--text">delete</v-icon>
</v-btn>
</td>
</tr>
</template>
data from api
{
"items": [
{
"name":"test",
"id":1,
"category":"test"
}
],
}

The data you receive from the API is stored in the items array
data(){
return {
items: []
If that is the case then you will need to do this:
v-data-table :items="items"
and not products like you have above.
Docs

Clicking on row in v-data-table with template rows

When I added template rows (so that they have special formatting based on condition):
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
#click:row="clickedHandle"
>
<template v-slot:item="props">
<tr v-if="props.item.name.includes('Fro')">
<td>{{ props.item.name }}</td>
<td v-for="itemx in myheaders">{{ toThousands(props.item[itemx]) }}</td>
</tr>
<tr v-else>
<td v-for="itemx in props.item">{{ itemx }}</td>
</tr>
</template>
</v-data-table>
The function that is supposed to be called on row click clickedHandle does not fire up at all. Why is that so?
Here is the example where you can check this behaviour:
https://codesandbox.io/s/vuetify-playground-forked-lro4w?file=/src/layout.vue
The table does not seem to react on row click at all.
clickedHandle(value) {
console.log(value);
},
clickedHandle should log some value on row click.

Customize each cell individually as they do in the v-data-table row customization docs, not the whole row. You can use a v-for to dynamically target the cell slots you want (in conjunction with your myheaders array):
<template v-for="header in myheaders" v-slot:[`item.${header}`]="props">
<template v-if="props.item.name.includes('Fro')">
{{ toThousands(props.item[header]) }}
</template>
<template v-else>
{{ props.item[header] }}
</template>
</template>
You could avoid this slot and filter complexity by preparing your data ahead of time in a computed.
Here is an updated CodeSandbox

try with this code:
<v-data-table
:headers="headers"
:items="desserts"
hide-actions
class="elevation-1"
>
<template slot="items" slot-scope="myprops">
<tr v-if="myprops.item.name.includes('Fro')">
...
</tr>
<tr v-else>
<td v-for="itemx in props.item">{{ itemx }}</td>
</tr>
</template>
</v-data-table>

Passing in prop in scoped-slot not working

I am trying to wrap my table inside of a slot for reusability purposes but I am having trouble with passing in my label prop:
My main parent component Parent.vue:
<Table
:headers="headers"
:items="people"
:search="search"
:label="label"
>
<template scope="props">
Label is: {{ label }} <!-- this label is not printing out -->
<v-data-table :headers="props.headers" :items="people" :search="props.search">
<template slot="items" slot-scope="props">
<td>{{ props.item.firstName }}</td>
<td>{{ props.item.lastName }}</td>
<td>{{ props.item.email }}</td>
</template>
</v-data-table>
</template>
</Table>
My Table component:
<template>
<div>
<slot :items="items" :headers="headers" :search="search" scoped-slot="{label: label}"></slot>
</div>
</template>
<script>
export default {
data() {
return {
label: "Some label"
}
},
computed: {
},
props: ["items", "headers", "search"]
}
</script>
This method gives me error Property or method "label" is not defined. Could someone help point out where I am going wrong with passing in the label prop?

You need to access it as props.label instead of just label
<template slot-scope="slotProps">
Label is: {{ slotProps.label }} <!-- this label is not printing out -->
<v-data-table :headers="props.headers" :items="people" :search="props.search">
<template slot="items" slot-scope="props">
<td>{{ props.item.firstName }}</td>
<td>{{ props.item.lastName }}</td>
<td>{{ props.item.email }}</td>
</template>
</v-data-table>
</template>
and in Table component, passing label as simple as other binding value:
<template>
<div>
<slot :items="items" :headers="headers" :search="search" :label="label"></slot>
</div>
</template>

How to make content in an expand slot of a data table in VuetifyJS searchable?

I'm using the VuetifyJS/VueJS data table with an expand slot. How to make the content in the expand slot searchable? I tried wrap the content within <td></td> but that didn't work.
Here is a codepen example: https://codepen.io/anon/pen/VBemRK?&editors=101
If you search for "find me" it always results in a Your search for "find me" found no results.
<v-data-table
:headers="headers"
:items="desserts"
:search="search"
item-key="name"
>
<template slot="items" slot-scope="props">
<tr #click="props.expanded = !props.expanded">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
<template slot="expand" slot-scope="props">
<v-card flat>
<v-card-text><td>Peek-a-boo! Please find me too.</td></v-card-text>
</v-card>
</template>
<v-alert slot="no-results" :value="true" color="error" icon="warning">
Your search for "{{ search }}" found no results.
</v-alert>
</v-data-table>

Use a custom filter.
First, create a custom filter method:
methods: {
customFilter(items, search) {
return items.filter(dessert => JSON.stringify(dessert).toLowerCase().indexOf(search.toLowerCase()) !== -1)
}
}
then add :custom-filter="customFilter" to the v-data-table:
<v-data-table
:headers="headers"
:custom-filter="customFilter"
:items="desserts"
:search="search"
item-key="name"
>
See this updated codepen:
https://codepen.io/WisdomSky/pen/PBNvYY

Since Vuetify version >= 2 you'll need to use the custom-filter prop which has a new pattern.
export default {
methods: {
customDataTableItemsFilter(value, search, items) {
/*
Filter for individual words in search string. Filters
all object values rather than just the keys included
in the data table headers.
*/
const wordArray = search
.toString()
.toLowerCase()
.split(' ')
.filter(x => x)
return wordArray.every(word =>
JSON.stringify(Object.values(items))
.toString()
.toLowerCase()
.includes(word)
)
}
}
}