<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4b4243596d190355">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ff9faeafbe6e9f6cfbda1f7">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<v-app>
<v-data-table
:headers="headers"
:items="autofilterItems"
:items-per-page="5"
class="elevation-1"
:items-per-page="20"
no-results-text="General.noSearchMatch"
>
<template v-for="header in headers" v-slot:[`header.${header.value}`]="{ header }">
<v-tooltip bottom v-if="header.value == 'Retire'">
<template v-slot:activator="{ on }">
<span v-on="on">{{ header.text }}</span>
</template>
<span>{{ header.tooltip }}</span>
</v-tooltip>
<span v-else>{{ header.text }}</span>
</template>
</v-data-table>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c4a49597c0e1244">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff898a9a8b969986bfcdd187">[email protected]</a>/dist/vuetify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.2/axios.min.js" integrity="sha512-QTnb9BQkG4fBYIt9JGvYmxPpd6TBeKp6lsUrtiVQsrJ9sb33Bn9s0wMQO9qVBFbPX3xHRAsBHvXlcsrnJjExjg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
headers: [
{
text: 'Retire',
value: 'Retire',
sortable: false,
tooltip: 'I am a tooltip'
},
{
text: 'Dessert (100g serving)',
value: 'name',
sortable: false,
},
{
text: 'Fat (g)',
value: 'fat',
sortable: false,
},
{
text: 'Carbs (g)',
value: 'carbs',
sortable: false,
},
{
text: 'Protein (g)',
value: 'protein',
sortable: false,
},
{
text: 'Iron (%)',
value: 'iron',
sortable: false,
},
],
autofilterItems: [{
name: 'Frozen Yogurt',
Retire: true,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: 1,
},
{
name: 'Ice cream sandwich',
Retire: true,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: 1,
},
],
}
},
})
</script>
</body>
</html>