Skip to content

Commit b04b3d0

Browse files
J-SekJ-Sek
committed
docs(VDataTable): example with fixed footer
1 parent ddde8aa commit b04b3d0

2 files changed

Lines changed: 115 additions & 0 deletions

File tree

‎packages/docs/src/examples/v-data-table/prop-fixed-footer.vue‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<template>
2+
<v-card>
3+
<v-text-field
4+
v-model="search"
5+
density="compact"
6+
placeholder="Type 'rs'..."
7+
prepend-inner-icon="mdi-magnify"
8+
variant="outlined"
9+
hide-details
10+
></v-text-field>
11+
12+
<v-data-table
13+
:filter-keys="['name', 'fuel', 'origin']"
14+
:headers="headers"
15+
:items="cars"
16+
:items-per-page="-1"
17+
:search="search"
18+
height="400"
19+
item-value="name"
20+
fixed-footer
21+
fixed-header
22+
>
23+
<template v-slot:item.price="{ value }">
24+
${{ value.toLocaleString() }}
25+
</template>
26+
27+
<template v-slot:tfoot="{ items }">
28+
<tfoot>
29+
<tr>
30+
<td>Total</td>
31+
<td class="text-end">{{ sum(items, 'horsepower') }}</td>
32+
<td colspan="2"></td>
33+
<td class="text-end">${{ sum(items, 'price').toLocaleString() }}</td>
34+
</tr>
35+
</tfoot>
36+
</template>
37+
</v-data-table>
38+
</v-card>
39+
</template>
40+
41+
<script setup>
42+
import { ref } from 'vue'
43+
44+
const search = ref('')
45+
46+
const sum = (items, key) => items.reduce((total, item) => total + item[key], 0)
47+
48+
const cars = [
49+
{ name: 'Ford Mustang', horsepower: 450, fuel: 'Gasoline', origin: 'USA', price: 55000 },
50+
{ name: 'Tesla Model S', horsepower: 670, fuel: 'Electric', origin: 'USA', price: 79999 },
51+
{ name: 'BMW M3', horsepower: 503, fuel: 'Gasoline', origin: 'Germany', price: 70000 },
52+
{ name: 'Audi RS6', horsepower: 591, fuel: 'Gasoline', origin: 'Germany', price: 109000 },
53+
{ name: 'Chevrolet Camaro', horsepower: 650, fuel: 'Gasoline', origin: 'USA', price: 62000 },
54+
{ name: 'Porsche 911', horsepower: 379, fuel: 'Gasoline', origin: 'Germany', price: 101000 },
55+
{ name: 'Jaguar F-Type', horsepower: 575, fuel: 'Gasoline', origin: 'UK', price: 61000 },
56+
{ name: 'Mazda MX-5', horsepower: 181, fuel: 'Gasoline', origin: 'Japan', price: 26000 },
57+
{ name: 'Nissan GT-R', horsepower: 565, fuel: 'Gasoline', origin: 'Japan', price: 113540 },
58+
{ name: 'Mercedes-AMG GT', horsepower: 523, fuel: 'Gasoline', origin: 'Germany', price: 115900 },
59+
]
60+
61+
const headers = [
62+
{ title: 'Car Model', key: 'name', align: 'start' },
63+
{ title: 'Horsepower', key: 'horsepower', align: 'end' },
64+
{ title: 'Fuel Type', key: 'fuel', align: 'start' },
65+
{ title: 'Origin', key: 'origin', align: 'start' },
66+
{ title: 'Price', key: 'price', align: 'end' },
67+
]
68+
</script>
69+
70+
<script>
71+
export default {
72+
data: () => ({
73+
search: '',
74+
cars: [
75+
{ name: 'Ford Mustang', horsepower: 450, fuel: 'Gasoline', origin: 'USA', price: 55000 },
76+
{ name: 'Tesla Model S', horsepower: 670, fuel: 'Electric', origin: 'USA', price: 79999 },
77+
{ name: 'BMW M3', horsepower: 503, fuel: 'Gasoline', origin: 'Germany', price: 70000 },
78+
{ name: 'Audi RS6', horsepower: 591, fuel: 'Gasoline', origin: 'Germany', price: 109000 },
79+
{ name: 'Chevrolet Camaro', horsepower: 650, fuel: 'Gasoline', origin: 'USA', price: 62000 },
80+
{ name: 'Porsche 911', horsepower: 379, fuel: 'Gasoline', origin: 'Germany', price: 101000 },
81+
{ name: 'Jaguar F-Type', horsepower: 575, fuel: 'Gasoline', origin: 'UK', price: 61000 },
82+
{ name: 'Mazda MX-5', horsepower: 181, fuel: 'Gasoline', origin: 'Japan', price: 26000 },
83+
{ name: 'Nissan GT-R', horsepower: 565, fuel: 'Gasoline', origin: 'Japan', price: 113540 },
84+
{ name: 'Mercedes-AMG GT', horsepower: 523, fuel: 'Gasoline', origin: 'Germany', price: 115900 },
85+
],
86+
headers: [
87+
{ title: 'Car Model', key: 'name', align: 'start' },
88+
{ title: 'Horsepower', key: 'horsepower', align: 'end' },
89+
{ title: 'Fuel Type', key: 'fuel', align: 'start' },
90+
{ title: 'Origin', key: 'origin', align: 'start' },
91+
{ title: 'Price ($)', key: 'price', align: 'end' },
92+
],
93+
}),
94+
methods: {
95+
sum (items, key) {
96+
return items.reduce((total, item) => total + item[key], 0)
97+
},
98+
},
99+
}
100+
</script>
101+
102+
<style>
103+
.v-data-table-footer {
104+
position: sticky;
105+
background-color: inherit;
106+
border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
107+
bottom: 0;
108+
}
109+
</style>

‎packages/docs/src/pages/en/components/data-tables/basics.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,12 @@ You can apply the **hide-default-header** and **hide-default-footer** props to r
165165

166166
<ExamplesExample file="v-data-table/prop-hide-header-footer" />
167167

168+
#### Fixed footer
169+
170+
Use the **fixed-footer** prop together with the `tfoot` slot to pin a custom footer to the bottom of a scrollable table. The slot exposes the currently visible `items`, so aggregates such as column totals recalculate automatically as the table is searched or filtered.
171+
172+
<ExamplesExample file="v-data-table/prop-fixed-footer" />
173+
168174
#### Sort icons
169175

170176
You can customize sorting icons using dedicated props as well as control default opacity and spacing with Sass variables.

0 commit comments

Comments
 (0)