In this tutorial, we will create a table using Vuetify.js 3 in Vue.js 3. We will explore regular tables as well as fixed header tables in Vuetify 3. Before we begin, you need to install and configure Vuetify 3 in Vue 3.
How to Install Vuetify 3 in Vue 3
Vuetify 3 Vue 3 Table Example
1. Vuetify 3 create table using v-table component.
<template>
<v-container>
<v-table>
<thead>
<tr>
<th class="text-left font-weight-bold">
Name
</th>
<th class="text-left font-weight-bold">
Calories
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in desserts" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.calories }}</td>
</tr>
</tbody>
</v-table>
</v-container>
</template>
<script>
export default {
data() {
return {
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
},
{
name: 'Ice cream sandwich',
calories: 237,
},
{
name: 'Eclair',
calories: 262,
},
{
name: 'Cupcake',
calories: 305,
},
{
name: 'Gingerbread',
calories: 356,
},
],
}
},
}
</script>
2. Vuetify 3 Vue 3: Create a table using the v-table component and the theme prop for dark theme.
<template>
<v-table theme="dark">
<thead>
<tr>
<th class="text-left">
Name
</th>
<th class="text-left">
Calories
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in desserts" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.calories }}</td>
</tr>
</tbody>
</v-table>
</template>
<script>
export default {
data() {
return {
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
},
{
name: 'Ice cream sandwich',
calories: 237,
},
{
name: 'Eclair',
calories: 262,
},
{
name: 'Cupcake',
calories: 305,
},
{
name: 'Gingerbread',
calories: 356,
},
],
}
},
}
</script>3. Vuetify 3 vue 3 table with density.
<template>
<v-table density="compact">
<thead>
<tr>
<th class="text-left">
Name
</th>
<th class="text-left">
Calories
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in desserts" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.calories }}</td>
</tr>
</tbody>
</v-table>
</template>
<script>
export default {
data() {
return {
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
},
{
name: 'Ice cream sandwich',
calories: 237,
},
{
name: 'Eclair',
calories: 262,
},
{
name: 'Cupcake',
calories: 305,
},
{
name: 'Gingerbread',
calories: 356,
},
],
}
},
}
</script>4. Vuetify 3 vue 3 using height prop to set the height of the table.
<template>
<v-table height="300px">
<thead>
<tr>
<th class="text-left">
Name
</th>
<th class="text-left">
Calories
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in desserts" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.calories }}</td>
</tr>
</tbody>
</v-table>
</template>
<script>
export default {
data() {
return {
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
},
{
name: 'Ice cream sandwich',
calories: 237,
},
{
name: 'Eclair',
calories: 262,
},
{
name: 'Cupcake',
calories: 305,
},
{
name: 'Gingerbread',
calories: 356,
},
{
name: 'Jelly bean',
calories: 375,
},
{
name: 'Lollipop',
calories: 392,
},
{
name: 'Honeycomb',
calories: 408,
},
{
name: 'Donut',
calories: 452,
},
{
name: 'KitKat',
calories: 518,
},
],
}
},
}
</script>5. Vuetify 3 vue 3 using fixed-header prop together with the height prop to fix the header to the top of the table.
<template>
<v-table fixed-header height="300px">
<thead>
<tr>
<th class="text-left">
Name
</th>
<th class="text-left">
Calories
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in desserts" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.calories }}</td>
</tr>
</tbody>
</v-table>
</template>
<script>
export default {
data() {
return {
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
},
{
name: 'Ice cream sandwich',
calories: 237,
},
{
name: 'Eclair',
calories: 262,
},
{
name: 'Cupcake',
calories: 305,
},
{
name: 'Gingerbread',
calories: 356,
},
{
name: 'Jelly bean',
calories: 375,
},
{
name: 'Lollipop',
calories: 392,
},
{
name: 'Honeycomb',
calories: 408,
},
{
name: 'Donut',
calories: 452,
},
{
name: 'KitKat',
calories: 518,
},
],
}
},
}
</script>Javed sheikh
Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,
