fix(b-table, b-table-lite, b-table-simple): handle header variant for sticky columns (fixes #5278) (#5279)

Co-authored-by: Jacob Müller

Author: tmorehouse

src/components/table/tbody.js

@@ -12,6 +12,9 @@ export const props = {
   }
 }
 
+// TODO:
+//   In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit
+//   to the child elements, so this can be converted to a functional component
 // @vue/component
 export const BTbody = /*#__PURE__*/ Vue.extend({
   name: 'BTbody',
@@ -60,7 +63,7 @@ export const BTbody = /*#__PURE__*/ Vue.extend({
       // background color inheritance with Bootstrap v4 table CSS
       return !this.isStacked && this.bvTable.stickyHeader
     },
-    tableVariant() /* istanbul ignore next: Not currently sniffed in tests */ {
+    tableVariant() {
       // Sniffed by <b-tr> / <b-td> / <b-th>
       return this.bvTable.tableVariant
     },

src/components/table/td.js

@@ -38,6 +38,9 @@ export const props = {
   }
 }
 
+// TODO:
+//   In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit
+//   to the child elements, so this can be converted to a functional component
 // @vue/component
 export const BTd = /*#__PURE__*/ Vue.extend({
   name: 'BTableCell',
@@ -104,8 +107,7 @@ export const BTd = /*#__PURE__*/ Vue.extend({
     headVariant() {
       return this.bvTableTr.headVariant
     },
-    /* istanbul ignore next: need to add in tests for footer variant */
-    footVariant() /* istanbul ignore next: need to add in tests for footer variant */ {
+    footVariant() {
       return this.bvTableTr.footVariant
     },
     tableVariant() {
@@ -120,11 +122,12 @@ export const BTd = /*#__PURE__*/ Vue.extend({
     cellClasses() {
       // We use computed props here for improved performance by caching
       // the results of the string interpolation
-      // TODO: need to add handling for footVariant
       let variant = this.variant
       if (
         (!variant && this.isStickyHeader && !this.headVariant) ||
-        (!variant && this.isStickyColumn)
+        (!variant && this.isStickyColumn && this.inTfoot && !this.footVariant) ||
+        (!variant && this.isStickyColumn && this.inThead && !this.headVariant) ||
+        (!variant && this.isStickyColumn && this.inTbody)
       ) {
         // Needed for sticky-header mode as Bootstrap v4 table cells do
         // not inherit parent's background-color. Boo!

src/components/table/tfoot.js

@@ -8,6 +8,9 @@ export const props = {
   }
 }
 
+// TODO:
+//   In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit
+//   to the child elements, so this can be converted to a functional component
 // @vue/component
 export const BTfoot = /*#__PURE__*/ Vue.extend({
   name: 'BTfoot',
@@ -33,7 +36,7 @@ export const BTfoot = /*#__PURE__*/ Vue.extend({
       // Sniffed by <b-tr> / <b-td> / <b-th>
       return true
     },
-    isDark() /* istanbul ignore next: Not currently sniffed in tests */ {
+    isDark() {
       // Sniffed by <b-tr> / <b-td> / <b-th>
       return this.bvTable.dark
     },
@@ -56,7 +59,7 @@ export const BTfoot = /*#__PURE__*/ Vue.extend({
       // background color inheritance with Bootstrap v4 table CSS
       return !this.isStacked && this.bvTable.stickyHeader
     },
-    tableVariant() /* istanbul ignore next: Not currently sniffed in tests */ {
+    tableVariant() {
       // Sniffed by <b-tr> / <b-td> / <b-th>
       return this.bvTable.tableVariant
     },

src/components/table/th.js

@@ -1,6 +1,9 @@
 import Vue from '../../utils/vue'
 import { BTd } from './td'
 
+// TODO:
+//   In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit
+//   to the child elements, so this can be converted to a functional component
 // @vue/component
 export const BTh = /*#__PURE__*/ Vue.extend({
   name: 'BTh',

src/components/table/thead.js

@@ -9,6 +9,9 @@ export const props = {
   }
 }
 
+// TODO:
+//   In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit
+//   to the child elements, so this can be converted to a functional component
 // @vue/component
 export const BThead = /*#__PURE__*/ Vue.extend({
   name: 'BThead',

src/components/table/tr.js

@@ -11,6 +11,9 @@ export const props = {
 const LIGHT = 'light'
 const DARK = 'dark'
 
+// TODO:
+//   In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit
+//   to the child elements, so this can be converted to a functional component
 // @vue/component
 export const BTr = /*#__PURE__*/ Vue.extend({
   name: 'BTr',