I'm currently attempting to implement a v-data-table with fixed header and footer. However, I've encountered an issue where if I set the table height to be larger than the row height, the table takes on the defined height and the footer ends up being positioned far from the rows.
Check out this codepen
Does anyone know of a clever solution to fix this problem?
Here is the HTML code snippet:
<div id="app">
<v-app id="inspire">
<div>
<v-data-table
height="300"
v-model="selected"
:headers="headers"
fixed-header
:items="desserts"
item-key="name"
>
</v-data-table>
</div>
</v-app>
</div>
And the JavaScript code snippet:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
singleSelect: false,
selected: [],
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
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' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
],
}
},
})