CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuetify.js
Pash
Pash

Reputation: 392

how to take sum and display it in vuetify datatable

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.

Upvotes: 2

Views: 8909

Answers (1)

Traxo
Traxo

Reputation: 19022

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)

Upvotes: 1

Related Questions