Vuetify datatable is being used with 20 columns, functioning properly. To view all the columns, horizontal scrolling is available.
Filters are needed for each column in the header, achieved using v-slot:header.
An issue arises when clicking on the select box while having the dropdown open and then horizontally scrolling. The position of the dropdown does not stick with the select box and remains fixed on the screen.
To replicate this issue, visit the following CodePen: https://codepen.io/chansv/pen/OJygmjL
Steps to reproduce:
- Open the above CodePen.
- Click on the select box in the header.
- Keep the dropdown open.
- Scroll the datatable horizontally using the side arrow.
- The dropdown does not remain aligned with the select box.
This issue only occurs with horizontal scrolling, not vertical scrolling.
If anyone has experienced the same problem, any suggestions on how to fix it would be greatly appreciated.
Below is the code snippet:
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
hide-default-header
>
<template v-slot:header="{ props }">
<th v-for="(head, index) in props.headers" :key="index"><div>{{head.text}}</div>
<div>
<v-select :items="items" placeholder="select from items"></v-select>
</div>
</th>
</template>
</v-data-table>
</v-app>
</div>
th {
min-width: 250px;
}
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
items: [
"dessert",
"calories",
"iron",
"fat"
],
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' },
{ 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%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
],
}
},
})
Your assistance is highly appreciated.