My goal is to implement a custom style for v-data table headers using the fixHeader method. The CSS code is intended to keep the header fixed in place even when scrolling horizontally.
The issue arises as the style is applied to the inner <span> element within the outer <<th>>, fixing the header relative to the th element. What I actually need is for this dynamic style to be applied to the outer th element instead of its inner span, so that it fixes the header relative to the entire row of headers.
<template>
<v-data-table
dense
:headers="listAttrs"
:items="list"
>
<template v-for="(col, i) in fixedColumns" v-slot:[`header.${col.value}`]="{ header }">
<span :style="fixHeader(col.value)" >{{ col.text }}</span>
</template>
</v-data-table>
</template>
<script>
fixHeader(key) {
let offset = 0
let index = this.listAttrs.findIndex(el => el.value === key)
let col = this.listAttrs[index]
let fixed = col?.fixed
for (let x = 0 ; x < index ; x++ ) {
offset += Number(this.listAttrs[x].width)
if(this.fixedColumns[this.fixedColumns.length - 1].value === key)
return {
left: offset+'px', position: 'sticky !important',background: 'white',boxShadow: 'inset -7px 0 9px -7px rgba(0,0,0,0.4)',
} else if(fixed) {
return {left: offset+'px', position: 'sticky !important', background: 'white',
}
}
}
</script>
Shown below is an image of the parsed HTML code:
I am aware of setting a class property in the headers array and defining a class that will be applied to the th element:
headers: [
{ text: 'Actions', value: 'actions', class:'fixed1' },
{ text: 'Inst',value: 'inst',class:'fixed2' },
]
However, this approach doesn't work for me because it only allows passing fixed classes, whereas I need to pass in a dynamic style with the left property adjusted based on a function.
Moreover, by hiding the default header using hide-default-header prop and overwriting all headers with your own template, you lose the sorting functionality provided by the default Header. Is there a way to maintain both the custom styling and sorting capability?