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)
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 am working with a vuetify data table, I am using the groub-by slot to group my items either by category or location that is working fine. What I am trying to do now is add a summary row for each group.
this is my current code for the grouping and attempt at summary row
<v-data-table
v-if="reportType === 'Category' || reportType === 'Location'"
:headers="headers"
:items="assets"
disable-pagination
disable-filtering
hide-default-footer
disable-sort
:group-by="`${reportType.toLowerCase()}Name`"
class="elevation-1">
<template v-slot:group="{ items }">
<tr>
<td class="text-xs-right" :colspan="fixGroupByHeaders()"><strong>{{ getGroupByName(items[0]) }}</strong></td>
</tr>
<tr v-for="(item) in items" :key="item.id">
<td v-for="(header, index) in headers" :key="index">
{{ (getTotalCost(item, header.value) || item[header.value]) }}
</td>
</tr>
</template>
<template v-slot:group.summary="{ items }">
<tr>
<th class="title">Totals</th>
</tr>
</template>
</v-data-table>
the groupby is working but th e summary is not .. I would like to know what I am doing wrong and how can I fix it to where I get the summary row using the grouby.summary slot found on the vuetify data table api.
EDIT:
I understand about the group.summary slot and I can easily make it if the report headers were static, in this case they are not.
So, I created a CodeSandbox example that I hope will show you what I am trying to achieve and as I said the headers array is dynamic.
Another thing is I added an array called columnsToTotal to show what columns need a total added if they are present in the headers array.
You can't use both group and group.summary slots simultaneously.
group.header and group.summary slots is just a "sub-slots" of group slot. When you are overriding group slot, the "sub-slots" simply does not exist.
I'm not clearly understand what are you trying to achieve, but perhaps this tip will be useful to you.
If you want to customize...
...your group header, use group.header slot
...your group rows, use item slot
...your group footer, use group.summary slot
...the whole group, use group slot
This is what I did to get my summary row. itemTotal is a method.
<template v-slot:group.summary="{ items }">
<th colspan="7"></th>
<th>
<span class="ml-10">
Charge Total: {{ itemTotal(items) }}
</span>
</th>
</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.
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
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).