205 lines
4.5 KiB
Vue
205 lines
4.5 KiB
Vue
<template>
|
|
<div>
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="desserts"
|
|
:pagination.sync="pagination"
|
|
:total-items="totalDesserts"
|
|
:loading="loading"
|
|
class="elevation-1"
|
|
>
|
|
<template slot="items" slot-scope="props">
|
|
<td>{{ props.item.name }}</td>
|
|
<td class="text-xs-right">{{ props.item.calories }}</td>
|
|
<td class="text-xs-right">{{ props.item.fat }}</td>
|
|
<td class="text-xs-right">{{ props.item.carbs }}</td>
|
|
<td class="text-xs-right">{{ props.item.protein }}</td>
|
|
<td class="text-xs-right">{{ props.item.iron }}</td>
|
|
</template>
|
|
</v-data-table>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
//https://vuetifyjs.com/en/components/data-tables#example-server
|
|
export default {
|
|
data() {
|
|
return {
|
|
totalDesserts: 0,
|
|
desserts: [],
|
|
loading: true,
|
|
pagination: {},
|
|
headers: [
|
|
{
|
|
text: "Dessert (100g serving)",
|
|
align: "left",
|
|
sortable: false,
|
|
value: "name"
|
|
},
|
|
{ text: "Calories", value: "calories" },
|
|
{ text: "Fat (g)", value: "fat" },
|
|
{ text: "Carbs (g)", value: "carbs" },
|
|
{ text: "Protein (g)", value: "protein" },
|
|
{ text: "Iron (%)", value: "iron" }
|
|
]
|
|
};
|
|
},
|
|
watch: {
|
|
pagination: {
|
|
handler() {
|
|
this.getDataFromApi().then(data => {
|
|
this.desserts = data.items;
|
|
this.totalDesserts = data.total;
|
|
});
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getDataFromApi().then(data => {
|
|
this.desserts = data.items;
|
|
this.totalDesserts = data.total;
|
|
});
|
|
},
|
|
methods: {
|
|
getDataFromApi() {
|
|
this.loading = true;
|
|
return new Promise((resolve, reject) => {
|
|
const { sortBy, descending, page, rowsPerPage } = this.pagination;
|
|
|
|
let items = this.getDesserts();
|
|
const total = items.length;
|
|
|
|
if (this.pagination.sortBy) {
|
|
items = items.sort((a, b) => {
|
|
const sortA = a[sortBy];
|
|
const sortB = b[sortBy];
|
|
|
|
if (descending) {
|
|
if (sortA < sortB) return 1;
|
|
if (sortA > sortB) return -1;
|
|
return 0;
|
|
} else {
|
|
if (sortA < sortB) return -1;
|
|
if (sortA > sortB) return 1;
|
|
return 0;
|
|
}
|
|
});
|
|
}
|
|
|
|
if (rowsPerPage > 0) {
|
|
items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage);
|
|
}
|
|
|
|
setTimeout(() => {
|
|
this.loading = false;
|
|
resolve({
|
|
items,
|
|
total
|
|
});
|
|
}, 1000);
|
|
});
|
|
},
|
|
getDesserts() {
|
|
return [
|
|
{
|
|
value: false,
|
|
name: "Frozen Yogurt",
|
|
calories: 159,
|
|
fat: 6.0,
|
|
carbs: 24,
|
|
protein: 4.0,
|
|
iron: "1%"
|
|
},
|
|
{
|
|
value: false,
|
|
name: "Ice cream sandwich",
|
|
calories: 237,
|
|
fat: 9.0,
|
|
carbs: 37,
|
|
protein: 4.3,
|
|
iron: "1%"
|
|
},
|
|
{
|
|
value: false,
|
|
name: "Eclair",
|
|
calories: 262,
|
|
fat: 16.0,
|
|
carbs: 23,
|
|
protein: 6.0,
|
|
iron: "7%"
|
|
},
|
|
{
|
|
value: false,
|
|
name: "Cupcake",
|
|
calories: 305,
|
|
fat: 3.7,
|
|
carbs: 67,
|
|
protein: 4.3,
|
|
iron: "8%"
|
|
},
|
|
{
|
|
value: false,
|
|
name: "Gingerbread",
|
|
calories: 356,
|
|
fat: 16.0,
|
|
carbs: 49,
|
|
protein: 3.9,
|
|
iron: "16%"
|
|
},
|
|
{
|
|
value: false,
|
|
name: "Jelly bean",
|
|
calories: 375,
|
|
fat: 0.0,
|
|
carbs: 94,
|
|
protein: 0.0,
|
|
iron: "0%"
|
|
},
|
|
{
|
|
value: false,
|
|
name: "Lollipop",
|
|
calories: 392,
|
|
fat: 0.2,
|
|
carbs: 98,
|
|
protein: 0,
|
|
iron: "2%"
|
|
},
|
|
{
|
|
value: false,
|
|
name: "Honeycomb",
|
|
calories: 408,
|
|
fat: 3.2,
|
|
carbs: 87,
|
|
protein: 6.5,
|
|
iron: "45%"
|
|
},
|
|
{
|
|
value: false,
|
|
name: "Donut",
|
|
calories: 452,
|
|
fat: 25.0,
|
|
carbs: 51,
|
|
protein: 4.9,
|
|
iron: "22%"
|
|
},
|
|
{
|
|
value: false,
|
|
name: "KitKat",
|
|
calories: 518,
|
|
fat: 26.0,
|
|
carbs: 65,
|
|
protein: 7,
|
|
iron: "6%"
|
|
}
|
|
];
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
|
|
<style>
|
|
</style>
|