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>
Related
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!
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
I'm trying to customize all headers in my v-data-table like this
<v-data-table
:headers="headers"
:items="desserts"
:disable-sort="true"
:hide-default-footer="true"
>
<template v-slot:header="{ header }">
{{ header.text.toUpperCase() }}
</template>
</v-data-table>
I saw in the documentation how to do this for only ONE header like this :
<v-data-table
:headers="headers"
:items="desserts"
:disable-sort="true"
:hide-default-footer="true"
>
<template v-slot:header.name="{ header }">
{{ header.text.toUpperCase() }}
</template>
</v-data-table>
but I want to custom ALL headers and I'm not figuring out how to do this. Also my headers are dynamics.
You can do it using the header (not header.<name>) slot. Note that this slot is used for generating all header columns at once. It means that you'll need to dynamically create the <th> tags using a v-for directive.
Also, it is located under the default headers, so you'll need to add the hide-default-header prop.
<v-data-table :headers="headers" :items="desserts" hide-default-header>
<template v-slot:header="{ props }">
<thead>
<tr>
<th v-for="header in props.headers" :key="header.text">
{{ header.text.toUpperCase() }}
</th>
</tr>
</thead>
</template>
</v-data-table>
See this working example.
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>
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)
)
}
}
}