bootstrap-vue · tmorehouse · Oct 15, 2019 · Oct 7, 2019 · Oct 7, 2019 · Oct 7, 2019
diff --git a/src/components/table/helpers/mixin-tfoot.js b/src/components/table/helpers/mixin-tfoot.js
@@ -8,9 +8,13 @@ export default {
       default: false
     },
     footVariant: {
-      type: String,
+      type: String, // 'dark', 'light', or `null` (or custom)
       default: () => getComponentConfig('BTable', 'footVariant')
     },
+    footRowVariant: {
+      type: String, // Any Bootstrap theme variant (or custom). Falls back to `headRowVariant`
+      default: null
+    },
     tfootClass: {
       type: [String, Array, Object],
       default: null

diff --git a/src/components/table/helpers/mixin-thead.js b/src/components/table/helpers/mixin-thead.js
@@ -2,6 +2,7 @@ import KeyCodes from '../../../utils/key-codes'
 import startCase from '../../../utils/startcase'
 import { getComponentConfig } from '../../../utils/config'
 import { htmlOrText } from '../../../utils/html'
+import { isUndefinedOrNull } from '../../../utils/inspect'
 import filterEvent from './filter-event'
 import textSelectionActive from './text-selection-active'
 import { BThead } from '../thead'
@@ -12,9 +13,13 @@ import { BTh } from '../th'
 export default {
   props: {
     headVariant: {
-      type: String, // 'light', 'dark' or null (or custom)
+      type: String, // 'light', 'dark' or `null` (or custom)
       default: () => getComponentConfig('BTable', 'headVariant')
     },
+    headRowVariant: {
+      type: String, // Any Bootstrap theme variant (or custom)
+      default: null
+    },
     theadClass: {
       type: [String, Array, Object]
       // default: undefined
@@ -50,12 +55,12 @@ export default {
       const fields = this.computedFields || []
 
       if (this.isStackedAlways || fields.length === 0) {
-        // In always stacked mode, we don't bother rendering the head/foot.
+        // In always stacked mode, we don't bother rendering the head/foot
         // Or if no field headings (empty table)
         return h()
       }
 
-      // Refernce to `selectAllRows` and `clearSelected()`, if table is Selectable
+      // Reference to `selectAllRows` and `clearSelected()`, if table is selectable
       const selectAllRows = this.isSelectable ? this.selectAllRows : () => {}
       const clearSelected = this.isSelectable ? this.clearSelected : () => {}
 
@@ -142,7 +147,12 @@ export default {
       // Genrate the row(s)
       const $trs = []
       if (isFoot) {
-        $trs.push(h(BTr, { class: this.tfootTrClass }, $cells))
+        const trProps = {
+          variant: isUndefinedOrNull(this.footRowVariant)
+            ? this.headRowVariant
+            : this.footRowVariant
+        }
+        $trs.push(h(BTr, { class: this.tfootTrClass, props: trProps }, $cells))
       } else {
         const scope = {
           columns: fields.length,
@@ -152,7 +162,9 @@ export default {
           clearSelected
         }
         $trs.push(this.normalizeSlot('thead-top', scope) || h())
-        $trs.push(h(BTr, { class: this.theadTrClass }, $cells))
+        $trs.push(
+          h(BTr, { class: this.theadTrClass, props: { variant: this.headRowVariant } }, $cells)
+        )
       }
 
       return h(

diff --git a/src/components/table/package.json b/src/components/table/package.json
@@ -75,11 +75,21 @@
           },
           {
             "prop": "headVariant",
-            "description": "Header variant: 'light' or 'dark', or unset"
+            "description": "Header variant: 'light' or 'dark', or unset. May take precedence over head-row-variant"
+          },
+          {
+            "prop": "headRowVariant",
+            "version": "2.1.0",
+            "description": "Apply a Bootstrap theme color variant to the tr element in the thead"
           },
           {
             "prop": "footVariant",
-            "description": "Footer variant: 'light' or 'dark', or unset"
+            "description": "Footer variant: 'light' or 'dark', or unset. May take precedence over foot-row-variant"
+          },
+          {
+            "prop": "footRowVariant",
+            "version": "2.1.0",
+            "description": "Apply a Bootstrap theme color variant to the tr element in the tfoot. Falls back to head-row-variant"
           },
           {
             "prop": "tbodyTransitionProps",
@@ -989,11 +999,21 @@
           },
           {
             "prop": "headVariant",
-            "description": "Header variant: 'light' or 'dark', or unset"
+            "description": "Header variant: 'light' or 'dark', or unset. May take precedence over head-row-variant"
+          },
+          {
+            "prop": "headRowVariant",
+            "version": "2.1.0",
+            "description": "Apply a Bootstrap theme color variant to the tr element in the thead"
           },
           {
             "prop": "footVariant",
-            "description": "Footer variant: 'light' or 'dark', or unset"
+            "description": "Footer variant: 'light' or 'dark', or unset. May take precedence over foot-row-variant"
+          },
+          {
+            "prop": "footRowVariant",
+            "version": "2.1.0",
+            "description": "Apply a Bootstrap theme color variant to the tr element in the tfoot. Falls back to head-row-variant"
           },
           {
             "prop": "tbodyTransitionProps",

diff --git a/src/components/table/tr.js b/src/components/table/tr.js
@@ -8,6 +8,9 @@ export const props = {
   }
 }
 
+const LIGHT = 'light'
+const DARK = 'dark'
+
 // @vue/component
 export const BTr = /*#__PURE__*/ Vue.extend({
   name: 'BTr',
@@ -62,10 +65,21 @@ export const BTr = /*#__PURE__*/ Vue.extend({
     },
     headVariant() {
       // Sniffed by <b-td> / <b-th>
-      return this.bvTableRowGroup.headVariant
+      return this.inThead ? this.bvTableRowGroup.headVariant : null
+    },
+    footVariant() {
+      // Sniffed by <b-td> / <b-th>
+      return this.inTfoot ? this.bvTableRowGroup.footVariant : null
+    },
+    isRowDark() {
+      return this.headVariant === LIGHT || this.footVariant === LIGHT
+        ? false
+        : this.headVariant === DARK || this.footVariant === DARK
+          ? true
+          : this.isDark
     },
     trClasses() {
-      return [this.variant ? `${this.isDark ? 'bg' : 'table'}-${this.variant}` : null]
+      return [this.variant ? `${this.isRowDark ? 'bg' : 'table'}-${this.variant}` : null]
     },
     trAttrs() {
       return { role: 'row', ...this.$attrs }