If the fixed header of a Vuetify table loses its border-top CSS on scroll, it's likely due to an issue with the table's height and the fixed header's position. The table's height should be set to a fixed value, such as 100%, to ensure that the header stays in place while scrolling.
You can try the following steps to fix the issue:
Wrap the table in a container with a fixed height: Wrap the Vuetify table in a container with a fixed height, such as 100vh. This will ensure that the table has a fixed height and that the header stays in place while scrolling.
ruby
Copy code
<template>
<div style="height: 100vh; overflow-y: scroll;">
<v-data-table :headers="headers" :items="items" :fixed-header="true"></v-data-table>
</div>
</template>
Apply a custom CSS class to the header: To keep the border-top style intact, you can apply a custom CSS class to the header. In the CSS class, set the border-top property to the desired value and set the background-color property to transparent.
php
Copy code
<template>
<div style="height: 100vh; overflow-y: scroll;">
<v-data-table :headers="headers" :items="items" :fixed-header="true">
<template v-slot:header.data-table-header="{ header }">
<th :class="[{ 'my-custom-header': true }, header.class]">
{{ header.text }}
</th>
</template>
</v-data-table>
</div>
</template>
<style>
.my-custom-header {
background-color: transparent;
border-top: 1px solid #ddd;
}
</style>
By following these steps, you should be able to fix the issue with the fixed header of the Vuetify table losing its border-top CSS on scroll.
Use JavaScript to set the border-top style dynamically: If the above solution does not work, you can use JavaScript to set the border-top style dynamically. You can add an event listener to the scroll event of the table container, and set the border-top style of the header element when the scroll position changes.
php
Copy code
<template>
<div ref="tableContainer" style="height: 100vh; overflow-y: scroll;">
<v-data-table :headers="headers" :items="items" :fixed-header="true">
<template v-slot:header.data-table-header="{ header }">
<th :class="[{ 'my-custom-header': true }, header.class]">
{{ header.text }}
</th>
</template>
</v-data-table>
</div>
</template>
<script>
export default {
mounted() {
this.$refs.tableContainer.addEventListener('scroll', this.updateHeaderBorder);
},
methods: {
updateHeaderBorder() {
const tableHeader = document.querySelector('.v-data-table__header');
tableHeader.style.borderTop = this.$refs.tableContainer.scrollTop === 0 ? '1px solid #ddd' : 'none';
},
},
};
</script>
By using JavaScript to set the border-top style dynamically, you can ensure that the header retains its border-top style even when the table is scrolled.