Currently, I am working on Vue / Vuetify and experimenting with the v-data-table component. While creating a table, I noticed that it has a horizontal scroll bar at the bottom. https://i.stack.imgur.com/noOzN.png
My goal now is to implement two horizontal scroll bars - one at the bottom (the default one) and another at the top of the table. Both scroll bars should allow users to navigate through the information displayed in the v-data-table (Edited Screenshot)
https://i.stack.imgur.com/Lt4d1.png
I have searched for information on this topic but only found resources related to vanilla JS and HTML, not specific to Vue / Vuetify.
Here is the code snippet I am currently using:
<template>
<v-container>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
></v-data-table>
</v-container>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
width: 300
},
{ text: 'Calories', value: 'calories', width: 300},
{ text: 'Fat (g)', value: 'fat', width: 300 },
{ text: 'Carbs (g)', value: 'carbs', width: 300 },
{ text: 'Protein (g)', value: 'protein', width: 300 },
{ text: 'Iron (%)', value: 'iron', width: 300 },
],
desserts: [
// Desserts data here...
],
}
},
}
</script>