I have a problem with making vuetify datatable work with dragula. I'm using the wrapper vue2-dragula.
Here is a fiddle that demonstrate the problem though i wasn't able to make dragular work per se
https://jsfiddle.net/Lscqm9je/
On my computer it's working as intended. The only problem is the datatable column alingment if you look on the first table, we loose the header / data alignment because i added a div in between template and tr
<v-data-table v-bind:headers="headers" v-bind:items="items" hide-actions>
<template slot="items" scope="props">
<tbody v-dragula="tr" drake="first" class="container">
<tr>
<td class="text-xs-right">{{ props.item.round }}</td>
<td class="text-xs-right">{{ props.item.cat }}</td>
<td class="text-xs-right">{{ props.item.p1 }}</td>
<td class="text-xs-right">{{ props.item.p2 }}</td>
<td class="text-xs-right">{{ props.item.statut }}</td>
</tr>
</tbody>
</template>
</v-data-table>
So i guess putting something in between table template and table row is a no-no. But it's the only way i found to make dragula directive work. The directive must be direct parent of the draggable element ( tr ). I also tried to put the directive within the template tag but it's doesn't seem to be possible.
<template slot="items" scope="props" v-dragula="tr" drake="first" class="container">
what i'm looking for is a table that look like the 2nd in the fiddle but with the dragula directive working. Someone have an idea ?
I'm a beginner with no real programming degree so it might be something stupid, sorry in advance if it is :)
thank.
More information :
this doesn't work :
<template slot="items" scope="props" v-dragula="tr" drake="first" class="container">
<tr>
<td class="text-xs-right">{{ props.item.round }}</td>
This work but the cell are dragged individually instead of the whole line.
<template slot="items" scope="props">
<tr v-dragula="tr" drake="first" class="container">
<td class="text-xs-right">{{ props.item.round }}</td>
The console on the fiddle is giving a warning
[Vue warn]: Property or method "tr" is not defined on the instance but referenced during render.
Make sure to declare reactive data properties in the data option.
(found in <Root>)
Looking at the vue-dragula readme page, v-dragula="..." should point to the data collection, not the element, so I assume it will be
<template slot="items" scope="props" v-dragula="items" drake="first" class="container">
This might get you a little further. At one point the second table was showing an icon upon dragging, but it's not doing so now, I'm not sure why. If I get any further clues, I'll update.
BTW, <template> instead of <div> is preferred, as <table> is touchy about internal tags (although might expect Vuetify to manage that issue).
Related
I'm upgrading an app from vue2 to vue3, same goes for vuetify (2 to 3).
Problem is that Vuetify 3's documentation is incomplete. Specifically Vue Data Tables. :(
The App I'm working with is full of v-data-table and im incapable of generating the data.
I dont know if a code samples help, any workaround ideais appreciated.
<v-data-table
:headers="someHeaders"
:items="thisData.something"
hide-actions
item-key="id"
>
<template #items="something">
<tr>
<td>{{ some.item.one| formatItem }}</td>
<td>{{ some.item.two}}</td>
<td>{{ some.item.three}}</td>
<td>{{ some.item.four| function}}%</td>
</tr>
</template>
</v-data-table>
thank you!
We ended up using EasyDataTable which has a very similiar syntax. Worked like a charm. Data sample:
<template>
<EasyDataTable
:headers="headers"
:items="items"
/>
</template>
I have a Vuetify data table with expandable rows. Each row correlates with a customer's order which consists of samples they want to be tested.
Currently, I'm retrieving all the orders with all the samples but it takes too long to load all the information.
So instead of retrieving all the samples for every order, when I expand a row I want to be able to perform an API call to retrieve the samples that should be displayed in the expanded section for that particular order.
I've researched all I can and have come to a dead-end. Here's where I'm at currently:
<v-data-table
:headers="orders_headers"
:items="orders"
show-expand
:single-expand="true"
:expanded.sync="expanded"
>
<!-- Expand Buttons -->
<template v-slot:item.data-table-expand="{ item, isExpanded, expand }">
<v-btn #click="expand(true)" v-if="!isExpanded">Expand</v-btn>
<v-btn #click="expand(false)" v-if="isExpanded">close</v-btn>
</template>
<!-- Expanded Data -->
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length">
<table v-for="(sample, index) in item.samples" :key="index">
<tr>
<th>Sample Acc</th>
<td>{{ sample.sample_accession }}</td>
</tr>
<tr>
<th>Sample Status</th>
<td>{{ sample.sample_status }}</td>
</tr>
</table>
</td>
</template>
</v-data-table>
I think I may have figured it while writing this
As I was typing this out, I realized what I possibly need to do. I need to add a method call to the expand button, then in that method set the results to expandedSamples and replace item.samples with it.
In the meantime, if anyone has any better solution I'd love to hear. Otherwise, I'll post my solution in case anyone else is trying to attempt something similar to this.
Bonus
Anyone know if there's a way to tap into the expand event without replacing the default icons/functionality or a way to include the original icons/functionality when using v-slot:item.data-table-expand?
Currently when I'm using v-slot:item.data-table-expand, I have to add the buttons back in and I lose the chevrons and the animations.
For the benefit of future readers facing the same issue, use the #item-expanded event of the data-table to lazy load the item details (or child data) on demand. Hook the item-expanded event to a method (e.g. loadDetails) that loads the data, and then merges the response into the original items array.
Here's an example...
<v-data-table
:headers="headers"
:items="items"
show-expand
single-expand
item-key="name"
:search="search"
#item-expanded="loadDetails"
>
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length">
<table v-for="(sample, index) in items.samples" :key="index">
<tr>
<th>Sample Acc</th>
<td>{{ sample.sample_accession }}</td>
</tr>
</table>
</td>
</template>
</v-data-table>
methods: {
loadDetails({item}) {
axios.get('http.../' + item.id)
.then(response => {
item.samples = response.data[0]
})
}
}
https://codeply.com/p/d5XibmqjUh
Here's the basic solution to my issue.
<v-data-table
:headers="orders_headers"
:items="orders"
show-expand
:single-expand="true"
:expanded.sync="expanded"
>
<!-- Expand Buttons -->
<template v-slot:item.data-table-expand="{ item, isExpanded, expand }">
<v-btn #click="expand(true); getSamples(item.id)" v-if="!isExpanded">Expand</v-btn>
<v-btn #click="expand(false)" v-if="isExpanded">close</v-btn>
</template>
<!-- Expanded Data -->
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length">
<table v-for="(sample, index) in expandedOrderDetails" :key="index">
<tr>
<th>Sample Acc</th>
<td>{{ sample.sample_accession }}</td>
</tr>
<tr>
<th>Sample Status</th>
<td>{{ sample.sample_status }}</td>
</tr>
</table>
</td>
</template>
</v-data-table>
<script>
methods: {
getSamples(orderId) {
// Perform API call
this.expandedOrderDetails = response.data;
},
}
</script>
After many hours of development, our project leader has decided he wants each row to correlate to each sample instead of orders though. So expanding is no longer necessary.
Good Morning,
I am trying to do and edit feature in a Quasar table.
It works as expected, but when I have more than one entry in the table it defaults to the last entry.
The value of the row is added to the component using props, my problem is getting the current row.
So my question is how do it get the correct row when clicking the button?
Code Download
You can get row data using props.row.
Example -
<q-table
title="Treats"
:data="data"
:columns="columns"
row-key="name"
>
<template v-slot:body-cell-name="props">
<q-td :props="props">
<div>
<q-badge color="purple" :label="props.value"></q-badge>
<q-btn icon="edit" dense flat size="sm" #click="EditData(props.row)"></q-btn>
</div>
</q-td>
</template>
</q-table>
methods:{
EditData(row){
alert("hi")
console.log(row);
console.log(this.data.indexOf(row))
}
}
Now you have a row and indexof particular row. You can use splice or replace the element on particular index.
Codepen - https://codepen.io/Pratik__007/pen/LYVjqXb
Check the console.
**you can use index to get the row number
<tr v-for="(strockorder,index) in strockorders" :key="index">
<td class="text-left">{{ strockorder.strockNo}}</td>
<td class="text-center">{{ strockorder.item}}</td>
<td class="text-center">{{ strockorder.orderDate}} </td>
<td class="text-center">{{strockorder.deliveryDate }}</td>
**
I would like to iterate rows in a table based over a range. But all examples I've seen show how to do this for a constant for example,
<div>
<span v-for="n in 10">{{ n }} </span>
</di
How can I do this for a variable similar to this,
<table>
<tr v-for="(el, index) in form.repeat" :key="index">
<td>hello</td>
</tr>
</table>
This variable form.repeat is set in a form on the page.
Thanks
I had this issue week, my workaround for it was setting a variable in your data section to the number of rows you want. In my case based on the number of devices my backend returned the length of the list as part of the response. When Vue receives this response. I assign the variable that I created earlier in my data section to this number and I plug that into my v-for loop.
In the data section:
data: () => ({'num_pis': 0})
In the template part, reference the number. This is just a snippet, I'm using a v-data-table from Vuetify.
<template slot="items" slot-scope="props">
<td class="table-content-style">{{ props.item.metric_name }}</td>
<td v-for="i in num_pis">
{{ props.item[i] }}
</td>
</template>
Codepen Example
Hi friends I am new to Vue. Pleas help me I am using vue2, vuetify 0.17 and datatable component. My problem is I want to take sum of area, floor columns from the data. I calculated the running total using map function and stored it in total{'area' : 100, 'floor':7}. Now in footer I want to display the totals.
<v-data-table
v-bind:headers="listData.columnProperty"
v-bind:items="listData.data"
v-bind:search="search"
:totals="{area : 100, flat : 7}" //is it allowed
>
<template slot="footer" slot-scope="totals">
Footer {{ totals}} {{ totals['area']}}
</template>
Please share any example which create a total and displays it into the footer. I need it badly.
You said you have it calculated in totals, so would this work?
<template slot="footer">
<td><strong>Sum</strong></td>
<td class="text-xs-right">{{ totals.area }}</td>
<td class="text-xs-right">{{ totals.flat }}</td>
</template>
(not sure how rest of your table looks, but maybe you get the idea)