Skip to content

Instantly share code, notes, and snippets.

@johnleider
Created July 1, 2020 03:42
Show Gist options
  • Save johnleider/f785af3740e453771ebbbbab8fbd229a to your computer and use it in GitHub Desktop.
Save johnleider/f785af3740e453771ebbbbab8fbd229a to your computer and use it in GitHub Desktop.
<template>
<div class="pa-16 ma-16">
<v-data-table
:headers="headers"
:items="desserts"
item-key="name"
sort-by="name"
group-by="category"
class="elevation-1"
show-group-by
>
<template v-slot:group.header="{ group, toggle }">
<td colspan="3">
<v-btn
icon
@click="toggle"
>
<v-icon>mdi-minus</v-icon>
</v-btn>
{{ group }}
</td>
</template>
</v-data-table>
</div>
</template>
<script>
export default {
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
value: 'name',
groupable: false,
},
{
text: 'Category',
value: 'category',
align: 'right',
groupable: false,
},
{ text: 'Calories', value: 'calories', align: 'right' },
{ text: 'Dairy', value: 'dairy', align: 'right' },
],
desserts: [
{
name: 'Frozen Yogurt',
category: 'Ice cream',
dairy: 'Yes',
calories: 40,
},
{
name: 'Ice cream sandwich',
category: 'Ice cream',
dairy: 'Yes',
calories: 20,
},
{
name: 'Eclair',
category: 'Cookie',
dairy: 'Yes',
calories: 80,
},
{
name: 'Cupcake',
category: 'Pastry',
dairy: 'Yes',
calories: 140,
},
{
name: 'Gingerbread',
category: 'Cookie',
dairy: 'No',
calories: 40,
},
{
name: 'Jelly bean',
category: 'Candy',
dairy: 'No',
calories: 80,
},
{
name: 'Lollipop',
category: 'Candy',
dairy: 'No',
calories: 110,
},
{
name: 'Honeycomb',
category: 'Toffee',
dairy: 'No',
calories: 10,
},
{
name: 'Donut',
category: 'Pastry',
dairy: 'Yes',
calories: 20,
},
{
name: 'KitKat',
category: 'Candy',
dairy: 'Yes',
calories: 40,
},
],
}
},
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment