b-table sticky header broken if sortable #6961
Description
Describe the bug
When using b-table with the sticky-header prop and sortable columns, the stickyness of those columns is broken.
Changing the example on https://bootstrap-vue.org/docs/components/table#sticky-headers to this, shows the problem:
<template>
<div>
<b-table sticky-header :fields="columns" :items="items" head-variant="light"></b-table>
</div>
</template>
<script>
export default {
data() {
return {
columns: [{ key: 'heading1', sortable: true }, { key: 'heading2', sortable: false }],
items: [
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' }
]
}
}
}
</script>Steps to reproduce the bug
- Go to https://bootstrap-vue.org/docs/components/table#sticky-headers
- Double click the live code section
- Paste in above code
- Scroll table down to see only one header being sticky
Expected behavior
All headers should be sticky.
Versions
Libraries:
- BootstrapVue: 2.22.0
- Bootstrap: 4.6.1
- Vue: 2.6.14
Environment:
- Device: Any
- OS: Windows, Android
- Browser: Chrome
- Version: 100.0.4896.127
Demo link
See description above.