i want to create a line with total from each group of items in a list like this:
So i did this to group by Car:
if (val == 2) {
this.dadosResumo.sort((a, b) => (a.carro > b.carro ? 1 : -1))
and i’m using v-data-table
to render the itens from dadosResumo.
but idk how to create a line in each group with the totals.
the list:
[
carro: '11016', number: '1', quantity: '4', total: '2'},
carro: '11016', number: '2', quantity: '3', total: '4'},
carro: '1122', number: '2', quantity: '4', total: '5'},
carro: '1122', number: '1', quantity: '1', total: '4'},
carro: '1133', number: '1', quantity: '2', total: '3'},
]
i tried to create an map to add line with if but not worked.
EDITED
i was thinking and the best way that i saw is to put the Subtotal inside the list, like this, because i use the list to create an pdf, anyway to create an map to add the subtotal inside?
the list should be:
[
{carro: '11016', number: '1', quantity: '4', total: '2'},
{carro: '11016', number: '2', quantity: '3', total: '4'},
**{carro: 'Subtotal', number: '', quantity: '7', total: '6'},**
{carro: '1122', number: '2', quantity: '4', total: '5'},
{carro: '1122', number: '1', quantity: '1', total: '4'},
**{carro: 'Subtotal', number: '', quantity: '5', total: '9'},**
{carro: '1133', number: '1', quantity: '2', total: '3'},
**{carro: 'Subtotal', number: '', quantity: '2', total: '3},**
]
2
Answers
First you should calculate all ‘Subtotal’ and put it in a list with the car code (for example i call ListSubtotal), then create an inner sublist according to the car code of the outer list:
This is somewhat hard to do with
v-data-table
. Not just writing the code so that it looks like in your image after load, but also to have it keep making sense when you interact with the table.For example, the table in the image seems to be sorted by car – if I sort by date, where would the subtotals go? Or if I filter the table, should the subtotals recalculate without the filtered rows?
If it does not make sense to interact with the table that way and you’ll disable sorting, filtering, pagination anyway, I am going to go ahead and say you will be better off with a
v-simple-table
(orv-table
in Vuetify 3). It will give you more flexibility for sacrificing functionality you don’t need. It is pretty straight-forward then:If you do want to use
v-data-table
, I think you have two options:Does that make sense? Does one of the options work for you?