Skip to content

Commit 53e309e

Browse files
tmorehousetmorehouse
authored
fix(b-table, b-table-lite, b-table-simple): handle header variant for sticky columns (fixes #5278) (#5279)
Co-authored-by: Jacob Müller
1 parent bc199de commit 53e309e

File tree

6 files changed

+25
-7
lines changed

6 files changed

+25
-7
lines changed

‎src/components/table/tbody.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ export const props = {
1212
}
1313
}
1414

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

‎src/components/table/td.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ export const props = {
3838
}
3939
}
4040

41+
// TODO:
42+
// In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit
43+
// to the child elements, so this can be converted to a functional component
4144
// @vue/component
4245
export const BTd = /*#__PURE__*/ Vue.extend({
4346
name: 'BTableCell',
@@ -104,8 +107,7 @@ export const BTd = /*#__PURE__*/ Vue.extend({
104107
headVariant() {
105108
return this.bvTableTr.headVariant
106109
},
107-
/* istanbul ignore next: need to add in tests for footer variant */
108-
footVariant() /* istanbul ignore next: need to add in tests for footer variant */ {
110+
footVariant() {
109111
return this.bvTableTr.footVariant
110112
},
111113
tableVariant() {
@@ -120,11 +122,12 @@ export const BTd = /*#__PURE__*/ Vue.extend({
120122
cellClasses() {
121123
// We use computed props here for improved performance by caching
122124
// the results of the string interpolation
123-
// TODO: need to add handling for footVariant
124125
let variant = this.variant
125126
if (
126127
(!variant && this.isStickyHeader && !this.headVariant) ||
127-
(!variant && this.isStickyColumn)
128+
(!variant && this.isStickyColumn && this.inTfoot && !this.footVariant) ||
129+
(!variant && this.isStickyColumn && this.inThead && !this.headVariant) ||
130+
(!variant && this.isStickyColumn && this.inTbody)
128131
) {
129132
// Needed for sticky-header mode as Bootstrap v4 table cells do
130133
// not inherit parent's background-color. Boo!

‎src/components/table/tfoot.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ export const props = {
88
}
99
}
1010

11+
// TODO:
12+
// In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit
13+
// to the child elements, so this can be converted to a functional component
1114
// @vue/component
1215
export const BTfoot = /*#__PURE__*/ Vue.extend({
1316
name: 'BTfoot',
@@ -33,7 +36,7 @@ export const BTfoot = /*#__PURE__*/ Vue.extend({
3336
// Sniffed by <b-tr> / <b-td> / <b-th>
3437
return true
3538
},
36-
isDark() /* istanbul ignore next: Not currently sniffed in tests */ {
39+
isDark() {
3740
// Sniffed by <b-tr> / <b-td> / <b-th>
3841
return this.bvTable.dark
3942
},
@@ -56,7 +59,7 @@ export const BTfoot = /*#__PURE__*/ Vue.extend({
5659
// background color inheritance with Bootstrap v4 table CSS
5760
return !this.isStacked && this.bvTable.stickyHeader
5861
},
59-
tableVariant() /* istanbul ignore next: Not currently sniffed in tests */ {
62+
tableVariant() {
6063
// Sniffed by <b-tr> / <b-td> / <b-th>
6164
return this.bvTable.tableVariant
6265
},

‎src/components/table/th.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import Vue from '../../utils/vue'
22
import { BTd } from './td'
33

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

‎src/components/table/thead.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ export const props = {
99
}
1010
}
1111

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

‎src/components/table/tr.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ export const props = {
1111
const LIGHT = 'light'
1212
const DARK = 'dark'
1313

14+
// TODO:
15+
// In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit
16+
// to the child elements, so this can be converted to a functional component
1417
// @vue/component
1518
export const BTr = /*#__PURE__*/ Vue.extend({
1619
name: 'BTr',

0 commit comments

Comments
 (0)