Sticky Table Header in Vuetify.js

A neat trick when presenting lots of data using a Data Table

Photo by Alexander Mils on Unsplash

TL;DR — go straight to the final code

Fixed-Height Table

<v-data-table :headers="headers" :items="data" height="33vh" fixed-header />

Sticky Position

<template>
<v-data-table :headers="headers" :items="data" />
</template>
<script>
...
computed: {
headers () {
return [
{ text: 'n', class: 'sticky-header', value: 'n' },
{ text: 'n²', class: 'sticky-header', value: 'n2' }
]
}
}
...
</script>
<style scoped>
.v-data-table /deep/ .sticky-header {
position: sticky;
top: 0;
}
</style>
.v-data-table /deep/ .v-data-table__wrapper {
overflow: unset;
}
{ text: 'n', class: 'sticky-header grey lighten-3', value: 'n' },
{ text: 'n²', class: 'sticky-header grey lighten-3', value: 'n2' }

Fixed Site Header

.v-data-table /deep/ .sticky-header {
position: sticky;
top: 56px;
}
<template>
<v-app-bar ref="toolbar" v-mutate="onMutate" app>
<v-app-bar-nav-icon />
<v-toolbar-title>My App</v-toolbar-title>
<v-spacer />
</v-app-bar>
</template>
<script>
export default {
mounted () {
this.onMutate()
},
methods: {
onMutate () {
let height = 0
const toolbar = this.$refs.toolbar
if (toolbar) {
height = `${toolbar.$el.offsetHeight}px`
}
document.documentElement.style.setProperty('--headerHeight', height)
}
}
}
</script>
.v-data-table /deep/ .sticky-header {
position: sticky;
top: var(--headerHeight);
}

Full-Stack Developer / Agilist / Free and Open Source Software Fan.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store