Closed
Description
Brief disclaimer, I am not usually a web dev, so this may be easily fixed. But I have looked at the documentation and this seems like a bug to me.
Describe the bug
head-variant for a column with sticky-column set to true is lost if the column does not define variant.
To reproduce the bug
I took this code directly from the documentation of sticky-columns and modified it.
<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
>
<!-- We are using utility class `text-nowrap` to help illustrate horizontal scrolling -->
<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: [
/* THIS IS THE LINE I CHANGE */
{ key: 'id', stickyColumn: true},
'a',
'b',
'c',
'd',
'e',
'f',
'g',
'h',
'i',
'j',
'k',
'l'
],
items: [
{ id: 1, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
{ id: 2, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
{ id: 3, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
{ id: 4, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
{ id: 5, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
{ id: 6, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
{ id: 7, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
{ id: 8, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
{ id: 9, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
{ id: 10, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 }
]
}
}
}
</script>
note that defining variant as 'none' also doesn't work (note that it should but it is different).
{ key: 'id', stickyColumn: true, variant: 'none'}
Expected behavior
I would expect that the head-variant remains "dark", and does not change. setting variant to 'none'
almost worked, but it caused the column to be treated as transparent and stack and overlap.
Versions
- BootstrapVue: 2.4.0
- Bootstrap: 4.4.1
- Vue: 2.6.11
Environment:
- Device: laptop, phone
- OS: windows, android
- Browser: firefox, edge, chrome
- Version: most recent versions