Let's cut to the chase with an example I created using bootstrap-vue's documentation to help clarify the issue:
<template>
<div>
<div class="mb-2">
<b-form-checkbox v-model="stickyHeader" inline>Sticky header</b-form-checkbox>
<b-form-checkbox v-model="noCollapse" inline>No border collapse</b-form-checkbox>
</div>
<b-table
:sticky-header="stickyHeader"
:no-border-collapse="noCollapse"
responsive
:items="items"
:fields="fields"
head-variant="dark"
striped
>
<!-- Using utility class `text-nowrap` for horizontal scrolling illustration -->
<template v-slot:head(id)="scope">
<div class="text-nowrap">Row ID</div>
</template>
<template v-slot:head()="scope">
<div class="text-nowrap">
Heading {{ scope.label }}
</div>
</template>
</b-table>
</div>
</template>
<script>
export default {
data() {
return {
stickyHeader: true,
noCollapse: false,
fields: [
/* MODIFIED LINE */
{ key: 'id', stickyColumn: true, variant: 'none'},
'a',
'b',
'c',
'd',
'e',
'f',
'g',
'h',
'i',
'j',
'k',
'l'
],
items: [
// sample data entries here
]
}
}
}
</script>
I have extracted this information from the bootstrap-vue documentation here, making a few alterations. I adjusted the head-variant to "dark" and included stripes in the table structure. When it comes to the sticky column feature, here are three attempts:
1.
{ key: 'id', stickyColumn: true, variant: 'none'} // note 'none' is not truly a variant
2.
{ key: 'id', stickyColumn: true, variant: 'secondary'}
3.
{ key: 'id', stickyColumn: true}
Issues encountered with each variation:
1. Sticky column appears transparent, leading to columns overlapping unattractively
2. Desire to retain striped pattern without resorting to a monotone background
3. Oddly, the header-variant of the column reverts to the default setting
Objective:
Seeking a solution that keeps the dark-header aesthetic while employing the styling of option 3.
Your assistance is greatly appreciated.