I'm using a v-data-table.
According to official library, it has a dblclick:row event.
I tried to use it, but doesn't work.
(click:row event works fine.)
vuetify version is latest vuetify#2.3.8.
how can I use double click event in v-data-table?
here is my code sample.
(sorry for didn't write full code. I added. )
<div id="app">
<v-app id="inspire">
<v-card>
<v-data-table
:items="items"
:headers="headers"
dense
v-model="selected"
hide-default-footer
#click:row="clickRow"
#dblclick:row="dblclickRow"
>
</v-data-table>
</v-card>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
selected: [],
headers: [
{
text: "Dessert (100g serving)",
align: "start",
sortable: false,
value: "name"
},
{ text: "Calories", value: "calories" },
{ text: "Fat (g)", value: "fat" },
{ text: "Carbs (g)", value: "carbs" },
{ text: "Protein (g)", value: "protein" },
{ text: "Iron (%)", value: "iron" }
],
items: [
{
name: "Frozen Yogurt",
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: "1%"
},
{
name: "Ice cream sandwich",
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: "1%"
},
{
name: "Eclair",
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: "7%"
},
{
name: "Cupcake",
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: "8%"
},
{
name: "Gingerbread",
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: "16%"
},
{
name: "Jelly bean",
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: "0%"
}
],
selected:[]
}),
methods: {
dblclickRow(){
console.log("rowDoubleClicked");
},
clickRow(){
// console.log("rowClicked");
}
}
})
Your functions should be under methods. See this link https://v2.vuejs.org/v2/guide/events.html#Method-Event-Handlers.
The event is not reaching your function
Related
I am trying to implement a v-data-table in a v-dialog
<v-dialog max-width = '600px' v-model = 'dialog'>
<v-card>
<v-card-title>
<span class = "headline"> Reconstructor </span>
</v-card-title>
<draggable :list = "draggableList">
<!--<div v-for = "(item, index) in draggableList" :key = "index">
{{item.fieldValue}} , {{item.fieldName}}
</div> -->
<v-data-table :header = 'headersList' :items = 'draggableList'>
</v-data-table>
</draggable>
</v-card>
</v-dialog>
Even if i remove the draggable component nothing changes.
I manually verified the headersList and the draggableList and they are correct. Sorry if it is a begginer mistake but it is my first project in vue.
Your code looks fine, I just created a working code snippet below with the same code you posted in post. Can you please have a look and see if it helps.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
dialog: true,
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
],
}
},
})
<script src="https://unpkg.com/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.6.7/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.6.7/dist/vuetify.min.css"/>
<div id="app">
<v-app id="inspire">
<v-dialog max-width='600px' v-model='dialog'>
<v-card>
<v-card-title>
<span class = "headline"> Reconstructor </span>
</v-card-title>
<v-data-table :headers="headers" :items="desserts">
</v-data-table>
</v-card>
</v-dialog>
</v-app>
</div>
I'm utilizing v-data-table in a vue component, looking through the documentation it wasn't clear to me how to utilize built in pagination in the data table and how to invoke code for the pagination . I tried to look through some of the blogs but still not clear.
<template>
<v-data-table
:page="page"
:pageCount="numOfPages"
:headers="headers"
...
</template>
<script>
export default {
name: "DataTableSample",
data() {
return {
...
},
watch: {
options: {
handler() {
this.getData();
},
},
deep: true,
},
methods: {
load(){
//load data
...
},
mounted(){
this.getData();
},
};
</script>
Not sure what does this statement means it wasn't clear to me how to utilize built in pagination in the data table and how to invoke code for the pagination ?
But <v-data-table> providing pagination by default. Here is the demo :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
selected: [ ],
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
}
]
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.0.0-beta.8/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify#2.0.0-beta.8/dist/vuetify.min.css"/>
<div id="app">
<v-app>
<v-data-table
id="mytable"
v-model="selected"
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
item-key="name"
>
</v-data-table>
</v-app>
</div>
How can I add prop "page" so that the table shows the last page when loaded. The number of items is variable. Should I do items.lenght/items-per-page or is there any better way?
<v-data-table
:headers="headers"
:items="items"
:search="search"
multi-sort
must-sort
:sort-by="['date', 'number']"
class="elevation-1"
:items-per-page="10"
:footer-props="{
showFirstLastPage:true,
}"
:loading="loading"
height="540"
></v-data-table>
#grimdbx as per your above comments it is correct, you've taken the right try, you just need to set the page property with the computed result
The computed property always retruns the last page number on page load
computed: {
lastPage() {return Math.ceil(this.items.length/10);}
}
here instead of this.itemsPerPage you can replace with 10, since you
have harcoded the items per page as per your above code
the final working code looks like
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
:page="lastPage"
></v-data-table>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
computed: {
lastPage() {return Math.ceil(this.desserts.length/5);}
},
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
],
}
},
})
Here is the working codepen: https://codepen.io/chansv/pen/PoWeMgN?editors=1010
I have a v-data-table that has Show-select,
I want to get the data of what items I selected, at least alert the first column value upon check
. Im searching everywhere. i cant find answer to my problem.
<div id="app">
<v-app id="inspire">
<v-data-table
:value="selected"
#input="enterSelect($event)"
:items-per-page="itemsPerPage"
:headers="headers"
:items="desserts"
item-key="name"
show-select
class="elevation-1"
>
</v-data-table>
<v-dialog>
<v-card>
</v-card>
</v-dialog>
</v-app>
</div>
js
new Vue({
el: '#app',
vuetify: new Vuetify(),
methods: {
enterSelect(values) {
if (values.length == this.itemsPerPage) {
alert('selected all')
}
}
},
data () {
return {
selected: [],
itemsPerPage: 10,
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
],
}
},
})
https://codepen.io/CodingDeer/pen/QWLyaog?editors=1010
this is just an example of what I recently found (code not mine),
this code can detect if all checkbox selected
Use v-model instead of :value to allow modification of selected variable when you try to select some items. Then check the this.selected's length inside the enterSelect function.
<v-data-table
v-model="selected"
#input="enterSelect()"
...
>...</v-data-table>
methods: {
enterSelect() {
console.log(this.selected.map(e => e.name)); // logs all the selected items.
if (this.selected.length == this.itemsPerPage) {
alert('selected all')
}
}
}
For example you want to get the names of the rows, here's how to get them.
methods: {
enterSelect(values) {
var names = values.map(function(value){ return value.name })
console.log(names)
}
}
I am using Vuetify 2 to create a data table for an app. In the data table I have custom headers, with slots, including "text", "value", "sortable". Is there a slot I can add to specify the font color and font size I want for each header? If I add a class parameter, how do I add the CSS specifics needed for the headers?
Example code I am using:
data: () => ({
dataFilters: {},
selectedRows: [],
gridConfig: {
records: [],
loading: true,
options: {
itemsPerPageOptions: [10, 25, 50, 100],
totalPages: 0,
itemsPerPage: 10,
page: 1,
descending: false,
},
headers: [
{
text: '__HEADER__MENU__',
value: `__HEADER__MENU__`,
sortable: false,
},
Thank you!
Yes it is possible to set custom color to vuetify data-table header and font size
You need to use class property in headers object
headers: [
{
text: '__HEADER__MENU__',
value: `__HEADER__MENU__`,
sortable: false,
class: "success--text title"
},
success--text class changes the color of your header
title increase the font size of you header, read all the fonts typography and colors in Vuetify
For dynamically setting the headers classes, use created hook to loop through this.headers and set the headers
Here is the working codepen:
https://codepen.io/chansv/pen/WNNGzwm?&editable=true&editors=101
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
></v-data-table>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
class: 'success--text title',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
],
}
},
})