b-table head-variant lost when using sticky column

[ConorMurphy21]

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

[tmorehouse]

Interesting... there must be a bug in the variant detection for sticky column cells that are in the <b-thead> (and probably <b-tfoot>as well).

In Bootstrap v4.x we need to do quite a bit of "magic" to get the variants to work correctly when the table has sticky headers/columns, as the colors are applied to the row and not the cells (which is needed when the table can scroll). Bootstrap v5 will be fixing how table color variants are applied (they will apply to the cells instead of the rows or thead/tfoot/tbody)

We'll see what we can do to handle this issue with current Bootstrap v4.

[tmorehouse]

@ConorMurphy21 BootstrapVue v2.13.1 has been release which includes a fix for this issue.